Manual DEPW Unidad 1 - Pags 27-54

Manual para Diseño y Elaboración de Páginas WEB
HTML5
HTML5 es la quinta y última versión de HTML. Se trata de una nueva versión de HTML que combina las sintaxis de HTML
y XHTML. HTML5 tiene nuevas etiquetas y atributos con nuevos comportamientos que hacen de un sitio más moderno.
Esta versión se liberó a finales del año 2014.
Anteriormente para realizar esta estructura se hacía uso de cajas de contenido con la etiqueta <div> donde para
diferenciar cada etiqueta se utilizaban identificadores o clases.
Las nuevas etiquetas de HTML5 son técnicamente similares a la etiqueta <div> pero tienen un significado específico como
por ejemplo la etiqueta <nav> que es un bloque de navegación para el sitio web.
Actualmente, con HTML5 podemos asociar los identificadores o clases a las nuevas etiquetas que nos proporciona HTML5
y aprovechar la semántica que cada una de ellas tiene.
EJEMPLO DE UNA ESTRUCTURA DE UNA PÁGINA WEB USANDO LA ETIQUETA <DIV>
La siguiente imagen muestra la manera antigua de maquetar una página WEB utilizando la etiqueta <div> y usando
identificadores para reconocer cada apartado de la estructura dentro de una página WEB.
EJEMPLO DE UNA ESTRUCTURA DE UNA PÁGINA WEB USANDO ETIQUETAS de HTML5
Con Las nuevas etiquetas de maquetación HTML5 comprendemos mucho mejor la estructura de nuestra página WEB pues
los nombres de las etiquetas dicen más que una etiqueta <div>.
La siguiente imagen muestra la misma estructura de la imagen anterior pero con las etiquetas semánticas que propone
HTML5 para maquetar una página WEB.
Docente: L.I y M.S.I. Alfredo Contreras Méndez

27
ESTRUCTURA BASICA DE UNA PAGINA WEB CON ETIQUETAS DE HTML5
Enseguida podemos ver como sería la estructura básica de una página escrita en HTML5, observa como aparecen las
etiquetas elementales header, nav, menú, section, figure, article y footer que son propias de HTML5
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name=”author” content=”Nombre del alumno”/>
<title>Mi Página Web con etiquetas de HTML5</title>
</head>
<body>
<header>
Aqui se pone una Imagen o Logo
</header>
<nav>
Aquí van los Links de navegación Cuando en una sección sea necesario poner
</nav> apartados independientes, se pueden
colocar etiquetas <article> como sigue:
<section>
Contenido de la página <article>
<figure> <header> <h2>título</h2></header>
Aquí van Imagenes jpg, gif o png Contenido
<footer> pie del artículo </footer>
<figcaption> </article>
Aquí Título de la imagen
</figcaption> Nota: Dentro de <article> se puede poner
</figure> <header>, <h2> y/o <footer>
</section>
<aside>
Otros Links o información relacionada
</aside>
<footer>
Información de contacto, otros links, ayuda,etc.
</footer>
</body>
</html>
Importante: No es que la etiqueta <div> desaparezca por siempre, porque seguirá siendo importante y será necesaria en
ciertos contenidos, pero al menos para conformar la estructura de una página web en HTML5 no será requerida, y esto
lo podemos constatar en el ejemplo anterior.

28
Actividad: Resuelve el laberinto uniendo los conceptos

Nombre: __________________________________________Grupo: _________ Fecha: ___________________
HTML5 sirve para desarrollar….
Sitios web modernos con etiquetas más semánticas

29
PRACTICA
Instrucción:
1. Crea una carpeta nueva y llámala “practicahtml5”
2. Crea una carpeta llamada imagenes dentro de la carpeta practicahtml5
3. Desempaca el archivo Unidad1y2.zip en la carpeta practicahtml5 (contiene 2 páginas y 3 imágenes)
4. Mueve las 3 imágenes a la carpeta imágenes (asegúrate de que las imágenes queden en la carpeta imagenes)
5. Captura el código siguiente y guárdalo como index.html en la carpeta practicahtml5
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name=”author” content=”Nombre del alumno”/>
<title>Mi Página Web con HTML5</title>
</head>
<body>
<div id ="contenedor">
<header id="cabecera">
<h1>Diseño y elaboración de páginas WEB</h1>
</header>
<nav id="menu">
<a href="index.html">Inicio</a> <a href="acercade.html">Acerca de..</a>
</nav>
<section id="contenido">
<h2>Diseño y Elaboración de Páginas WEB</h2>
<h3 class="centrado">Docente: M.S.I. Alfredo Contreras Méndez</h3>
<p >Estas páginas de ejemplo te servirán para apoyarte en la elaboración de sitios WEB utilizando HTML5</p>
<p>Antes se maquetaba con div's, ahora ya existen las etiquetas header, nav, section, article, aside, footer y otras con un
sentido semántico para evitar el uso de div's.</p>
<p>Analiza detenidamente estos ejemplos para que aprendas a usar estas nuevas etiquetas.</p>
<p>También analiza los estilos para maquetar y los estilos básicos que se ocupan para cambiar la apariencia de los
contenidos.</p>
<figure class="centrado">
<img src="imagenes/disenioweb.png" alt="Diseño WEB" title=”Diseño WEB”>
<figcaption>Diseño de páginas WEB </figcaption>
</figure>
</section>
<aside id="otrainfo">
<a href="unidad1.html">Unidad 1</a> <br />
<a href="unidad2.html">Unidad 2</a>
</aside>
<footer id="piedepag">
Contacto: alfredcmmx@hotmail.com
</footer>
</div>
</body>
</html>

