➜ Google Actívate | Curso de Introducción al Desarrollo Web: HTML y CSS | Módulo 5 y EXÁMEN

Cómo se escribe una página web bien estructurada

1. Presentación
Comprueba tus conocimientos 

Morgana es profesora de un curso sobre creación de páginas web. La próxima semana da un seminario sobre cómo incorporar nuevos elementos a nuestra página web.

Indica cuáles son los nuevos elementos de los que va a hablar Morgana en este seminario.

• Herramientas para que vuestra página sea más famosa.
• Cómo crear tablas para datos tabulados y cómo insertar imágenes.
• Cómo añadir visualizadores de los perfiles de los usuarios a vuestra página web.

Crear tablas para datos tabulados te será de gran ayuda para acumular datos y llevar a cabo un mejor análisis de estos. Añadir imágenes puede serte de gran ayuda ya que hará tu página web más atractiva al usuario que la visite.

1. HTML: juego de caracteres
Comprueba tus conocimientos

 

Alba está codificando un nuevo videojuego en castellano y ha usado varios juegos de caracteres, ya que el español tiene caracteres que no existen en otros idiomas.

¿Cuáles de los siguientes juegos de caracteres debe usar Alba para no tener ningún problema?

• UTF-8 Sin BOM
• HTML
• ISO-8859- 1 (Latin 1)
• ISO-8859- 15 (Latin 9)

UTF-8 Sin BOM y ISO-8859-1 (Latin 1) puede ser la solución a todos los problemas que se presenten a la hora de utilizar un juego de caracteres. ISO-8859-15 o Latin 9 te puede servir para escribir el carácter "€".

3. HTML: el juego de caracteres y los editores de texto Comprueba tus conocimientos

 

Gemma ha realizado recientemente un curso sobre los juegos de caracteres y los editores de texto que le ha pagado su empresa. Tras el curso Gemma tendrá que realizar una breve ponencia a sus compañeros sobre el curso que ha recibido.

Indica cuáles de las recomendaciones y afirmaciones que dará Gemma acerca de los juegos de caracteres y los editores de texto, son correctas y cuáles incorrectas.

 

 

BOM o Byte Order Mark define el carácter unicode que se utiliza para indicar el orden de los bytes de un fichero de texto al principio del mismo. Uno de los consejos más importantes es utilizar UTF-8 sin BOM ya que te ayudará a mezclar textos en cualquier idioma.

4. HTML: tablas Comprueba tus conocimientos

 

Nuria trabaja en el departamento de administración de una universidad. Este es el primer año que van a publicar las calificaciones de los alumnos en Internet utilizando una tabla en HTML. Para definir la tabla tiene que utilizar una etiqueta para crear las filas de la tabla, pero no sabe muy bien cuál es.

Selecciona la etiqueta que tiene que utilizar Nuria para crear una fila en una tabla.

• Table data cell (td)
• Table row (tr)

Una tabla html es una forma gráfica de representar información de manera esquematizada, ordenada y compacta. Las tablas HTML se organizan en filas y celdas. La etiqueta table indica el inicio y el cierre de la tabla. El resto de etiquetas estarán recogidas entre . La etiqueta representa una nueva fila en la tabla.

5. HTML: imágenes Comprueba tus conocimientos

 

Miriam está desarrollando una web para una tienda de alimentación de mascotas y se le ha ocurrido una idea: quiere que cuando un cliente haga clic sobre la imagen de una mascota, esta le redirija directamente a los productos de alimentación recomendados para esa mascota. Ha oído que esto se puede hacer con los atributos que se utilizan para definir mapas de imagen.

Ayuda a Miriam seleccionando esos atributos.

• longdesc.
• usemap.
• width.
• height.
• ismap.
• alt.

Las imágenes son el elemento principal que confiere a la web su carácter de hipermedia. La etiqueta para insertar una imagen, en HTML, es < img \>. Esta etiqueta tiene dos atributos obligatorios, src y alt. El atributo src indica la ruta en la que se encuentra la imagen mientras que el atributo alt es el texto alternativo que se debe visualizar cuando la imagen aún no se ha cargado o no se puede cargar por diversas razones. Además < img \> tiene varios atributos opcionales, entre ellos ismap y usemap para definir mapas de imagen. Los mapas de imagen o imágenes sensibles son imágenes que contienen zonas sensibles, que son enlaces a otras páginas web. Se pueden procesar en el lado del cliente (usemap) y en el lado del servidor (ismap).

6. HTML: validación de código Comprueba tus conocimientos

 

Mateo ha contratado a una empresa el desarrollo de la página web de su gimnasio. La página web ya está terminada pero le han dicho a Mateo que aún no la pueden publicar porque van a realizar el proceso de validación de código fuente pero Mateo no sabe qué es esto.

