Programación Módulo III-Cuadernillo

Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y de Servicios

Dirección Académica e Innovación Educativa
Subdirección de Innovación Académica
Aprendizajes esenciales
Carrera: Programación Semestre: Cuarto
Módulo III. Desarrolla aplicaciones Web.

Módulo/Submódulo:
Submódulo 1. Construye páginas Web
Aprendizajes esenciales o
Estrategias de Aprendizaje Productos a Evaluar
Competencias esenciales 1er parcial
Competencia profesional 1: Emplea
HTML para construir páginas web.
Competencia profesional 1: Emplea HTML para
construir páginas web.
Situación 1.1:
Elaborando una página informativa. Evaluación diagnóstica
Evaluación diagnóstica:
Contenido: La evaluación diagnóstica, es un instrumento que tiene el objetivo de Cuestionamientos contestados,
1.1.1. Elementos básicos. reconocer los conocimientos y habilidades que tiene el estudiante acerca correspondiente a la evaluación
1.1.2. Etiquetas y atributos.
de algún tema, en este caso, sobre los elementos que integran a un sitio diagnóstica.
web. Para lograrlo, observa con atención las imágenes que se presentan
1.1.3. Estructura de una página web.
en las figuras 1.1 y 1.2. Con base en los conocimientos de navegación
1.1.4. Títulos, textos y párrafos.
adquiridos en la asignatura de Tecnologías de la Información y la
1.1.5. Formatos, líneas, imágenes,
comunicación (TIC) así como de la vida cotidiana, responde a los
propiedades.
siguientes cuestionamientos:
1.1.6. Listas y tablas. 1. En la figura 1.1, señala la dirección del sitio web que se está mostrando.
2. La dirección de un sitio web se integra por diferentes elementos. En la
dirección que aparece en la siguiente línea, reconoce y asigna los
nombres de cada elemento presentado: http://www.google.com.mx
3. En la flecha 1 colocada en la figura 1, se señala una línea que conduce
al espacio indicado en la figura 1.2. ¿Cuál es el nombre que se le da a
esa línea? ¿Cómo se llama al elemento al que conduce?
4. Menciona la diferencia entre una página y un sitio web.
5. Cuando has navegado en internet en busca de información. ¿Qué
navegador utilizas?
6. Escribe los navegadores que conoces.
Figura 1.1. Captura de pantalla. Tomado de:

http://www.dgeti.sep.gob.mx/
Figura 1.2. Captura de pantalla. Tomado de:

http://www.dgeti.sep.gob.mx/index.php/la-dgeti-hoy/953-regreso-
seguro-a-clases-5
Situación 1.1: Elaborando una página informativa
1.1.1. Elementos básicos
Existen muchas herramientas (tools) que permiten crear, de una forma

fácil y sencilla páginas web eficientes. No obstante, si eres un
principiante en el diseño de páginas web, te será de gran ayuda
considerar lo siguiente:
1. Comprender qué hace que una página web sea eficaz.
2. Ajustar la idea al proceso de diseño.
3. Y lo más importante: ¡disfrutar con el diseño de la página web!
Para iniciar en el fantástico mundo del diseño de sitios web, es
conveniente conocer los términos que se emplean en este ambiente de
desarrollo.
Internet.
La red más amplia utilizada en la actualidad, es internet (Internetwork
System. Sistema de intercomunicación de redes). Podemos citar
conceptos como estos: “(1) Red extensa constituida por una cantidad de
redes menores. (2) Red nacional orientada a la investigación que engloba
más de tres redes gubernamentales y académicas en 40 países”, sin
embargo, también podemos referirnos a ella como: el banco de datos
más grande del mundo o la red de redes, en la cual, se puede encontrar
información de cualquier tema y es útil para científicos, maestros,
estudiantes y público en general.
Web, WWW o W3.

Término muy empleado en la navegación por internet, que nace en 1989
gracias a la propuesta de Tim Berners-Lee, por lo que el 29 de marzo del
año 2014 festejó sus 25 años. Se refiere normalmente a un sistema de

documentos interconectados por enlaces de hipertexto disponibles en
internet. “La World Wide Web es un sistema de hipertexto de internet
que brinda una forma atractiva y sencilla de explorarlo” para esto,
existen diferentes navegadores como: Internet Explorer, Mozilla Firefox,
Google Chrome, Opera, Safari, Netscape Navigator, entre otros, que
conducen hacia los sitios de interés a tan solo unos clics de distancia.
También conocido como red, maya o telaraña, como se observa en la
figura 1.3.
Figura 1.3 Representación amigable de la “telaraña” (web).
Página Web.
Es un único archivo o documento electrónico que puede contener
imágenes, archivos multimedia, texto organizado en párrafos, viñetas o
tablas y otros elementos estáticos o dinámicos, escritos en un lenguaje
de hipertexto conocido como HTML.
Sitio Web.
Es un servidor que contiene páginas web y otros archivos vinculados o
relacionados entre sí mediante hipervínculos, para proporcionar
información atractiva al usuario. Dado que se encuentra en línea las 24
horas al día en internet, es útil como medio informativo permanente e
inclusive permite que el usuario pueda interactuar con sus elementos,

realizando desde búsquedas, compras, comunicación, hasta juegos.
HTML.
Es el lenguaje con el que se escriben las páginas Web, HyperText Mark-
up Language (Lenguaje de marcado de hipertexto), considerado como un
lenguaje de alto nivel, el cual indica a los navegadores cómo mostrar el
contenido de una página Web. Permite escribir texto de forma
estructurada, integrado por etiquetas que marcan el inicio y fin de cada
elemento de la página.
URL.
Localizador uniforme de recursos (Uniform Resource Locator URL). “Los
URL se especifican al explorador para acceder a las páginas Web y se
encuentran incrustados dentro de las mismas páginas, para proveer
enlaces de hipertexto a otras páginas”.
HTTP
El HTTP (Protocolo de Transferencia de Hipertexto) está orientado a
transacciones, en un sistema de petición – respuesta entre un cliente y
un servidor. Es el que define la sintaxis que utilizan los elementos de
software de la arquitectura WEB para comunicarse, por lo tanto, es el
que se utiliza en las transacciones www. A este protocolo se le cataloga
sin estado, puesto que no guarda ninguna información sobre conexiones
anteriores, es por esto que se usan las cookies, que es la información que
un servidor puede almacenar en el cliente, para tomarla cuando necesite
“mantener estado”, de ahí se trabajan con “sesiones”, pero, además,
esto deja una apertura en el sistema cliente para poder localizar usuarios,
ya que las cookies pueden guardarse en el nodo cliente por tiempo
indeterminado. La información que es transmitida por este protocolo,
recibe el nombre de recurso y se identifica mediante un URL.
HTTPS.
Es una versión de http para la transferencia segura de información, que
puede utilizar cualquier método de cifrado siempre que sea entendido
tanto por el servidor como por el cliente.
Actividad 1: Diseñe en su cuaderno de apuntes, un mapa mental con la

información de los elementos básicos para la elaboración de una página
web.
Actividad 1:
Actividad 2: ¡Vamos a jugar! Diseña un crucigrama que contenga los Mapa mental con los elementos
elementos básicos estudiados para que fomentes tu creatividad para básicos para la elaboración de una
organizar el cruce de palabras, al mismo tiempo que ¡aprendes jugando! página web.
1.1.2. Etiquetas y atributos. Actividad 2:

Crucigrama con los elementos básicos
para elaborar una página web.
El proceso de indicar las diferentes partes que componen la información
se denomina marcar (markup en inglés). HTML es un lenguaje de
etiquetas (también llamado lenguaje de marcado) y las páginas web
habituales están formadas por cientos o miles de pares de etiquetas. De
hecho, las letras "ML" de la sigla HTML significan "markup language", que
es como se denominan en inglés a los lenguajes de marcado. Además de
HTML, existen muchos otros lenguajes de etiquetas como: XML, SGML,
DocBook y MathML.
Etiqueta.
Cada una de las palabras que se emplean para marcar el inicio y el final
de una sección se denominan etiquetas o elementos, que están
marcadas por los símbolos < y >. Estos elementos no se muestran en la
página web, sin embargo, son los encargados de la presentación de la
información ante el usuario.
Las etiquetas pueden escribirse indistintamente en minúsculas o
mayúsculas sin que genere un error de sintaxis. Se escriben en parejas,
enmarcando el inicio y fin (salvo algunas excepciones). El nombre inicial

y final es el mismo, distinguiéndose el cierre, al anteponerle una diagonal
(/), tal como se muestra en la figura 1.4. Una de las ventajas de estas
etiquetas es que son muy sencillas de leer y escribir, tanto por las
personas como por los sistemas electrónicos, pero la principal desventaja
es que pueden aumentar considerablemente el tamaño del documento,
es por eso que se usan etiquetas con nombres muy cortos.
Figura 1.4 Etiquetas básicas para el diseño de páginas web.
Atributos.
A pesar de que se trata de un número de etiquetas muy grande, no es
suficiente para crear páginas web complejas. Como no es viable crear
una etiqueta por cada enlace diferente, la solución consiste en
personalizar las etiquetas HTML mediante cierta información adicional
llamada atributos. Los atributos son características específicas que se le
aplican a las etiquetas. Se incluyen siempre dentro de la etiqueta de
inicio, colocando el nombre del atributo, seguido del signo de igual (=) e
inmediatamente después, el valor del atributo entre comillas (" "). Para
separar cada atributo, se emplea el punto y coma (;) o simplemente un
espacio. Algunos atributos se aplican a un elemento concreto, mientras
que otros se pueden usar para muchos elementos diferentes.
Actividad 3:
Ejemplo: observa la sintaxis para enviar un mensaje de bienvenida al Memorama alusivo a las etiquetas
básicas de HTML.
diseño de páginas Web, mediante el uso de etiquetas y atributos, tal
como se observa en la figura 1.5.
Figura 1.5 Etiquetas y atributos para colocar un mensaje en una página

web.
Actividad 3: ¡Vamos a jugar! utilizando elementos que se puedan

reciclar, como cartón, carpetas maltratadas o incluso CD’s en desuso,
diseña un memorama con las etiquetas de la figura 4, de tal forma que
los pares, sean una etiqueta y su acción correspondiente. Una vez
elaborado, invita a tus hermanos o familiares con los que vivas, a jugar y
aprender juntos, fomentando la sana convivencia.
1.1.3. Estructura de una página web.
Un documento HTML inicia con la etiqueta <html> y finaliza con </html>.

Todo lo que se encuentre entre estos elementos, será la página web.
Dentro de <html> </html> se encuentran dos partes diferenciadas.
1. La primera <head> </head> es la cabecera. Reservada para incluir
información que no se refiere directamente al contenido de la página,
como: el título, los metadatos, estilos o código javascript (elementos
que se estudiarán en capítulos venideros). La primera etiqueta que se
suele aplicar es <title> </title>, que indica el título de la página (lo que
el navegador muestra en la barra de títulos).
7. La segunda <body> </body> es el cuerpo. Reservado para
mostrar el contenido de la página: fotos, párrafos, formularios,
texto y todo lo que vemos en una página web.
La estructura básica de una página web es la siguiente:

<html>
<head>
</head>
<body>
</body>
</html>
Ejemplo: para mostrar el empleo de la estructura básica de un

documento HTML, se realiza el diseño de una página, tal como se
muestra en la figura 1.6, con elementos mínimos, cuyo código se observa

en la figura 1.7.
Figura 1.6. Página web básica.
Figura 1.7. Etiquetas para la creación de una página web básica.
Explicación: los números de línea que se observan en la figura,

pertenecen al editor, se muestran solo por comodidad, para la
explicación. Estos números, no se deben incluir en la creación de los
documentos HTML.
En la línea 1, inicia el documento HTML, finalizando en la línea 12.

El encabezado se encuentra delimitado por las etiquetas de las líneas 2 y