30
PRACTICA
Instrucción: Captura los siguientes estilos y guárdalo como maquetahtml5.css en la misma ubicación que index.html
Sugerencia: Ve guardando tus estilos conforme vas avanzando y ve probando en el explorador para que observes como
va cambiando tu página al ir adicionando los estilos.
/*estilos para maquetar*/

#contenedor{
border:1px solid #FF0000;
width:70%;
margin:auto; }
#cabecera{
text-align:center; }
#menu{
background-color:#81BEF7;
#otrainfo{
float:left;
width:20%;
#contenido{
float:right;
background-color:#CEECF5;
width:80%; }
#piedepag{
clear:both;
background-color:#A9E2F3; }
/*estilos para la pagina*/

body { font-family: Tahoma, Arial; font-size: 18pt; }
p { color: blue; margin: 30px 50px 30px 50px; text-align: justify; }
h1 { color: brown; font-family: Broadway,Tahoma; text-align: center; }
h2 { color: yellow; background-color: green; text-align: center; }
.centrado { text-align: center; }
PRACTICA
Instrucción: Realiza los siguientes pasos para ver como cambia la apariencia de tu página index.html
1. Agrega la siguiente etiqueta a la página index.html colocándola después de la etiqueta <title>
<link rel="stylesheet" type="text/css" href="maquetahtml5.css">
2. Abre la página index.html en tu explorador

3. Prueba los links de la unidad 1 y unidad 2 (te debe mostrar el contenido de las páginas unidad 1 y unidad 2)
31
RETROALIMENTACION SOBRE LA PRACTICAS DE LA PAGINA INDEX Y EL ARCHIVO DE HOJAS DE ESTILO
Instrucción: A partir de las prácticas hechas, contesta las siguientes preguntas:

Alumno: _____________________________________________ Grupo: _______ Fecha: ______________
1. ¿Qué observaste o que notaste al ver la página index.html sin estilos?
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
2. ¿Qué observaste o que notaste al probar nuevamente la página index.html pero ya con estilos?
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
3. ¿Qué porcentaje de la pantalla abarca la página? __________________________________________________
4. ¿Cómo sale justificado el menú de la página? a) centrado b) a la derecha c) a la izquierda
5. ¿De qué color sale el fondo del menú? __________________________________________________________
6. ¿Con qué tipo de letra se muestra el texto de la página index.html ya con los estilos? _____________________
7. ¿De qué color sale el texto de todos los párrafos? __________________________________________________
8. ¿De qué color sale el título “Diseño y elaboración de páginas WEB”___________________________________________
9. ¿Cómo salen justificadas las imágenes? a) centradas b) a la derecha c) a la izquierda
10. ¿Cuál crees que sea el atributo para hacer que un contenido flote a la derecha o a la izquierda? _____________

32
Actividad: Luego de aprender sobre hojas de estilo y las etiquetas básicas de HTML5, resuelve el siguiente crucigrama
Nombre: __________________________________________Grupo: _________ Fecha: ___________________

33
MAQUETACION
La maquetación de una página o sitio WEB es la tarea de diseñar la estructura que tendrá la página o el sitio
web, es decir, se debe decidir y hacer un diseño adecuado para presentar la información especificando
claramente dónde saldrá el logo o el título principal, donde saldrá el menú de navegación, donde y como saldrán
los contenidos. La maquetación nos servirá para darle una estructura adecuada a los contenidos de cada sección
de nuestras páginas WEB.
En este proceso de maquetar también es muy importante saber el tipo de información se va a publicar y hacia
quienes se dirige dicha información pues de esto también depende las secciones que se van a incluir, el tipo de
letra a utilizar, los colores que se van a utilizar y el tipo y tamaño de imágenes que se van a mostrar.
Al observar la siguiente imagen podemos comprender mucho mejor lo que es la maquetación y podemos ver:
1. Un encabezado principal centrado en la parte de arriba

2. Abajo del encabezado un apartado para el menú de navegación también centrado y con dos enlaces
3. Abajo del menú de navegación hay un apartado con dos enlaces que también salen centrados y que se
muestra a la izquierda y utilizando solo un porcentaje de la pantalla
4. A la derecha vemos el contenido principal con un título centrado y utilizando un porcentaje mayor que
el menú de la izquierda
5. Al final un apartado con un correo justificado a la izquierda en el pie de página.
6. Y todo esto con ciertos colores pensados con anticipación para hacer atractivo nuestro sitio web
Imagen de la página “index.html” maquetada
Conclusión
Usando las nuevas etiquetas que nos proporciona HTML5 (header, nav, section, aside, footer, article, etc.) y
apoyándonos con hojas de estilo podremos maquetar nuestras páginas WEB con la finalidad de hacer amena la
visita y la lectura de la información publicada en nuestro sitio web.

34
RETROALIMENTACION SOBRE MAQUETACION
Instrucción: A partir del tema de maquetación, contesta las siguientes preguntas:

1. ¿Qué es la maquetación?
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
2. ¿Para qué sirve la maquetación?
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
3. ¿Qué otro tipo de cosas es importante saber para planear el diseño de la maquetación de un sitio web?
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
4. ¿Es cierto o falso que cuando diseñamos la maquetación de una página web decidimos donde se mostrará
cada apartados, sección o contenido? ______________________
5. ¿Es cierto o falso que con las etiquetas header, nav, section, aside, footer, article podemos definir de
manera más clara cada sección principal de nuestras páginas web? _______________________
6. ¿Es cierto o falso que para la maquetación debemos contemplar el tipo de información y a quien se va a
dirigir esa información para definir colores, tipo de letra, secciones y el tipo y tamaño de las imágenes?
_______________________
7. ¿Es cierto o falso que el uso adecuado de colores, colocación de contenidos, tipo de letra, tamaño y tipo de
las imágenes tiene la finalidad de hacer amena la visita y la lectura de la información publicada en nuestro
sitio web?

35
MODELO DE CAJA
El modelo de caja es una manera de representar el comportamiento de los elementos que se colocan en una
página web.
Este modelo esta inevitablemente vinculado al proceso de maquetación porque todo lo que se coloca en una
página web es literalmente una caja y debemos conocer los atributos o propiedades elementales para modificar
el comportamiento de cada caja que se coloca en una página, y por otro lado al hablar de atributos o
propiedades necesariamente tenemos que usar código CSS para lograr que cada elemento se comporte como
lo necesitemos.
La siguiente imagen representa el modelo de caja básico:
ATRIBUTOS DE ANCHO Y ALTO
En el modelo de caja para tener mejor control sobre cada elemento de una página WEB primero es necesario
asignarles valores a los atributos width (ancho) y height (alto) usando código CSS.
Importante: Recordemos que para poner valores a los atributos en CSS generalmente se expresan en pixeles o
porcentajes y aunque hay otras medidas como centímetros y pulgadas los pixeles y el porcentaje son más
comunes.
ZONAS DE UN ELEMENTO EN HTML EN EL MODELO DE CAJA
Con el alto y ancho establecido también podemos trabajar atributos para hacer referencia a una zona concreta
de un elemento HTML y darle un comportamiento diferente.
Cada elemento que pongamos en una página tiene los atributos top, bottom, left, right y center y poniéndoles
un valor adecuado en pixeles podremos modificar su comportamiento. En la siguiente imagen podemos ver las
zonas de estos atributos.

36
Al igual que los atributos anteriores, con el alto y ancho establecido también podremos asignarle valores a los
atributos margin, padding y border para modificar el comportamiento de los elementos que coloquemos en
una página.
ATRIBUTO MARGIN (margen)

Los márgenes (que se establecen con el atributo margin) son los espacios que hay entre los bordes del
elemento en cuestión y los elementos adyacentes. Podemos aplicar diferentes márgenes a cada zona de un
elemento utilizando cada una de las propiedades que se muestran en la siguiente imagen, o dejando al
navegador que lo haga de forma automática indicando el valor auto para el atributo margin.
Truco: Existe un truco muy sencillo y práctico para centrar un elemento en pantalla. Basta con aplicar un ancho
fijo al contenedor (width:500px, por ejemplo) y luego aplicar un margin:auto. De esta forma, el navegador, al
conocer el tamaño del elemento (y por omisión, el resto del tamaño de la ventana) se encarga de repartirlo
equitativamente entre el margen izquierdo y el margen derecho, quedando centrado el elemento.
ATRIBUTO PADDING (Espaciados)
Los espaciados (que se establecen con el atributo padding) son los espacios que hay entre los bordes del
elemento en cuestión y el contenido del elemento. No confundir con el atributo margin
Al igual que con los márgenes, los espaciados tienen varias propiedades para indicar el espacio en cada zona:
ATAJOS DEL ATRTIBUTO MARGIN Y PADDING
Al igual que en otras propiedades de CSS, también existen atajos para margin y padding

37
Actividad: Encuentra e ilumina los siguientes conceptos sobre el modelo de caja en la sopa de letras

38
RETROALIMENTACION SOBRE MAQUETACION y MODELO DE CAJA
Instrucción: A partir del tema de maquetación y el modelo de caja, contesta las siguientes preguntas:
Alumno: _____________________________________________ Grupo: _______ Fecha: _________________
1. ¿Qué es la maquetación?
__________________________________________________________________________________________
__________________________________________________________________________________________
2. ¿Es cierto o falso que todo elemento que se coloca en una página web es literalmente una caja? ________
3. ¿Es cierto o falso que al hablar de atributos o propiedades necesariamente debemos usar código CSS para
modificar el comportamiento de las cajas que se colocan en una pagina web? _____________________
4. ¿Cuáles son los atributos a los que primero le debemos poner valores para tener mejor control sobre cada
elemento de una página WEB? _________________________
5. ¿Es cierto o falso que para poner valores a los atributos en CSS generalmente se expresan en pulgadas?
_____________
6. ¿Cuáles son los atributos de zonas de un elemento en html en el modelo de caja?
______________________________________________________________________________________________
7. ¿Cuál es el atributo para modificar los espacios que hay entre los bordes del elemento en cuestión y los
elementos adyacentes? _____________________
8. ¿Cuál es el atributo para modificar los espacios que hay entre los bordes del elemento en cuestión y el
contenido del elemento? _____________________
9. ¿Cuál es el truco para centrar cualquier elemento en una página?
__________________________________________________________________________________________
__________________________________________________________________________________________
10. ¿Cuáles son los 4 atributos que podemos modificar con padding?
______________________________________________________________________________________
11. ¿Cuáles son los 4 atributos que podemos modificar con margin?
______________________________________________________________________________________

