HTML5 y CSS3 - Para diseñadores

Por Hernán Beati

Pocas tecnologías y herramientas perduran en el mundo de la informática por décadas. No es el caso de HTML, el cual sigue más vigente que nunca y justo cuando se creía que iba desapareciendo en pos de otras tecnologías (como Flash o desarrollos nativos), revivió de las cenizas con más poder y más futuro que antes con HTML5 y su compañero inseparabl

• Idioma: Español
• Editorial: Alfaomega Grupo Editor
• Fecha de lanzamiento: 4 mar 2021
• ISBN: 9786076225349

Hernán Beati

Programador y Docente con más de diez años de experiencia en PHP. Docente universitario, profesor en ITMaster y fundador de SaberWeb.

Vista previa del libro

libro.

Mensaje del editor

Los conocimientos son esenciales en el desempeño profesional, sin ellos es imposible lograr las habilidades para competir laboralmente. La universidad o las instituciones de formación para el trabajo ofrecen la oportunidad de adquirir conocimientos que serán aprovechados más adelante en beneficio propio y de la sociedad; el avance de la ciencia y de la técnica hace necesario actualizar continuamente esos conocimientos. Cuando se toma la decisión de embarcarse en una vida profesional, se adquiere un compromiso de por vida: mantenerse al día en los conocimientos del área u oficio que se ha decidido desempeñar.

Alfaomega tiene por misión ofrecerles a estudiantes y profesionales conocimientos actualizados dentro de lineamientos pedagógicos que faciliten su utilización y permitan desarrollar las competencias requeridas por una profesión determinada. Alfaomega espera ser su compañera profesional en este viaje de por vida por el mundo del conocimiento.

Alfaomega hace uso de los medios impresos tradicionales en combinación con las tecnologías de la información y las comunicaciones (TIC) para facilitar el aprendizaje.

Libros como éste tienen su complemento en una página Web, en donde el alumno y su profesor encontrarán materiales adicionales.

Esta obra contiene numerosos gráficos, cuadros y otros recursos para despertar el interés del estudiante, y facilitarle la comprensión y apropiación del conocimiento. Cada capítulo se desarrolla con argumentos presentados en forma sencilla y estructurada claramente hacia los objetivos y metas propuestas.

Los libros de Alfaomega están diseñados para ser utilizados dentro de los procesos de enseñanza-aprendizaje, y pueden ser usados como textos para diversos cursos o como apoyo para reforzar el desarrollo profesional.

Alfaomega espera contribuir así a la formación y el desarrollo de profesionales exitosos para beneficio de la sociedad.

Acerca del autor

Me formé profesionalmente en la década de los ‘90 haciendo diseño gráfico, y antes del año 2000 ya me había especializado en diseño web. Más tarde aprendí también programación web, y comencé a enseñar todo lo que había aprendido.

Me gusta definirme como un diseñador que enseña a programar a diseñadores, y en otros casos, como un programador que enseña diseño a programadores. Estas dos áreas necesitan estar totalmente interconectadas en la web actual, y me gusta hacer de puente entre ambos mundos.

Actualmente soy docente en la Universidad Maimónides, en la Escuela DaVinci, en DotZero, en ITMaster y en SaberWeb. Soy Licenciado en Informática Educativa, y Analista de Sistemas.

Continuamente sigo actualizándome en diseño, multimedia y programación: los últimos cursos en los que participé como aprendiz fueron sobre desarrollo de aplicaciones móviles híbridas con HTML5, animación web responsive con HTML5, y creación de videojuegos con HTML5. Todo con HTML5, por supuesto.

Me encanta escribir. Este es mi segundo libro: el primero fue PHP, creación de páginas web dinámicas publicado por Alfaomega (reeditado en España por Marcombo con el título de El gran libro de PHP). Y ya estoy trabajando en mi siguiente obra, sobre Responsive Web Design, que también será publicada por Alfaomega.

Hernán Beati, mayo de 2015

Prólogo

Pocas tecnologías y herramientas perduran en el mundo de la informática por décadas. Todos hemos visto lenguajes que dejan de usarse, herramientas que se pierden en el tiempo y prácticas que pasan de ser un furor a desaparecer rápidamente en un par de años. Y un gran sentimiento de frustración al ver que todo el tiempo que ocupamos aprendiendo una tecnología se desvanece.