Para ayudar a Mateo, selecciona de la siguiente lista los elementos que no son correctos en relación con el proceso de validación de código.

• Existen diferentes versiones de HTML y hay que tenerlo en cuenta
• Los errores de la Web siempre se solucionan en orden ascendente, es decir, del último al primero
• <!DOCTYPE> se utiliza para indicar la versión de HTML que se está utilizando
• <!DOCTYPE> siempre se coloca como la última línea del código de una Web
• Todas las herramientas de validación de código son de pago

 

HTML es un lenguaje y por lo tanto tiene su vocabulario y su gramática. Para estar seguros de que nuestro código HTML es correcto y no contiene errores hay que validar el código fuente. Existen diferentes versiones de HTML y en la actualidad conviven HTML 4.01, XHTML 1.0 y HTML5. Lo primero que hay que hacer al empezar a escribir una web es decidir que versión de HTML vas a utilizar. Esta versión se indica con la instrucción < !DOCTYPE > al principio del código. La validación del código fuente se realiza a través de una herramienta. Esta herramienta puede ser gratuita o de pago. Una vez que pasamos el validador podemos ver los errores que tiene nuestra web. Es importante ir resolviendo los errores en el orden en el que aparecen, es decir, del primero al último, ya que a veces al resolver los primeros desaparecen los demás.

7. HTML: introducción Comprueba tus conocimientos

 

Pedro es desarrollador web. Normalmente trabaja sus desarrollos en HTML4 pero como quiere, entre otras cosas, que sus desarrollos sean multidispositivo, va a empezar a utilizar HTML5.

Indica, de las siguientes opciones, cuáles son específicas de este tipo de programación.

• Frameset
• Head
• Header
• ins
• Mark
• li

