Ahora bien, ¿cómo sé efectuar el diseño de las aplicaciones web 2.0?

Bueno, yo creo que los diseños deberían hacerse siempre con CSS por varios motivos. ¿Cuáles? Bueno, lean el post a continuación que creo que va a darnos una idea de cuales son las ventajas de utilizar CSS en nuestros diseños. Obviamente, empezaremos por una introducción al tema.

¿Qué son los CSS?

Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a los documentos escritos en HTML (y en otros lenguajes estructurados, como XML) separando el contenido de las páginas de su apariencia. Para el diseñador, esto significa que la información estará contenida en la página HTML, pero este archivo no debe definir cómo será visualizada esa información. Las indicaciones acerca de la composición visual del documento estarán especificadas en el archivo de la CSS.

¿Cómo Funcionan los CSS?

Las Hoja de Estilo no utilizan el archivo de la página Web para especificar el formato de la página (en realidad, a veces pueden hacerlo, pero no es recomendable hacerlo de esa manera). En su lugar, usan un archivo de texto puro con extensión “.CSS” que luego se vincula a la página.

Este archivo contiene reglas que constan de un selector (en este ejemplo, H1) y una o más declaraciones (en el ejemplo tenemos cuatro declaraciones). Cada declaración tiene dos partes: una propiedad (por ejemplo, FONT SIZE) y un valor (en este caso, 19pt). Estas reglas son las que determinan cómo deberá mostrarse la página.

Nuevamente, si quisiéramos componer los encabezados H1 con tipografía Arial, de 19 puntos, en color azul y alineación central, el archivo CSS debería contener el siguiente texto:

H1 {

   font-family: Arial, Sans-serif;

   font-size: 19pt;

   color: #0000FF;

   text-align: center;

}

Luego, en cada página de nuestro sitio agregamos un link a la Hoja de Estilo:

<LINK REL="stylesheet" href="hoja_de_estilo.css" TYPE="text/css">

El elemento LINK especifica:

• el tipo de vínculo: a una hoja de estilo (”stylesheet”)
• la ubicación de la hoja de estilo a través del atributo “href”
• el tipo de hoja de estilo que se vincula: “text/css”

Ahora, todos los encabezado H1 de las páginas que contienen la referencia al archivo de la CSS tendrán el aspecto que hemos definido.

10 razones (o ventajas) para utilizar CSS

1.- Separación del contenido y presentación.

Las hojas de estilo generalmente se encuentran en archivos separados del código principal (html, por ejemplo). Esto nos va a permitir que en un equipo de trabajo, programador y diseñador puedan realizar sus tareas de forma independiente aunque paralela, sin correr el riesgo de que haya interferencias entre ambos, y ello no alterará el resultado final.

2.- Flexibilidad.

Podríamos comparar las hojas de estilo con la ropa que guardamos en nuestros cajones. Nosotros somos los mismos, pero dependiendo de la temporada variamos nuestra apariencia.

En el caso de las hojas de estilo sucede lo mismo: podemos cambiar en cualquier momento alguna parte o la totalidad del diseño de nuestras páginas con sólo modificar nuestra hoja de estilo, sin que ello suponga modificar el contenido.

3.- Unificación del diseño de las páginas del sitio.

Un sitio web, ya sea dinámico o estático, suele estar formado por unas cuantas páginas. Mantener una misma apariencia se puede volver una tarea pesada y tediosa si tenemos que copiar y pegar código cada vez que creemos una página nueva, o que deseemos modificar una misma cosa en todas.

Enlazando a cada una de nuestras páginas nuestras hojas de estilo, agilizamos este proceso y minimizamos el trabajo.

4.- Optimización de los tiempos de carga y de tráfico en el servidor.

Al haber dividido contenido y apariencia obtenemos archivos más ligeros, y esto nos reporta dos beneficios: por un lado, reducimos notablemente los tiempos de carga del sitio en el navegador. A esto debemos unir la capacidad de éste para mantener nuestra hoja de estilo en caché.

Por otro lado, reducimos el volumen de tráfico de nuestro servidor, que siempre es de agradecer, tanto si disfrutamos de servicios gratuitos en que solemos tener cuotas muy reducidas, como si pagamos por tener alojamiento propio.

5.- Precisión o elasticidad.

