Cursos Guia WEB DESARROLLO WEB ACTIVI VATE Curso

Mdulo 4
Este es un curso de DESARROLLO WEB
ACTIVI VATE
Curso Mdulo 4
Todas las Actividades en este pequeo curso se entregare la repuesta correcta para
que sea un material de ayuda en el auto aprendizaje.
Este consta de varios puntos referentes al diseo web el cual es verdad hay ms pero
yo me enfocare dentro del diseo web y este est dividido en varios puntos me
detendr en estos puntos y el cual entregare material para poder compartir la
informacin ya que no sabes si esto cambiara o este curso se pueda terminar pero lo
bueno de este es que entrega material muy importantes que hoy en da te ayudara arto
para tu qu quieres aprender diseo web o crear una pgina web o saber la historia de
la computacin y la web.

4.1 Presentacin
Los objetivos de este mdulo son:
Aprender a crear pginas web con tablas e imgenes.
Aprender a vlidar el cdigo HTML para crear pginas web correctas.
Aprender las principales novedades de HTML5.
Video Referencia >>> https://youtu.be/E8WYSPZMlr8
4.2 Ests escribiendo bien tus pginas?
Ya has aprendido muchas cosas, ya sabes escribir pginas web sencillas
pero, ests escribiendo bien tus pginas?
"Klaro, este testo lo puedes entender, quisas alla errores que te confundan,
pero si lo bes dos vezes seguro que lo entiendes."
Con las pginas web ocurre lo mismo, pueden tener errores que hagan que
los navegadores se confundan y no interpreten correctamente nuestras
pginas
Despus de todo el esfuerzo invertido en crear una pgina web, te gustara
que un navegador web mostrase algo distinto de lo que t has querido
hacer? Para evitarlo debes escribir pginas web correctas: pginas bien
estructuradas y sin errores.
4.3 HTML: juego de caracteres

El juego de caracteres, tambin llamado codificacin de caracteres, es la

pesadilla de la mayora de los informticos porque es una fuente de
problemas inagotable.
En el siguiente vdeo se muestran ejemplos reales de problemas con el juego
de caracteres y se proporcionan los consejos ms importantes para trabajar
con el juego de caracteres:
Utiliza siempre el mismo juego de caracteres.
Utiliza UTF-8 sin BOM.
Diferencias entre ISO-8859-1 (Latin1) e ISO-8859-15 (Latin9).
Cmo se indica el juego de caracteres en HTML (etiqueta meta).
Diferencias entre HTML4, XHTML1 y HTML5.
Video Referencia >>> https://youtu.be/_MwDNB3jOx0
Actividad
1. En cuanto al juego de caracteres, lo ms importante es...
R = Ser consistente en todos tus ficheros.
Correcto! Es la regla de oro para evitar problemas en un desarrollo web.
2. Qu es el BOM?
R = Un caracter Unicode que indica la ordenacin de los bytes.
Correcto! Byte Order Mark (BOM) es un carcter que indica la ordenacin de
los bytes en un flujo de caracteres Unicode.
4.4 HTML: el juego de caracteres y los editores de texto
En el siguiente vdeo se explica qu es UTF-8 sin BOM (Byte Order Mark) y
con BOM y se muestran los habituales problemas con los editores de texto.
Video Referencia >>> https://youtu.be/4vF41rQU_4Y
4.5 HTML: tablas
En el siguiente vdeo se explican las etiquetas bsicas para crear tablas en
HTML (table, tr, th, td) y las etiquetas avanzadas (thead, tbody, tfoot, caption,
colgroup, col).
Video Referencia >>> https://youtu.be/ZFrWfhxpP2U
4.6 HTML: imgenes
En el contenido del siguiente vdeo vers:
El concepto de hipermedia, la etiqueta img, sus atributos obligatorios (src,
alt), opcionales (width, height, longdesc, ismap, usemap) y los atributos
desaconsejados.
Las caractersticas de los formatos grficos (GIF, JPG/JPEG, PNG), los
mapas de imagen y su uso (map, area, atributos usemap e ismap).
Video referencia >>>https://youtu.be/tnpPJou1EVA