39
VALIDACION DE CSS
La W3C también nos ofrece un servicio de validación de código de hojas de estilo (CSS) que tenemos a nuestra disposición
para apoyarnos y asegurarnos de que nuestro código está bien escrito de acuerdo a las normas que dicta la W3C para
HTML5.
PRÁCTICA
1. Visita el sitio https://jigsaw.w3.org/css-validator/#validate_by_input para validar tu código CSS

2. Copia el código del archivo maquetahtml5.css que capturaste y pégalo en la pestaña “Mediante Entrada
Directa” y haz clic en el boton (si hay errores verifica tu captura, algo capturaste mal)
3. Captura las siguientes 2 pantallas como evidencia
4. Valida el código HTML de la página index.html

5. Captura las 2 pantallas donde validas el código HTML de la página index.html

40
CSS3
CSS3 (Cascading Style Sheets - hojas de estilo en cascada) es la versión más actualizada de CSS. Soporta todo
lo que ya se sabe de CSS versión 1 y CSS2. Actualmente con CSS3 podemos hacer cosas que antes solo eran
posibles con software de diseño especializado. Con CSS3 podemos por ejemplo poner bordes redondeados,
sombras, degradados y muchas cosas más.
Los bordes redondeados y sombras en CSS3 se verían como se muestra en la siguiente imagen:
Ejemplo de Bordes redondeados y sombra

En el recuadro de la derecha indicamos que las cajas div tendrán <style type="text/css">
div {
un borde redondeado de 9px y una pequeña sombra desplazada border: 4px solid #000000;
5px a la derecha y 10px hacia abajo. border-radius: 9px;
box-shadow: 5px 10px #888888;
padding: 10px;
}
</style>
FUENTES EXTERNAS
Una fuente externa es una fuente que no viene con el sistema operativo y para usarlas se deben descargar o
se debe hacer referencia a una fuente online en internet para poder usarla.
LA REGLA @font-face
@font-face es una regla que se usa en CSS3 y nos permite mostrar una fuente o tipografía externa en
nuestras páginas. Todo ello se hace con código CSS relativamente fácil.

41
FUENTES WEB GRATUITAS

Es posible usar y descargar fuentes externas en diferentes páginas web donde se ofrecen archivos de fuentes
gratuitos. Es difícil decir cuál es la página que ofrece las mejores fuentes, entre otras cosas porque en estas
páginas hay cambios continuos y se van incorporando nuevas fuentes y nuevos formatos. A continuación
encontrarás una relación de sitios que permiten el uso de fuentes gratuitas, sin recomendar ninguno en concreto.
Pruébalos y usa el que más te guste.
Nombre URL Comentarios
Colección de fuentes no sólo para desarrollos web. Archivos de descarga