Desde el momento en que usemos CSS, el tamaño y posicionamiento de los elementos que formen nuestras páginas podrá ser exacto. Podremos indicarle al navegador en qué píxel debe colocar ésta o aquélla imagen, o qué alto y ancho deberá mostrar.

Pero al mismo tiempo, podremos emplear medidas variables o relativas que nos permitan expandir el contenido hasta ocupar la totalidad de la ventana de navegación a nuestro antojo, o contraerla a sólo una parte de la misma, con independencia de la resolución de pantalla del usuario.

6.- Accesibilidad y estructuración.

La combinación de CSS y marcadores descriptivos va a posibilitar que nuestra página se vea correctamente con o sin hoja de estilos, puesto que en cualquier caso, la información se mantendrá estructurada y ordenada.

Esto supone que podrá ser accesible sin ningún tipo de problemas tanto por navegadores antiguos o sin soporte para CSS, como para personas con algún tipo discapacidad.

7.- Limpieza del código fuente.

Si escribimos una hoja de estilo independiente, el código fuente de nuestra web va a resultar menos farragoso y agilizaremos las tareas de localización de las líneas que busquemos.

8.- Compatibilidad y continuidad.

Las reglas establecidas por la especificación CSS-1 fijaron los estándares del diseño, y se mantienen y respetan en la CSS-2. Es de prever que en el nivel 3 sucederá lo mismo con respecto a su predecesor.

Pero lo realmente interesante es que los navegadores que no soporten CSS-3 no tendrán problemas a la hora de asimilar el contenido CSS puesto que siempre les quedará la compatibilidad de CSS-2, o la CSS-1 en su caso. La compatibilidad de las especificaciones CSS anteriores estará siempre garantizada.

9.- Estandarización frente a especificaciones propietarias.

La adopción de estándares por la W3C ofrece la ventaja de la compatibilidad del código entre los diferentes navegadores web. El uso de “soluciones propietarias”, como es el caso de muchas etiquetas o patrones usadas por Microsoft.

En su interpretación de lo que es y no es CSS, dificulta la creación de páginas web, porque supone tener que escribir dos códigos distintos para obtener un mismo resultado, en función del tipo de navegador que use el visitante.

El uso del estándar CSS de la W3C evitará visualizaciones incorrectas de nuestras páginas en distintos navegadores.

10.- Permite la diferenciación de estilos para imprimir / visualizar en pantalla.

El uso de CSS nos va a permitir también maquetar separadamente el contenido de nuestra web para ser mostrado en pantalla o para ser impreso.

Tengamos en cuenta que las necesidades y propiedades de un folio de papel y de un monitor nunca van a ser las mismas, y gracias a CSS podremos determinar cómo queremos que se imprima lo que mostramos en la pantalla, manteniendo siempre una apariencia limpia, ordenada y agradable visualmente.

Espero que estas pequeñas reflexiones hayan servido para animarte a dar el gran salto y vestir a tu web con un bonito traje CSS hecho a medida. Y si aún no te animas a usar CSS en tu sitio, te invitamos a conocer CSS Reinicia, una iniciativa que busca que sitios web en nuestro idioma se reinventen gracias a esta tecnología.

Crear un blog en Blogger

Para comenzar, iremos al sitio de blogger: http://www.blogger.com, donde nos encontraremos con la pantalla que vemos a continuación, y vamos a apretar el botón que dice CREAR TU BLOG AHORA.

Al presionar dicho botón, como veremos en la siguiente pantalla, nos encontraremos con un formulario para crear una cuenta de google.
¿Por qué una cuenta de google? Pues bien, blogger pertenece a google.
Entonces, si tenemos una cuenta de google accedemos a ella para evitarnos este paso de crear una cuenta; como podemos leer en la pagina de blogger: “Este proceso creará una cuenta de Google que podrá utilizar con otros servicios de Google. Si ya tiene una cuenta de Google, por ejemplo de Gmail, Grupos de Google u orkut, por favor primero acceda a ella.”
En caso de no tener una cuenta de google, no hay que preocuparse; el formulario es bastante simple y en el mismo explica que es cada cosa que debemos completar, así que completémoslo. Luego presionamos el botón de CONTINUAR.