El elemento mark (<mark>) representa a un trozo de texto remarcado o resaltado al cual los autores pueden referirse desde otro documento, con el fin de analizarlo o explicarlo. Por su parte, el elemento de HTML Header (<header>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, pero también otros elementos como un logo, una sección que aglutine secciones de encabezados, una formulario de búsqueda, etc.

8. HTML5: ¿Qué es HTML5?

Comprueba tus conocimientos

 

Ana necesita identificar qué tipo de API es más óptima en base al almacenamiento de datos. Su idea es disponer de los que necesite y trabajarlo en local.

Identifica cuál es la opción más adecuada para Ana.

 

Con el uso de Caché los recursos deseados se almacenan de forma local, lo que produce una mejora del rendimiento. Se descargan los contenidos necesarios y se trabaja cómodamente en local.

9. HTML5: de HTML4 a HTML 5 Comprueba tus conocimientos

 

Pedro quiere adaptar, en la medida de lo posible, los desarrollos HTML4 que ha realizado en su página web y pasarlos a HTML5. Está subiendo la parte de contenido principal y sustituyendo los por las etiquetas que la nueva versión le facilita.

Identifica, de entre las siguientes opciones, cuál no corresponde a esta región de la página.

 

La etiqueta < aside > se utiliza para facilitar información adicional a la etiqueta principal, que la completa. Ejemplos de ella son noticias, anuncios etc. Etiquetas como < figure > no se utilizan únicamente para imágenes, también son usadas para fragmentos de código o realizar citas. Utiliza < figcaption > para definir el título de una imagen.

10. HTML5: Nuevas funcionalidades en formularios (parte 1) Comprueba tus conocimientos

 

Pablo trabaja en Muebles Robles S.A y se encuentra adaptando los formularios de la web a HTML5, ya que con el sistema de formularios anterior han tenido muchos problemas, sobre todo con las encuestas de satisfacción de los clientes. No han recibido toda la información que necesitaban porque los formularios eran poco intuitivos y presentaban problemas de compatibilidad con algunos navegadores. Han perdido información de gran valor, tanto para mejorar la experiencia de usuario como para desarrollar planes de acción en atención a los resultados de las encuestas.

Pablo sabe que ahora con HTML5 van a ser muchos más intuitivos y de fácil acceso, pero en concreto, ¿cuáles son estos cambios a nivel desarrollo?, ¿y a nivel usuario?

 

La gestión los elementos que componen los formularios de forma nativa permite prescindir de Javascript para realizar validaciones de formulario por parte del cliente. Es compatible entre distintos navegadores. Ahorra tiempo y ancho de banda porque evita que se envíe si no es válido e informa al usuario de que los valores introducidos no cumplen con los requisitos definidos.

11. HTML5: Nuevas funcionalidades en formularios (parte 2)
Comprueba tus conocimientos

 

Lucas está modificando los formularios del área de atención al cliente y está preocupado porque si desarrolla los formularios en HTML5 y CSS3 puede que no funcionen por temas de incompatibilidad con determinados navegadores y las consecuencias pueden ser graves para la imagen de la empresa frente a los clientes y/o potenciales clientes que buscan información previa a la compra.

Indica, de entre las siguientes opciones, cuáles son las que tiene Lucas para evitar este tipo de incidencias.

 

 

Modernizr es una microlibrería de Javascript que permite conocer la compatibilidad del navegador del usuario con la tecnología HTML y CSS3. Una vez detectada toma medidas utilizando el Polyfill correspondiente (librería de Javascript) y modifica lo que sea necesario. El utilizar en el desarrollo controles avanzados nativos facilita la labor del desarrollador que no se tiene que preocupar por la compatibilidad de los navegadores, además de suponer un ahorro de tiempo y ancho de banda ya que, por un lado permite que no se envíe el formulario sino es válido, e informa al usuario de que alguno de los valores introducidos no cumple con los requisitos definidos.

12. HTML5: Ejemplo de formulario
Comprueba tus conocimientos

 

Teresa está desarrollando en HTML5 un formulario. Está añadiendo elementos al formulario usando los inputs type. En concreto, está trabajando con elementos de tipo text a los que está añadiendo etiquetas. De los tipos de asociación de etiquetas que existen quiere utilizar el más adaptativo.

Selecciona, entre las siguientes opciones, las que no atiendan a los objetivos de Teresa.

 

Cuando la etiqueta label recibe el foco automáticamente se lo cede al control asociado. Dentro de los dos tipos de asociaciones de etiquetas, con los controles de formulario debemos considerar, por temas de adaptabilidad, aquella que maneje correctamente las tecnologías asistidas. La asociación directa no es uno de los dos tipos de asociación de etiquetas que existen.

13. HTML5: ¿Por qué es importante escribir código correcto? (1/3)  Comprueba tus conocimientos

 

David es desarrollador web y ha quedado con dos clientes para mostrarles sus trabajos. Los clientes traen sus propios equipos y al cargar la web de David en el navegador de uno de ellos, no funciona. Esto acaba de poner a David en un tremendo aprieto.

David ha revisado que el desarrollo es correcto, ¿qué otras causas han podido generar este error y por lo tanto, debería haber considerado para que esto no ocurriera?

• Fallo en los navegadores.
• Problemas de compatibilidad.
• Determinadas características de las etiquetas.
• Uso de una única etiqueta html.

Efectivamente, tal y como indica el estándar, debe utilizarse una única etiqueta HTML. Siempre es aconsejable que, como desarrollador, verificar el código y para ello, en W3C, dispone de un validador. Es muy importante atender a las características específicas de las etiquetas para evitar errores. Aunque no es muy probable, a veces, los navegadores fallan, pero se debe comprobar que no atiende a problemas de desarrollo. Es recomendabñe realizar siempre un testeo de calidad en al menos 3 o 4 navegadores para poder detectar incompatibilidades y poder subsanarlas a tiempo.

14. HTML5: ¿Por qué es importante escribir código correcto? (2/3) Comprueba tus conocimientos

 

Raúl, que trabaja como desarrollador web, está programando una web para un taller de coches. Está revisando el texto que ha programado porque, dependiendo del navegador, ve la página de forma diferente.

Ayuda a Raúl a detectar algunos de los fallos seleccionando la opción correcta.

 

Hay errores de código que se ven de forma diferente dependiendo del navegador. Errores típicos son abrir una etiqueta tipo <b> y no cerrarla o usar una etiqueta tipo <link href=”faltacomillas.css” rel=”stylesheet/>, donde faltan las comillas al final, seguido de una etiqueta <div id=”contenido”>. Estos errores afectan igual a todos los navegadores. Errores como abrir una etiqueta tipo <span style=…> y no cerrarla o usar el atributo size pero usando una o en lugar de un cero, estos errores afectan de forma diferente a cada navegador. Firefox y Google Chrome actúan igual, pero de forma diferente a Internet Explorer y Opera.

15. HTML5: ¿Por qué es importante escribir código correcto? (3/3) Comprueba tus conocimientos

 

Paula está desarrollando una web para promocionar una clínica veterinaria. Está teniendo problemas ya que la web se ve de forma diferente en el navegador Firefox y en el navegador Google Chrome. Su compañera Ana le ha comentado que compare el DOM de ambos navegadores, pero Paula no sabe muy bien a qué se refiere.

¿Podrías indicarle a Paula qué es el DOM?

 

El DOM (Document Object Model) es una recomendación del W3C. El DOM es una interfaz de programación de aplicaciones para documentos válidos HTML y bien construidos XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula. Para entender por qué los navegadores se comportan de forma diferente hay que comparar el DOM que construye cada navegador a partir del código HTML de la página.

16. [A+] HTML: ¿migrar a un nuevo juego de caracteres? Comprueba tus conocimientos

 

Diana tiene una web de recomendación de espacios turísticos que le está dando algún problema con las vocales acentuadas. Cree que puede ser por el juego de caracteres que está utilizando y se está planteando migrarlo a otro juego de caracteres que no le dé problemas con las vocales acentuadas.

Si Diana utiliza el sistema operativo macOS X, ¿cómo le recomendarías hacer la migración?

• Por línea de comandos
• Mediante un editor de texto

Para escribir un texto y que se entienda correctamente se debe utilizar el juego de caracteres adecuado. Las migraciones se realizan cuando la página web da problemas o en el momento de conectarse a otro sistema con otra codificación, pero si no da problemas, no es aconsejable realizar una migración. Migrar un sitio web de una codificación a otra es más sencillo en Linux y macOS X ya que se realiza por línea de comandos. El comando file permite conocer el tipo y la codificación de un fichero y el comando iconv convierte la codificación de un fichero de una codificación a otra.

17. [A+] XML: HTML y XHTML Comprueba tus conocimientos

 

Marcos da clases particulares online sobre desarrollo web. Tiene una alumna, Cristina, que tiene dudas sobre usar XHTML o HTML, ya que no ve diferencias entre ambos lenguajes de marcado.

Ayuda a Cristina seleccionando de entre las siguientes opciones las que son realmente diferencias entre HTML y XHTML.

 

XHTML es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. En su versión 1.0 XHTML es solamente la versión de XML de HTML por lo que tiene, básicamente, las mismas etiquetas y funcionalidades, pero cumple las especificaciones más estrictas de XML. XHTML es más estricto que HTML por lo que tienen varias diferencias. Una de ellas es que en XHTML los elementos vacíos siempre llevan etiqueta de cierre y en HTML no es necesario. Otra de ellas está relacionada con el valor de los atributos: en XHTML siempre llevan comillas, cuando en HTML no es imprescindible.

 EXÁMEN

Cómo se escribe una página web bien estructurada

Pregunta 1 En cuanto al juego de caracteres, lo más importante es...

Pregunta 1 de 4

En cuanto al juego de caracteres, lo más importante es...

• ...utilizar siempre UTF-8 con BOM.
• ...utilizar juegos distintos en cada archivo para que el servidor no los confunda.
• ...no utilizar UTF-8, pues la mayoría de servidores no lo aceptan.
• ...ser coherente en todos tus ficheros.

El juego de caracteres es una de las cosas más simples del mundo web pero de las que más problemas ocasiona. Es importante ser consistente con el formato de los ficheros que compongan tu página web.

Pregunta 2 de 4

¿Qué es un mapa de imagen?

• Una imagen que representa un mapa geográfico.
• Un mapa que está compuesto por varias imágenes.
• Una imagen que contiene zonas activas que son enlaces.
• Un mapa organizativo compuesto por imágenes.

Hace unos años las páginas web no tenían imágenes y solo se componían de texto. La ausencia de imágenes puede causar que el sitio web sea totalmente inútil. Un mapa de imagen es una imagen que contiene zonas activas que son enlaces a otras páginas. El mapa de imagen se puede procesar desde el lado del cliente o desde el lado del servidor.

Pregunta 3 de 4

Respecto a HTML5, se puede afirmar que:

• HTML5 es muy distinto de HTML4.
• HTML5 es todo lo que había en HTML4 más algunas cosas nuevas.
• La mayor parte de HTML5 es igual que HTML4.
• HTML5 agrega nuevas etiquetas, desaparecen otras porque han quedado obsoletas y se han añadido atributos a las etiquetas que se mantienen.

HTML es el lenguaje con el que se crean las páginas web desde que Tim Berners-Lee creara la primera página web a finales de los noventa. Hasta hace unos años, los estándares de desarrollo web se diseñaban a partir de HTML4, pero más adelante se desarrolló el HTML5. Este nuevo estándar no es completamente diferente que el modelo anterior, sino que agrega nuevas etiquetas, otras etiquetas han desaparecido porque han quedado obsoletas y se han añadido atributos a las etiquetas que se han mantenido.

Pregunta 4 de 4

Los nuevos controles de formulario de HTML5 permiten:

• Reducir la complejidad de desarrollar un formulario.
• Lograr un comportamiento más intuitivo de los formularios.
• Prescindir de JavaScript para realizar algunas validaciones de formulario del lado del cliente.
• Todas las anteriores.

Una de las características más importantes que nos trae el nuevo estándar HTML5 son los nuevos elementos disponibles para el manejo de formularios ya que nos permite gestionarlos de manera nativa pudiendo así prescindir de JavaScript. Pero, además, poder prescindir de JavaScript nos proporciona otros beneficios como, por ejemplo, lograr un comportamiento más intuitivo de los formularios en beneficio de los usuarios y también reducir la complejidad de desarrollar un formulario.