Font Squirrel http://www.fontsquirrel.com/
disponibles en determinados formatos.
Da Font http://www.dafont.com/ Colección de fuentes con clasificación por temáticas.
Servicio de google que ofrece fuentes gratuitas. Google ofrece una url que
Google Fonts http://www.google.com/fonts permite enlazar al archivo de fuente alojado en sus servidores, o también
la descarga de la fuente.
Ejemplo para insertar una fuente externa con @font-face
El siguiente ejemplo hará que el contenido que pongas en la etiqueta h1 se muestre con una fuente diferente.
Nota: Toma en cuenta que para que funcione este ejemplo debes descargar la fuente y colocarla en la ruta
especificada por el atributo src.
@font-face{
font-family: "HoboStd";
src: url(HoboStd.otf) format("opentype");
}
h1{ font-family:HoboStd; }
Ejemplo para probar enlazar una fuente desde GoogleFonts. Prueba lo siguiente en una de tus páginas.
1. Agrega la siguiente línea antes de la etiqueta de cierre <head>
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter&display=swap" rel="stylesheet">
2. Agrega estos estilos en tu archivo de estilos
h3 {font-family: 'Architects Daughter', cursive; color:#09C;}
3. Prueba tu página y veras que lo que esté dentro de la etiqueta <h3> saldrá con una tipografía diferente

42
RETROALIMENTACIÓN SOBRE HOJAS DE ESTILO Y FUENTES EXTERNAS
Instrucción: A partir de los temas de CSS3 y fuentes externas, contesta las siguientes preguntas:
1. ¿Qué significa CSS?

__________________________________________________________________________________________
__________________________________________________________________________________________
2. ¿Es cierto o falso que CSS3 es la versión más actualizada de hojas de estilo? _________________________
3. Menciona 3 cosas que se pueden hacer con CSS3 y que antes solo se podía hacer con software
especializado
__________________________________________________________________________________________
4. ¿Qué es una fuente externa?
__________________________________________________________________________________________
__________________________________________________________________________________________
5. ¿Qué es @font-face y para que sirve?

__________________________________________________________________________________________
__________________________________________________________________________________________
6. ¿Cuáles son las dos maneras de incluir una fuente externa a una página web?
__________________________________________________________________________________________
__________________________________________________________________________________________
7. ¿En dónde puedes encontrar fuentes externas para usarlas sin costo?
__________________________________________________________________________________________
8. ¿Cuál es la etiqueta de HTML que se usa para incluir una fuente externa en una página web?
__________________________________________________________________________________________

43
DOM
El Modelo de Objetos del Documento (DOM) permite ver una página WEB de otra manera, en donde el
contenido del documento se ve como un conjunto de objetos que lenguajes como Javascript o JQuery pueden
actuar sobre ellos para acceder a cualquier elemento y manipularlo.
¿Qué es el Modelo de Objetos del Documento?

Acorde al W3C el Modelo de Objetos del Documento es una interfaz de programación de aplicaciones (API)
para documentos válidos HTML El DOM define la estructura lógica de los documentos y el modo en que se
accede y manipula.
El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los elementos en un
árbol de nodos. Cada elemento se convierte en un nodo y cada porción de texto en un nodo de texto. Para
comprender más fácilmente véase el siguiente ejemplo:
<body>
<p>Esto es un párrafo que contiene <a href="#">un enlace</a> en el medio. </p>
<ul>
<li>Primer punto en la lista</li>
<li>Otro punto en la lista</li>
</ul>
</body>
Como puede verse un elemento <a> se encuentra localizado dentro de un elemento <p>, convirtiéndose en
un nodo hijo, o simplemente hijo del nodo <p>, de manera similar los dos nodos li son hijos del mismo padre
<ul>, llamándose nodos hermanos o simplemente hermanos.
La importancia de validar el HTML
Si los elementos son anidados de manera inadecuada pueden generarse problemas, véase la siguiente línea:
<p>Estos elementos han sido <strong>incorrectamente </p>anidados </strong>
El árbol de nodos resultaría incorrectamente anidado del todo, por tanto generará errores inesperados en los
navegadores. Por eso es muy importante validar el código HTML y mantener un orden correcto para evitar
tales problemas.

44
JAVASCRIPT
JavaScript es un lenguaje de programación ligero parecido a Java y C++ pero muy diferente en cuanto a
capacidades. JavaScript sirve como complemento para programar páginas WEB, mientras que Java es un
potente y mucho más complejo lenguaje de programación que está en la misma categoría de C y C++ y es
utilizado para desarrollar aplicaciones de todo tipo. Entre las diferencias de JavaScript frente a C, C++ o Java
es que en JavaScript no es necesario declarar las variables y tampoco es obligatorio terminar las sentencias
con punto y coma como lo exige C, C++ y Java.
JavaScript es un lenguaje mucho más flexible y muy ligero y todo el código se interpretan y ejecuta del lado del
cliente es decir, todo el código JavaScript es ejecutado por el explorador de internet –
JavaScript le da dinamismo a nuestras páginas web, es decir, se pueden hacer cosas que no son posibles con
HTML, por ejemplo con JavaScript se puede validar la entrada de datos en un formulario antes de ser enviados
al servidor, ocultar o mostrar cualquier elementos HTML en una página, crear algunas animaciones y efectos,
enviar mensajes de aviso, pedir confirmación antes de hacer algo, se puede poner la fecha y hora en una
página, ejecutar algún proceso al hacer clic en algún botón o imagen, hacer algo al pasar el mouse sobre un
elemento HTML. En realidad es infinita la gama de posibilidades que se pueden hacer con JavaScript.
Es bien sabido que los diseñadores de páginas web normalmente no son programadores experimentados, sin
embargo JavaScript es un lenguaje con una sintaxis parecida a C, C++ y Java, de tal forma que con un poco
de experiencia en programación muchos diseñadores web pueden adicionar pequeños "fragmentos" de código
JavaScript en las páginas HTML.
Para ejecutar el código JavaScript puede hacerse de 2 maneras:

1. Escribirlo el código directamente entre las etiquetas <script type=”text/javascript”> … </script>, dentro
de las etiquetas <head>…</head> y después de la etiqueta <title>
2. Poniendo el código en un archivo independiente con extensión .js y este archivo se debe asociar a la
página que lo usará. La referencia al archivo .js la vemos en la siguiente línea y puede colocarse dentro
de la etiqueta <head> pero de preferencia debe colocarse antes de cerrar la etiqueta <body>.
<script src="NombreArchivo.js" type="text/javascript"></script>.
Se recomienda la segunda forma donde el código está en un archivo independiente y éste se asocia a la página
WEB porque esto ayuda para efectos de optimización a la hora de cargar el código javascript, adema es más
fácil darle mantenimiento y se reutiliza en caso de que algún bloque de código sea utilizado para varias páginas.

45
Observa el siguiente ejemplo que simula un saludo en JavaScript.
Ejemplo:
<!doctype html>
<html>
<head>
<title>Saludo en java Scrpt </title>
<script type="text/javascript">
function enviaSaludo()
{ alert("kiobole.... saludos " + document.getElementById('txtCaja').value); }
</script>
</head>
<body>
<h2>Ejemplo basico de JavaScript</h2>
<input type="text" id="txtCaja" value="" />
<button type="button" onclick=" enviaSaludo();">Saludo</button>
</body>
</html>
Práctica: Captura el código anterior, guarda tu página como jsSaludo.html y prueba para ver su
comportamiento.

46
jQuery
jQuery es una biblioteca de funciones de JavaScript, que sirve para simplificar la manera de interactuar
con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar
interacción con la técnica AJAX a las páginas web. jQuery es una de las bibliotecas de JavaScript más
utilizada.
jQuery es software gratuito, libre y de código abierto, permitiendo su uso en proyectos libres y privados. Al igual
que otras bibliotecas, jQuery ofrece una serie de funcionalidades basadas en JavaScript que de otra manera
requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes
resultados en menos tiempo y espacio.
jQuery es uno de los complementos más esenciales para el desarrollo web, usado en millones de sitios en toda
la web, ya que nos facilita mucho el desarrollo de aplicaciones enriquecidas del lado del cliente
Para los que se inician, conviene aclarar que jQuery no es un lenguaje, sino una serie de funciones y métodos
de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería que podemos usar si queremos
facilitar nuestra vida cuando programamos en Javascript. A veces nos podemos referir a jQuery como framework
o incluso como un API de funciones útiles en la mayoría de proyectos web.
Nota: Un framework es una biblioteca de códigos con muchas funcionalidades listas para usarse. Estos códigos
tienen la finalidad de facilitar la vida del desarrollador.

47
Como se incluye jQuery en una Página WEB
Se puede incluir la biblioteca en línea desde el sitio oficial de jQuery como se muestra en el ejemplo de abajo,
pero también se puede descargar el archivo y tenerlo localmente si no se tiene acceso a internet. En tiempo de
desarrollo se pude trabajar con la versión no comprimida pero cuando el sitio está listo para liberarse se sugiere
que se use la versión comprimida de jQuery.
<!doctype html>
<html>
<head>
<title>Ocultar párrafos con jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function()
{
$("p").click(function()
{
$(this).hide();
});
});
</script>
</head>
<body>
<p>Si haces clic sobre mi desapareceré.</p>
<p>haz clic sobre mi!</p>
<p>haz clic sobre mi también!</p>
</body>
</html>
Práctica: Captura el código anterior, guarda tu página como jQueryOcultar.html y prueba para ver su
comportamiento.