No es el caso de HTML, el cual sigue más vigente que nunca yjusto cuando se creía que iba desapareciendo en pos de otras tecnologías (como Flash o desarrollos nativos), revivió de las cenizas con más poder y más futuro que antes con HTML5 y su compañero inseparable CSS, ahora en versión 3. Aunque vivimos en una era de una web muy distinta de hace unos años, lo cierto es que HTML5 es una buena apuesta a futuro.

Hace 20 años diseñé mi primera página web con el mismo lenguaje que hoy te atrapó para adquirir este libro: HTML. Te invito a que recuerdes, si es que tenías edad para ello, cómo era la navegación por Internet y las computadoras hace 20 años. Muy distinto al mundo de hoy y aún así, HTML sigue aquí con nosotros evolucionando.

En ese momento mi única fuente de información sobre el lenguaje HTML (en su versión 1 y 2 en esas épocas) era un apunte fotocopiado que conseguí con la lista de etiquetas y no mucha más información. Ni siquiera Internet era una fuente de información; en esa época no existía Google (había vida antes de Google), no había cursos de diseño web, no había libros como éste y navegar por Internet implicaba usar la línea telefónica -y pagar mucho dinero por minuto-. Con ese apunte, un editor de texto y mucha paciencia, diseñé mi primera página web.

Hoy tienes más suerte que yo hace 20 años. Gracias a este excelente libro, y a la ayuda de Hernán Beati, viajarás por el apasionante mundo de HTML y CSS en sus últimas versiones especialmente optimizado para diseñadores de una forma sencilla, rápida y completa.

Encontrar las respuestas sobre HTML5 puede ser una tarea difícil cuando se trata de bucear en la web. Por suerte, este libro te dará no sólo las pautas para empezar con HTML5 o actualizarte desde versiones anteriores, sino que te servirá de referencia en cualquier momento de tu vida profesional en el futuro cuando tengas una pregunta.

Espero que disfrutes el viaje de la compañía de Hernán, un excelente profesional con un enfoque docente que lo convierte en la persona ideal para acompañarte en este nuevo mundo.

Lic. Maximiliano Firtman

Director ITMaster

@firt

Agradecimientos

A Maximiliano Firtman, que me motivó antes que nadie a aprender HTML5 y CSS3, cuando estos lenguajes todavía no estaban de moda y eran apenas el futuro.

A Marcelo Cutini y Judith Brandi Baldini (quienes me permiten enseñar HTML5 y CSS3 en DotZero desde hace más de 5 años), porque uno siempre aprende más acerca de un tema cuando lo enseña.

A mi amigo Darío Saeed, por convertirme en profesor universitario gracias a HTML5, ofreciéndome dictar ese tema en la primera materia de la que fui profesor en la Universidad Maimónides.

A mi editor Damián Fernández por su infinita paciencia y perseverancia para lograr este libro a pesar de mi escasez de tiempos para escribirlo.

A los cientos de alumnos que aprendieron conmigo HTML5, porque con sus agudas observaciones y preguntas me hicieron cuestionar los usos habituales de HTML5, y así pude llegar a un entendimiento mucho más profundo de algunos temas.

A cada diseñador web que lea este libro, porque mi inspiración para escribir cada frase fue pensar específicamente en sus problemas y necesidades a la hora de actualizar sus conocimientos.

A los cafés de San Vicente donde escribí muchas de las páginas de este libro: Gundy’s (que ya no existe), Boston y Clock.

A la laguna de San Vicente, donde muchas tardes estacioné el auto para escribir páginas de este libro, mientras contemplaba sus paisajes.

Hernán Beati

Antes de comenzar a leer

---

Los términos o definiciones cuyos significados están muy asociados al inglés se expresan en dicho idioma en cursiva.

Para tener acceso a los ejemplos del libro HTML5 y CSS3 para diseñadores, siga los siguientes pasos:

1. Ir a la pagina: http://libroweb.alfaomega.com.mx

2.1 r a la sección Catálogo y seleccionar la imagen de la portada del libro, al dar doble clic sobre ella, tendrá acceso al material descargable.

info_02