6.
El título, se encuentra en la línea 4, delimitado por sus etiquetas en las
líneas 3 y 5.
Entre las líneas 7 y 11, marcadas por el inicio y fin del cuerpo, se coloca
lo que el usuario observará en la página web.
En la línea 8, se muestra un mensaje en negritas. Observa que se
encuentra delimitado por la etiqueta <B> </B>. Al final de la misma la
misma línea, se observa la etiqueta <BR> que indica salto de línea. En el
código HTML pulsar la tecla Enter, no produce un salto de línea visible en
la página, es por esto que se debe indicar de manera explícita.
En la línea 9, se muestra un mensaje en cursiva, delimitado por la
etiqueta <I> </I>, incluyendo dos saltos de línea <BR>.
La última línea mostrada en la página, se encuentra en la línea 10 de la
figura, siendo un texto subrayado delimitado por <U> </U>.
1.1.4. Títulos, textos y párrafos.
Títulos.
La información que se publica en una página web, debe estar organizada,
estableciendo títulos que enmarquen y le asignen la importancia o
jerarquía a lo que se muestra. Para establecer títulos, HTML proporciona
seis diferentes títulos que varían en tamaño, los cuales representan a
niveles de importancia del mayor al menor, representadas por la
etiqueta H1 al H6. Posteriormente, se mostrará cómo se le puede asignar
un formato específico a los títulos de forma manual mediante el cambio
de atributos.
Ejemplo: en la figura 1.8 se muestra el empleo de los seis diferentes

estilos de títulos predefinidos en HTML, en el diseño de los datos para
una portada sencilla, cuyo código se observa en la figura 1.9.
Figura 1.8. Página web con estilos de títulos automáticos.
Figura 1.9. Código para escribir una página web con estilos de títulos
automáticos.
Explicación: en la línea 1, inicia el documento HTML, finalizando en la

línea 15.
El encabezado se encuentra delimitado por las etiquetas de las líneas 2 y
6.
El título, se encuentra en la línea 4, delimitado por sus etiquetas en las
líneas 3 y 5.
Entre las líneas 7 y 14, marcadas por el inicio y fin del cuerpo, se coloca
lo que el usuario observará en la página web, en este caso, los datos de Actividad 4:
una portada sencilla. Documento en el bloc de notas con el
código de la figura 1.9 y página web
En la línea 8, se muestra el nombre de la escuela, delimitada por la ejecutado en un navegador (en caso
etiqueta <H1></H1>, siendo la de mayor rango en los títulos, por lo que de contar con equipo de cómputo), en
se muestra con el mayor tamaño de letra. Se observa también una caso contrario, en el cuaderno de
etiqueta <BR> al final de la línea, para incluir un salto de línea adicional apuntes, con datos cambiados.
en el título principal. Observa que las demás líneas no necesitan de esa
etiqueta dado que las etiquetas de títulos ya incluyen un salto de línea.
De las líneas 9 a la 13, se emplean los títulos siguientes en menor rango.
Observa que mientras más grande es el número que acompaña a la
etiqueta H, menor es el tamaño de letra que se muestra en la página.
Actividad 5:
Página web diseñada en el cuaderno
Actividad 4: si tienes oportunidad de probarlo en una computadora… de apuntes, con las etiquetas
¡Vamos a crearlo! necesarias, empleando una
estructuración adecuada.
Solo necesitas abrir un documento nuevo en un bloc de notas, escribir el
código de la figura 1.9, guardarlo con el nombre pag1.html y con el tipo:
todos los archivos. De preferencia, crea una carpeta con el nombre
ejerWeb para que ahí guardes todas tus páginas. Una vez guardado el
archivo, entra a la carpeta ejerWeb con el explorador de archivos,
localiza la página: pag1.html y ejecuta con doble clic. Si necesitas hacer
cambios, vuelve a guardar después de realizarlos y actualiza la página en
tu navegador web con solo pulsar la tecla F5.
Actividad 5: en tu cuaderno de apuntes, diseña una página web en la que

coloques elementos para una portada, modificando el código de la figura
1.9 para que lo adaptes a los datos de tu plantel, turno e incluyas tanto
tu nombre completo como los nombres del módulo y submódulos
correspondientes al cuarto semestre de tu plan de estudios, empleando
estilos automáticos.
Textos.
Los seres humanos nos comunicamos día a día mediante textos, que
pueden ser orales o escritos. El texto permite la transmisión de mensajes
coherentes y ordenados a través de la palabra o la escritura auxiliándose

de signos que, de acuerdo al contexto, emiten un significado diferente,
pudiendo emplear pocas palabras, hasta un tamaño virtualmente
infinito. Para mostrar la información organizada, se cuenta con el
elemento: párrafo.
Párrafos.
La Real Academia de la Lengua Española, define al párrafo como: “Cada
una de las divisiones de un escrito señaladas por letra mayúscula al
principio de línea y punto y aparte al final del fragmento de escritura”.
Es importante emplear el párrafo para organizar y proporcionar un
sentido apropiado al mensaje que se pretende difundir, colocando en el
párrafo inicial, la idea principal constituida por una oración que muestre
la idea esencial del tema a tratar de la cual dependerán los otros
párrafos.
En HTML para delimitar cada párrafo, se emplea la etiqueta <P> y </P>.

Para que el párrafo se muestre alineado adecuadamente, la etiqueta se
acompaña de los atributos que se presentan en la figura 1.10.
Actividad 6:
Mapa mental con los elementos del
subtema 1.1.4.
Actividad 7:
de apuntes, con las etiquetas
necesarias, empleando una
estructuración adecuada.
Figura 1.10. Alineación de párrafos.
Actividad 6: Diseñe en un mapa mental, los elementos contenidos en el

subtema 1.1.4.
Actividad 7: busca un libro que tengas en casa, localiza el primer capítulo,

lee algunas páginas y selecciona, a manera de resumen, al menos 3
párrafos que consideres importantes. En tu cuaderno de apuntes, diseña
una página web en la que coloques etiquetas y atributos necesarios para
mostrar un letrero con el título del libro, otros para colocar el nombre
del o los autores y la palabra: introducción. Posteriormente, coloca los
párrafos seleccionados, finalizando con la palabra: resumen, la fecha y tu
nombre. Debes incluir las alineaciones siguientes: Los títulos principales
de manera centrada, los párrafos del resumen con alineación justificada,
la fecha a la derecha y los restantes, a la izquierda.
1.1.5. Formatos, líneas, imágenes, propiedades.
Otro de los puntos importantes en el diseño web, es el aspecto que va a

tomar el texto, es decir, la manera en que el usuario apreciará la
información.
La forma de emplear estas etiquetas, inició con la aplicación tanto a
fragmentos de texto como a párrafos enteros cada vez que se necesitara
en la página, sin embargo, este sistema de trabajo ha quedado obsoleto,
puesto que genera código redundante. La forma de trabajo actual
sugiere el empleo de hojas de estilo en cascada (CSS) que estudiaremos
en el tema 1.2.3. En este subtema lo trataremos con los formatos
aplicados directamente al texto, para que conozcas su uso y puedas en
un momento dado, realizar modificaciones a páginas ya existentes y que
aún trabajen bajo este esquema.
Formatos de estilos.
Ya se ejemplificó en uso de la etiqueta H1 a la H6 que escribe títulos de

diferentes tamaños, sin embargo, es conveniente resaltar los textos de
forma más específica, empleando las etiquetas de estilos, tal como se
exponen en la figura 1.11, cuyo resultado en una página web se observa
en la figura 1.12.
Figura 1.11. Etiquetas para aplicarle estilo a un texto.

Figura 1.12. Vista de las etiquetas para aplicarle estilo a un texto.
Formato de fuentes.
Este formato es parecido al sistema que se emplea al darle formato a la
fuente en un procesador de textos, requiere de algunas propiedades
para cambiar de tamaño, tipo de letra y color. Los atributos en HTML para
realizar estos cambios, se muestran en la figura 1.13.
Figura 1.13. Atributos de la etiqueta <FONT></FONT>.

Ejemplo: escribiendo el siguiente código, se presentará la página web de

la figura 1.14.
<FONT SIZE=6 FACE= “Algerian”, “Times New Roman”, “Arial” COLOR=

“Blue”>
Prueba de los atributos de la etiqueta FONT
</FONT>
Figura 1.14. Ejemplo de los atributos de la etiqueta <FONT></FONT>.
Línea horizontal.
En ocasiones es necesario dividir o resaltar algún párrafo, es cuando se
puede utilizar la etiqueta <HR>, que muestra una línea horizontal de
tamaño determinable. Sus atributos se exhiben en la figura 1.15.
Figura 1.15. Atributos de la etiqueta <HR>
Ejemplo: para realiza la página web que se muestra en la figura 1.16, se

escribe el código descrito en la figura 1.17.
Figura 1.16. Modelo de la etiqueta <HR>

Figura 1.17. Código para probar el empleo de la etiqueta <HR>.
Imágenes.
Uno de los elementos más fuertes que tienen los sitios web, es la
inclusión de imágenes, ya que se puede aprovechar el impacto visual
para atraer la atención hacia ella. En la figura 1.18, se muestran los
atributos que dan formato a las imágenes en una página web, los cuales
complementan a la etiqueta <IMG>.
Figura 1.18. Atributos de la etiqueta imagen <IMG>.
Las imágenes aceptadas, dependen del navegador o de un programa

externo que permita su visualización. Dentro de los formatos más
usuales que reconocen los navegadores, se encuentran las imágenes con
extensión .gif, .jpg, .jpeg y .png.
Ejemplo: El código que se muestra en la figura 1.19, muestra la página

que se observa en la figura 1.20.
Figura 1.19. Código para probar la etiqueta <IMG>.
Figura 1.20. Muestra de la etiqueta <IMG>.
Propiedades de la página.
Actividad 8:
Es importante tomar en cuenta que existen prioridades para ejecutar Página web diseñada en el cuaderno
algunos comandos, como: revisar primero el atributo BACKGROUND de apuntes, con las etiquetas
antes que el atributo BGCOLOR, o revisar primero el atributo COLOR de necesarias, empleando una
la etiqueta <FONT> antes que el atributo TEXT de la etiqueta <BODY>. estructuración adecuada.
Existen propiedades que ayudan a dar formato a la página web completa,
las cuales están mostradas en la figura 1.21 y se refieren a la etiqueta
<BODY>.
Figura 1.21. Atributos de la etiqueta <BODY> </BODY>.

Actividad 8: ¡Estás listo para crear páginas sencillas y atractivas! Las

representaciones culturales proporcionan una identidad a cada región
¿cuál es tu preferida? De acuerdo a tu localidad, selecciona una
representación cultural (festividades, rituales, encuentros, entre otros) y
elabora un ensayo en tu cuaderno de apuntes, redactando las diferentes
actividades que se realizan al respecto. Puedes acompañarlo de palabras
a color, remarcando títulos, párrafos e incluir imágenes recortadas y
pegadas o dibujadas directamente. Una vez que concluyas, ahora,
escribe, también en tu cuaderno de apuntes, las etiquetas necesarias
para generar una página web con esa información. No olvides incluir tu
nombre y otros datos personales ¡Emplea tu creatividad y conocimientos
adquiridos!
1.1.6. Listas y tablas.
Listas.
Una forma muy usual de organizar información es empleando listas, que
pueden ser ordenadas o no. Se emplean en la vida diaria cuando se
elabora una lista de asistencia, una lista de amigos para invitarlos a una
celebración, una lista de ingredientes para preparar un postre, una lista
de puntos a considerar en la exposición del tema en una asignatura, así
como una gran cantidad de momentos o situaciones que podemos
representar mediante una lista.
En una página web se pueden incluir listas de tres tipos:
• Ordenadas: Se acompañan de un número al lado izquierdo del texto.
Cada elemento siguiente, toma en forma automática el valor
consecutivo, por lo que siempre se muestran en orden.
• No ordenadas: las que muestran la información organizada mediante
puntos como se emplea en este texto. La imagen que distingue a cada
punto que se encuentra a la izquierda se le conoce como viñeta o
boliche y puede ser sujeto a modificaciones.
• De definiciones: muestran un conjunto de definiciones, similar a un

diccionario.
En la figura 1.22, se muestran las etiquetas con las que cuenta HTML para
mostrar listas. La etiqueta <LI></LI>, se utiliza para registrar cada uno de
los elementos a contemplar en la lista, ya sea en forma ordenada o no;
por lo que se puede observar que, quien distingue la forma de
presentación, es la etiqueta que la engloba.
Figura 1.22. Etiquetas para el diseño de listas.
Ejemplo de listas ordenadas: ¿Conoces los signos zodiacales?