Actividad
1. Dentro de la etiqueta img, el atributo que se utiliza para indicar la ruta de la
imagen es:
R = src.
Correcto! src significa source, origen de la imagen.
2. La etiqueta img se puede utilizar para incluir en una pgina web una
imagen que se encuentra en otro servidor web?
R = S.
Correcto! No hay ninguna restriccin, se puede incluir una imagen que se
encuentra en otro servidor, simplemente hay que escribir la URL apropiada.
3. Qu formatos grficos son considerados el estndar en las pginas web?
R = JPEG, GIF, PNG.
Correcto! JPEG, GIF y PNG son considerados el estndar de formatos
grficos en las pginas web por las caractersticas que tiene cada uno.
4. Qu es un mapa de imagen?
R = Una imagen que contiene zonas activas que son enlaces.
Correcto! Los mapas de imagen tambin se llaman a veces mapas
sensibles.
4.7 HTML: validacin del cdigo
Debes ver el vdeo "HTML: validacin del cdigo" en el que:
Se explica la validacin del cdigo HTML.
Se muestran las diferentes versiones que existen de HTML.
Se explica qu es el DOCTYPE y qu valor de DOCTYPE se debe usar.
Se muestra una lista de DOCTYPEs populares.
Se presentan los servicios de validacin ms populares, como W3C Markup
Validator, WDG HTML Validator, Validator.nu.
Se realiza una demostracin de validacin de tres pginas.
Video Referencia >>> https://youtu.be/CHfYRVHKMtc
4.8 HTML5: introduccin
El 28 de octubre de 2014 el W3C public "HTML5. A vocabulary and
associated APIs for HTML and XHTML. W3C Recommendation 28 October
2014", en dicha fecha, lo que supone que HTML5 ya tiene el rango de
estndar.
Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha
cambiado, ya tenemos una versin estable de HTML5, pero eso no significa
que de un da para otro todos los navegadores web lo soportarn
mgicamente. Los navegadores web actuales, y no digamos los que tienen
varios aos, no soportan muchas cosas de HTML5, as que se debe utilizar
con precaucin.
En el siguiente vdeo se comenta la nueva versin de HTML5, los problemas
de compatibilidad que pueden existir con los navegadores y se ofrecen
algunos consejos para aprender HTML5.

Video Referencia >>> https://youtu.be/DdXBcoaFPro

Actividad
1.Acerca de HTML5, se puede afirmar que:
R = La mayor parte de HTML5 sigue siendo igual a HTML4.
Correcto! HTML5 es bsicamente HTML4 con algunas mejoras; HTML5
tambin elimina algunas caractersticas de HTML4 que ya no tienen sentido.
2. Segn el sitio web HTML5 Test, qu navegador web obtiene una mayor
puntuacin de compatibilidad con HTML5?
R = Google Chrome.
Correcto! En el momento de crear el contenido de la leccin era as, pero
esto puede cambiar en cualquier momento.
4.9 HTML5: Qu es HTML5?
En el siguiente vdeo vers las principales tecnologas de la familia HTML5:
HTML5. Canvas. SVG. Geolocalizacin. Cach.Base de datos. Web workers.
Video Referencia >>> https://youtu.be/1hR7EtD6Bns
Actividad
1. Qu es JSON?
R = Un formato de intercambio de datos.
Correcto! JSON significa JavaScript Object Notation y se emplea para
serializar estructuras de datos en JavaScript.
2. Qu es AJAX?
R = Una tcnica de desarrollo que permite crear aplicaciones interactivas
que se ejecutan en el navegador.
Correcto! AJAX significa Asynchronous JavaScript And XML y permite crear
pginas web en las que cambia su contenido sin que se tenga que recargar
la pgina.
3. Qu nuevas etiquetas o tecnologas podemos usar en HTML5?.
R = Todas las anteriores.
a) La etiqueta <canvas>, que permite definir una area dentro de la pgina
web donde dibujar mediante Javascript.
b) La etiqueta <svg>, que que nos permite introducir grficos vectoriales.
c) Los Web Workers, que nos permiten lanzar varios hilos de ejecucin en
Javascript.
d) Todas las anteriores.
Correcto!
4.10 HTML5: de HTML4 a HTML5
HTML5 incorpora nuevas etiquetas semnticas que definen la estructura de
una pgina web. En el siguiente vdeo se presentan estas etiquetas y se
explica cmo transformar una pgina web de las versiones antiguas de
HTML a la nueva versin HTML5.
Video Referencia >>> https://youtu.be/vRqQRrULSxI