Alfaomega e ITMaster te dan la posibilidad de que certifiques tus conocimientos y experiencias adquiridos como lector de este libro mediante una evaluación gratuita. Su aprobación te permitirá tener la certificación en HTML5.

Luego de la obtención del certificado, podrás continuar tu formación en la carrera de Programación HTML5 y CSS3 y puedes continuar con Mobile HTML5, Responsive Web Design y PhoneGap.

La capacitación podrás realizarla en forma presencial en las sedes habilitadas o a distancia a través de Internet con una capacitación online, en cualquier ciudad del mundo donde te encuentres.

Para dar la evaluación de certificación ingresa en la dirección correspondiente a tu país para recibir mayor información. Para realizar cualquier consulta adicional, se detalla la dirección de correo electrónico que corresponde a tu país

España

http://libros.itmaster.es - [e-mail]

México

http://libros.itmaster.com.mx - [e-mail]

Argentina y otros países

http://libros.itmaster.com.ar - [e-mail]

Introducción

"Solo se puede elegir: oxidarse o resistir".

Manal (1969).

Estándares Web renovados

La Web cambió.

Para la mayoría de los diseñadores web es bastante reciente el momento en que cambiamos nuestra metodología de trabajo, dejamos de maquetar nuestros sitios con tablas, visualmente, y pasamos a utilizar posicionamiento CSS (¡y algunos ni siquiera transitaron ese camino aún!). Pero como si eso fuera poco, ahora estamos frente a un desafío todavía mayor: hacer que nuestros sitios adapten dinámicamente su layout para que puedan ser navegados sin problemas desde tabletas y smartphones.

El contexto del diseño web cambió: ya no se trata, como hace una década, de diseñar para pantallas de 800 por 600, o como hasta hace un par de años, de pensar en una resolución de 1024 por 768 píxeles. En realidad, nunca más podremos saber con exactitud para cuál resolución de pantalla estamos diseñando. La nueva web es flexible. Muy flexible. Nuestras páginas web pueden visualizarse en una pantalla mínima, pongamos como ejemplo, la de un celular de 240 por 320 píxeles, hasta... ¿quién se anima a poner el límite máximo? ¿Por ahora serán unos casi 4000 por más de 2000 píxeles? Seguramente, en el tiempo transcurrido entre el momento de escribir estas líneas y el de su lectura, esa medida ya habrá sido superada, alejándonos cada día más de esa

antigua ilusión de pretender un diseño fijo, uniforme para todos los dispositivos y navegadores, una idealización heredada del diseño gráfico para papel, pero claro: ¡los papeles vienen en una sola resolución!

fig_01_02

Figura 1. Diversidad de dispositivos y resoluciones.

Nuestro concepto de diseño para la web debe cambiar. Ya no puede seguir primando el que hemos heredado del diseño gráfico, basado en un medio estático como el papel. La clave está en pensar al diseño web como la creación de experiencias para el usuario, y no más como un diseño rígido, visualmente uniforme, ni como un lienzo artístico.

Algo es diseño si es funcional a una meta: el diseño no es arte. De modo que la pregunta para evaluar un diseño web ya no es si se ve idéntico en todos los navegadores y dispositivos, sino que debería ser: "¿puedo hacer las tareas requeridas por este sitio, con cualquier dispositivo, con cualquier navegador y versión?". Si puedo responder afirmativamente a esta pregunta, el diseño logró su objetivo. Si no, ha fracasado. Es hora de aceptar la flexibilidad de la web, y cambiar nuestras expectativas de diseño (y las de nuestros clientes y jefes), para no seguir condenando al fracaso a todos nuestros proyectos.

En este nuevo contexto flexible, es inevitable que nos encontremos explicando a nuestros clientes que sus sitios se verán de diferentes maneras en algunos dispositivos. Intentaremos hacerles comprender que eso es inevitable, y que no tiene nada de malo. Posiblemente, ellos ya lo hayan experimentado al intentar navegar la web de su empresa desde su nuevo celular. Esta diversidad de dispositivos, es la que nos abrirá las

puertas para considerar la diversidad incluso entre navegadores (algo impensado un par de años atrás, cuando se seguían creando trucos para que las webs no se desarmen en Explorer 6). Los celulares han abierto las puertas de la diversidad para siempre.