Representan a las 12 constelaciones que enmarca el universo en que
vivimos y que, de acuerdo a nuestra fecha de nacimiento, se dice que
nacimos bajo un signo zodiacal determinado, el cual, según los
astrólogos, rige algunos rasgos de nuestra personalidad. En la figura 1.23,
se muestran en forma ordenada, cada uno de los 12 signos zodiacales
mencionados, que se logra mediante el código de etiquetas mostrado en

la figura 1.24.
Actividad 9:
de apuntes, con las etiquetas
necesarias, empleando una
estructuración adecuada para
resolver el problema planteado.
Figura 1.23. Lista ordenada de los signos zodiacales.

Figura 1.24. Código para mostrar una lista ordenada de los signos
zodiacales.
Actividad 9: Empleando tu creatividad, diseña una página web en tu

cuaderno de apuntes, que contenga una lista con los números del uno al
veinte, colocando una lista numerada, con su escritura en inglés. ¡No
olvides colocar otros elementos que proporcionen calidad y vista
agradable a tu página!
Tablas.
Una forma muy interesante de organizar la información, es el empleo de
tablas, ya que permite distribuir los datos de forma atractiva, lógica,
divertida y atrevida, permitiendo el desarrollo de la creatividad para

plasmar lo que se quiere mostrar para lograr un gran impacto. Las tablas
clásicas, están integradas por filas (horizontales) y columnas (verticales),
formando una rejilla, en donde se puede escribir texto, mostrar
imágenes, archivos multimedia o colocar hipervínculos. Cada espacio
que integra la tabla, recibe el nombre de celda, como la que se utiliza en
Excel.
La figura 1.25, muestra una tabla clásica, integrada por cinco filas y tres
columnas. La forma de organizar la información en la tabla (<TABLE>), es
mediante filas o renglones (<TR>), que se refieren a un mismo elemento.
En este ejemplo, cada estación del año. Dentro de cada fila, se distribuye
celda a celda (<TD>) la información correspondiente a la estación en los
dos hemisferios de la tierra, que, observándolas en conjunto, integran las
columnas de la tabla. Cuenta con el título: “Datos astronómicos”
mostrado en la parte superior de la tabla, las columnas tienen un
encabezado con color de fondo rosa, cuyo texto se encuentra centrado
respecto a la celda. La tabla tiene un ancho de 80% con respecto a la
página, por lo que su tamaño cambia conforme se modifica la ventana
del navegador.
Figura 1.25. Ejemplo de tabla clásica.

Para lograr la distribución de información en tablas dentro de una página

web, se emplean las etiquetas mostradas en la figura 1.26.
Figura 1.26. Etiquetas para el diseño de tablas.
En la figura 1.27, se muestran los atributos que proveen de

características propias a cada celda, fila o tabla, favoreciendo la calidad
en la presentación de la información.
Actividad 10:
Página web diseñada mostrando la
tabla de la figura 1.25, en el cuaderno
de apuntes.
Actividad 11:
Página web con el horario de
actividades semanales, en el
cuaderno de apuntes.
Figura 1.27. Atributos empleados en las etiquetas para el diseño de

tablas.
Actividad 10: en tu cuaderno de apuntes, diseña una página web que

muestre la tabla indicada en la figura 1.25 ¡Puedes modificar los
elementos e incluir otros, de acuerdo a tu creatividad!
Actividad 11: un elemento muy importante para el logro de nuestras

metas, es la planificación de tiempos, por tal motivo, te invito a que
generes un horario de actividades semanales que te ayuden a
organizarte, plasmándolo en tu cuaderno de apuntes. Después, crea ese
horario en una página web y ¡Lleva a cabo la planeación de tu tiempo!
Nota: la información, figuras y ejemplos, fueron tomados del libro:

Módulo III. Desarrolla aplicaciones web y móviles. Autora: Blanca Elia
Jiménez Guzmán. Editorial: FCE, SEP, DGETI. Primera edición. 2016.

México.
Competencias esenciales 2º parcial
Situación 1.2: Situación 1.2: Planteando, diseñando y construyendo un

Planteando, diseñando y sitio web.
construyendo un sitio web.
1.2.1. Sitios web.
Contenido:
1.2.1. Sitios web.
“Un sitio web es un conjunto organizado y coherente de páginas Web que
1.2.2. Vínculos.
tiene como función ofrecer, informar, publicitar o vender contenidos,
1.2.3. Organización del sitio.
productos y servicios al resto del mundo. Para que un sitio Web pueda ser
visitado por otras personas es necesario que se encuentre alojado en un
Competencia profesional 2:
servidor. Se trata de una computadora conectada a la World Wide Web
Utiliza CSS para dar formato a
con espacio en disco y conectividad suficiente para albergar sitios y
páginas web.
servirlos al resto de la comunidad de usuarios de Internet a través de
direcciones IP o nombres de dominio”. Tomado de EcuRed
Situación 2.1:
(www.ecured.cu).
Creando y aplicando un tema
mediante hojas de estilo.
1.2.2. Vínculos.
Contenido:
En el diseño de una página web es importante la incorporación de
2.1.1. Definición.
elementos que faciliten la exploración o navegación, lo cual aumenta
2.1.2. Evolución.
2.1.3. Ventajas. considerablemente la funcionalidad y organización de un sitio web,
2.1.4. Elementos de diseño. permitiendo su interconexión con diferentes recursos y sitios afines en
2.1.5. Creación. todo el mundo.
Vínculo (link).
Conocido también como liga, hipervínculo, enlace o hiperenlace. Es una

ruta de acceso que permite un desplazamiento rápido hacia temas
específicos, ya sea de manera interna (dentro de la página web) o externa

(en otra página web, pudiendo estar dentro o fuera del sitio web).
Tipos de enlaces:
8. A la misma página (anclaje).
9. A otra página dentro del mismo sitio web.
10. A otra página en diferente sitio web.
11. A una dirección de correo electrónico.
Ejemplo de vínculos:
En la figura 1.28, se plasman algunos códigos para ejemplificar el empleo
de los vínculos más utilizados en una página web.
Figura 1.28. Ejemplos de tipos de enlaces.
1.2.3. Organización del sitio.
La organización de información en cualqueir ámbito, se ha considerado

prioritario, es especial por que influye en el proceso de la toma de
decisiones. Es por esto que, en los sitios web, se vuelve fundamental
considerar una adecuada organización, desde el momento del diseño,

considerando dos aspectos relevantes:
1. La forma en que se presenta la información al usuario.
2. La calidad del contenido.
En la figura 1.29, se observan herramientas que pueden ser útiles para la
organización de un sitio web, que además, te servirá para crear un mapa
sel sitio (un archivo en el que puedes enumerar las páginas web de tu sitio,
para informar a los motores de búsqueda acerca de la organización del
contenido del sitio, cuya imagen se representa en la figura 1.30).
Actividad 12:
Mapa del sitio.
Sitio web integrado con las páginas
web indicadas en el mapa del sitio,
conteniendo enlaces de llamada y
regreso a la página principal.
Todo realizado en el cuaderno de
apuntes.
Figura 1.29. Herramientas utilizadas para la organización de un sitio

web. Tomado de:
https://www.esic.edu/documentos/revistas/reim/100916_155728_E.pdf
Figura 1.30. Mapa del sitio en imagen. Tomado de internet.
Actividad 12: En tu cuaderno de apuntes, diseña un sitio web, iniciando

con la estructuración visual del mapa del sitio, tomando como ejemplo la
figura 1.30. Deberás realizar un sitio web de al menos tres niveles,
desarrollando la página web principal que va a contener los enlaces de
llamada a cada página, que, a su vez, tendrán información específica.
Deberás incluir enlaces que retornen a la página principal para continuar
la navegación. El sitio web lo realizarás con el tema de tu preferencia,
considerando los elementos que tengas en tu entorno, sin salir de casa y
con una página de: “Acerca de” para mostrar los datos del autor y detalles
de la especialidad, módulo y Submódulo que cursas, entre otros elementos
de identificación ¡Observa a tu alrededor y notarás muchos temas que
puedes analizar, profundizar y representar mediante el diseño de un sitio
web!
Competencia profesional 2: Utiliza CSS para dar

formato a páginas web.
Situación 2.1: creando y aplicando un tema mediante
hojas de estilo.
2.1.1. Definición.
Las hojas de estilos, también conocidas como CSS (Cascading Style

Sheets), que significan hojas de estilos en cascada, por sus siglas en inglés,
son archivos que acompañan a las páginas web para agrupar atributos que
brindan formato a un texto, párrafo, tabla, vínculo o cualquier otro
elemento utilizado en la página web. Se guardan con una extensión .CSS.
A partir del HTML5, se le caracteriza por ser un lenguaje de marcas de
tipo descriptivo, debiendo limitar el empleo de sus etiquetas a la estructura
de la información en una página web y para los aspectos de diseño, en
cuanto a la presentación visual ante el usuario, se debe realizar en los
CSS3. Además, combinados con instrucciones utilizadas en lenguajes
como: JavaScript o VBScript, pueden proporcionar movimientos, efectos
y hasta interactividad con el sitio, convirtiéndolo en dinámico.
2.1.2. Evolución.
Las versiones de las hojas de estilos, también van avanzando. Actualmente

se cuenta con la versión tres o nivel 3, por lo que se puede encontrar
información referente a CSS3.
Con información obtenida del sitio:

https://uniwebsidad.com/libros/css/capitulo-1/breve-historia-de-css, se
presenta lo siguiente:
“Las hojas de estilos aparecieron poco después que el lenguaje de

etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se
observó la necesidad de definir un mecanismo que permitiera aplicar de
forma consistente diferentes estilos a los documentos electrónicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el Actividad 13:
boom de Internet y el crecimiento exponencial del lenguaje HTML para Línea de tiempo representando las
la creación de documentos electrónicos. La guerra de navegadores y la hojas de estilos.
falta de un estándar para la definición de los estilos dificultaban la
creación de documentos con la misma apariencia en diferentes

navegadores.
El organismo W3C (World Wide Web Consortium), encargado de crear

todos los estándares relacionados con la web, propuso la creación de un
lenguaje de hojas de estilos específico para el lenguaje HTML y se
presentaron nueve propuestas. Las dos propuestas que se tuvieron en
cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-
based Style Sheet Proposal).
La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto
por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para
definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo
llamaron CSS (Cascading Style Sheets).
En 1995, el W3C decidió apostar por el desarrollo y estandarización de
CSS y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C
publicó la primera recomendación oficial, conocida como "CSS nivel 1".
A principios de 1997, el W3C decide separar los trabajos del grupo de
HTML en tres secciones: el grupo de trabajo de HTML, el grupo de trabajo
de DOM y el grupo de trabajo de CSS.
El 12 de mayo de 1998, el grupo de trabajo de CSS publica su segunda
recomendación oficial, conocida como "CSS nivel 2". La versión de CSS
que utilizan todos los navegadores de hoy en día es CSS 2.1, una revisión
de CSS 2 que aún se está elaborando (la última actualización es del 8 de
septiembre de 2009). Al mismo tiempo, la siguiente recomendación de
CSS, conocida como "CSS nivel 3", continúa en desarrollo desde 1998”.
Actividad 13: haciendo uso de tu creatividad, diseña en tu cuaderno de

apuntes, una línea de tiempo para representar la evolución de las hojas de
estilos.
2.1.3. Ventajas.
1. Que se guarde en un archivo independiente, permite su empleo

en todas las páginas que integren el sitio web.
2. Al tener la información de diseño de todo un sitio web, de manera
centralizada, facilita su mantenimiento y actualización.
3. Cada usuario puede diseñar localmente su propia hoja de estilo,
mejorando la accesibilidad y brindando comodidad.
4. Se pueden programar diferentes hojas de estilos en un mismo
sitio, para ser utilizados en diferentes dispositivos o medios a
mostrar.
5. El programar y guardar por separado el diseño, hace que el código
HTML5 se reduzca y sea más entendible.
2.1.4. Elementos de diseño.
Selectores en CSS3.
Para diseñar una hoja de estilos, se utilizan selectores, que son los
elementos de la página web a la que se le aplicará el estilo. Consta de un
nombre, un par de llaves y dentro de ellas, se escriben las propiedades y
valores que establecerán el diseño. La figura 1.31, muestra la sintaxis.
Figura 1.31. Sintaxis de los selectores en un CSS3.
Existen varios tipos de selectores, de los cuales se ejemplificarán los tres

más utilizados.
Selectores de tipo.
Representan a las etiquetas de HTML, por ejemplo: <H1>, <P>,

