Maquetación de páginas web

CSS: la web única (one web):

[kml_flashembed movie=”http://www.youtube.com/v/PoJ3234Y4Nw” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: diseño adaptable, adaptativo o flexible:

[kml_flashembed movie=”http://www.youtube.com/v/4-LaxnCKxHw” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 1):

[kml_flashembed movie=”http://www.youtube.com/v/ktGF7Dda0wI” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 2):

[kml_flashembed movie=”http://www.youtube.com/v/96U4zPbyq9c” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 3):

[kml_flashembed movie=”http://www.youtube.com/v/cbtJ4udg7sM” width=”560″ height=”315″ wmode=”transparent” /]

Mundaneum

From his armchair, everyone will hear, see, participate, will even be able to applaud, give ovations, sing in the chorus, add his cries of participation to those of all the others.

Traducción:

Desde su sillón, todo el mundo oirá, verá, participará, incluso será capaz de aplaudir, dar ovaciones, cantar en el coro, añadir sus gritos de participación a los de todos los demás.

Paul Otlet, 1934.

MUNDANEUM

Fuente: The Web Time ForgotIndex Cards and Electric Telescopes, The New York Times

Las niñas no quieren ser programadoras

Interesante el artículo Las niñas no quieren ser programadoras:

Moreno puede constatar de primera mano la brecha que existe en el aprendizaje de programación en nuestro país: “cuando hay un curso de estos contenidos en un instituto, los que se apuntan son sobre todo chicos. En las universidades es igual, estas carreras las cursan mayoritariamente hombres, y hemos detectado que la diferencia es cada vez mayor”. Se trata de un asunto importante, no en vano, será uno de los campos profesionales con más desarrollo en las próximas décadas, y que dará forma a muchos otros sectores. Y a este paso las mujeres se quedarán fuera.

HTML5: de HTML4 a HTML5

[kml_flashembed movie=”http://www.youtube.com/v/vRqQRrULSxI” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo emplear los nuevos elementos semánticos de HTML5 para transformar la estructura de una página web de las versiones antiguas de HTML a la última versión.

En las versiones anteriores de HTML existían dos enfermedades terribles, la spanmania y la divitis. Estas enfermedades pueden seguir existiendo en HTML5, así que presta mucha atención a este vídeo, ya que te voy a explicar cómo las puedes evitar.

En la Web se pueden encontrar varios artículos que explican los síntomas de estas dos enfermedades y sus posibles curas.

Incluso en la Wikipedia se puede encontrar un artículo dedicado a las etiquetas span y div en el que se comenta el abuso en el uso de estas dos etiquetas.

Respecto el abuso en el uso de la etiqueta span, la spanmania, es muy común encontrar situaciones como esta.

O incluso a veces he visto barbaridades como esta otra, en la que se emplea un span para envolver todo el contenido de una página web.

Estos dos errores se arreglan fácilmente, ya que se pueden emplear las etiquetas que ya existen en el código y en muchas casos no hace falta añadir la etiqueta span.

Respecto a la etiqueta div, la divitis, es muy común encontrar situaciones como esta, en la que se anida un div dentro de otro div, y de otro div, y así varias veces.

Hay páginas web en las que se pueden encontrar verdaderas barbaridades, como la página principal de un famoso diario deportivo que tiene más de mil etiquetas div.

En HTML5 se han añadido etiquetas nuevas que ayudan a evitar el abuso de las etiquetas span y div.

Vamos a ver a continuación cómo se tienen que usar estas etiquetas para estructurar correctamente una página web con HTML5.

Esta imagen muestra la estructura típica de una página web escrita con las versiones anteriores de HTML. Esta página contiene:

Una cabecera.
Una barra o menú de navegación.
Un panel con información adicional, como por ejemplo noticias.
La zona de contenido principal formada por
dos entradas o artículos.
Una imagen en una de las entradas.
Y un pie de página.

Con HTML5, todas estas etiquetas <div> se sustituyen por nuevas etiquetas específicas para definir regiones especiales que tienen las páginas web.

La cabecera se etiqueta con header.
La barra o menú de navegación con nav.
Un panel con información adicional con aside.
La zona de contenido principal con main.
Las entradas o artículos con article.
Una imagen con figure.
Y el pie de página con footer.

En algún caso puede ser difícil decidir cuál es la etiqueta más adecuada para una región de una página web.

Esta imagen extraída de HTML5Doctor es un diagrama de flujo que, mediante varias preguntas, ayuda a decidir cuál es la etiqueta más adecuada según la función que realiza la región que se quiere etiquetar dentro de la página web.

A continuación vamos a ver parte por parte cómo se transforma una página web de una versión antigua de HTML a HTML5.

En primer lugar vamos a ver el código HTML de la cabecera.

Este es el típico código de una cabecera de una página web: un div y un h1.

En realidad, en muchos casos, simplemente es necesario el h1. Pero si por alguna razón, es necesario utilizar un div para definir algunas características de la presentación del encabezado, es mejor utilizar la nueva etiqueta header.

Ahora la barra o menú de navegación del sitio web.

Una barra o menú de navegación es un conjunto de enlaces. Por tanto, se debe etiquetar como una lista, ordenada o no ordenada. La etiqueta div que envuelve a la lista se debe cambiar por la etiqueta nav en HTML5.

Un panel con información adicional, contiene información que complementa a la información principal y que no es esencial. Por ejemplo, un panel de este tipo puede ser una región con noticias o anuncios.

Para este tipo de contenido se debe emplear la etiqueta aside en HTML5.

Vamos a ver a continuación cómo etiquetar la zona de contenido principal que está formada por una serie de entradas o artículos.

La zona de contenido principal que agrupa todas las entradas se puede etiquetar con main, y cada una de las entradas o artículos con la etiqueta article.

Respecto a las imágenes, esta es la forma tradicional de etiquetar una imagen. No existe ninguna relación entre una imagen y su título. Sin embargo, en HTML5 esto está resuelto, ya que existe la etiqueta figure y la etiqueta figcaption que permite definir el título de una figura.

Muy importante, la etiqueta figure no sólo se emplea para etiquetar una imagen. También puede etiquetar otras cosas, como un fragmento de código, o una cita.

Por último, el pie de página.

En el pie de una página web suele aparecer el correo de contacto, el aviso legal, la información de copyright o información similar.

En HTML5 se debe emplear la etiqueta footer para etiquetar este contenido.

Como ves, transformar una página web de HTML antiguo a HTML5 es muy sencillo, simplemente hay que aprender a utilizar la etiqueta adecuada para cada región de una página web.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

¿Cómo, cuándo y por qué se utiliza el subrayado en un texto?

Recuerda esto: el subrayado no se debe usar, no, nunca, aunque te guste. En las páginas web sólo se puede usar, y se debe usar, para destacar los enlaces.

¿Por qué? Se explica muy bien en cuatro líneas en ¿Cómo, cuándo y por qué se utiliza el subrayado en un texto?:

Con los actuales sistemas de procesadores de textos el subrayado apenas tiene uso en tipografía; se usaba anteriormente en las máquinas de escribir y en los textos manuscritos para marcar las palabras que debían ir en cursiva. En la actualidad se restringe a algunos usos especializados y el destacado de hipervínculos en documentos electrónicos.

El desarrollo web y cocinar

Hace unos días recibí la siguiente consulta:

Tengo una duda que agradecería me contestaras. Para hacer páginas web utilizo Dreamweaver CS6. Y también para hacer banners y mucho más utilizo Photoshop. Tengo bastante destreza en ambos programas. No he tenido necesidad de aprender ni Html5 ni CSS3 ni Javascript.

Con Dreamweaver hago menús desplegables, menús con efecto acordeón, etc. Para hacer un slider utilizo WowSlider, Y así con casi todo. Puedo llegar a hacer páginas muy profesionales. No tengo ni idea de código.

Lo que sí que tengo claro es la necesidad de aprender al menos un lenguaje de lado de servidor como PHP y saber utilizar MySQL.
Ahora viene mi cuestión.

¿Es necesario o me aconsejas aprender Html5, CSS3 y Javascript con JQuery a pesar de ello? Aparte ¿Sería interesante aprender también PHP, MySQL, Ajax, etc.?

En definitiva, Para llegar a ser un buen profesional, aun sabiendo manejar muy bien Dreamweaver CS6 ¿cuáles son los pasos y todo lo que debería estudiar por orden de aprendizaje para llegar a desarrollar aplicaciones o páginas web dinámicas? Por desgracia estoy en paro y tengo mucho tiempo por delante. Y la verdad es que me apetece aprovecharlo de esta forma. Muchísimas gracias por la atención. Saludos

Y mi respuesta:

Hola.

Pues depende. Por ejemplo…

Para alimentarse y sobrevivir, ¿es necesario saber cocinar? No, a base de latas y congelados y con un microondas, que no hace falta que sea muy bueno, se puede vivir, te lo aseguro porque yo lo hago. Eso sí, mi paladar se ha acostumbrado a que toda la comida tenga el mismo sabor y, seguramente, la alimentación que llevo no es muy sana, mi colesterol debe estar por las nubes.

Lo que tú haces es exactamente lo mismo, pero con las páginas web. Saca tú las conclusiones de lo que te quiero decir, pero aquí tienes una.

Tiene que existir de todo, no es lo mismo una hamburguesa del McDonald’s que una hamburguesa de un restaurante de cinco tenedores. Cada una tiene su precio y su público objetivo. Pero no digas que haces páginas muy profesionales si no tienes ni idea de código.

¿Qué conclusiones has sacado? Mándame otro correo y me las cuentas.

Por supuesto que hay que saber HTML5, CSS3, JS y muchas más cosas si quieres ser un buen profesional. Como tienes tiempo por delante, aprovecha y aprende, tienes mucho que aprender. Puedes realizar mi curso sobre desarrollo web (http://idesweb.es/). Ahí tienes marcado un orden de aprendizaje. Apúntate y te avisaremos de la próxima edición:

http://idesweb.es/apuntate

Un saludo y suerte.