Luego de eso, llegaremos a una pantalla donde dice “Asignar un nombre a su blog”, como vemos a continuación.
En el campo “Título del blog”, que será el título que aparecerá en tu blog; Este básicamente, es el nombre que se le quiere dar al blog.
En el campo “Dirección del blog (URL)”, será la dirección por la cual se podrá acceder a tu blog. Es recomendable comprobar la disponibilidad, haciendo click en el link que se ve allí; para no intentar varias veces con diferentes nombres.
Una vez completados estos campos, presionaremos el botón de CONTINUAR.

Ahora llegamos a una pantalla donde nos pide “Elegir una plantilla”. Aquí vamos a elegir la apariencia que va a tener nuestro blog; como pueden ver, hay muchos estilos para elegir. Así mismo, aquí, si presionamos sobre el link de vista preliminar, vamos a poder ver un ejemplo para poder decidirnos mejor. Si no te gusta ninguna de estas plantillas, mas adelante veremos como personalizarla o incluir una plantilla nueva.
Una vez que hayamos elegido el que más nos gusto, apretamos el botón de CONTINUAR.

Y al fin llegamos a la pantalla donde dice “Su blog se ha creado”. ¿Qué? ¿Ya esta listo? Pues si, así de sencillo es crear un blog en blogger. ¿No me creían?
Ahora bien, una vez creado el blog, es cuestión de publicar diferentes artículos; así que vamos a ver como funciona eso, haciendo click en el botón de EMPEZAR A PUBLICAR.

Publicar mensajes en Blogger

Si luego del tutorial anterior percibieron que crear un blog en blogger era muy fácil, es por que todavía no redactaron su primer mensaje; Obviamente, por que es mucho más fácil.
Como podemos ver en la pantalla a la que llegamos luego de presionar EMPEZAR A PUBLICAR, nos encontramos con una solapa donde dice “Creación de entradas”, luego tres opciones: Crear, Editar entradas y Moderar comentarios. Nosotros estamos situados en Crear, y debajo de eso podemos ver un formulario donde se puede ingresar él titulo de nuestra entrada; y luego el articulo que queremos redactar.
El lugar donde se redacta él articulo es un lugar donde se puede escribir (al mejor estilo “word”) y tiene una muy bella barra de herramientas donde podemos editar el formato, corregir ortografía, hasta añadir imágenes o videos. Por otro lado, también tenemos la opción de editar el articulo en formato HTML para los que deseen hacerlo.
Una vez redactado el articulo, podemos o bien guardarlo (para editarlo mas adelante) presionando el botón de GUARDAR AHORA; O bien publicarlo para que toda la gente que ingrese a tu blog pueda verlo presionando el botón de PUBLICAR ENTRADA.

Luego de publicar el mensaje, llegaremos a una pantalla donde nos dice “La entrada de tu blog se ha publicado correctamente”. Así de simple fue publicar un articulo en blogger.

Ahora si podemos ir a nuestro blog, presionando en el link que dice “Ver blog”, o bien utilizando la dirección que ingresamos al crear nuestro blog en donde nos pedían ingresar la “Dirección del blog (URL)”, podremos ver el blog con la plantilla (o template) que elegimos, y con el articulo que redactamos.
Adicionalmente podemos ver el archivo del blog, que es una recopilación de enlaces a entradas anteriores clasificados por año y mes; y también podremos ver datos personales del creador del blog.
Otra cosa importante que podemos ver, es que al final del blog, veremos un link que dice “Suscribirse a: Entradas ATOM”. Bien, esos son los RSS de tu blog, que si bien no es tan fácil de reconocerlos en la mayoría de las plantillas, blogger se encarga de crearlos automáticamente para ti.

Configurar Blogger

Bien, ya logramos tener nuestro blog, y ya sabemos publicar artículos; pero para ver mas a fondo como funciona blogger, vamos a ver los detalles mas interesantes de su configuración.
Si entramos a http://www.blogger.com, una vez logueados, vamos a poder ver como en la pantalla que tenemos a continuación, una lista con nuestros blogs y links para la edición de nuestro perfil.
En cada uno de nuestros blogs tenemos links para crear nuevas entradas; tanto como links para las 3 solapas principales de blogger: Entradas, Configuración y Diseño. Nosotros vamos a hacer click en el link de configuración.