Actividad
1. Qu etiquetas aade HTML5 para estructurar una pgina web?
R = header, nav, aside, footer.
Correcto!
2. La nueva etiqueta figure de HTML5 se emplea para
R = Etiquetar cualquier cosa.
Correcto! Mucha gente cree que dentro de figure slo se puede incluir una
imagen, pero en realidad se puede incluir cualquier cosa, como una cita, un
fragmento de cdigo, una tabla, etc.
3. La nueva etiqueta footer de HTML5 se emplea para
R = Etiquetar el pie de una pgina.
Correcto!
4.11 Los formularios en HTML5
HTML5 incorpora novedades muy interesantes para la creacin de
formularios. Estas novedades aumentan los tipos de controles (se aade un
control para introducir una fecha o un correo electrnico) y las
caractersticas que se pueden configurar (se puede definir un patrn de
entrada o un placeholder) pero hay que llevar cuidado al usarlas, ya que no
todos los navegadores las aceptan todas por ahora (pero s que lo harn en
breve).
En las siguientes lecciones se resumen las novedades principales y se
muestran algunos ejemplos. Si quieres complementar y contrastar lo que se
explica, te recomendamos la lectura de Formularios en HTML5.
4.12 HTML5: Nuevas funcionalidades en formularios (parte 1)
En el siguiente vdeo se presentan los nuevos controles de HTML5:
url. tel. email. number. color. search. range. datetime. datetime-local. date.
month. week. time.
Adems, se comenta el soporte por parte de los navegadores y se muestra la
representacin de algunos controles en dispositivos mviles.
Video Referencia >>> https://youtu.be/6oGjhVRu7cU
Actividad
1. Los nuevos controles de formulario de HTML5 permiten:
R = Todas las anteriores.
a) Reducir la complejidad de desarrollar un formulario.
b) Lograr un comportamiento ms intuitivo de los formularios.
c) Prescindir de JavaScript para realizar algunas validaciones de formulario
del lado del cliente.
d) Todas las anteriores.
Correcto!
2. En HTML5, qu tipo de control input no existe?

R = calendar.
Correcto! Existen date, datetime, datetime-local, month, time o week, pero
calendar no existe.
3. En HTML5, qu atributo se emplea para definir una regla que limite el
contenido de un cuadro de texto?
R = pattern.
Correcto! El atributo pattern admite una expresin regular que se emplea
para validar los datos introducidos en el control.
4. El tipo number se emplea para definir campos en los que se debe
introducir:
R = Un nmero.
Correcto!
4.13 HTML5: Nuevas funcionalidades en formularios (parte 2)
En el siguiente vdeo se presentan los nuevos atributos que se pueden
emplear en los controles de los formularios:
autocomplete. autofocus. min. max. step. pattern. placeholder.
required. Tambin se explica qu es Modernizr y los polyfills.
Video Referencia >>> https://youtu.be/UVpE-tBtdvY
Actividad
1. En HTML5, qu atributo se emplea para especificar los intervalos
numricos vlidos para un elemento input?
R = step.
Correcto! El atributo step especifica los intervalos numricos vlidos para
un control.
2. En HTML5, el atributo que se emplea para que un cuadro de texto sea
obligatorio es:
R = required.
Correcto!
3. En HTML5, el valor del atributo pattern tiene que ser:
R = Una expresin regular.
Correcto!
4. En HTML5, qu atributo se emplea para mostrar una pista o ayuda de lo
que se debe escribir en un cuadro de texto?
R = placeholder.
Correcto! El atributo placeholder se emplea para definir un valor de ejemplo
o un consejo que ayude al usuario a introducir el dato en el control.
4.14 HTML5: Ejemplo de formulario
En este vdeo vers un ejemplo de formulario en HTML5. Recuerda que los
nuevos controles de formulario de HTML5 es una de sus mejores
caractersticas.
Video Referencia >>> https://youtu.be/Bjc-sykJ8bg

4.15 Los navegadores web son buenos pero tontos. Por qu?
Los navegadores web son programas muy complejos que deben ser capaces
de interpretar y representar las pginas web, que cada vez emplean
tecnologas ms complejas y avanzadas.
Los navegadores web deben ser "buenos" pues deben manejar cualquier
pgina web, aunque contenga errores (que suele ser lo normal, lo extrao es
encontrar una pgina web que no contenga errores). Pero los navegadores
web a veces son "tontos" y no son capaces de interpretar correctamente una
pgina web cuando contiene muchos errores. Cuando esto ocurre la pgina
se puede mostrar de una forma incorrecta.
Para evitar esta situacin es muy importante que escribas correctamente el
cdigo HTML. En las prximas lecciones vas a aprender a validar el cdigo
HTML para localizar y corregir los errores que puedan tener tus pginas web.
4.16 HTML5: Por qu es importante escribir cdigo correcto? (1/3)
En este vdeo se explican las principales causas por las que una pgina web
no se ve igual en todos los navegadores:
Fallos de los navegadores.
Problemas de compatibilidad entre los navegadores.
Soporte de HTML por los navegadores.
Errores en el cdigo HTML.
Video Referencia >>> https://youtu.be/RnzKl8OA5gQ
Actividad
1. Qu se afirma en el vdeo tutorial acerca del navegador Internet Explorer
6?
R = Fue un mal navegador web porque no cumpla correctamente los
estndares web
Correcto! Microsoft Internet Explorer 6 presentaba importantes
inconsistencias respecto a los estndares, lo que obligaba a los
desarrolladores web a crear versiones especficas de las pginas web para
este navegador.
2. De las posibles causas que hacen que una pgina web no se visualice
correctamente, cul depende de los desarrolladores web?
R = Los errores en el cdigo HTML.

