esc design


© ⭐⭐⭐ WEB ESCDESIGN ⭐⭐⭐ | Siguenos en Pinterest Siguenos en Linkedin Siguenos en Facebook Siguenos en Blogger

Páginas

➜ Google Activate | 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.

 

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 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.

 

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.

 

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.

 

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.

 

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?

 

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.