Luego de hacer click allí, nos enviara a la configuración básica de nuestro blog. Allí no hay nada demasiado importante; pero si leen lo que dice en cada ítem de la configuración se entenderá a la perfección. Lo más destacable de aquí, es que si queremos eliminar nuestro blog para siempre; es aquí donde debemos hacerlo, al final de la configuración básica.

Si presionamos en el link de Publicación, podremos ver mas opciones de configuración. Esta pantalla simplemente sirve para cambiar la URL de nuestro blog; bien para cambiar nuestra dirección dentro de blogspot.com o para agregar nuestro propio dominio registrado.

En la solapa de Formato, la tercera que tenemos en configuración, podemos definir el formato de muchas cosas dentro de nuestro blog; Desde el formato de la fecha, hora, o el índice de nuestros archivos, hasta cuantas entradas queremos que se muestren en cada página. Cada ítem de la configuración aquí adentro esta bastante bien explicada; y si la leen con detenimiento no creo que sea necesaria una explicación mas profunda.

En la solapa de Comentarios, podremos configurar todo lo relativo a los comentarios que nos dejara la gente en nuestros post; Desde quienes están habilitados para dejarnos comentarios, hasta los vínculos de retroceso (mas conocidos como trackbacks) de los cuales hablaremos en algún post futuro; los cuales considero que son muy importantes en el ambiente de la blogosfera, por lo cual recomiendo que los actives.

La solapa de configuración de Archivo es bastante sencilla, y simplemente nos deja administrar la frecuencia con la que queremos que nos muestre los archivos, o sea, como van a estar clasificados; y también nos permite elegir la opción de que cada entrada tenga su propia pagina, lo cual es muy recomendable que sea así.

En los Feed del sitio, tendremos las opciones para configurar los RSS de nuestro blog, dejándonos decidir cuanto de cada articulo queremos que se almacenen en los feed; si usamos los feeds desde otra pagina, como FeedBurner, que es un aplicativo que explicaremos en algún otro articulo.

En Correo electrónico vamos a poder configurar un correo electrónico para poder recibir las entradas de nuestro blog a ese correo, también como vamos a poder configurar un correo desde el cual, mandándole un correo al mismo, vamos a poder enviar artículos que se publicaran en el blog.

Por ultimo, en la solapa de permisos, podemos agregar varios autores al blog, permitiendo que no solo nosotros, los creadores, podamos escribir en el mismo; y de esa manera hacer un blog comunitario entre mas de una persona. Adicionalmente, aquí, vamos a poder definir los permisos de quien va a poder leer nuestro blog; Lo más común es que cualquier persona pueda leer nuestro blog.

Ya con esto hicimos una breve repasada de toda la configuración de blogger; pero todavía no vimos como cambiar el diseño. Bueno, eso lo veremos a continuación.

Diseño en Blogger

Llegando al final del tutorial, esta es la tercer pestaña principal dentro de nuestro blog en blogger. Esta pestaña tiene cuatro subpestañas las cuales son: Elementos de página, Fuentes y colores, Edición de HTML y Selección de plantilla nueva.
En la primera de todas, Elementos de página, se puede ver un boceto de cómo es nuestro blog, donde podremos cambiar y acomodar de forma “drag and drop” (o sea, arrastrando las cosas) la fachada de nuestro blog de manera muy simple como vemos a continuación.

En la segunda pestaña, en Fuentes y colores, podemos cambiar de manera muy visual los colores de nuestro blog. Simplemente eso, miren:

Cuando vamos a la tercer pestaña, Edición de HTML la cual es la mas jugosa a mi parecer, podemos editar el codigo HTML de la plantilla que estamos utilizando; o bien subir alguna plantilla que podamos encontrar en internet (o creemos nosotros por nuestra cuenta).
Si desean buscar una nueva plantilla (o template) para su blog en blogger, yo les recomiendo que busquen en google, o bien en http://freetemplates.blogspot.com/ (esta pagina esta disponible en ingles).

Por ultimo, llegando al final de nuestro tutorial, nos encontramos con la opción de Seleccionar plantilla nueva. Esta opción es la misma opción que teníamos a la hora de crear nuestro blog. Simplemente elegimos alguna plantilla de las disponibles por blogger.

Si luego de leerte este tutorial te quedaron mas dudas acerca de blogger, sugiero que investigues por la ayuda de blogger, que esta en español y es bastante clara.
Ahora si ya no hay excusas para que te crees tu propio blog.