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: [Link]
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?
 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

6. Escribe los navegadores que conoces.

Figura 1.1. Captura de pantalla. Tomado de:

[Link]

Figura 1.2. Captura de pantalla. Tomado de:

 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

[Link]
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
 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

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

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

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

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

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

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

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.

 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

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

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

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 [Link] 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: [Link] 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
 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

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:
Página web diseñada en el cuaderno
de apuntes, con las etiquetas
necesarias, empleando una
estructuración adecuada.
 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

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

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.

 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

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

 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

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

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>

 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

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

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

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

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

 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

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

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

mencionados, que se logra mediante el código de etiquetas mostrado en

la figura 1.24.

Actividad 9:
Página web diseñada en el cuaderno
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.

 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

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

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.

 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

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

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

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

Jiménez Guzmán. Editorial: FCE, SEP, DGETI. Primera edición. 2016.

México.

Aprendizajes esenciales o
Estrategias de Aprendizaje Productos a Evaluar
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:
([Link]).
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
 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

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

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

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:
[Link]
 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

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

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:

[Link] 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
 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

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

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

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: [Link]. Recuerda que, al grabar un archivo de este
 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

tipo, se debe seleccionar: Todos los archivos, en lugar del tipo:

archivos de texto.

Figura 1.32 Archivo: [Link] parte 1.

 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

Figura 1.33 Archivo: [Link] parte 2.

3. Crear el archivo: [Link], con el

código mostrado en la figura 1.34, que deberá estar guardado en
la carpeta ejerWeb, creada en la unidad C.
 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

Actividad 14:
Figura 1.34 con notas aclaratorias.

Actividad 15:
Archivo con hoja de estilos:
([Link]) 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.

[Link].

4. Ejecute el archivo creado y se mostrará en el navegador, la página que

se observa en la figura 1.35.
 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

Figura 1.35. Página [Link] 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,
 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

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.

Aprendizajes esenciales o
Estrategias de Aprendizaje Productos a Evaluar
Competencias esenciales 3er parcial
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.
 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

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

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 */

@media screen and (min-width:1200px) {
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
 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

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

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([Link]);} /*
Logo mediano, para anchos de pantalla de entre 480 y 800px */ @media
screen and (min-width:480px) { .logo { background-image:
url([Link]); }} /* Logo grande, para anchos de pantalla
de entre 800 y 1280px */ @media screen and (min-width:800px) { .logo
{ background-image: url([Link]); }} /* Logo
gigante, para anchos de pantalla de más de 1280px */ @media screen and
(min-width:1280px) { .logo { background-image: url(logo-
[Link]); }}
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
 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

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

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:
@media screen and (min-width:640px) {
 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

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

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
[Link]
2. Contesta correctamente el siguiente cuestionario
tomando de referencia la información aquí proporcionada.
1.- Explica que es una página web responsiva.
 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

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

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

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

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

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.