Desarrollo archivos - Página 2 de 2 - Aprende Informatica Conmigo

Hace mucho tiempo que me apetecía publicar algunos artículos sobre Drupal y bueno, después de mucho pensarlo por motivos de tiempo, he decidido sacar un hueco y comenzar este «Curso de Drupal 7«.

La intención es que poco a poco le vayáis quitando el miedo a este entorno.

Sin más dilación comencemos!

En primer lugar vamos a «http://www.drupal.org«.

Podemos ir a la sección «Download & Extend» o pulsar directamente el botón «Get Started with Drupal«.

Tras pulsar en el botón «Download Drupal 7.26» nos mostrará la siguiente página en la que podremos seleccionar la versión y la forma en la que está comprimido Drupal.

Yo me he decantado por la versión «zip» como podéis ver a continuación:

El siguiente paso es también muy típico. Se trata de que debemos descomprimir el fichero que acabamos de descargar y subir su contenido a nuestro servidor web donde vayamos a alojar nuestra página.

Bien, una vez que hemos subido los ficheros, creamos una base de datos y le hemos asignado un dominio o subdominio, procedemos a la instalación.

Basta con acceder desde nuestro navegador a la dirección que hemos asignado a esta nueva instalación.

En mi caso he utilizado un subdominio de AprendeInformaticaConmigo: «drupal01.aprendeinformaticaconmigo.com«.

Una vez que accedemos a la dirección correcta, comenzaremos con la instalación.

Dejemos seleccionada la opción «Standard» y pulsamos en «Save and continue«.

A continuación, como lo vamos a instalar en inglés, pulsamos de nuevo en «Save and continue«.

No os preocupéis porque más adelante instalaremos la traducción en Español.

También es posible subir la traducción para que la instalación sea en otro idioma.

Como en todos los gestores de contenido, debemos facilitar los datos de la base de datos.

Una vez hecho esto, comienza la instalación de Drupal y sus módulos.

Ahora lo que vamos a hacer es rellenar la información sobre el nuevo sitio web, usuario, contraseña de administrador, etc…

Y como véis, la instalación ha terminado.

Es muy sencilla y muy rápida.

Si pulsamos sobre el enlace «Visit you new site«, accedemos a nuestro nuevo sitio web y como ya le hemos facilitado los datos, tenemos acceso al panel de administración.

Sencillo, ¿verdad?

El aspecto por defecto es muy sencillo y tendremos que hacer cambios para que se adapte a nuestras necesidades. Pero de momento ya lo hemos instalado y vamos a comenzar a trabajar con las cosas más básicas. Pero esto será en posteriores tutoriales.

Saludos.

oscar

Programador WordPress freelance

Empezamos un nuevo «curso» con tutoriales y posiblemente también con videotutoriales sobre el framework «Jquery Mobile».

He elegido Jquery Mobile porque es bastante sencillo para todos aquellos y aquellas que estén comenzando y quieran empezar a desarrollar versiones móviles de páginas web o aplicaciones móviles.

Como en todo, siempre está bien tener unos conocimientos previos para afrontar correctamente una nueva tecnología y en este caso yo aconsejo tener conocimientos sobre lo siguiente:

HTML
CSS
JAVASCRIPT
JQUERY

Vamos al tema y empecemos ya!

En este primer artículo del curso de Jquery Mobile vamos a crear una «plantilla» sobre la que poder partir o sobre la que poder basarnos a partir de ahora.

Necesitamos:

Jquery
Jquery Mobile.

En ambos casos hay varias opciones de descarga de las librerías y yo voy a seguir la que considero más sencilla. Ya tendremos tiempo de complicarlo más adelante.

Bueno, para descargarnos los fichero de Jquery Mobile tendremos que ir a la web: http://www.jquerymobile.com

Como ya os he comentado, la forma más sencilla es descargarnos el paquete completo que incluye todos los «js», «css», «imágenes» y «demos». Os recomiendo que investiguéis un poco con las demos para que os hagáis una idea e incluso podáis acceder al código fuente.

Una vez descargado el fichero, los descomprimimos:

Si accedemos al directorio que se ha creado tras la descompresión tendremos:

Vemos una lista de fichero «css», «js» y «capetas».

Como he comentado antes, en la carpeta «demos» tendremos a nuestra disposición un montón de demos sobre los diferentes elementos de Jquery Mobile:

Ahora bien, de momento lo que nos interesa a nosotros para crear nuestra propia «plantilla» de inicio de Jquery Mobile es lo siguiente:

Directorio «images»
Fichero: jquery.mobile-1.4.2.css
Fichero: jquery.mobile-1.4.2.js

Ahora procedemos a descargarnos la librería de «Jquery» desde http://jquery.com:

Si pulsamos sobre el enlace de la derecha «Download Jquery», nos llevará a la siguiente página desde donde podremos descargar lo que nos interesa:

Ahora bien, yo recomiendo que os descarguéis la versión «uncompressed». Cuando vayamos a desarrollar algún proyecto en serio para producción, nos descargaremos la versión «compressed» que pesa menos.

Entonces, pulsamos con el botón derecho sobre el enlace «Download the uncompressed, development jQuery 1.11.0» y seleccionamos «guardar enlace como».

Guardamos este fichero en nuestro disco.

Ahora vamos a crear la estructura de directorios de nuestro proyectos (plantilla) de Jquery mobile y para ello podemos crear un directorio «plantilla» en el que crearemos los siguientes directorios:

Podemos crear más directorios pero por ahora nos vale con estos.

Copiamos el fichero «jquery.mobile-1.4.2.css» dentro del directorio «css» de nuestro proyecto.

Posteriormente copiamos los ficheros: «jquery.mobile-1.4.2.js» y «jquery-1.11.0.js» dentro del directorio «js».

Y para terminar, copiamos el directorio «images» de Jquery Mobile dentro del directorio «css».

Podéis observar que estoy utilizando «Sublime Text» pero podéis utilizar cualquier otro editor como «Notepad++» o incluso el block de notas.

Ahora creamos un nuevo fichero dentro de nuestro directorio «plantilla» con el nombre «index.html». De momento está vacío.

Ahora introducimos el siguiente código en el fichero que acabamos de crear:

</pre>
<!DOCTYPE html>
<html>
<head>
 <title>Titulo de Pagina</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
 <script src="js/jquery-1.11.0.js"></script>
 <script src="js/jquery.mobile-1.4.2.js"></script>
</head>

<body>
 <div data-role="page">

<div data-role="header">
 <h1>Titulo</h1>
 </div><!-- /header -->

<div role="main" class="ui-content">
 <p>Contenido de la pagina.</p>
 </div><!-- /content -->

<div data-role="footer">
 <h4>Footer</h4>
 </div><!-- /footer -->
 </div><!-- /page -->
</body>
</html>
<pre>

Podréis observar que los «js» y el «css» los he incluído al principio:

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" /></pre>
<script src="js/jquery-1.11.0.js"></script>

<script src="js/jquery.mobile-1.4.2.js"></script>

Pero más adelante veremos más opciones que pueden resultar más adecuadas en cada caso.

Bien, como ya conocéis HTML y CSS supongo que os haréis una idea de lo que estamos haciendo, ¿verdad?

Con el código:

<pre><div data-role="page">
 </div>

Definimos una página en Jquery Mobile.

Con:

<div data-role="header">
 <h1>Titulo</h1>
 </div><!-- /header -->

Definimos la sección de la cabecera

Con:

<div role="main">
 <p>Contenido de la pagina.</p>
 </div><!-- /content -->

El contenido de la página.

Y con:

<div data-role="footer">
 <h4>Footer</h4>
 </div><!-- /footer -->

El pié de página.

El resultado que obtenemos es el siguiente:

Ya veis que es algo muy sencillo.

Lo que hemos hecho hoy nos va a servir como «plantilla» o «base» sobre la que iremos trabajando en otros proyectos más complejos poco a poco.

Os dejo en enlace de JSFIDDLE.

Saludos.

oscar

Programador WordPress freelance

Curso de Drupal 7 – 01 Introducción

Curso de Jquery Mobile – 01: Introducción