48
RETROALIMENTACIÓN SOBRE JAVASCRIPT Y JQUERY
Instrucción: A partir de los temas de JavaScript y JQuery, contesta las siguientes preguntas:
1. ¿Qué es JavaScript y para qué sirve?

__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
2. ¿Es cierto o falso que JavaScript es un lenguaje mucho más flexible y muy ligero y todo el código se
interpretan y ejecuta del lado del cliente? _________________________
3. ¿Cuáles son dos diferencias entre JavaScript vs C, C++ y Java?

__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
4. ¿Es cierto o falso que JavaScript le da dinamismo a nuestras páginas web, es decir, se pueden hacer cosas
que no son posibles con HTML?
_______________________
5. Escribe 5 cosas que se pueden hacer con JavaScript y no se puede con HTML
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________

49
6. ¿Cuáles son las dos formas de incluir JavaScript en una página web?
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
7. ¿Por qué se recomienda la segunda forma de incluir código JavaScript en un archivo independiente
asociado a una página web?
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
8. ¿Qué es JQuery y para qué sirve?
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
9. ¿Es cierto o falso que jQuery es software gratuito, libre y de código abierto,? ________________________
10. ¿Es cierto o falso que jQuery es uno de los complementos más esenciales para el desarrollo web, usado en
millones de sitios en toda la web? ___________________________
11. ¿Es cierto o falso que jQuery no es un lenguaje, sino una serie de funciones y métodos de Javascript?
____________
12. ¿Es cierto o falso que Javascript es el lenguaje y jQuery es una librería que podemos usar si queremos
facilitarnos la vida programando?
____________

50
PROYECTO PERSONAL
Realizar de manera individual un sitio acerca de un tema que te agrade o que domines o que para ti sea interesante y que
quieras compartir. El tema es libre pero debe ser un tema propositivo, que le sirva a alguien, que motive a alguien o que
haga crecer y desarrollarse personal o profesionalmente a quien lo vea.
➢ Tomar como base el ejercicio de la página index.html de las páginas 30 y 31.

➢ Proponer un título oficial a tu proyecto
➢ Investigar y obtener toda la Información detallada del tema que abordarás
➢ Obtener las imágenes que consideres de interés para tu proyecto
➢ Descargar videos o audios que consideres incluir en tu proyecto de manera local
➢ Obtener links de videos en Youtube que consideres incluir
➢ Obtener sitios (links) de internet que puedas incluir o sugerir en tu proyecto
➢ Incluir en un apartado tu información básica personal como el ejercicio de de la pág. 22 (Tu decides
que contar acera de ti)
PROYECTO EMPRESARIAL
En equipo de 2 o 3 alumnos realizar un sitio WEB sobre un negocio propio o ajeno. Aplicando todo lo aprendido en el
módulo y proponiendo cosas nuevas a partir del aprendizaje logrado.
➢ Tomar como base el ejercicio de la página index.html de las páginas 30 y 31.

