Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Programación Módulo III-Cuadernillo
Programación Módulo III-Cuadernillo
Aprendizajes esenciales
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?
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
http://www.dgeti.sep.gob.mx/index.php/la-dgeti-hoy/953-regreso-
seguro-a-clases-5
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.
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
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.
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
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.
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.
Figura 1.9. Código para escribir una página web con estilos de títulos
automáticos.
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.
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
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.
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
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
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.
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
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
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>.
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
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.
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.24. Código para mostrar una lista ordenada de los signos
zodiacales.
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
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.
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
Aprendizajes esenciales o
Estrategias de Aprendizaje Productos a Evaluar
Competencias esenciales 2º parcial
Vínculo (link).
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
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.
2.1.2. Evolución.
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
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
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.
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
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.
2.1.5. Creación.
Actividad 14:
Figura 1.34 con notas aclaratorias.
Actividad 15:
Archivo con hoja de estilos:
(estiloOaxaca.CSS) creado en el
cuaderno de apuntes.
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.
Actividad 15: Realizar el ejemplo propuesto, siguiendo cada uno de los pasos y
guiándose de las figuras 1.32 a la 1.35.
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!
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
body {
font-size:80%;
}
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
#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
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.
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?.
9.- ¿Por qué es más sencillo y económico tener una página web responsiva?.
Aprendizajes esenciales
Aprendizajes esenciales o
Estrategias de Aprendizaje Productos a Evaluar
Competencias esenciales 1er parcial
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
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 o
Estrategias de Aprendizaje Productos a Evaluar
Competencias esenciales 2º parcial
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
3 escrita en libreta. (Anexo 2
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
4. Código de la Práctica guiada
Script con fecha documentación adjunta. (Anexo 2 pág. 20-30)
4 escrita en libreta. (Anexo 2
2. Variables f. Realiza Practica Guiada 5 Ejemplo con Sentencia If/else (Anexo 2 pág.
pág. 12)
21)
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
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
7. Código de la Práctica guiada
Script conversor
6 escrita en libreta. (Anexo 2
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 o
Estrategias de Aprendizaje Productos a Evaluar
Competencias esenciales 3er parcial
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)
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
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
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
Aprendizajes esenciales o
Estrategias de Aprendizaje Productos a Evaluar
Competencias esenciales 1er parcial
• 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.
Aprendizajes esenciales o
Estrategias de Aprendizaje Productos a Evaluar
Competencias esenciales 2º parcial
• 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
Aprendizajes esenciales o
Estrategias de Aprendizaje Productos a Evaluar
Competencias esenciales 3er parcial
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
• 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).
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
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: ________________________________________________________________________________
5. Menciona por lo menos una característica de la WEB 1.0, 2.0, 3.0 y 4.0
$_SERVER
$_GET
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
$_POST
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?
Anexo 2
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
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
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
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
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
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.
Ejemplo
<?php
echo ’<p>Hola!</p>’;
?>
<html>
<head>
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
O bien:
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’;
?>
Por tanto, puede escribir una página Web completa con la instrucción echo.
<?php
?>
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.
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.
<?php
?>
1. Operadores aritméticos
2. Tipos 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).
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
<?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
Anexo 4
ESTRUCTURAS DE CONTROL
1. Operadores de comparación(relacionales)
1. Operadores lógicos
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.
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;
?>
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
<?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’;
}
?>
Instrucción b;
}
else
{
Instrucción c;
}
<?php
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.
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
Sintaxis:
switch(expresión) {
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
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
case 20:
break;
case 25:
break;
default:
?>
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++)
{
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
$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
?>
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
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;
echo ’Hola <br />’;
}
?>
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:
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
<?php
$i = 11;
while ($i <= 10)
{
$i=$i+1;
echo ’Hola <br />’;
}
?>
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;
echo ’Hola <br />’;
} 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
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
instrucciones
} while ($i <= número final)
<?php
$i = 1;
do
{
$i=$i+1;
echo ’Hola <br />’;
} 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
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
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
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
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
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
¡Éxito!