En este contexto, es bueno recordar que HTML5 y CSS3 ya están aquí, vinieron para quedarse, y vinieron en nuestro auxilio. Estas nuevas versiones de ambos lenguajes están específicamente adaptadas a las necesidades del nuevo ambiente flexible en el que se desenvuelve la web actual.

La pregunta que muchos diseñadores y programadores web todavía se están haciendo con respecto a HTML5 y CSS3 es si ya se pueden usar aunque determinada funcionalidad en tal versión de Explorer no sea soportada nativamente. Si la pregunta es planteada con esa sencillez, nuestra respuesta, con igual sencillez, será afirmativa: sí, se pueden usar HTML5 y CSS3 hoy mismo. Pero eso no es lo más importante.

El punto clave es "cómo" usar HTML5 y CSS3 hoy. Mientras que la gran mayoría de tutoriales y libros -por no decir todos- se limitan a enunciar las novedades con un ejemplo simple que funciona en apenas la mitad de los escenarios (o menos), nosotros nos enfocamos en lograr compatibilidad en la mayor cantidad de escenarios que sea posible. De modo que la respuesta en versión no tan abreviada, sería que se pueden usar HTML5 y CSS3 hoy, pero aplicando técnicas de compatibilidad que nos permitan obtener buenos resultados (similares, o al menos predecibles) en los navegadores antiguos que aún utilizan nuestros usuarios.

La clave para poder aplicar HTML5 y CSS3 pasa por conocer y dominar algunos enfoques de compatibilización tales como:

• Mejora progresiva (Progressive enhancement),

• Degradación elegante (graceful degradation) y

• Mejora regresiva (regressive enhancement).

A lo largo de este libro aprenderemos a aplicar cada uno de estos enfoques y a decidir cuál es el más apropiado en cada caso.

En el fondo, nuestra meta, como la de toda página web, será llegar con nuestros contenidos HTML, CSS y JavaScript a los navegadores de los usuarios, y esos navegadores serán el límite a evaluar.

La implementación de determinada funcionalidad en el mercado de navegadores no es algo estable y definitivo. Veremos que será muy fácil para nosotros agregar a algunos navegadores determinadas capacidades

de las que carecían de fábrica, mediante algún script. Haremos un uso intensivo de esta posibilidad para lograr un máximo de soporte, incluso en navegadores que carecen de casi todas las características de HTML5 y CSS3. Es decir, podremos subsanar los errores o falencias de los navegadores con vistas a ofrecer a sus usuarios una experiencia lo más similar posible a la de quienes cuentan con un navegador mucho más moderno.

Alfabetización web: ¡a leer y a escribir código!

---

Desde el punto de vista del proceso o metodología de diseño web que emplearemos, el desafío principal que plantean HTML5 y CSS3 para la mayoría de los diseñadores web principiantes es el de profundizar su capacidad de entender (leer) y generar (escribir) las etiquetas HTML y el código CSS que los editores visuales usualmente escriben por ellos, manteniéndolos apartados de los lenguajes con los que está construida toda Web.

La meta es animarse a escribir códigos simples, como por ejemplo:

o

envolviendo algún bloque de una página web previamente creada. Después de todo, si de alguna manera pudimos aprender HTML4 y CSS2.1, ¿por qué no vamos a aprender ahora HTML5 y CSS3?

Para lograrlo, nos apoyaremos en las funcionalidades básicas de los buenos editores HTML que existen en el mercado, como Dreamweaver (el editor más utilizado, que usaremos casi siempre en su vista de Código), o editores alternativos de código abierto y gratuitos como Brackets, Aptana, KomodoEdit y similares. Cualquier editor sirve para escribir en lenguaje HTML y en CSS, solo que algunos nos permiten ser más rápidos, precisos y productivos, gracias al autocompletado de etiquetas y atributos.

Una evolución revolucionaria

---

En lo personal, me resultó bastante sorprendente que el W3C decidiera apostar a HTML5, en lugar de continuar avanzando con XHTML. En cambio, en CSS era previsible el salto a la versión 3. Es útil analizar cómo se llegó a HTML5 para poder intuir hacia dónde evolucionaremos de ahora en más. Hagamos un poco de historia.