➢ Proponer el nombre oficial del negocio
➢ Usar el lema que ya tenga el negocio o quizá proponer un lema nuevo del negocio
➢ Redactar la misión y la visión del negocio sobre el que van a trabajar
➢ Determinar la Imagen o logotipo representativa del negocio
➢ Obtener fotos, imágenes y la Información descriptiva y detallada de los productos o servicios a ofrecer (Toda la
información que deba ser publicada para los posibles visitantes del sitio)
➢ Obtener los precios de los productos o servicios que se ofrecen
➢ Obtener promociones, descuentos si es que se tienen
➢ Obtener teléfonos, dirección y ubicación en maps

51
ELIGE LA MAQUETACIÓN DE ACUERDO A LO QUE VAYAS A PRESENTAR
Encabezado, Banner, Logo o combinación

Encabezado, Banner, Logo o combinación Navegación
Contenido
Navegación Contenido
Contacto, Redes
Contacto, redes

Navegación Contenido Temas Navegación
Contenido Temas
relacionados
relacionados
Contacto, Redes
Contacto, Redes
OTROS ASPECTOS A CONSIDERAR
a. Tu página principal se debe llamar index.html

b. Debes utilizar las nuevas etiquetas de HTML5 (header, nav, section, aside, footer, article, etc.)
c. Si usas h1, solo debe existir un h1 en tu proyecto en la etiqueta header
d. Puedes usar los estilos que yo te compartí y modificarlos y proponer tus propios estilos
e. Puedes proponer la maquetación que más te agrade o que más se adecue a tu proyecto
f. Todo tu sitio debe mantener los mismos estilos
g. Debes elegir los colores primarios y secundarios y buscar combinaciones adecuadas para fondos, tipografía,
bordes, sombras, etc.
Indicaciones adicionales para los contenidos principales:

✓ Puedes proponer un banner o logo pero la altura debe ser máximo de hasta 120px
✓ Debes incluir párrafos en negritas y cursivas (p, strong, em)
✓ Debes incluir imágenes y centrarlas (img)
✓ Debes incluir listas (ul,ol,li)
Reglas de oro:
1. Planea bien el contenido de tu sitio y lo que vas a mostrar.
2. Planea bien el juego de colores que utilizaras para tu sitio.
1. Planea y piensa bien la maquetación y lo que pondrás en la página “index.html” para que después solo la copies,
la guardes con otro nombre y le modifiques solamente el apartado del contenido.
2. Realiza bosquejos a lápiz y en tu libreta de como más o menos quedaría maquetado tu sitio
a. Indica la imagen o el logo y tu imagen de encabezado
b. Analiza cómo quedaría tu menú de navegación
c. Analiza que pondrás en el apartado del contenido
d. Analiza si será necesario poner un apartado lateral
e. Analiza que pondrías en el pie de pagina

52
LISTA DE EVIDENCIAS PARA COLOCAR EN TUS SITIOS PERSONAL y EMPRESARIAL
Evidencia Obligatorio Si No
Usa la estructura básica de una página web escrita en HTML5 SI
Incluye etiqueta <meta name=”author”>, <meta name=”keywords”>, <meta Opcional
name=”description”>
Aplica negritas y cursivas a textos Si
Incluye links a otros sitios u otra página dentro del texto de los párrafos Si
Incluye imágenes jpg o png Si
Centra las imágenes Si
Aplica sombreado a texto o algún otro elemento Si
Aplica bordes redondeados al menos a un elemento Si
Incluye una fuente externa Si
Incluye videos propios o de Youtube en algún apartado Si
Incluye audio en algún apartado Opcional
Incluye colores primario y secundario logrando una combinación atractiva y adecuada Si
para reflejar los colores en fondos, sombras, bordes, tipografía, etc.
Incluye algún código de Javascript o jQuery para alguna animación o interactividad Opcional
Incluye el icono de la página (favicon) Si
Usa listas aplicando estilos con CSS Si
Incluye un menú de navegación usando listas desordenadas con estilos usando CSS Si
Incluye ubicación con google maps Opcional
Aplica los mismos estilos a todas las páginas del sitio Si

53
CONCLUSIÓN
Aprender a implementar sitios web con las tecnologías de HTML5 es sin duda un conocimiento
fundamental para fortalecer las capacidades y habilidades de los alumnos del 6to semestre. Hoy en
día las empresas requieren de personal capacitado y calificado para implementar sitios WEB que les
den más presencia a través de Internet.
El dominio de las tecnologías para implementar sitios web ofrece grandes posibilidades a quien las
domine pues las empresas cada vez seleccionan a los mejores y esto cada vez hace más difícil la
competencia entre los candidatos a ser web masters.
El alumno debe tener conciencia de que las certificaciones sobre normas de competencias son
esenciales en la actualidad para poder competir con los mejores y por tal razón debe prepararse cada
día con más esfuerzo si pretenden ubicarse en el campo laboral que les brinde oportunidades a las
que aspira.
Esta materia es fundamental ya que les da la oportunidad de fortalecer y aprender mucho más sobre
muchas tecnologías y técnicas en el área de desarrollo de sistemas enfocados a la plataforma de
interenet, y, sin lugar a dudas estos fundamentos le serán de gran ayuda en su vida laboral y
profesional.
BIBLIOGRAFÍA
Introducción a XHTML
Javier Eguiluz Pérez
Marzo de 2013
Introducción a CSS
Javier Eguiluz Pérez
Mayo de 2009
WEBLIOGRAFÍA
http://librosweb.es/libro/xhtml/
http://librosweb.es/libro/css/
https://desarrolloweb.com/