<TABLE>, <BODY>, entre otras.
Selectores de clase.
Son atributos generales, agrupados y diseñados para que puedan ser
aplicados a distintos elementos. Se les asigna un nombre que lo identifique
y se antecede por un punto. Para referenciarlos en el código HTML, se
anexa el atributo: CLASS.
Pseudo-clases y pseudo-elementos.
Hacen referencia a un estado y no a una etiqueta, por ejemplo: si un
vínculo ha sido visitado. Se nombran con el atributo correspondiente,
seguido de dos puntos y posteriormente el estado.
• Pseudo-clases: : first-child, : link, : visited, : hover, :active, : focus

y : lang.
• Pseudo-elementos: : first-letter.
2.1.5. Creación.
Se puede crear una hoja de estilos en un archivo independiente y

posteriormente adjuntarla al sitio web y modificarla para ajustarla a las
necesidades de la página o crear una nueva con características propias.
Ejemplo: si cuentas con un equipo de cómputo, deberás ir creando la hoja

de estilos de acuerdo a los siguientes pasos:
1. Crear una carpeta con el nombre: estilos, dentro de la carpeta del

sitio de trabajo: ejerWeb ubicada en la unidad C.
2. Escribir en un único archivo de block de notas, el código de las
figuras 1.32 y 1.33. Guardarlo en la carpeta: estilos con el nombre
de: estiloOaxaca.CSS. Recuerda que, al grabar un archivo de este
tipo, se debe seleccionar: Todos los archivos, en lugar del tipo:

archivos de texto.
Figura 1.32 Archivo: estiloOaxaca.CSS parte 1.

Figura 1.33 Archivo: estiloOaxaca.CSS parte 2.
3. Crear el archivo: lenguasIndigenasConHojaDeEstilos.html, con el

código mostrado en la figura 1.34, que deberá estar guardado en
la carpeta ejerWeb, creada en la unidad C.
Actividad 14:
Figura 1.34 con notas aclaratorias.
Actividad 15:
Archivo con hoja de estilos:
(estiloOaxaca.CSS) creado en el
cuaderno de apuntes.
Archivo de página web creado

en el cuaderno de apuntes:
lenguasIndigenasConHojaDeEstilos
.html
Actividad 16:
Hojas de estilo y página web con
hoja de estilo creadas en el
Figura 1.34. Código para crear el archivo: cuaderno.
lenguasIndigenasConHojaDeEstilos.html.
4. Ejecute el archivo creado y se mostrará en el navegador, la página que

se observa en la figura 1.35.
Figura 1.35. Página lenguasIndigenasConHojaDeEstilos.html en

ejecución.
Actividad 14: identifique los elementos referentes a la hoja de estilos, en el

archivo de la figura 1.34, mediante notas aclaratorias, que indiquen a lo que se
refieren. Puedes emplear pequeños “post” con recortes de papel o papel auto
adherible para las notas aclaratorias, así como remarcar con marca textos para
una fácil identificación.
Actividad 15: Realizar el ejemplo propuesto, siguiendo cada uno de los pasos y
guiándose de las figuras 1.32 a la 1.35.
Actividad 16: con base en el ejemplo propuesto correspondiente al estado de

Oaxaca, presenta datos de acuerdo a tu estado. Puedes presentar datos de los
hablantes en cada una de las regiones, lenguas, vestimenta, comidas, flora, fauna,
entre otros que tú decidas. Crea una hoja de estilos con los colores, fuentes y
otros elementos de tu preferencia y aplícalo a tu página web. Recuerda que, si no
cuentas con un equipo de cómputo, lo puedes realizar todo en tu cuaderno de
apuntes, de manera organizada, incluyendo letreros y notas aclaratorias. Puedes
incluir recortes para las imágenes o ¡dibujarlas tú mismo! Lo importante es que
reconozcas y aprendas cómo se crean y aplican las hojas de estilos en las páginas
web para que puedas llegar a practicarlas en un futuro, ¡presentando excelentes
diseños creativos y con calidad!
Nota: la información, figuras y ejemplos, fueron tomados del libro:

Módulo III. Desarrolla aplicaciones web y móviles. Autora: Blanca
Elia Jiménez Guzmán. Editorial: FCE, SEP, DGETI. Primera
edición. 2016. México.
Situación 2.2:
Creando una página web Con ayuda de la siguiente información, Realiza un "mapa • Mapa mental: Elementos del Diseño
responsiva. mental" de los elementos básicos de un Diseño web web responsivo.
responsivo.
Contenido:
Elementos del diseño web responsivo:
2.2.1. Responsive Web Design Los elementos centrales de un diseño adaptable o “responsivo” son al menos
(Diseño web responsivo). cuatro:
2.2.2. Elementos. 1. Esquema typographic flexible.
2.2.3. Importancia. 2. Maquetación adaptable usando Media Queries, modificando la cantidad de
columnas del diseño, con grillas flexibles, adaptando los anchos dentro de cada
2.2.4. Concepto mobile first. rango.
2.2.5. Creación. 3. Imágenes y multimedia adaptables, cambiando el tamaño de las imágenes y
otros elementos vinculados. No debemos olvidar, si el sitio los incluye, la
adaptación de videos y animaciones, y demás contenidos complejos como
mapas, tablas, slides, etc.
4. Navegación adaptable, optimizada para touch en pantallas pequeñas.
Complementariamente, aplicaremos sistemáticamente en todas nuestras
páginas adaptables, dos elementos extra:
a. Una etiqueta meta viewport que impida la “miniaturización” de nuestras páginas.
b. Y un script compatibilizador para que funcione en navegadores antiguos la
técnica de media queries.
Comencemos a analizar uno por uno estos elementos, así aprenderemos a

incluirlos en nuestros proyectos, para que podamos volverlos adaptables y
dejemos atrás la era de la rigidez.
1. ESQUEMA TIPOGRÁFICO FLEXIBLE:
El primer elemento del diseño que volveremos flexible desde nuestra hoja de
estilos será el texto. La novedad será que cambiaremos la unidad de medida
más utilizada hasta el momento para definir el tamaño de las fuentes mediante
la propiedad font-size (es decir, los pixeles), por otras dos unidades de medida
más versátiles.
Si continuamos utilizando pixeles como unidad de medida para nuestras fuentes,
tendremos dos tipos de problemas:
1. El primero se lo causaremos a algunos de nuestros usuarios, aquellos que
utilicen Internet Explorer, ya que no podrán escalar el tamaño de la fuente si
ésta fue definida en pixeles (un problema de accesibilidad que afectará a
nuestros usuarios miopes).
2. Y el segundo, será un problema de mantenimiento para nosotros mismos, ya
que deberíamos duplicar, triplicar o más, las declaraciones de tamaños de
fuentes dentro de cada zona de la hoja de estilos, para poder definir cuál debe
ser su tamaño en cada rango o condición, es decir, en cada media query.
Entenderemos este problema a continuación.
Texto primero
¿Por dónde empezamos entonces el proceso de codificación (HTML) si queremos
aplicar Media Queries? Por el principio: el texto.
Pregunta al paso que siempre me gusta plantear a mis alumnos: ¿Cuál es el
denominador común de una pizza? ¿Aceitunas? ¿Cebollas? ¿Tomates? ¿O la
masa?
¿Y el denominador común de una Web? ¿Flash? ¿Imágenes? ¿Videos? ¿O el
texto?
Una vez marcados los textos semánticamente (con h1, h2, p, ul con li), aplicamos
los identificadores y clases que creamos necesarios, y ya tendremos el código
HTML básico terminado. Ese texto bien estructurado con HTML elemental, será
suficiente para cualquier celular de bajas prestaciones que aún pudiera estar
utilizando algún usuario.
Tipografía, siempre en EM
Ahora sí, llegó el momento de definir en nuestra hoja de estilos las unidades de
medida que volverán flexible nuestro esquema tipográfico, para garantizar la
legibilidad de nuestros contenidos. Pensemos que la distancia de lectura en una
PC es cercana al metro, mucho mayor a la que existe entre nuestros ojos y un
teléfono o tableta que sostenemos en nuestras manos.
Por ese motivo, los tamaños de fuentes deberán ser mayores para una PC que
para una tableta, y los de una tableta, mayores que los de un celular.
Para lograrlo, no usaremos más pixeles para definir el tamaño de fuentes, sino
que usaremos la unidad de medida em y los porcentajes, combinados de una
manera particular: al body (y solamente al body) le definiremos un font-size base

en porcentaje, y al resto de textos, se lo definiremos en em:
body {
font-size:80%;
}
/* porcentaje base, solo en el body */

p {
font-size:0.9em;
}
h1 {
font-size:2em;
}
h2 {
font-size:1.4em;
}
#pie {
font-size:1.2em;
}
.epigrafes {
font-size:1.1em;
}
/* fin de zona común a todas las resoluciones */

@media screen and (min-width:800px) {
body {
font-size:100%;
/* ampliamos los textos si mide más de 800px */
}
}
/* fin de la zona para más de 800px de ancho de pantalla */

body {
font-size:120%;
/* ampliamos más aún los textos si mide más de 1200px */
}
}
Observemos que hemos definido en em los tamaños de fuentes de nuestros

contenidos usando indistintamente etiquetas, id o clases, en un solo lugar: la zona
inicial de nuestra hoja de estilos, aquella que leerán todos los dispositivos sin
condiciones, ya que no se encuentra envuelta en ninguna media query.
Por otro lado, cuando aplicamos una condición para cierto tamaño, lo único
que cambiamos es el valor base en porcentaje aplicado al body, lo que hará
que todo el esquema tipográfico definido en ems se escale proporcionalmente
a un nuevo tamaño. Es decir, lo que estamos haciendo es cambiar el tamaño
del em, al cambiar su punto de referencia (que es ese porcentaje que definimos
en el body).
Como orientación, podemos calcular que en la mayoría de las pantallas de PC,
a tamaño de fuente normal, la equivalencia entre ems y pixeles es que 1em =
16px, por lo que, si queremos definir en la hoja de estilos un texto que en
Photoshop ocupaba 24px, lo dividiremos por 16 para saber su valor en em, que
en este caso sería 1.5em. Atención: utilicemos puntos como separador decimal,
no comas.
Por supuesto, nada impide que realicemos ajustes en alguna de las media
queries si queremos que determinado texto tenga una medida especial en una
de ellas. Pero el punto de partida ya quedará establecido automáticamente.
Con estas nuevas unidades de medida ya podremos crear esquemas
tipográficos adaptables, que se visualicen de manera óptima según la distancia
de lectura de cada dispositivo.
Notemos que no estamos definiendo un tamaño rígido, sino una relación
proporcional entre los distintos tamaños de texto de nuestra página, proporción
que se mantendrá a lo largo de todos los dispositivos gracias a que vamos a
escalar el esquema completo en cada media query.
2. MAQUETACIÓN ADAPTABLE Y GRILLA FLEXIBLE:
Aprovechando que cada zona de la hoja de estilos que envolvamos entre media
queries permite que ciertos estilos se apliquen solo en un rango de tamaños de
pantalla, en cada zona acomodaremos los contenidos en columnas de una
manera optimizada para el tamaño del dispositivo.
• “Flotar o no flotar, that is the question”
En principio, convengamos que en un celular básico no es suficiente el espacio
para flotar dos o más columnas una al lado de la otra, por lo que el layout será
extremadamente simple: solo dejaremos que los bloques se apilen uno debajo
del otro por orden de aparición en el código HTML.
A partir de allí, haremos flotar tantos bloques como creamos necesario en cada
media query.
Grillas flexibles
La grilla flexible consiste en definir anchos de contenedor y de columnas en
porcentajes, para que los bloques de un diseño mantengan una proporción
entre sí dentro del rango de ancho mínimo y máximo definido en cada media
query del punto anterior.
La fórmula para calcular los porcentajes a partir de un boceto en pixeles es la de