En la década de 1970, cuando la empresa que dominaba el mercado del software era IBM (no: ¡aún no existía Microsoft!), la gente de IBM se enfrentaba a un grave problema, que era la dificultad para compartir información entre distintas oficinas de la misma empresa (muchísimas oficinas por todo el mundo, y no: ¡tampoco existía Internet!).

En esa época, no había archivos de formatos estandarizados, y cada programador generaba los suyos propios, generalmente de texto plano, con sus propias claves. Para graficar lo anterior, imaginemos que en una oficina un código t antes de una frase podía significar que ese texto era un título, pero en otra oficina eso significaba que era un tabulador, con los malos entendidos que nos podemos imaginar. Esto provocaba serias dificultades y pérdidas de tiempo para reutilizar esa información ya almacenada en otra sección de la empresa, que debía reconstruir y readaptar el archivo a su propia forma de almacenamiento y procesamiento de datos. El problema era la Incompatibilidad.

En vista de esto, IBM decidió crear un lenguaje que permitiera estructurar el contenido de los documentos que producía, mediante el agregado de etiquetas o marcas (tags), que envolvieran al texto y describieran qué importancia y función tenía el mismo dentro de un documento. De esta manera indicaban que tal frase era el título, tal otra el subtítulo, otra un simple párrafo y así sucesivamente. Tenían la esperanza de que, si todos usaban ese nuevo lenguaje, se solucionaría el problema de la incompatibilidad.

Este lenguaje de marcas fue llamado GML (Generalized Markup Language) y funcionó a la perfección, logrando establecer un idioma común para que todas las oficinas de IBM pudieran compartir su información rápidamente y sin conversiones.

Pero pasado un tiempo notaron que el problema persistía cuando los proveedores (clientes) de IBM introducían datos desde el mundo exterior, ya que no los estructuraban con GML.

Entonces, decidieron realizar algunos cambios al lenguaje GML y liberar para uso público este lenguaje de marcas: lo ofrecieron a una oficina de estándares (ISO) y así nació SGML (Standard Generalized Markup Language), un lenguaje estándar, público, que en los años 80 tuvo gran difusión en la informática mundial.

¿Y esto qué relación tiene con las páginas web? ¡Muchísima!

Cuando a fines de los años 80 un grupo de investigadores del CERN, entre los cuales estaba Vinton Cerf, tuvo que decidir cuál sería el tipo de documento que se utilizaría en ese nuevo servicio de navegación hipertextual al que llamaron World Wide Web, enseguida pensaron en

SGML, puesto que varios de ellos ya lo conocían porque habían trabajado para IBM y podían dar fe de sus ventajas a la hora de intercambiar información. Ventajas de la compatibilidad...

Quienes tomaron la decisión bien podrían haber decidido que el formato de los documentos a usar en la web fuera el TXT, o bien, el DAT o el EXE. Sin embargo, prefirieron las conocidas ventajas de un lenguaje de marcado estandarizado, con etiquetas (tags) como era SGML.

Lenguaje HTML

A partir de esa decisión, crearon el lenguaje HTML (Hyper Text Markup Language), que no es más que un derivado de SGML, y lo crearon con el objetivo de estructurar el contenido de los documentos que se publicarían en la web.

La relativa complejidad de este lenguaje hizo que fueran los programadores (la gente del área de Sistemas de las empresas) quienes crearan las primeras páginas web de la historia (¡feísimas, por supuesto!, pero no era estética la necesidad de ese momento, con las conexiones dial-up muy lentas de que disponíamos).

Más adelante, al sucederse nuevas versiones del lenguaje HTML, se fueron incorporando nuevas etiquetas, que permitían decorar (dar formato, estilo, colores, alineación, etc.) al texto y demás elementos de las páginas web. En ese momento hicieron su entrada en escena dos actores principales de lo que sería la web hasta nuestros días: los diseñadores gráficos, y los programas de edición visual de documentos HTML (FrontPage y programas similares). Esto sucedía alrededor del año 2000.

La preocupación inicial

Comentarios para HTML5 y CSS3 - Para diseñadores

[Teletubi · Calificación: 5 de 5 estrellas]

Es justo todo lo que estaba buscando. Siga sacando más libros, es genial para mí que, que me gusta más leer que ver videos. Agradezco que exista este libro sin duda alguna.