54

Manual DEPW Unidad 1 - Pags 27-54

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual DEPW Unidad 1 - Pags 27-54

Cargado por

Copyright:

Formatos disponibles

Manual para Diseño y Elaboración de Páginas WEB

EJEMPLO DE UNA ESTRUCTURA DE UNA PÁGINA WEB USANDO LA ETIQUETA <DIV>

EJEMPLO DE UNA ESTRUCTURA DE UNA PÁGINA WEB USANDO ETIQUETAS de HTML5

Docente: L.I y M.S.I. Alfredo Contreras Méndez

ESTRUCTURA BASICA DE UNA PAGINA WEB CON ETIQUETAS DE HTML5

Docente: L.I y M.S.I. Alfredo Contreras Méndez

Actividad: Resuelve el laberinto uniendo los conceptos

HTML5 sirve para desarrollar….

Sitios web modernos con etiquetas más semánticas

Docente: L.I y M.S.I. Alfredo Contreras Méndez

Docente: L.I y M.S.I. Alfredo Contreras Méndez

/*estilos para maquetar*/

/*estilos para la pagina*/

<link rel="stylesheet" type="text/css" href="maquetahtml5.css">

2. Abre la página index.html en tu explorador

RETROALIMENTACION SOBRE LA PRACTICAS DE LA PAGINA INDEX Y EL ARCHIVO DE HOJAS DE ESTILO

Instrucción: A partir de las prácticas hechas, contesta las siguientes preguntas:

1. ¿Qué observaste o que notaste al ver la página index.html sin estilos?

3. ¿Qué porcentaje de la pantalla abarca la página? __________________________________________________

4. ¿Cómo sale justificado el menú de la página? a) centrado b) a la derecha c) a la izquierda

5. ¿De qué color sale el fondo del menú? __________________________________________________________

7. ¿De qué color sale el texto de todos los párrafos? __________________________________________________

8. ¿De qué color sale el título “Diseño y elaboración de páginas WEB”___________________________________________

9. ¿Cómo salen justificadas las imágenes? a) centradas b) a la derecha c) a la izquierda

Docente: L.I y M.S.I. Alfredo Contreras Méndez

Nombre: __________________________________________Grupo: _________ Fecha: ___________________

Docente: L.I y M.S.I. Alfredo Contreras Méndez

1. Un encabezado principal centrado en la parte de arriba

Imagen de la página “index.html” maquetada

Docente: L.I y M.S.I. Alfredo Contreras Méndez

RETROALIMENTACION SOBRE MAQUETACION

Instrucción: A partir del tema de maquetación, contesta las siguientes preguntas:

2. ¿Para qué sirve la maquetación?

Docente: L.I y M.S.I. Alfredo Contreras Méndez

La siguiente imagen representa el modelo de caja básico:

ATRIBUTOS DE ANCHO Y ALTO

ZONAS DE UN ELEMENTO EN HTML EN EL MODELO DE CAJA

Docente: L.I y M.S.I. Alfredo Contreras Méndez

ATRIBUTO MARGIN (margen)

ATRIBUTO PADDING (Espaciados)

ATAJOS DEL ATRTIBUTO MARGIN Y PADDING

Docente: L.I y M.S.I. Alfredo Contreras Méndez

Alumno: _____________________________________________ Grupo: _______ Fecha: ______________

Docente: L.I y M.S.I. Alfredo Contreras Méndez

RETROALIMENTACION SOBRE MAQUETACION y MODELO DE CAJA

6. ¿Cuáles son los atributos de zonas de un elemento en html en el modelo de caja?

9. ¿Cuál es el truco para centrar cualquier elemento en una página?

Docente: L.I y M.S.I. Alfredo Contreras Méndez

1. Visita el sitio https://jigsaw.w3.org/css-validator/#validate_by_input para validar tu código CSS

4. Valida el código HTML de la página index.html

Docente: L.I y M.S.I. Alfredo Contreras Méndez

Ejemplo de Bordes redondeados y sombra

Docente: L.I y M.S.I. Alfredo Contreras Méndez

FUENTES WEB GRATUITAS

Nombre URL Comentarios

Colección de fuentes no sólo para desarrollos web. Archivos de descarga

Da Font http://www.dafont.com/ Colección de fuentes con clasificación por temáticas.

Ejemplo para insertar una fuente externa con @font-face

1. Agrega la siguiente línea antes de la etiqueta de cierre <head>

<link href="https://fonts.googleapis.com/css?family=Architects+Daughter&display=swap" rel="stylesheet">

2. Agrega estos estilos en tu archivo de estilos

h3 {font-family: 'Architects Daughter', cursive; color:#09C;}

Docente: L.I y M.S.I. Alfredo Contreras Méndez

RETROALIMENTACIÓN SOBRE HOJAS DE ESTILO Y FUENTES EXTERNAS

/estilos para maquetar/

/estilos para la pagina/

Nombre: ______________________________________Grupo: _ Fecha: _______________

Alumno: _________________________________________ Grupo: _ Fecha: ____________