dividir el ancho del elemento por el del que lo envuelve:
Tamaño Elemento / Tamaño Contexto
Ejemplo: 600px / 960px = 0,625
Es decir, ese bloque que medía 600px dentro de un contenedor de 960px ahora
deberá medir 62.5% (ese valor surge del 0.625 de la cuenta que acabamos de
realizar)
Repitamos la fórmula en otro caso:
Tamaño Elemento / Tamaño Contexto
Ejemplo de 3 columnas para fotos ubicadas dentro de una zona de 480px:
150px / 480px = 0,3125
Es decir, deberemos definir un 31.25% de ancho a cada una de las 3 columnas.
Márgenes y paddings flexibles
En este contexto, también debemos volver flexibles los márgenes y paddings,
para que no arruinen con pixeles la proporcionalidad de los espacios
conseguida.
1. Margen: el contexto es el ancho del elemento padre (contenedor):
o Ej. 24px / 900px = 0,02666 = 2,66%
2. Padding: el contexto es el ancho del elemento mismo al que lo aplico:
o Ej. 24px / 200px = 0,12 = 12%
3. MEDIOS ADAPTABLES (IMÁGENES, VIDEOS):
Si en cada zona de los estilos CSS delimitada por una media querie apuntamos
a distintas imágenes (de distintos tamaños), no tendremos problemas con
background-image:
/* La imagen más pequeña va primero, sin condiciones, porque es para el

celular más chico */ .logo { background-image: url(logo-chico.jpg);} /*
Logo mediano, para anchos de pantalla de entre 480 y 800px */ @media
screen and (min-width:480px) { .logo { background-image:
url(logo-mediano.jpg); }} /* Logo grande, para anchos de pantalla
de entre 800 y 1280px */ @media screen and (min-width:800px) { .logo
{ background-image: url(logo-grande.jpg); }} /* Logo
gigante, para anchos de pantalla de más de 1280px */ @media screen and
(min-width:1280px) { .logo { background-image: url(logo-
gigante.jpg); }}
en el caso de etiquetas IMG, haremos flexible la imagen dentro del rango mínimo
y máximo de un layout:
img, video, object { max-width:100%; }
Eso hará que dentro del rango de ancho del elemento que envuelva a la foto
(columna) la imagen se estire desde un mínimo y hasta un máximo. Como el
máximo es su tamaño real, 100%, consideremos ese ancho al definir el ancho de
su elemento contenedor, o viceversa: creemos la imagen al tamaño máximo al

que llegará su elemento contenedor.
Existen varias propuestas del W3C para especificar que el navegador descargue
distintas imágenes según el tamaño de pantalla (tal como en las imágenes de
fondo) como por ejemplo, la posible etiqueta “picture” con varias etiquetas
“source”, cada una condicionada por una media query, o que se modifique la
etiqueta “img” permitiendo especificar más de un source mediante el atributo
srcset. Al momento de escribir este libro ninguna de ellas está estandarizada ni
implementada por los navegadores.
Otros casos son los de utilizar dibujos vectoriales escalables SVG en vez de una
etiqueta IMG cuando lo que muestre la imagen sea un dibujo con pocos colores
(logotipos, iconos, etc.).
4. NAVEGACIÓN ADAPTABLE:
La navegación es otro de los puntos críticos que debe adaptarse en un sitio para
permitir su uso en teléfonos y tabletas.
Tomemos como ejemplo la navegación de este sitio:
En el caso de la PC, vemos una serie de submenús desplegables, a partir de una

lista (ul) de primer nivel que contiene el nombre de cada sección en letras
grandes, y con una segunda línea descriptiva. Vemos cómo, en un tamaño
mediano de pantalla (tableta), esa segunda línea desaparece, y el tamaño de

fuente es menor. Ese cambio puede lograrse con algo tan sencillo como cambiar
el font-size (ya lo vimos en el primer punto de este capítulo) y ocultar con
display:none los subtítulos por defecto, haciéndolos visibles con display:block a
partir de cierto tamaño de pantalla.
Por ejemplo:
.subtitulos {
display:none;
}
/* Hacemos visibles los subtítulos para anchos de pantalla mayores a
1024px
*/@media screen and (min-width:1024px) {
subtitulos {
display:block;
}
}
Y en el caso de la navegación en la pantalla más pequeña (teléfono), vemos
que se aplicó el mismo criterio pero para ocultar el enorme listado de submenús,
dejando solamente los botones de primer nivel, haciendo que no floten uno al
lado del otro y dándoles un tamaño grande, para que puedan ser fácilmente
pulsados con los dedos en una pantalla táctil.
Otro caso bastante común es el de reemplazar un menú visualmente muy amplio
que es el que se usará en la PC, por un select con options en el teléfono.
En el código HTML, que es el mismo para todos los dispositivos, estará el código
HTML de ambos menús (el formulario con el select y la “ul” con botones).
Por ejemplo:
<ul id="menupc">
<li>HOME</li>
<li>CONTACTO</li>
</ul>
<form id="menumovil">
<select>...etc... </select>
</form>
Desde la hoja de estilos, en la zona inicial de la hoja sin condiciones, ocultamos
el menú de PC y mostramos el de celular:
#menupc {
display:none;
}
#menumovil {
display:block;
}
Y en una media query, invertiremos esto para cuando estemos en pantallas
grandes:
#menupc {
display:block;
/* Mostramos el menú de PC */
}
#menumovil {
display:none;
/* Ocultamos el select para teléfono */
}
}
De esta manera, ya podemos manipular la visualización de diferentes
herramientas de navegación, gracias a las media queries.
Configurando el Viewport
El tamaño de la “ventana” del navegador en una PC, siempre coincide o es
menor que el tamaño de la pantalla. Es decir, o usamos el navegador
maximizado, a pantalla completa, o lo achicamos un poco. Pero nunca es más
grande que la pantalla.
En móviles, en cambio, o la ventana del navegador coincide con el tamaño de
pantalla (siempre maximizada), o es mayor que el tamaño de pantalla, viendo
solo una parte de ella por vez. Nunca es menor ya que no podemos “achicar” la
ventana para que ocupe menos de una pantalla. Pero sí puede suceder lo
contrario, que el contenido supere el tamaño de la pantalla porque estemos
viendo solo una parte, debido a la utilización del zoom.
Por ejemplo: Safari y Opera Mini asignan 980px de ancho al viewport y hacen
zoom para mostrar lo que suponen una web hecha para PC (y en el 99% de los
casos, ¡aciertan!).
Veamos un ejemplo comparando la misma página sin que el navegador le haga
zoom, “miniaturizándola”, y con la etiqueta viewport que lo impide, que veremos
a continuación:
¿Cómo podemos impedir que los navegadores móviles escalen nuestros sitios y
los miniaturicen? La solución es una nueva etiqueta meta cuyo name es
“viewport”, que solo es aplicada por dispositivos móviles y es ignorada en
computadoras de escritorio.
Su sintaxis es la siguiente:
<metaname="viewport"content="width=device-width,initial-scale=1.0" />
Dentro del atributo content, lo que estamos haciendo es definir que el width de
la ventana del navegador tenga un valor “real”; es decir, que el navegador no
nos “mienta”, sino que utilice como valor de su propiedad “width” el valor de
otra propiedad, que es “device-width”, es decir, el ancho físico de su pantalla.
De esa manera, un navegador dentro de un dispositivo de por ejemplo, 320px
de ancho, ya no declarará un width ficticio de 980px, sino que lo dejará en 320px,
que es el ancho del dispositivo, con lo cual no miniaturizará nuestro diseño.
Por otro lado, notemos que hemos definido un valor inicial para el zoom,
mediante la propiedad initial-scale a un valor de “1” que equivale a 100%, es
decir, el tamaño natural. De esta manera, cuando el navegador ingrese a
nuestra página, no aplicará ningún nivel de zoom que previamente el usuario
hubiera configurado.
• Atención con el zoom: no debemos desactivar por completo la posibilidad de
realizar zoom por parte del usuario, ya que ésta es una atribución suya.
Pensemos, por ejemplo, en un usuario miope, que necesita ampliar parte de
nuestro sitio. Para eso, evitemos definir en la etiqueta viewport los valores de
mínimum-scale y de maximum-scale, lamentablemente muy difundidos.
Soluciones para navegadores que no entienden Media Queries
Los celulares más antiguos, cuyos navegadores no entienden media queries, no
tendrán problemas en mostrar un diseño acorde a su tamaño si ese diseño es el
primero en la hoja de estilos y no está envuelto dentro de ninguna condición. Los
navegadores móviles más modernos procesan media queries, así que tampoco
son un problema.
Las tabletas son dispositivos nuevos, creados a partir del año 2009, con lo cual
todos sus navegadores soportan media queries.
El único problema de compatibilidad lo tendremos en PCs de escritorio. Los
navegadores de PC más modernos tienen soporte para media queries, pero
algunos navegadores antiguos como Explorer 8 todavía subsisten, y no
interpretan las media queries.
Simplemente vinculamos nuestra página HTML a ese script con una etiqueta
<script> y a partir de ese momento el Explorer 8 interpretará las media queries.
A manera de conclusión, vimos que es perfectamente posible crear experiencias
de navegación por sitios web multidispositivo, es decir, que se puedan usar con
un diseño y unas herramientas optimizadas para diferentes tamaños de pantalla,
si aprovechamos la técnica de media queries para crear esquemas tipográficos
adaptables, layouts y grillas flexibles, elementos visuales como imágenes y videos
líquidos, y herramientas de navegación optimizadas para el uso en pantallas
táctiles.
Delgado, Hugo. (2018). Diseño Web Responsive - Tutorial con ejemplos
adaptables. Recuperado 24 de enero, 2021, de
https://disenowebakus.net/diseno-web-responsive.php
2. Contesta correctamente el siguiente cuestionario
tomando de referencia la información aquí proporcionada.
1.- Explica que es una página web responsiva.
2.- Explique Por qué en ocasiones se confunde responsive con una página web
móvil.
3.- Menciona tres recomendaciones para tener una página web responsiva.
4.- Menciona cinco dispositivos que los mexicanos utilizan para conectarse a
internet actualmente.
5.- Que página web mostrara el navegador Google, una responsiva o una no
responsiva. Explique él porque.
6.- Seguramente habrás entrado en alguna web desde tu teléfono y has tenido
que ir ampliando y alejando la imagen, moviéndote por la pantalla. ¿Eso quiere
decir que esa página es responsive o no es responsive ?.
7.- ¿Qué significa que una página web tenga un mejor SEO?.
8.- ¿En qué consiste la practica SEO?.
9.- ¿Por qué es más sencillo y económico tener una página web responsiva?.
10.- Los mexicanos cuanto invierten de tiempo en Internet a diferencia de los

medios tradicionales.
En primer lugar... ¿qué es exactamente un diseño web responsive?

Un diseño web responsive es el que es capaz de adaptarse a pantallas de
diferentes tamaños con un solo sitio web. El sistema detecta automáticamente
el ancho de la pantalla y a partir de ahí adapta todos los elementos de la página,
desde el tamaño de letra hasta las imágenes y los menús, para ofrecer al usuario
la mejor experiencia posible. ¡Parece magia!
En ocasiones, se confunde el responsive con las webs para móviles, pero no se
trata de lo mismo. En el caso del diseño responsive, tenemos un solo sitio web que
puede adaptarse para dispositivos de todo tipo, desde ordenadores de escritorio

con grandes monitores hasta móviles, pasando por tablets y otros. En cambio,
crear un sitio móvil implica diseñar desde cero una web independiente, cuyos
contenidos y formato están especialmente adaptados para funcionar mejor en
dispositivos móviles.
En mi opinión, la opción más recomendable es sin duda el diseño responsive, ya
que crear una web para móviles implica tener dos sitios diferentes y duplicar las
tareas de mantenimiento y actualización. Además, el responsive se adapta
automáticamente a todo tipo de tamaños. Dicho esto, podemos usar algún
plugin para crear sitios para móviles (como los de WordPress) como solución
temporal mientras diseñamos un sitio realmente adaptable.
¿Por qué tener una página responsiva?
• Es recomendada por GoogleTM
El algoritmo de Google fue actualizado recientemente para dar mayor ranking
de búsqueda a las páginas que están elaboradas con un diseño responsivo.
• Una página, muchos dispositivos
Permite proveer una excelente experiencia al usuario desde cualquier dispositivo
y tamaño de pantalla: teléfonos móviles, tabletas, laptops y computadoras de
escritorio.
• Es más sencillo y económico
Permite tener un mejor SEO(Search Engine Optimization) es la práctica de utilizar
un rango de técnicas, incluidas la reescritura del código html, la edición de
contenidos, la navegación en el site, campañas de enlaces y más acciones, con
el fin de mejorar la posición de un website en los resultados de los buscadores
para unos términos de búsqueda concretos. ya que se tienen las mismas URLs
(direcciones) para móvil y web. Es más económica de administrar. Permite una
descarga más rápida y adecuada en móviles.
Algunas cifras que debes conocer…
Fuente: iab México
• Para conectarse a Internet, en 2014, los internautas mexicanos usaron 3
dispositivos en promedio.
• Los internautas mexicanos invierten en Internet más del doble del tiempo
que en medios tradicionales.
• 9 de cada 10 internautas mexicanos siempre llevan consigo sus
dispositivos móviles.
• 42% no puede salir de su casa sin sus dispositivos móviles.
3. Con ayuda de la información que a continuación