Correcto! Los desarrolladores web escriben el cdigo HTML.

4.17 HTML5: Por qu es importante escribir cdigo correcto? (2/3)
En este vdeo se muestran algunos ejemplos de errores en el cdigo HTML:
Etiqueta <b> sin cerrar.
Etiqueta <span> sin cerrar.
Comillas del valor de un atributo sin cerrar (2 versiones).
Valor del atributo size de la etiqueta "input" incorrecto.
Video Referencia >>> https://youtu.be/_NHarDRZimw
.18 HTML5: Por qu es importante escribir cdigo correcto? (3/3)
En este vdeo se explica qu es el DOM (Document Object Model) y por qu
es la razn por la que los navegadores muestran una pgina de diferentes
formas cuando tiene un error.
Video Referencia https://youtu.be/fBQ8wE5Ffxs
4.19 Presentacin del proyecto
Los objetivos del proyecto de este mdulo son:
Mejorar el sitio web con la incorporacin de nuevos elementos como las
tablas, las imgenes y los nuevos controles de formulario de HTML5.
Comprobar que todas las pginas web estn correctamente escritas y no
presentan errores.
Publicar en Internet el sitio web formado por varias pginas conectadas
mediante enlaces.
Video Referencia >>> https://youtu.be/93QJ3AgXMPc
4.20 Y ahora qu?
Si has llegado hasta aqu y has ledo todas las lecciones, has visto todos los
vdeos y has hecho todos los ejercicios debes de haber aprendido muchas
cosas, pero el haber llegado hasta aqu no es el final de tu aprendizaje, ms
bien es el principio.
Todava te quedan muchas cosas por aprender de HTML. Gracias a este
curso tienes una base para seguir aprendiendo por tu cuenta. Pero quedan
muchas ms cosas que vas a aprender con nosotros, pero eso ser en la
segunda parte de este curso.
4.21 Lista de reproduccin
En la siguiente lista de reproduccin tienes la posibilidad de ver todos los
vdeos que corresponden a este mdulo, consecutivamente.

Video Referencia >>>

https://youtu.be/E8WYSPZMlr8?
list=PLtYz74hFxFcoKzaBGEbYxcumjqIO9kwiY
4.22 Aprende+
Si despus de todo lo visto en este mdulo todava tienes ganas y tiempo de
aprender ms cosas, el apartado Aprende+ [A+] es lo que necesitas.
4.23 [A+] HTML: migrar a un nuevo juego de caracteres?
Debes ver el vdeo "HTML: migrar a un nuevo juego de caracteres?" en el
que plantean diferentes posibilidades ante el problema de migrar o no migrar
un sitio web que ya existe a otro juego de caracteres.
Video Referencia >>> https://youtu.be/erNmaW-_tNM
4.24 [A+] XML: HTML y XHTML

En el siguiente vdeo se explican las diferencias entre XML, HTML y XHTML.

Video Referencia >>> https://youtu.be/EDTgmwVNGjs
Examen

Evaluacin Final del Examen Mdulo 4

Las Repuestas en rojo son las Correctas

Te quedan 3 intentos para realizar este examen. Cada vez que enves tus respuestas
contar como un intento.
El siguiente examen se ha elaborado en base a los contenidos que hemos puesto a tu
disposicin en cada leccin de este mdulo. Una vez finalices el examen selecciona
"enviar respuestas". Si superas el examen no tienes porqu volver a hacerlo, el
resultado quedar registrado. En caso de no superarlo (al obtener una nota inferior al
80%) tendrs la opcin de volver a realizar el examen, hasta un mximo de tres veces
en total. En caso de tener que repetirlo, te recomendamos que repases las lecciones de
nuevo para una mejor comprensin de la materia.

1. El juego de caracteres ISO-8859-1 tambin es conocido como:

ASCII.
Latin1.
UTF-8.
2. En HTML, una celda de encabezado de una tabla se define con la etiqueta:
<td>.
<th>.
<tr>.
3. Qu es un mapa de imagen?
Una imagen que representa un mapa geogrfico.
Un mapa que est compuesto por varias imgenes.
Una imagen que contiene zonas activas que son enlaces.
4. Qu formatos grficos son considerados el estndar en las pginas web?
BMP, JPEG, PNG, TIFF.
JPEG, GIF, PNG.
JPEG, PNG, TIFF.
Gracias por realizar el Examen - Mdulo 4: Cmo se escribe una pgina web. Tu
puntuacin para este examen es 100.0.

Enhorabuena! Has aprobado este examen. En breve se te conceder un badge que

acredita tu progreso en este curso. Lo podrs recoger en la pgina de progreso o en tu
bandeja de entrada.
SE ELIMINO REPUESTAS Y PREGUNTAS PARA DARLE MAS IMPORTANCIA A ESTE TRABAJO MAS
INFORMACIN AQUI