aparece, Relaciona correctamente ambas columnas:
a) Diseño dinámico. [ ] los móviles primero
b) SEO. [ ] Search Engine Optimization
c) Diseño 100% [ ] Search Engine Results Page

responsive. [ ] sitio web amigable para móviles
d) Mobile Friendly. [ ] consiste en un tipo de programación de código único
(para una misma URL), que se adapta a cualquier tipo de
e) SERPS.
pantalla y dispositivo
f) mobile first. [ ] ofrecer una experiencia específica en la versión móvil,
g) Diseño web único tienes que dar contenido variado y optimizado para las
para versión móvil. diferentes consultas de búsqueda.
[ ] disponer de dos versiones de tu web, una para móviles
y otra para ordenadores de escritorio. • Cuestionario: Importancia del Diseño
¿Qué es mobile first? responsivo.
Como su propio nombre indica mobile first o por su traducción en inglés,«los
móviles primero», resume perfectamente esta filosofía de desarrollo.
Básicamente se refiere a un modo de diseñar que tenga en cuenta, en primera
instancia, un dispositivo móvil. Pantallas reducidas en comparación a los
monitores que usamos normalmente con los ordenadores, y tras tener la
maqueta preparada, realizar un escalado, es decir, aumentar el tamaño y
adaptarlo a una pantalla de escritorio.
A día de hoy, el diseño responsive, la filosofía de diseño opuesta, es un estándar.

Este tipo de páginas web, son adaptativas, es decir, al reducir la resolución se
reduce el tamaño del contenido, y es, realmente, lo que tiene Google bajo su
lupa.
Que nuestro sitio web sea responsive no es opcional sino obligatorio, de lo

contrario nuestra visibilidad y efectividad SEO se verá reducida ya que estaremos
perdiendo todas las visitas de potenciales clientes que usen dispositivos móviles
para navegar.
En 2015, Google ya hablaba sobre esta tendencia, y pasó a priorizar los sitios web
que son mobile friendly (sitios web amigables para dispositivos móviles) en los
resultados de las búsquedas.
Cuando hablamos sobre el algoritmo de Google en 2017, le dimos una gran
importancia al desarrollo web para dispositivos móviles, ya que es un factor en
SEO cada vez más importante y por ello fundamental en cualquier proyecto
online que se lance.
El objetivo principal de todo esto es que un usuario desde móvil tenga la misma
experiencia a la hora de navegar por nuestro sitio web que un usuario desde
escritorio. Todo tiene que adaptarse, los botones, los enlaces, imágenes, etc.
Google considerará siempre, en primera estancia, la versión móvil de tu sitio, para
posicionarla.
Así que significa que si la parte móvil está bien optimizada, ambas partes, saldrán
beneficiadas y, ganarán posicionamiento. Si no contamos con una, no nos
estaremos beneficiando de esos puestos extra que ofrece a los sitios web móviles.
Es por ello, que tener un sitio web mobile friendly, es decir, adaptado a
dispositivos móviles, puede significar la diferencia entre un buen
posicionamiento y ser top en SERPs.
Qué son las SERPS?
SERPS, significa “Search Engine Results Page” o en su traducción al español,
“resultados del buscador” y estos resultados son los que aparecen entre las 10
primeras opciones de las páginas de Google, o cualquier otro buscador. La idea
con las SERPs es que tu marca (página web) se ubique en los primeros lugares.
De este modo, todas las tareas que hagamos por mejorar ese aspecto, estarán
afectando directamente, y de forma positiva, a nuestro posicionamiento.
Vías para crear un diseño web “Mobile Friendly”
Si aún no tienes una web de diseño mobile friendly, a continuación conocerás
las 3 vías para que así sea, de forma que mejore la experiencia de tus usuarios y
Google le otorgue a tu site mejores posiciones en sus rankings:
1) Diseño 100% responsive
El diseño responsive consiste en un tipo de programación de código único (para
una misma URL), que se adapta a cualquier tipo de pantalla y dispositivo.
Esta es una muy buena opción para cualquier sitio web, pues resulta
relativamente fácil de mantener y actualizar. Por tanto, suele ser la vía favorita
para tener contento a Google en términos de usabilidad y experiencia de
usuario.
2) Diseño dinámico
Tener un diseño dinámico significa que si quieres ofrecer una experiencia

específica en la versión móvil, tienes que dar contenido variado y optimizado
para las diferentes consultas de búsqueda.
Por tanto, esto quiere decir que deberás distinguir las versiones de tu sitio web en
el caso de que sea necesario. No implica hacer un rediseño, solamente se trata
de más carga de trabajo en mantenimiento y actualización.
La ventaja de este diseño mobile friendly, es que habrá una URL única para todos
los dispositivos, así como una optimización específica para cada dispositivo. • Relacionar: Concepto mobilefirst y
creación.
3) Diseño web único para versión móvil
Puedes disponer de dos versiones de tu web, una para móviles y otra para
ordenadores de escritorio.
La ventaja de esto es que la web para móviles tendrá una URL diferente para
aquellos usuarios que entren desde sus dispositivos móviles. Por tanto, se brinda
una experiencia enfocada a móviles, sin necesidad de que tengas que rediseñar
el sitio principal.
Conclusiones: “Diseño Mobile Friendly” vs “Diseño UX”
Después de revisar todo lo anterior, te habrás dado cuenta de lo importante que
es ponerse en la piel del navegante, pues aspectos como el tamaño de la letra
o el espaciado entre los botones determinarán la buena o mala experiencia del
usuario.
En definitiva, los conceptos “UX” y “Mobile Friendly” van de la mano, y trabajan
bajo diseños sencillos y comprensibles que facilitan la navegación en el menor
número de pasos. De lo contrario, tus visitantes se marcharán de tu web y no
volverán más.

Módulo/Submódulo:
Submódulo 2. Desarrolla aplicaciones que se ejecutan en el cliente.
Competencia Profesional
El alumno
Usa JavaScript para manejar
eventos
1) Examen escrito en su
Contenido: a. Resuelve la evaluación diagnostica (Anexo 1 pág. 2 y 3) cuaderno.
1.1 Qué es JavaScript b. Realiza un mapa mental con la información proporcionada en la 2) Mapa Mental en su cuaderno
1.2 Características y documentación adjunta. (Anexo 1 pág. 4-12) 3) Elabora un informe escrito en
funcionamiento del lenguaje c. Revisa la información del editor para la construcción del código o bien su libreta, de la herramienta
identifica en tu computadora el bloc de notas que incluye Windows que va a utilizar para la
JavaScript
(Anexo 1 pág. 13) escritura del código
1.3 Clientes y Navegadores d. Realiza un resumen de la Introducción a JavaScript Anexo 1 pág. 14-21) 4) Resumen escrito en su libreta
1.4 URL y Recurso e. Realiza práctica guiada 1 con el fin de identificar la sintaxis del lenguaje de la Introducción al Lenguaje
1.5 Introducción a JavaScript JavaScript y la estructura del desarrollo web básico. Emplea HTML, CSS JavaScript
(Tipos, objetos y valores) e Inserta un Script utilizando las etiquetas <script > y </script>(Anexo 1 5) Código de la Práctica guiada
1.6 Operadores y expresiones pág. 21) escrita en libreta.
1.7 Sobrecarga de operadores
1.8 Conversión de tipos en
expresiones
1.9 Operador typeof
1.10 Operadores JavaScript
1.11 Comentarios
1.12 Práctica Guiada Aplicación

WEB utilizando HTML, CSS y
JavaScript
a. Realiza práctica guiada 2 Script Fecha; con la utilización del elemento
Competencia Profesional 1. Código de la Práctica guiada
document.write() de ser posible. (Anexo 2 pág. 1)
2 escrita en libreta. (Anexo 2
b. Realiza un mapa mental con la información proporcionada en la
El alumno pág. 1)
documentación adjunta. (Anexo 2 pág. 2-19)
2. Mapa Mental (Anexo 2 pág.
Usa JavaScript para manejar c. Realiza práctica guiada 3 Script con expresión; con la utilización del
2-19) en su cuaderno.
eventos elemento Función alert() (Anexo 2 pág. 11)
3. Código de la Práctica guiada
d. Realiza práctica guiada 4 Script con conversor; con la utilización del
Contenido elemento Función confirm() (Anexo 2 pág. 12)
pág. 11)
1. Ejercicio Practica Guiada 2 e. Realiza un mapa mental con la información proporcionada en la
Script con fecha documentación adjunta. (Anexo 2 pág. 20-30)
2. Variables f. Realiza Practica Guiada 5 Ejemplo con Sentencia If/else (Anexo 2 pág.
pág. 12)
21)
3. Funciones alert(), g. Realiza Ejercicio Practica Guiada 6 Función prompt y estructura if/else 5. Mapa Mental (Anexo 2 pág.
confirm() y prompt() (Anexo 2 pág. 22) 20-30) en su cuaderno
4. Ejercicio Practica Guiada 3 SECCION DE EVALUACION 6. Código de la Práctica guiada
Script con expresión h. Realiza Practica Autónoma 1 utilizando funciones con parámetros 5 escrita en libreta. (Anexo 2
i. Realiza Practica Autónoma 2 utilizando funciones con retorno de valor pág. 21)
5. Ejercicio Practica Guiada 4
Script conversor
6. Valores Booleanos pág. 22)
7. Operador de Identidad e 8. Código de la Práctica
igualdad autónoma 1, funciones con
8. Operadores de parámetros; escrita en
Comparación o libreta.
Relacionales AND y OR 9. Código de la Práctica
9. Operador de Asignación autónoma 2; funciones con
condicional retorno de valor; escrita en
10. Ejercicio Practica Guiada 5 libreta.
Ejemplo con Sentencia
If/else
11. Ejercicio Practica Guiada 6
Función prompt y
estructura if/else
12. Clase String
13. Clase Number
14. Números: tipo number
15. Conversión a enteros
16. Módulo Math
17. Función y estructura y
parámetros
18. Array de argumentos
19. Parámetros por defecto
Competencia Profesional a. Realiza la evaluación de seguimiento (Anexo 3 pág. A-C) a. Resuelve evaluación de
b. Realiza un mapa mental con la información proporcionada en la seguimiento (Anexo 3 pág.
El alumno documentación adjunta. (Anexo 3 pág. 1-21) A-C) . Responde de forma
c. Realiza práctica guiada 7 acceso a DOM (Anexo 3 pág. 16) escrita en su libreta
Emplea JavaScript para control de
d. Realiza práctica guiada 8 varios Scripts en un documento HTML b. Mapa Mental (Anexo 3 pág.
eventos y el formulario de datos (Anexo 3 pág. 18) 1-21) dibujado en su
e. Realiza un mapa mental con la información proporcionada en la cuaderno
Contenido documentación adjunta. (Anexo 3 pág. 22-36) c. Código de la Práctica guiada
1. Objetos f. Realiza Practica Guiada 9 Ejemplo con Sentencia for/in (Anexo 3 pág. 7 escrita en libreta o en su
2. Propiedades 24) celular utilizando el editor de
3. Clases y Herencia g. Realiza Ejercicio Practica Guiada 10 window.screen (Anexo 3 pág. 25) código propuesto. (Anexo 3
4. Métodos de la clase h. Realiza Ejercicio Practica Guiada 11 Reloj (Anexo 3 pág. 27) pág. 16)
5. Definición de un nuevo i. Realiza Ejercicio Practica Guiada 12 Eventos en HTML (Anexo 3 pág. d. Código de la Práctica guiada
método. 30) 8 escrita en libreta o en su
6. Algunas clases j. Realiza Ejercicio Practica Guiada 13 Evento Propiedad (Anexo 3 pág. celular utilizando el editor de
predefinidas 31) código propuesto. (Anexo 3
k. Realiza Ejercicio Practica Guiada 14 Evento Propiedad (Anexo 3 pág. pág. 18)
7. Objetos anidados: árboles
32) e. Mapa Mental (Anexo 3 pág.
8. Propiedades Dinámicas
l. Realiza Ejercicio Practica Guiada 15 Evento Onload (Anexo 3 pág. 33) 22-36) dibujado en su
9. Usar propiedades m. Realiza Ejercicio Practica Guiada 16 Formularios (Anexo 3 pág. 34) cuaderno
dinámicas n. Realiza Ejercicio Practica Guiada 17 Validación de campos en el f. Código de la Práctica guiada
10. Referencias a objetos formulario (Anexo 3 pág. 36) 9 escrita en libreta o en su
11. Identidad de Objetos SECCION DE EVALUACION celular utilizando el editor de
12. Objeto window o this Practica autónoma 3 código propuesto. (Anexo 3
13. Variables globales y el Diseña una página web y escribe el código en JavaScript necesario para pág. 24)
entorno de ejecución realizar los siguiente: g. Código de la Práctica guiada
14. DOM: Document Object 10 escrita en libreta o en su
Model ✓ Crea una galería fotográfica con los siguientes comportamientos: celular utilizando el editor de
➢ Al pasar el mouse por cada foto cambiar el color de su borde, código propuesto. (Anexo 3
15. Acceso a DOM
al quitar el mouse regresar a su color inicial. pág. 25)
16. Varios scripts en un
➢ Al dar clic sobre la imagen aumentar su tamaño. h. Código de la Práctica guiada
mismo documento HTML 11 escrita en libreta o en su
17. Location, history, screen ➢ Al soltar el botón del mouse regresar a su tamaño original.
➢ Al dar doble clic sobre la imagen mostrar información celular utilizando el editor de
18. window.screen código propuesto. (Anexo 3
informativa sobre la imagen.
19. funciones de Selección de pág. 27)
elementos i. Código de la Práctica guiada
20. Sentencia for/in (sintaxis) 12 escrita en libreta o en su
21. Eventos periódicos con celular utilizando el editor de
setInterval(....) código propuesto. (Anexo 3
22. Eventos DOM pág. 30)
j. Código de la Práctica guiada
23. Eventos definidos
13 escrita en libreta o en su
directamente en
celular utilizando el editor de
Javascript código propuesto. (Anexo 3
24. Eventos HTML pág. 31)
25. Evento como propiedad k. Código de la Práctica guiada
26. Formularios 14 escrita en libreta o en su
27. Validación de campos celular utilizando el editor de

código propuesto. (Anexo 3
pág. 32)
l. Código de la Práctica guiada
pág. 33)
m. Código de la Práctica guiada
pág. 34)
n. Código de la Práctica guiada
pág. 36)
o. Código de la Práctica
autónoma 3, Crea una
galería fotográfica; escrita
en libreta o en su celular
utilizando el editor de código
propuesto

Módulo/Submódulo:
Submódulo 3. Desarrolla aplicaciones que se ejecutan en el servidor.
• Ejecuta su examen de • Contestar correctamente el examen de diagnóstico (Anexo 1) • Examen escrito en su
diagnostico • Revisa la guía para la instalación del servidor web apache- Xampp, cuaderno.
• Conoce la instalación del reflexiona y con su propia interpretación genera un procedimiento, que • Reporte escrito.
servidor web apache-Xampp. incluya la instalación, sugerencias y conclusiones. (Anexo 2) • Resumen escrito.
• Selecciona el lenguaje de • Identifica las características y la sintaxis del lenguaje php. (Anexo 3) • Ejercicios realizados en su
programación PHP. • Analiza los ejemplos propuestos en php, y resuelve los ejercicios cuaderno.
• Realiza ejemplos propuestos planteados.
de problemas cotidianos en
programación en PHP.
• Identifica la metodología de ✓ Seleccionar las Estructuras de control, para la solución de problemas • Resumen
programación en php. cotidianos de acuerdo a la situación. (Anexo 4) • Ejercicios realizados
✓ Las condiciones:
If
Switch
✓ Los bucles
For
While
Do while
Foreach
• Diseño de proyecto final Con base en el ejemplo mostrado para Altas de registros, bajas de registros, Diseño y Codificación de las interfaces
mediante las etapas: consulta de registros, modificación de registros y listado de registros. El alumno en su libreta de los programas de:
• Creación de BD en servidor deberá realizar en su libreta un sistema semejante considerando: • Altas de Registros
• Diseño Front-end 1.- La base de datos tendrá los campos de: • Bajas de Registros
(formularios) a) Matricula • Consulta de Registros
• Diseño Back-end (conexión b) Apellido paterno • Modificación de Registros
con bd y ejecución en c) Apellido materno • Listados de Registros
servidor). d) Nombres
e) Semestre
f) Especialidad
2.- Dibuja en tu libreta las interfaces de cada uno de los programas de Altas,
bajas, consulta, modificación y listado de registros.
3.- Escribe el código en tu libreta de cada uno de los programas de cada una de
las interfaces (Formularios).
Se anexa documento con el código básico de cada uno de los programas de
Altas, Bajas, Consultas, Modificaciones y listado de registro de ejemplo. (Anexo
5).
Anexos del Submódulo 3
Anexo 1
Examen de diagnóstico
Examen de diagnóstico.
Alumno: ___________________________________________________________ Semestre: _____ Grupo: ____
Submódulo 3: Desarrolla Aplicaciones que se ejecutan en el servidor Fecha: ___________________________
FACILITADOR: ________________________________________________________________________________
I.- CONTESTA BREVEMENTE LAS SIGUIENTES INTERROGACIONES
1. ¿Escribe la definición de Internet?
2. ¿Explica que es la WEB?
3. ¿Define Qué es una página WEB? (Página estática: Página dinámica:)
4. ¿Cuáles son los servicios que brinda Internet?
5. Menciona por lo menos una característica de la WEB 1.0, 2.0, 3.0 y 4.0
6. ¿Qué es una dirección IP?
7. ¿Define el concepto de un servidor web?
8.- Contesta brevemente a qué se refieren los siguientes métodos:
$_SERVER
$_GET
$_POST
9.- Como se declaran las variables en PHP
10.- Cuales son las sentencias que se utilizan en PHP para escribir mensajes en la pantalla
II.- DISEÑAR EL SIGUIENTE FORMULARIO: Y CALCULAR EN PHP: ¿cuánto pagaría un cliente, si elige un plan de pagos de acuerdo a los siguientes
datos?
12 meses = 12 % de interés anual

24 meses = 17 % de interés anual.
Menor de 12 meses = no paga interés.
Solo se acepta un máximo plan de 24 meses
Anexo 2
Anexo 3
PHP
El lenguaje PHP (cuyo nombre es acrónimo de PHP: Hipertext Preprocessor) es un lenguaje interpretado con una sintaxis similar a la de C++ o JAVA. Aunque
el lenguaje se puede usar para realizar cualquier tipo de programa, es en la generación dinámica de páginas web donde ha alcanzado su máxima popularidad.
En concreto, suele incluirse incrustado en páginas HTML (o XHTML), siendo el servidor web el encargado de ejecutarlo.
1. Sintaxis básica
XHTML (Extensible Hypertext Markup Language) es un lenguaje de etiquetas. Es el sucesor de HTML y se basa en la sintaxis de XML. Asegura la compatibilidad
tanto en equipos clásicos como en smartphones.
Ya conoce las etiquetas <html>, <body>, <head>...
Escriba PHP entre dos etiquetas. Se definen de la siguiente manera:

<?php: indica el comienzo del código PHP
?>: indica el final del código PHP
Una instrucción siempre termina con un punto y coma.
Ejemplo
<?php
echo ’<p>Hola!</p>’;
?>
También puede escribir este código en una sola línea:

<?php echo ’<p>Hola!</p>’; ?>
2. Inserción de etiquetas PHP en el código XHTML

Puedes insertar un código PHP en cualquier ubicación del código XHTML.
<html>
<head>
<title>Ejemplo de página PHP</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
Hola, hace <?php echo ’como estas’; ?>
</body>
</html>
3. Envío de datos al servidor Web

Existen varias instrucciones para enviar datos al servidor, es decir, para insertar código HTML en una página Web.
La primera instrucción es echo y se escribe de la siguiente manera:
<?php echo ’texto’; ?>
También puede escribir este código:
<?php echo "texto"; ?>
O bien:
<?php echo(’texto’); ?>
La segunda instrucción es print y se escribe de la siguiente manera:
<?php print(’texto’); ?>
Por tanto, print equivale a echo.
Existen otras variantes de print:

printf(): muestra una cadena de caracteres formateada.
sprintf(): devuelve una cadena formateada.
vprintf(): muestra una cadena formateada.
sscanf(): analiza una cadena con ayuda de un formato.
fscanf(): analiza un archivo en función del formato.

flush(): vacía los búferes de salida.
También puede escribir varias instrucciones en la misma línea, siempre y cuando vayan separadas por punto y coma.
<?php echo ’texto’; ?> equivale a <?php echo ’tex’; echo ’to’; ?> y a
<?php echo ’tex’;
echo ’to’;
?>
4. Inserción del código XHTML con la instrucción echo
La función echo permite insertar cualquier código HTML, por ejemplo:
<?php echo ’<table><tr><td>texto</td></tr></table>’; ?>

Y como resultado inserta una tabla HTML.
También puede insertar una imagen de la siguiente manera:

<?php echo ’<img src="hoja.jpg" name="hoja" />’; ?>
Por tanto, puede escribir una página Web completa con la instrucción echo.
<?php
echo ’<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" , "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">’;

echo ’<html xmlns="http://www.w3.org/1999/xhtml">’;
echo ’<head>’;
echo ’<title>PHP </title>’;
echo ’</head>’;
echo ’<body>’;
echo ’<p>’;
echo "Hola $nombre !<br />";
echo ’La fecha es 20 de Enero del 2021 .’; //

echo ’</p>’;
echo ’</body>’;
echo ’</html>’;
?>
Las variables
1. Asignación
Una variable es una información que se almacena temporalmente en la memoria, es decir, es una zona de la memoria que almacena información en una página
PHP y que se destruye automáticamente cuando la página ya no se ejecuta.
Una variable PHP comienza siempre con $, seguida de una letra y de una secuencia de letras, cifras o del signo _.
Por ejemplo, $edad.
Atención: PHP distingue entre mayúsculas y minúsculas, por lo que $nombre es distinto de $Nombre.
Una variable siempre tiene un nombre y un valor.
Por ejemplo, $edad = 25, el valor 25 se asigna a la variable $edad gracias al signo =.
No es necesario definir y buscar el tipo de variable. Se hace automáticamente.
$dia = 24; //Se declara una variable de tipo integer.
$sueldo = 758.43; //Se declara una variable de tipo double.
$nombre = "juan"; //Se declara una variable de tipo string (cadena).
$salida = true; //Se declara una variable boolean.
De este modo, puede escribir:
<?php
$edad = 25; //variable de tipo numérico

//después
$edad = ’25’; //variable de tipo texto
?>
1. Operadores aritméticos
+ Suma dos valores

- Resta dos valores (o pasa a negativo un valor)
* Multiplica dos valores
/ Divide dos valores
% Resto de dividir dos valores
2. Tipos de variables
Hay dos categorías de variables:
Escalar:
Los números enteros llamados integer son 1, 2, 3... y los números negativos, -1, -2, -3...
Los números decimales llamados float son los números positivos o negativos con comas (1.35665).
Atención: el punto se utiliza como separador.
La cadena de caracteres string: cualquiera con dobles comillas ("hola") o comillas simples
(’hola’).
Los booleanos: solo tienen dos tipos de valores: verdadero o falso, clasificados
Como true o false.
Compuesta:
3. La concatenación
Es un conjunto de cadena de caracteres. PHP permite la concatenación usando la coma o el punto.

<?php
echo ’hola ’.’lee esta ayuda’;
?>
Equivale a:
<?php
echo ’hola ’,lee esta ayuda’;
?>
Da como resultado:
Hola lee esta ayuda
Si quiere concatenar la cadena "hola" y "aquí hay un apóstrofo ’", no podrá escribir:
<?php
echo ’hola ’.’aquí hay un apóstrofo ’’;
?> marcaría error.
Ejercicios
1.- Diseña un código donde muestre tu nombre completo.

2.- Diseña un código que indique los siguientes datos : calle, numero de calle, colonia, municipio y teléfono.
3.- Diseña un código para almacenas 2 números y realice una suma.
Anexo 4
ESTRUCTURAS DE CONTROL
1. Operadores de comparación(relacionales)
== Comprueba si dos números son iguales

!= Comprueba si dos números son distintos
> Mayor que, devuelve true en caso afirmativo
< Menor que, devuelve true en caso afirmativo
>= Mayor o igual

<= Menor o igual
1. Operadores lógicos
! Operador NO o negación. Si era true pasa a false y viceversa

And Operador Y, si ambos son verdaderos vale verdadero
or Operador O, vale verdadero si alguno de los dos es verdadero
xor Verdadero si alguno de los dos es true pero nunca ambos
&& True si ambos lo son
|| True si alguno lo es
Cuando se pretende que el script tome un camino concreto en determinados casos y otro diferente si las condiciones de ejecución difieren, se utiliza
el conjunto de instrucciones: if, else y elseif.
La estructura base es la siguiente:
if (Condición) {
Instrucción 1;
Instrucción 2;
}
else {
Instrucción a;
Instrucción b;
}
EJEMPLO.
If
<?php
$tmp = 1;
$variable = $tmp>5 ? 'Es mayor a 5' : No es mayor a 5';
echo $variable;
?>
<?php
$nombre = ’Miguel’; //declaración de la variable $nombre
if ($nombre == ’Velez’) //comprueba la variable $nombre
{
echo ’Bienvenido’;
}
else
{
echo ’denegado’;
}
?>
Resultado es igual a “denegado”
<?php
$edad = 18; //declaración de la variable $edad
if ($edad>= 18) //comprueba la variable $edad
{
echo ’Eres mayor de edad ya puedes votar’;
}
else
{
echo ’Eres menor de edad’;
}
?>
Resultado es igual a “ Eres mayo de edad ya puedes votar”
Condicionales compuestas if elseif

if (Condicion 1)
{
Instrucción a;
}
elseif (Condicion 2)
{
Instrucción b;
}
else
{
Instrucción c;
}
<?php
$nombre = ’Miguel’; //declaración de la variable $nombre
if ($nombre == ’velez’) //comprueba la variable $nombre

{
echo ’Bienvenido’;
}
else if ($nombre == ’Miguel’) //comprueba la variable $nombre
{
echo ’Hola’;
}
else
{
echo ’Denegado’;
}
?>
Resultado es igual a “Hola”
Sentencia Switch
1. Un switch busca dentro de los “case” el valor de la variable o expresión evaluada (generalmente se evalúan variables).
2. Si lo encuentra, ejecuta el código correspondiente.
3. Si no lo encuentra, ejecuta el código por default.
4. Observaciones: El case por default es opcional.
5. Es importante poner “break;” al final de cada bloque de código dentro de cada case para que el switch no siga comparando al valor de la variable con los
case que le siguen al correcto.
Sintaxis:
switch(expresión) {
case "a": //Código a ejecutar;

break;
case "b": //Código a ejecutar;
break;
case "c": //Código a ejecutar;
break;
default: //Código a ejecutar por default.
}
Ejemplo
<?php
$nombre = ’miguel’; //declaración de la variable $nombre
switch ($nombre) //comprueba la variable $nombre
{
case ’miguel’:
echo ’Hola’;
break;
case ’Juan’:
echo ’Hasta pronto’;
break;
}
?>
Resultado = Hola
La instrucción break provoca la salida del switch y si $nombre es igual a "miguel" el código ejecutará echo "Hola" y break, y saldrá
del switch sin comprobar "Juan".
<?php
$edad = 25; //declaración de la variable $edad
switch ($edad) //comprueba la variable $edad

{
case 20:
echo "Tiene 25 años.";
break;
case 25:
echo "Tiene 25 años.";
break;
default:
echo "No tiene 20 ni 25 años.";
?>
Resultado = tiene 25 años
Los bucles
1. For
Un bucle permite repetir n veces la ejecución de un código.
Por ejemplo, si quiere mostrar diez veces «Hola», solo tiene que escribir el bucle for.
<?php
for ($i = 1; $i <= 10; $i++)
{
echo ’Hola <br />’;

}
?>
La variable $i representa el contador del bucle.
Por tanto, la sintaxis es:
for ($i=número inicial; $i <= número final; aumento)
{
instrucciones
}
$i++ es igual a $i=$i+1 y representa el aumento de $i. Puede escribir $i=$i+2 para aumeto $i=$i-1 para disminuir.
Por ejemplo, puede escribir los números de 100 a 150 con el siguiente código:
<?php
for ($i = 100; $i <= 150; $i++)

{
echo $i.’<br />’;
}
?>
La instrucción echo $i.’<br />’; se repite 50 veces y $i aumenta en 1 cada vez.
<br /> permite saltar una línea entre cada número para no tener que mostrarlos todos.
La instrucción break permite detener el bucle.

Por ejemplo, si quiere mostrar cinco veces «Hola», solo debe escribir un bucle for:
<?php
for ($i = 1; $i <= 10; $i++)

{
if ($i == 5) {
break;
}
}
?>
Da como resultado:
Hola
Hola
Hola
Hola
Hola
El bucle se detiene cuando $i es igual a 5 (y no a 10).
2. While
El bucle while significa «mientras que», es decir, el bucle se ejecutará siempre y cuando una condición sea verdadera.
Por ejemplo, para mostrar diez veces «Hola», solo debe escribir un bucle while:
<?php
$i = 1;
while ($i <= 10)
{
$i=$i+1;
}
?>
La variable $i representa el contador del bucle. Pero mientras $i sea inferior o igual a 10, se repetirá el bucle.
Por lo tanto, la sintaxis es:
$i=número inicial
while ($i <= número final)
{
aumento
instrucciones
}
No olvide poner el aumento de $i en las instrucciones de while; de lo contrario $i nunca valdrá 10 y
tendrá un bucle infinito.
Considera que el valor de salida de $i se pone antes del bucle y que este valor debe respetar la condición del bucle ($i <= número final) para entrar en el bucle.
Si escribe:
<?php
$i = 11;
while ($i <= 10)
{
$i=$i+1;
}
?>
Nunca pasará en el bucle porque $i vale 11 en un principio, no se satisface la condición del bucle.
El bucle while es igual al bucle for; en algunas ocasiones le resultará muy útil si desconoce el número de veces que va a ejecutar un bucle, sobre todo si va a leer
el bucle while en la base de datos y la condición de salida del bucle depende del valor leído en la base de datos.
3. Do while
El bucle Do while significa «hacer mientras», es decir, el bucle se ejecutará siempre y cuando una condición sea verdadera. Se diferencia del bucle while en que
la expresión se ejecuta al menos una vez.
Por ejemplo, para mostrar diez veces ”Hola”, debe escribir el bucle Do while:
<?php
$i = 1;
do
{
$i=$i+1;
} while ($i <= 10)
?>
La variable $i representa el contador del bucle. Pero esta vez debe leer: ejecutar el bucle si $i es nferior o igual a 10.
Por tanto, la sintaxis es:
$i=número inicial
do
{
aumento
instrucciones
} while ($i <= número final)
<?php
$i = 1;
do
{
$i=$i+1;
} while ($i <= 10)
?>
EJERCICIOS PROPUESTOS
1.- Diseña un código para revisar el nombre y contraseña de un usuario para simular el ingreso a un sistema. El mensaje puede ser “acceso autorizado” o
“acceso denegado”.
2.- Diseña un código para promediar tres calificaciones y verificar si su promedio es aprobado con la mínima de 6 si no es reprobado.
3.- Diseñar un código para registrar tres edades y verificar quien es el mayor, el menor o son iguales.
4.- Diseñar un código para registrar un día de la semana y que muestre que día de la semana es.
5.- Diseñar un código para que muestre 15 veces tu nombre completo, utiliza el bucle que prefieras.
Anexo 5
¡Éxito!

Programación Módulo III-Cuadernillo

Cargado por

Información del documento

Descripción original:

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

Programación Módulo III-Cuadernillo

Cargado por

Copyright:

Formatos disponibles

Subsecretaría de Educación Media Superior

Dirección General de Educación Tecnológica Industrial y de Servicios

Carrera: Programación Semestre: Cuarto

Módulo III. Desarrolla aplicaciones Web.

6. Escribe los navegadores que conoces.

Figura 1.1. Captura de pantalla. Tomado de:

Figura 1.2. Captura de pantalla. Tomado de:

Situación 1.1: Elaborando una página informativa

1.1.1. Elementos básicos

Existen muchas herramientas (tools) que permiten crear, de una forma

Web, WWW o W3.

año 2014 festejó sus 25 años. Se refiere normalmente a un sistema de

Figura 1.3 Representación amigable de la “telaraña” (web).

inclusive permite que el usuario pueda interactuar con sus elementos,

Actividad 1: Diseñe en su cuaderno de apuntes, un mapa mental con la

1.1.2. Etiquetas y atributos. Actividad 2:

enmarcando el inicio y fin (salvo algunas excepciones). El nombre inicial

Figura 1.4 Etiquetas básicas para el diseño de páginas web.

Figura 1.5 Etiquetas y atributos para colocar un mensaje en una página

Actividad 3: ¡Vamos a jugar! utilizando elementos que se puedan

1.1.3. Estructura de una página web.

Un documento HTML inicia con la etiqueta <html> y finaliza con </html>.

La estructura básica de una página web es la siguiente:

Ejemplo: para mostrar el empleo de la estructura básica de un

muestra en la figura 1.6, con elementos mínimos, cuyo código se observa

Figura 1.6. Página web básica.

Figura 1.7. Etiquetas para la creación de una página web básica.

Explicación: los números de línea que se observan en la figura,

En la línea 1, inicia el documento HTML, finalizando en la línea 12.

El encabezado se encuentra delimitado por las etiquetas de las líneas 2 y

1.1.4. Títulos, textos y párrafos.

Ejemplo: en la figura 1.8 se muestra el empleo de los seis diferentes

Figura 1.8. Página web con estilos de títulos automáticos.

Explicación: en la línea 1, inicia el documento HTML, finalizando en la

Actividad 5: en tu cuaderno de apuntes, diseña una página web en la que

coherentes y ordenados a través de la palabra o la escritura auxiliándose

En HTML para delimitar cada párrafo, se emplea la etiqueta <P> y </P>.

Figura 1.10. Alineación de párrafos.

Actividad 6: Diseñe en un mapa mental, los elementos contenidos en el

Actividad 7: busca un libro que tengas en casa, localiza el primer capítulo,

1.1.5. Formatos, líneas, imágenes, propiedades.

Otro de los puntos importantes en el diseño web, es el aspecto que va a

Ya se ejemplificó en uso de la etiqueta H1 a la H6 que escribe títulos de

Figura 1.11. Etiquetas para aplicarle estilo a un texto.

Figura 1.12. Vista de las etiquetas para aplicarle estilo a un texto.

Figura 1.13. Atributos de la etiqueta <FONT></FONT>.

Ejemplo: escribiendo el siguiente código, se presentará la página web de

<FONT SIZE=6 FACE= “Algerian”, “Times New Roman”, “Arial” COLOR=

Figura 1.14. Ejemplo de los atributos de la etiqueta <FONT></FONT>.

Figura 1.15. Atributos de la etiqueta <HR>

Ejemplo: para realiza la página web que se muestra en la figura 1.16, se

Figura 1.16. Modelo de la etiqueta <HR>

Figura 1.17. Código para probar el empleo de la etiqueta <HR>.

Figura 1.18. Atributos de la etiqueta imagen <IMG>.

Las imágenes aceptadas, dependen del navegador o de un programa

Ejemplo: El código que se muestra en la figura 1.19, muestra la página

Figura 1.19. Código para probar la etiqueta <IMG>.

Figura 1.20. Muestra de la etiqueta <IMG>.

Figura 1.21. Atributos de la etiqueta <BODY> </BODY>.

Actividad 8: ¡Estás listo para crear páginas sencillas y atractivas! Las

1.1.6. Listas y tablas.

• De definiciones: muestran un conjunto de definiciones, similar a un

Figura 1.22. Etiquetas para el diseño de listas.