Tecnológico Nacional de México

Instituto Tecnológico Superior de Las Choapas

Antología de la Materia
“Programación Web”
“AEB-1055”

Desarrollada por:
MTI. Alejandrina Isabel Cruz Rodríguez

Las Choapas, Ver., febrero de 2021.

AUTORIDADES

MTI. Alejandrina Isabel Cruz Rodríguez

Elaboró: Docente

Dr. José Alfonso Gómez Sánchez

Revisión por la
Presidente de Academia de Ingeniería
Academia
en Sistemas Computacionales

Lic. Itzel Antonio Toledo

Jefe del Depto. de ingeniería en
Sistemas Computacionales

Autorizó Mtro. Jesús Francisco Solís Alvarado

Subdirector Académico

Mtro. Diego Alberto Zetina García

Director Académico

i
AGRADECIMIENTOS

Antes que todo mi eterno agradecimiento a Dios por toda su Misericordia y bondad en mi
vida.

A través de estas líneas quiero expresar mi más sincero agradecimiento a todas las
personas que me han apoyado profesional y humanamente en la realización de esta
antología.

Quiero agradecer principalmente a mi preciada Institución, la cual es mi sustento y fuente

de trabajo, y dignamente fomenta grandes valores y está conformada por profesionistas de
gran calidad.

Agradezco a mis compañeros de la Academia de Ingeniería en Sistemas Computacionales,

por su apoyo y su buena disposición para trabajar siempre en equipo.

Agradezco a mis queridos alumnos, los cuales me impulsan a estar en constante

actualización docente para poder brindarles una mejor educación de calidad, y contribuir en
su formación como futuros Ingenieros en Sistemas Computacionales.

Finalmente, agradezco eternamente a mi familia, especialmente a mis Padres por su

comprensión, por su apoyo incondicional y su infinito amor para mí y mi preciado bebé
Azarías, por cuidar de él en mis horas de trabajo.

ii
RESUMEN

La asignatura está organizada en cinco temas:

El primer tema, se centra en antecedentes de las aplicaciones web, su arquitectura, las

tecnologías utilizadas y la forma en que se deberán planificar.

El segundo, aborda los lenguajes de marcado, como lo es HTML, XML en sus versiones
más recientes, de la misma forma se aborda el tema de lenguaje de presentación CSS para
la creación de hojas de estilo en cascada, en donde se obtenga una comprensión de su
estructura y forma de trabajar con los elementos que la integran.

El tercer tema, se centra en la creación, control y manipulación de objetos utilizados por el

cliente de las aplicaciones web, así como la integración de diversos Frameworks
disponibles.

En el cuarto tema, se aborda la programación del lado del servidor en donde se logre la
manipulación de objetos y el acceso a datos para la presentación de procesos dinámicos y
sus resultados en una aplicación web.

En el quinto tema, se trata lo relacionado al cómputo en la nube, los patrones de diseño y

desarrollo, para su posterior integración con servicios web.

La importancia de la asignatura se centra en conocer y desarrollar cada una de las etapas

de la programación para la solución de problemas en un lenguaje de programación en
ambiente web, por lo que se recomienda que el estudiante desarrolle programas
demostrativos en cada tema visto en clase generando un proyecto integrador y poniendo
atención en los avances de los estudiantes.

iii
INTRODUCCION

La asignatura de Programación Web aporta al perfil del egresado la capacidad para

desarrollar y administrar software que apoye la productividad y competitividad de las
organizaciones cumpliendo con estándares de calidad, mediante el desarrollo de
aplicaciones web utilizando lenguajes de marcas, de presentación, del lado del cliente, del
servidor y con la colaboración de cómputo en la nube.

Es de suma importancia porque permite al estudiante concluir en un proyecto formal de

desarrollo de software aplicando varias competencias adquiridas durante su trayectoria de
formación, por ello se inserta en los últimos semestres.

Para adquirir la competencia planteada en esta asignatura es necesario que el estudiante

haya acreditado la asignatura de Programación Orientada a Objetos, Taller de Bases de
Datos y Taller de Ingeniería de Software.

iv
Tabla de contenido

AUTORIDADES .................................................................................................................. i
AGRADECIMIENTOS ......................................................................................................... ii
RESUMEN......................................................................................................................... iii
INTRODUCCION ............................................................................................................... iv
UNIDAD I (INTRODUCCIÓN A LAS APLICACIONES WEB) ............................................. 1
COMPETENCIA(S) A DESARROLLAR.......................................................................... 2
COMPETENCIAS PREVIAS .......................................................................................... 2
TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN. ......................................................... 2
1.1 Evolución de las aplicaciones web. .......................................................................... 4
1.2. Arquitectura de las aplicaciones web ..................................................................... 11
1.3 Tecnologías para el desarrollo de aplicaciones web ............................................... 16
1.4 Planificación de aplicaciones web .......................................................................... 21
Actividades de aprendizaje ....................................................................................... 24
Materiales y recursos didácticos. .............................................................................. 24
ORIENTACIONES SOBRE LA EVALUACIÓN. ............................................................ 25
UNIDAD II (HTML, XML Y CSS) ...................................................................................... 26
COMPETENCIA(S) A DESARROLLAR........................................................................ 27
COMPETENCIAS PREVIAS ........................................................................................ 27
TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN. ....................................................... 27
2.1 Introducción............................................................................................................ 29
2.2 Estructura global de un documento Web. ............................................................... 30
2.3 Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones.
..................................................................................................................................... 31
2.4 Formularios ............................................................................................................ 35
2.5 Lenguajes de presentación en documentos Web. .................................................. 39
2.6 Selectores. ............................................................................................................. 41
2.7 Modelo de caja. ...................................................................................................... 45
Actividades de aprendizaje ....................................................................................... 80
Prácticas ................................................................................................................... 81
Materiales y recursos didácticos. ............................................................................ 101
ORIENTACIONES SOBRE LA EVALUACIÓN. .......................................................... 102

v
UNIDAD III (PROGRAMACIÓN DEL LADO DEL CLIENTE) .......................................... 103
COMPETENCIA(S) A DESARROLLAR...................................................................... 104
COMPETENCIAS PREVIAS ...................................................................................... 104
TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN. ..................................................... 104
3.1 Introducción al lenguaje........................................................................................ 106
3.2 Manejo de Frameworks ........................................................................................ 109
3.3 Estructuras de Control. ......................................................................................... 111
3.4 Manipulación de objetos. ...................................................................................... 117
Actividades de aprendizaje ..................................................................................... 120
Prácticas ................................................................................................................. 120
ORIENTACIONES SOBRE LA EVALUACIÓN. .......................................................... 121
UNIDAD IV (PROGRAMACIÓN DEL LADO DEL SERVIDOR) ...................................... 122
COMPETENCIA(S) A DESARROLLAR...................................................................... 123
COMPETENCIAS PREVIAS ...................................................................................... 123
TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN. ..................................................... 123
4.1 Introducción al lenguaje........................................................................................ 125
4.2 Estructuras de Control. ......................................................................................... 128
4.3 Tratamiento de Formularios.................................................................................. 130
4.4 Manejo de objetos del servidor ............................................................................. 139
4.5 Creación de clases. .............................................................................................. 144
4.6 Acceso a datos. .................................................................................................... 145
Actividades de aprendizaje ..................................................................................... 149
Prácticas ................................................................................................................. 149
ORIENTACIONES SOBRE LA EVALUACIÓN. .......................................................... 169
UNIDAD V (CÓMPUTO EN LA NUBE Y SERVICIOS) ................................................... 170
COMPETENCIA(S) A DESARROLLAR...................................................................... 171
COMPETENCIAS PREVIAS ...................................................................................... 171
TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN. ..................................................... 171
5.1 Conceptos generales............................................................................................ 173
5.2 Tipos de Servicios en la nube............................................................................... 176
5.3 Patrones de diseño. ............................................................................................. 181
5.4 Estándares en servicios. ...................................................................................... 187
5.5 Plataformas tecnológicas ..................................................................................... 191

vi
 5.6 Seguridad e interoperabilidad. .............................................................................. 195
Actividades de aprendizaje ..................................................................................... 198
Prácticas ................................................................................................................. 198
ORIENTACIONES SOBRE LA EVALUACIÓN. .......................................................... 199
PROYECTO DE ASIGNATURA ..................................................................................... 200
REFERENCIAS ............................................................................................................. 201
ANEXOS........................................................................................................................ 203

vii
Indice de Figuras

Figura 1. Funcionamiento de HTTP ................................................................................... 5

Figura 2. Arquitectura Cliente/ Servidor ........................................................................... 12
Figura 3. Arquitectura de tres capas ................................................................................ 14
Figura 4. Fases de la metodología OOHDM .................................................................... 22
Figura 5. Representación visual de un ejemplo de diseño de página web muy genérico y
habitual ............................................................................................................................ 31
Figura 6. Selector de Elemento........................................................................................ 41
Figura 7. Aplicar estilos a la etiqueta h3........................................................................... 41
Figura 8. Selector ID ........................................................................................................ 42
Figura 9. Selector de Clase.............................................................................................. 42
Figura 10. Aplicando jerarquías ....................................................................................... 43
Figura 11. Selector Universal ........................................................................................... 43
Figura 12. Descendientes del primer selector .................................................................. 44
Figura 13. Mezclar selectores descendentes ................................................................... 44
Figura 14. Descendientes directos ................................................................................... 44
Figura 15. Seleccionar elementos hermanos ................................................................... 45
Figura 16. Las cajas se crean automáticamente al definir cada elemento HTML ............. 45
Figura 17. Cajas que forman la página [Link] ..................................................... 46
Figura 18. Representación tridimensional del box model de CSS .................................... 47
Figura 19 Las cuatro propiedades relacionadas con los márgenes .................................. 50
Figura 20 Ejemplo de propiedad margin-left .................................................................... 51
Figura 21 Los márgenes verticales sólo se aplican a los elementos de bloque e imágenes
........................................................................................................................................ 52
Figura 22 Características de la propiedad Margin ............................................................ 53
Figura 23 Fusión automática de los márgenes verticales ................................................. 54
Figura 24 Fusión de los márgenes de los elementos interiores ........................................ 55
Figura 25 Motivo por el que se fusionan automáticamente los márgenes verticales ........ 55
Figura 26 Las cuatro propiedades relacionadas con los rellenos ..................................... 56
Figura 27 Ejemplo de propiedad border-width.................................................................. 58
Figura 28 Ejemplo de propiedad border-color .................................................................. 60
Figura 29 Ejemplo de propiedad border-style .................................................................. 62
Figura 30 Tipos de bordes definidos por CSS .................................................................. 63
Figura 31 La anchura total de un elemento tiene en cuenta los márgenes, rellenos y bordes
........................................................................................................................................ 67
Figura 32 Internet Explorer 6 en modo estándar .............................................................. 69
Figura 33 Internet Explorer 6 en modo quirks .................................................................. 69
Figura 34 Imagen original utilizada para el fondo de la página......................................... 72
Figura 35 Página con una imagen de fondo..................................................................... 72
Figura 36 Uso de repeat-x en la página de [Link] ..................................................... 74
Figura 37 Uso de repeat-y en la página de [Link].......................................... 75
Figura 38 Ejemplo de propiedad background-position ..................................................... 77
Figura 39 Esquema del patrón MVC .............................................................................. 109

viii
Figura 40. Árbol de nodos generado automáticamente por DOM a partir del código XHTML
de la página ................................................................................................................... 118
Figura 41. Imprime Hola Mundo en pantalla. ................................................................. 126
Figura 42. Imprime Adiós Mundo en pantalla. ................................................................ 127
Figura 43. Formulario sencillo ........................................................................................ 130
Figura 44. Uso de POST................................................................................................ 131
Figura 45. Formulario con uso de GET .......................................................................... 131
Figura 46. Uso de GET .................................................................................................. 131
Figura [Link] más importantes para los formularios HTML con PHP ................. 132
Figura 48. Ejemplo de formulario ................................................................................... 133
Figura [Link]ón filtrado(): ........................................................................................... 134
Figura 50 Aplicación de la función filtrado(): a cada campo ........................................... 134
Figura 51. Mostrar datos ................................................................................................ 134
Figura 52. Filtros de PHP ............................................................................................... 135
Figura 53. Array de errores ............................................................................................ 135
Figura 54. Ejemplo en un archivo [Link] .................................................................. 136
Figura 55. Función move_uploaded_file() ...................................................................... 137
Figura 56. Mensajes de errores ..................................................................................... 137
Figura 57. Atributo múltiple ............................................................................................ 138
Figura 58. Forma de omitir validaciones ........................................................................ 138
Figura 59. Clase destinada a sumar dos números. ........................................................ 145
Figura 60 Tipos de cómputo en la nube ......................................................................... 175
Figura 61. Pilares de la nube ......................................................................................... 178
Figura 62. Catálogo de Patrones ................................................................................... 187

ix
Indice de Tablas

Tabla 1 Uso Multidimensional de la Web ......................................................................... 10

Tabla 2. Productos y formalismos de la metodología OOHDM. ....................................... 23
Tabla 3. Atributos comunes (HTML) ................................................................................ 35
Tabla 4. Resumen de etiquetas básicas de formularios. .................................................. 37
Tabla 5. Jerarquía entre selectores.................................................................................. 43
Tabla 6 Características de la propiedad Width ................................................................. 48
Tabla 7 Características de la propiedad height ................................................................ 49
Tabla 8 Características de los márgenes ......................................................................... 50
Tabla 9 relleno horizontales y verticales de un elemento ................................................. 56
Tabla 10 Características de la propiedad Padding ........................................................... 57
Tabla 11 Características de las propiedades de los bordes ............................................. 58
Tabla 12 Características de la propiedad border-color ..................................................... 61
Tabla 13Características de las propiedades de los bordes .............................................. 62
Tabla 14 Características de la propiedad border-style ..................................................... 64
Tabla 15 Características de las propiedades shorthand................................................... 64
Tabla 16 Característica de la propiedad Border ............................................................... 65
Tabla 17 Características de la propiedad background-color............................................. 70
Tabla 18 Características de la propiedad background-image........................................... 71
Tabla 19 Características de la propiedad background-repeat .......................................... 73
Tabla 20 Características de la propiedad background-position ........................................ 76
Tabla 21 Características de la propiedad background-attachment ................................... 78
Tabla 22 Características de la propiedad background ..................................................... 78
Tabla 23. Principales elementos de seguridad dentro de los servicios Web .................. 196

x
 Unidad I (Introducción a las aplicaciones web)

UNIDAD I (INTRODUCCIÓN A LAS APLICACIONES WEB)

1
 Unidad I (Introducción a las aplicaciones web)

COMPETENCIA(S) A DESARROLLAR

Conoce la evolución, arquitectura, tecnologías y planificación de las aplicaciones Web

para la preparación de un ambiente de desarrollo.

COMPETENCIAS PREVIAS

Aplica métodos y herramientas de la ingeniería del software en el desarrollo de software

aplicando estándares de calidad y productividad.
Aplica un lenguaje orientado a objetos para la solución de problemas.
Crea y aplica esquemas de bases de datos para garantizar la confiabilidad de los datos en
aplicaciones para el tratamiento de información.

TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN.

Ante la necesidad de adaptarse a los cambios, algunas instituciones de Educación Superior

han empezado a hacer uso de nuevas estrategias para que sus estudiantes desarrollen
efectivamente los conocimientos, habilidades y actitudes que indican sus planes de estudio;
(Bergmann,2012), (Mingorance, Trujillo, Cáceres, y Torres, 2017) señalan entre las más
importantes:

➢ Aula Invertida
➢ Aprendizaje Semipresencial
➢ Aprendizaje Colaborativo
➢ Hiper-personalización
➢ Aprendizaje Experiencial
➢ Micro aprendizaje
➢ Entrenamiento Educativo
➢ Otras…

✓ Saber el nombre de los estudiantes y su situación: saber el nombre de los

estudiantes es el primer paso para trabajar la conexión con ellos. También es
importante conocer a cada estudiante con relación a sus fortalezas y debilidades.
✓ Saber el estilo de aprendizaje: Utilizar diferentes vías de acceso al aprendizaje
(visual, auditivo, musical, kinestésico, entre otras).

2
 Unidad I (Introducción a las aplicaciones web)

✓ Entusiasmo del profesor: es evidente cuando al profesor le gusta enseñar. El

aprendizaje va relacionado con la emoción. Es importante que el profesor tenga
buen humor.
✓ Intentar dedicar tiempo a cada estudiante: es comprensible que esto sea algo
difícil ya que se manejan grupos grandes, sin embargo, el profesor puede intentar
acercarse a sus estudiantes de manera individualizada para saber si comprendieron
la instrucción y dar apoyo.
✓ Brindar respeto y confianza: evitar llamados de atención y ridiculizar a los
estudiantes en público, mejor decir las cosas en privado. Mostrar apertura cuando
le pase algo o nos quieran contar algo. Mostrar flexibilidad.
✓ Refuerzo positivo: cuando haga algo bien felicitarle. Reforzar las habilidades del
estudiante.
✓ Explicar la importancia de la asignatura: explicar con ejemplos la utilidad de la
materia en su vida profesional.
✓ Variar los métodos de enseñanza: esto es recomendable hacer para los estudiantes
sientan que vale la pena ir a clases y no sea algo aburrido y monótono a lo que
tengan que asistir. Por lo que se recomienda que sea visual, auditivo y kinestésico.
✓ Fomentar la participación activa de los estudiantes: esto hacer con la finalidad de
aumentar el interés y aprendizaje de los estudiantes. El profesor puede hacer
preguntas y moverse por toda el aula.
✓ Responder claramente a las preguntas: la mayoría de estudiantes no preguntan por
temor o vergüenza. Por lo que será fundamental responder a todas las preguntas
por más básicas que sean.

3
 Unidad I (Introducción a las aplicaciones web)

1.1 Evolución de las aplicaciones web.

De acuerdo Carles Mateu (2004) Internet, la red de redes, nace a mediados de la década
de los setenta, bajo los auspicios de DARPA, la Agencia de Proyectos Avanzados para la
Defensa de Estados Unidos. DARPA inició un programa de investigación de técnicas y
tecnologías para unir diversas redes de conmutación de paquetes, permitiendo así a los
ordenadores conectados a estas redes comunicarse entre sí de forma fácil y transparente.

De estos proyectos nació un protocolo de comunicaciones de datos, IP o Internet Protocol,

que permitía a ordenadores diversos comunicarse a través de una red, Internet, formada
por la interconexión de diversas redes.

A mediados de los ochenta la Fundación Nacional para la Ciencia norteamericana, la NSF,

creó una red, la NSFNET, que se convirtió en el backbone (el troncal) de Internet junto con
otras redes similares creadas por la NASA (NSINet) y el U.S. DoE (Department of Energy)
con la ESNET. En Europa, la mayoría de países disponían de backbones nacionales
(NORDUNET, RedIRIS, SWITCH, etc.) y de una serie de iniciativas paneuropeas (EARN y
RARE). En esta época aparecen los primeros proveedores de acceso a Internet privados
que ofrecen acceso pagado a Internet.

A partir de esta época, gracias entre otras cosas a la amplia disponibilidad de

implementaciones de la suite de protocolos TCP/IP (formada por todos los protocolos de
Internet y no sólo por TCP e IP), algunas de las cuales eran ya de código libre, Internet
empezó lo que posteriormente se convertiría en una de sus características fundamentales,
un ritmo de crecimiento exponencial, hasta que a mediados del 2002 empieza a descender
ligeramente el ritmo de crecimiento.

A mediados de los noventa se inició el boom de Internet. En esa época el número de

proveedores de acceso privado se disparó, permitiendo a millones de personas acceder a
Internet, que a partir de ese momento ya se empezó a conocer como la Red, desbancado
a las demás redes de comunicación existentes (Compuserve, FidoNet/BBS, etc.). El punto
de inflexión vino marcado por la aparición de implementaciones de TCP/IP gratuitas (incluso
de implementaciones que formaban parte del sistema operativo) así como por la
popularización y abaratamiento de medios de acceso cada vez más rápidos (módems de
mayor velocidad, RDSI, ADSL, cable, satélite). El efecto de todos estos cambios fue de
“bola de nieve”: a medida que se conectaban más usuarios, los costes se reducían,
aparecían más proveedores e Internet se hacía más atractivo y económico, con lo que se
conectaban más usuarios, etc.

Tim Berners-Lee, es un científico de la computación británica, conocido por ser el Padre de

la Web. A él se deben los tres elementos que fueron clave en el nacimiento de la web.

HTML, HyperText Markup Languaje: Permite mostrar páginas con hipertexto (texto
en forma estructurada mediante enlaces).
URL, Localizador de Recursos Uniforme: Se refiere a la dirección única que
identifica una página web. Permite localizar o acceder de forma sencilla a cualquier

4
 Unidad I (Introducción a las aplicaciones web)

recurso de la red desde el navegador. Se utiliza un DNS, Servidor de Nombre de

Dominio, donde se tienen las direcciones IP con sus correspondientes URL, este
proceso es el que se lleva a cabo entre la comunicación de las computadoras.
HTTP, Protocolo de Transferencia de Hipertexto: Permite el intercambio de
información en las páginas web. Opera por petición y respuesta entre el cliente y el
servidor.

El protocolo HTTP

El protocolo HTTP (hypertext tranfer protocol) es el protocolo base de la WWW. Se trata de

un protocolo simple, orientado a conexión y sin estado.

De manera esquemática, el funcionamiento de HTTP es el siguiente: el cliente establece

una conexión TCP hacia el servidor, hacia el puerto HTTP (o el indicado en la dirección de
conexión), envía un comando HTTP de petición de un recurso (junto con algunas cabeceras
informativas) y por la misma conexión el servidor responde con los datos solicitados y con
algunas cabeceras informativas.

HTTP utiliza el puerto 80 (equivalente de alguna forma al identificador de conexión o

de servicio TCP) para todas las conexiones por defecto (podemos utilizar otros
puertos diferentes del 80).

HTTPS utiliza por defecto el puerto 443.

Existe una variante de HTTP llamada HTTPS (S por secure) que utiliza el protocolo de
seguridad SSL (secure socket layer) para cifrar y autenticar el tráfico entre cliente y servidor,
siendo ésta muy usada por los servidores web de comercio electrónico, así como por
aquellos que contienen información personal o confidencial. (Mateu, 2004).

Figura 1. Funcionamiento de HTTP

(Mateu, 2004)

5
 Unidad I (Introducción a las aplicaciones web)

Peticiones en HTTP: GET y POST

Las peticiones en HTTP pueden realizarse usando dos métodos. El método GET, en caso
de enviar parámetros junto a la petición, las enviaría codificadas en la URL. Por su parte, el
método POST, en caso de enviarlos, lo haría como parte del cuerpo de la petición.

Historia de las aplicaciones web

WEB (World Wide Web, o www), es un conjunto de documentos (webs) interconectados

por enlaces de hipertexto, disponibles en Internet que se pueden comunicar a través de la
tecnología digital. Se entiende por “hipertexto” la mezcla de textos, gráficos y archivos de
todo tipo, en un mismo documento. Web no son sinónimo de Internet; Internet es la red de
redes donde reside toda la información, siendo un entorno de aprendizaje abierto, más allá
de las instituciones educativas formales. La web es un subconjunto de Internet que contiene
información a la que se puede acceder usando un navegador. Tanto el correo electrónico,
como facebook, twiter, wikis, blogs, juegos, etc. son parte de Internet, pero no la web. La
web es un “organismo vivo” y, como tal, evoluciona. Desde su creación el año 1966, con
esa primera red Arpanet, hasta el posterior nacimiento del Internet que conocemos, no ha
dejado de cambiar y perfeccionarse. (Latorre Ariño, 2018).

Inicialmente la web era simplemente una colección de páginas estáticas, documentos, etc.,
que podían consultarse o descargarse. El siguiente paso en su evolución fue la inclusión
de un método para confeccionar páginas dinámicas que permitiesen que lo mostrado fuese
dinámico (generado o calculado a partir de los datos de la petición). Dicho método fue
conocido como CGI (common gateway interface) y definía un mecanismo mediante el cual
podíamos pasar información entre el servidor HTTP y programas externos. (Mateu, 2004).

Hemos pasado de una web 1.0 a la 2.0, 3.0 y ahora llega la web 4.0.

De acuerdo al artículo del Dr. Latorre Ariño (2018) plasma la web de la siguiente manera:

✓ La web 1.0, fue la primera (apareció hacia 1990) y en ella solo se podía consumir
contenido. Se trataba de información a la que se podía acceder, pero sin posibilidad
de interactuar; era unidireccional.
✓ La web 2.0, (apareció en 2004) y contiene los foros, los blogs, los comentarios y
después las redes sociales. La web 2.0 permite compartir información. Y aquí
estamos, de momento la mayor parte de los consumidores.
✓ La web 3.0 (fue operativa en el 2010) y se asocia a la web semántica, un concepto
que se refiere al uso de un lenguaje en la red. Por ejemplo, la búsqueda de
contenidos utilizando palabras clave.
✓ La web 4.0. empezó en el 2016 y se centra en ofrecer un comportamiento más
inteligente y más predictivo, de modo que podamos, con sólo realizar una afirmación
o una llamada, poner en marcha un conjunto de acciones que tendrán como
resultando aquello que pedimos, deseamos o decimos.

6
 Unidad I (Introducción a las aplicaciones web)

CARACTERÍSTICAS Y DIFERENCIAS ENTRE LA WEB 1.0, LA 2.0, LA 3.0 Y LA 4.0

¿Qué es la web 1.0?

La web 1.0 es la forma más básica que existe de navegadores de solo texto. Apareció hacia
1990 y es muy primitiva para lo que hoy ofrece la web. La web 1.0 la utilizan personas
conectadas a la web utilizando Internet y es de solo lectura y el usuario es, básicamente,
un sujeto pasivo que recibe la información o la pública, sin que existan posibilidades para
que se genere la interacción con el contenido de la página; está totalmente limitada a lo que
el webmaster –el experto que administra los contenidos-- sube a la página web. Esta web
primitiva es estática, centralizada, secuencial, de solo lectura, y es no interactiva. Sirve para
utilizar el correo electrónico, navegadores, motores de búsqueda, etc. Una página web que
se limita a mostrar información y que ni siquiera se actualiza, forma parte de la generación
1.0. En cambio, cuando las páginas ofrecen un nivel considerable de interacción y se
actualizan con los aportes de los usuarios, se llaman la web 2.0. Cabe mencionar que lo
que diferencia a la web 1.0 y la 2.0 no es el nivel tecnológico en los servidores, --aunque
naturalmente se ha dado un considerable avance en el hardware--, es, sobre todo, la
finalidad de la red, los objetivos y la forma en la que los usuarios perciben y utilizan la
información en línea; este cambio tuvo lugar silenciosa pero velozmente, a comienzos del
nuevo milenio. Hasta entonces, Internet era un universo de datos mayoritariamente
estáticos, una fuente de consulta revolucionaria que atraía a millones de personas a
contemplarla pasivamente. Si bien los foros y el chat datan de la web 1.0, éstos se
encontraban bien diferenciados de los sitios tradicionales (tal y como ocurre en la
actualidad); navegar por la web 1.0 era similar a visitar un gran centro comercial, con
infinidad de tiendas, en el cual era posible comprar productos, pero no alterar sus vidrieras
ni probarse las prendas de vestir.

¿Qué es la web 2.0?

El término web 2.0 fue acuñado por O’Reilly en 2004 para referirse a una segunda
generación de tecnología web basada en comunidades de usuarios y una gama especial
de servicios, como las redes sociales, los blogs, los wikis, los chat, foros, álbumes de
fotografía, presentaciones en red, etc., que fomentan la colaboración y el intercambio ágil
de información entre los usuarios de una comunidad o red social. La web 2 posibilita la
conexión de personas con personas –redes sociales, wikis, colaboración, con posibilidad
de compartir--. Es dinámica, interactiva, de lectura y escritura, desarrolla la inteligencia
colectiva y favorece el trabajo colaborativo, etc. La web 2.0 se vincula a los servicios que
permiten compartir datos e interactuar con gran facilidad. Las redes sociales y las
plataformas de colaboración constituyen la base de esta evolución de Internet. La web 2.0
es también llamada web social por el enfoque colaborativo y de interacción social de esta
herramienta. El web 2.0 es una actitud ante la comunicación que utiliza la tecnología. El uso
de la web 2.0 está orientado a la interacción en redes sociales, que pueden proporcionar
contenido, creando webs interactivas y visuales. Es decir, los sitios web 2.0 actúan como
puntos de encuentro de los usuarios, pues son bidireccionales, en contraposición de la web
1.0, que es unidireccional.

7
 Unidad I (Introducción a las aplicaciones web)

Con la llegada de la web 2.0, se produjo un fenómeno social que cambió para siempre
nuestra relación con la información y la comunicación, principalmente porque nos hizo parte
de ella; en la actualidad, una noticia acerca de una manifestación en contra del maltrato
animal no está completa sin mostrar cuántos usuarios de Facebook leyeron y participaron
de la misma, qué porcentaje de lectores está a favor del movimiento y los comentarios que
hicieron, que, en muchas ocasiones, aportan datos o señalan errores.

Para que todo lo indicado hasta aquí sea técnicamente posible estas aplicaciones utilizan
un gestor de contenidos, (CMS), que permite la creación y administración de contenidos en
páginas web. Consiste en una interfaz que controla una o varias bases de datos donde se
aloja el contenido de la web. El sistema permite manejar de manera independiente el
contenido por una parte y el diseño por otra. Así, es posible manejar el contenido y darle,
cuando se quiere, un diseño distinto, sin tener que darle un formato nuevo al contenido,
además de permitir a varios editores la publicación en el sitio, fácil y controlada. Un ejemplo
clásico es el de editores que cargan el contenido al sistema y otro de nivel superior que
permite que estos contenidos sean visibles al público que deseen en cada momento. Con
estos gestores de contenidos pueden realizarse diversas aplicaciones en la web 2.0;
destacamos las siguientes: blog, wiki, twitter, facebook, plataforma de redes sociales, los
portales de alojamiento de fotos, audio o vídeos (flick, youtube), foros, el instagram, el
snapchat, el storytelling, etc.

¿Qué es la web 3.0?

El término web 3.0 apareció por primera vez en 2006 en un artículo de Zeldman, crítico de
la web 2.0. Esta web fue operativa desde el 2010. La web 3.0, es un salto tecnológico que
tiene importantes consecuencias en los usuarios de la red. Web 3.0, son aplicaciones web
conectadas a aplicaciones web, a fin de enriquecer la experiencia de las personas; a esto
agrega conocimiento del contexto en la web geoespacial, la autonomía respecto del
navegador y la construcción de la web semántica. La web 3.0 es conocida como la “web
semántica” porque utiliza de forma más eficiente de los datos: “data web”. Es inter-operativa
y el usuario tiene el control para hacer los cambios que desee modificando directamente
las bases de datos. La web semántica incluye metadatos semánticos u ontológicos (que
describen los contenidos y las relaciones entre los datos) para que puedan ser rastreados
por sistemas de procesamiento. Mientras la web 2.0 está gestionada por el propio usuario
humano, la web 3.0 está gestionada en la nube y ejecutada desde cualquier dispositivo con
un alto grado de complejidad y personalización; constituye un nuevo tipo de web en la que
se añade contenido semántico a los documentos que la forman y ello conlleva que la
ejecución de la misma sea realizada por máquinas que, basándose en nuestros perfiles en
la red, descubren información relevante para nosotros. La web 3.0 está muy asociada al
concepto de personalización. Ofrece un flujo de información y de contenidos adaptados a
nuestros gustos y preferencias. ¿De dónde sacarán los motores de gestión de datos,
información sobre nuestros gustos? De nuestra actividad en la red que, como sabemos,
deja un importante rastro a modo de fotos, opiniones, tendencia de búsqueda, viajes, etc.

Como vemos, algunos elementos de Web 3.0, ya estaban presenten, al menos en fase
inicial, en la web 2.0. y otros se han ampliado en la web 4.0. En la actualidad, si precisamos

8
 Unidad I (Introducción a las aplicaciones web)

un hotel para unas vacaciones debemos navegar entre varias páginas analizando diferentes
opciones. La web 3.0 nos ofrecerá el mejor hotel adaptado a nuestros gustos y necesidades.
Esta web omnisciente, --casi divina--, que dibujan algunos analistas, asusta un poco. Suena
bien, pero un poco siniestro también. En definitiva, la web 3.0 se expandirá con toda su
potencia cuando exista la tecnología que lo permita. Y cuando lo haga, nos ofrecerá nuevas
opciones de personalización y una búsqueda a través de la red más natural, accediendo en
menor tiempo a información relevante para cada usuario. Habremos llegado a la web 4.0.
La web 3.0 apunta a que todos podamos disfrutar de la información y de las herramientas
de Internet sin importar el aparato a través del cual nos conectemos, ya que busca una
flexibilidad y una versatilidad que superen las barreras del formato y la estructura.

La web 4.0

En el 2016 empezó la web 4.0, que es el próximo gran avance y se centrará en ofrecer un
comportamiento más inteligente, más predictivo, de modo que podamos, con sólo realizar
una afirmación o petición, poner en marcha un conjunto de acciones que tendrán como
resultando aquello que pedimos o decimos. ¿Cómo llegamos a la Web 4?0.? Gracias a la
propia evolución de la tecnología. Empresas como Google, Microsoft o Facebook, entre
otras, están desarrollando nuevos sistemas que gracias al Deep Learning y Machine
Learning serán capaces de procesar información de forma similar a como lo haría el cerebro
humano. Tenemos los avances que los asistentes de voz están logrando. Siri, Google Now
o Cortana entienden cada vez de forma más precisa y correcta lo que les decimos o
solicitamos. Es más, ya hay smartphones que siempre están “escuchando” para activarse
en el preciso momento que oigan “Oye, Siri” u “Hola, Google Now”, etc. para contestar de
inmediato. Otro indicador de hacia dónde vamos son los bots. Son programas interacción
que traerá la web 4.0. Por ahora dependen de la introducción de texto, pero, con la
evolución en tecnologías de “hablar al texto” (Speech to text), seremos capaces de
conversar con ellos de igual modo que lo haríamos con un amigo en una cafetería. En la
web 3.0 los buscadores son elementos esenciales en el día a día. Cuando se entra en
Google, Bing, Go, etc. e introduces palabras clave, aparecen muchos resultados que hay
que revisar hasta encontrar lo que se desea. Pues bien, la web 4.0 mejora esa experiencia
mediante el uso de nuevas tecnologías que permiten un nivel de interacción más completo
y personalizado. Es decir, se puede decir verbalmente al dispositivo digital --que puede ser
un smartphone, computadora, etc.--: “Compra un boleto de avión con tales características”,
“Pide un taxi para la hora y tal lugar” y automáticamente ejecutará la acción sin más
intervención propia. Así, pasamos de una web que nos proporciona información a la web
que nos proporciona soluciones. Como se puede observar la web 4.0 ofrece soluciones a
partir de toda la información que le damos y que existe en la web.

Para lograrlo, se fundamenta en cuatro pilares:

• La comprensión del lenguaje natural hablado, escrito y tecnologías (de voz a texto
y viceversa)
• Nuevos sistemas de comunicación máquina a máquina (M2M)
• Uso de la información del contexto. Por ejemplo, ubicación que aporta el GPS, ritmo
cardíaco que registra el smartwatch, etc.

9
 Unidad I (Introducción a las aplicaciones web)

• Nuevo modelo de interacción con el usuario.

La Web 4.0 permite adelantarse a situaciones cotidianas, como ver que llegas tarde al
trabajo y enviar un mensaje avisando de lo que sucede, tomar una ruta alternativa a la
habitual porque está colapsada, etc. Si tu smartwatch detecta que el ritmo cardíaco es
elevado y tienes registrado que sufres problemas de corazón, avisará a la asistencia
sanitaria y aparecerá una ambulancia. La web 4.0 permite la computación cognitiva. A
través de potentes ordenadores se almacenan en la nube y procesan los datos, peticiones,
etc. permitiendo, no sólo que cualquier dispositivo con conexión a internet nos ayude a
aprovecharnos de ellos, sino también sirviendo cada uno de nosotros como suministradores
de datos a las máquinas. (Latorre Ariño, 2018).

Tabla 1 Uso Multidimensional de la Web

Fuente: Moravec, J. (2008). Moving beyond Educationb 2.0., completado por el autor.

10
 Unidad I (Introducción a las aplicaciones web)

1.2. Arquitectura de las aplicaciones web

Las aplicaciones web utilizan lo que se conoce como clientes livianos (light clients) los
cuales no ejecutan demasiadas labores de procesamiento para la ejecución de la aplicación
misma. Desde el punto de vista de la arquitectura se distinguen dos lados; uno es el cliente,
donde se encuentra el usuario final utilizando la aplicación por medio de un navegador
(como Internet Explorer o Mozilla Firefox). A través de este cliente web, el usuario interactúa
con la aplicación localizada al otro lado, en el servidor, que es donde residen realmente los
datos, reglas y lógica de la aplicación.

Arquitectura Cliente Servidor.

La arquitectura cliente-servidor es un modelo de aplicación distribuida en el que las tareas

se reparten entre los proveedores de recursos o servicios, llamados servidores, y los
demandantes, llamados clientes. Un cliente realiza peticiones a otro programa, el servidor,
que le da respuesta. Esta idea también se puede aplicar a programas que se ejecutan sobre
una sola computadora, aunque es más ventajosa en un sistema operativo multiusuario
distribuido a través de una red de computadoras. En esta arquitectura la capacidad de
proceso está repartida entre los clientes y los servidores, aunque son más importantes las
ventajas de tipo organizativo debidas a la centralización de la gestión de la información y la
separación de responsabilidades, lo que facilita y clarifica el diseño del sistema.

La separación entre cliente y servidor es una separación de tipo lógico, donde el servidor
no se ejecuta necesariamente sobre una sola máquina ni es necesariamente un solo
programa. Los tipos específicos de servidores incluyen los servidores web, los servidores
de archivo, los servidores del correo, etc. Mientras que sus propósitos varían de unos
servicios a otros, la arquitectura básica seguirá siendo la misma. Una disposición muy
común son los sistemas multicapa en los que el servidor se descompone en diferentes
programas que pueden ser ejecutados por diferentes computadoras aumentando así el
grado de distribución del sistema.

La arquitectura cliente-servidor sustituye a la arquitectura monolítica en la que no hay

distribución, tanto a nivel físico como a nivel lógico. La red cliente-servidor es aquella red
de comunicaciones en la que todos los clientes están conectados a un servidor, en el que
se centralizan los diversos recursos y aplicaciones con los que se cuentan y que se ponen
a disposición de los clientes cada vez que estos son solicitados. Esto significa que todas
las gestiones que se realizan se concentran en el servidor, de manera que en él se disponen
los requerimientos provenientes de los clientes que tienen prioridad, los archivos que son
de uso público y los que son de uso restringido, los archivos que son de solo lectura y los
que, por el contrario, pueden ser modificados, etc. Este tipo de red puede utilizarse
conjuntamente en caso de que se esté utilizando en una red mixta.

11
 Unidad I (Introducción a las aplicaciones web)

Figura 2. Arquitectura Cliente/ Servidor

Fuente: [Link]

Características

En la arquitectura C/S el remitente de una solicitud es conocido como cliente. Sus

características son:

• Es el que inicia solicitudes o peticiones. Tiene, por tanto, un papel activo en la

comunicación (dispositivo maestro o amo).
• Espera y recibe las respuestas del servidor.
• Por lo general, puede conectarse a varios servidores a la vez.
• Normalmente, interactúa directamente con los usuarios finales mediante una
interfaz gráfica de usuario.
• Al contratar un servicio de red, se debe de tener en cuenta la velocidad de conexión
que se le otorga al cliente y el tipo de cable que utiliza.

Al receptor de la solicitud enviada por el cliente se conoce como servidor. Sus

características son:

• Al iniciarse espera a que le lleguen las solicitudes de los clientes. Desempeñan

entonces un papel pasivo en la comunicación (dispositivo esclavo).
• Tras la recepción de una solicitud, la procesan y luego envían la respuesta al cliente.
• Por lo general, aceptan conexiones desde un gran número de clientes (en ciertos
casos el número máximo de peticiones puede estar limitado).
• No es frecuente que interactúen directamente con los usuarios finales.

Ventajas

Centralización del control: los accesos, recursos y la integridad de los datos son
controlados por el servidor, de forma que un programa cliente defectuoso o no autorizado
no pueda dañar el sistema. Esta centralización también facilita la tarea de poner al día datos
u otros recursos (mejor que en las redes P2P).

12
 Unidad I (Introducción a las aplicaciones web)

Escalabilidad: se puede aumentar la capacidad de clientes y servidores por separado.

Cualquier elemento puede ser aumentado (o mejorado) en cualquier momento, o se pueden
añadir nuevos nodos a la red (clientes y/o servidores).

Fácil mantenimiento: al estar distribuidas las funciones y responsabilidades entre varios

ordenadores independientes, es posible reemplazar, reparar, actualizar o incluso trasladar
un servidor, mientras que sus clientes no se verán afectados por ese cambio (o se afectarán
mínimamente). Esta independencia de los cambios también se conoce como
encapsulación.

Tecnologías: existen algunas suficientemente desarrolladas, diseñadas para el paradigma

de C/S, que aseguran la seguridad en las transacciones, la amigabilidad de la interfaz y la
facilidad de empleo.

Desventajas

La congestión del tráfico ha sido siempre un problema en el paradigma de C/S. Cuando una
gran cantidad de clientes envían peticiones simultaneas al mismo servidor, puede ser que
cause muchos problemas para éste (a mayor número de clientes, más problemas para el
servidor). Al contrario, en las redes P2P, como cada nodo en la red hace también de
servidor, cuantos más nodos hay, mejor es el ancho de banda que se tiene.

El paradigma de C/S clásico no tiene la robustez de una red P2P. Cuando un servidor está
caído las peticiones de los clientes no pueden ser satisfechas. En la mayor parte de redes
P2P, los recursos están generalmente distribuidos en varios nodos de la red. Aunque
algunos salgan o abandonen la descarga; otros pueden todavía acabar de descargar
consiguiendo datos del resto de los nodos en la red.

El software y el hardware de un servidor son generalmente muy determinantes. Un

hardware regular de un ordenador personal puede no poder servir a cierta cantidad de
clientes. Normalmente, se necesita software y hardware específicos, sobre todo en el lado
del servidor para satisfacer el trabajo. Por supuesto, esto aumentará el coste.

El cliente no dispone de los recursos que puedan existir en el servidor. Por ejemplo, si la
aplicación es una Web no podemos escribir en el disco duro del cliente o imprimir
directamente sobre las impresoras sin sacar antes la ventana previa de impresión de los
navegadores.

Ejemplos.

La mayoría de los servicios de Internet son tipo de cliente-servidor. La acción de visitar un

sitio web requiere una arquitectura cliente-servidor, ya que el servidor web sirve las páginas
web al navegador (al cliente). Al leer este artículo en Wikipedia, la computadora y el
navegador web del usuario serían considerados un cliente; y las computadoras, las bases
de datos y los usos que componen Wikipedia serían considerados el servidor. Cuando el
navegador web del usuario solicita un artículo particular de Wikipedia, el servidor de
Wikipedia recopila toda la información a mostrar en su base de datos, la articula en una
página web y la envía de nuevo al navegador web del cliente.

13
 Unidad I (Introducción a las aplicaciones web)

Otro ejemplo podría ser el funcionamiento de un juego on line. Si existen dos servidores de
juego, cuando un usuario lo descarga y lo instala en su computadora pasa a ser un cliente.
Si tres personas juegan en un solo computador existirían dos servidores, un cliente y tres
usuarios. Si cada usuario instala el juego en su propio ordenador existirían dos servidores,
tres clientes y tres usuarios.

Arquitectura De Tres Niveles

En la arquitectura en tres niveles existe un nivel intermedio. Esto significa que la

arquitectura generalmente está compartida por:

• Un cliente, es decir, el equipo que solicita los recursos, equipado con una interfaz
de usuario (generalmente un navegador web) para la presentación.
• El servidor de aplicaciones (también denominado software intermedio), cuya tarea
es proporcionar los recursos solicitados, pero que requiere de otro servidor para
hacerlo.
• El servidor de datos, que proporciona al servidor de aplicaciones los datos que éste
le solicitó.
Figura 3. Arquitectura de tres capas

Fuente: [Link]

El uso masivo del término arquitectura en tres niveles también denota las siguientes
arquitecturas:

• Aplicación compartida entre un cliente, un software intermedio y un servidor

empresarial.
• Aplicación compartida entre un cliente, un servidor de aplicaciones y un servidor de
base de datos empresarial.

La arquitectura en dos niveles es, por tanto, una arquitectura cliente-servidor en la que el
servidor es polivalente, es decir, puede responder directamente a todas las solicitudes de
recursos del cliente.

Sin embargo, en la arquitectura en tres niveles las aplicaciones al nivel del servidor son
descentralizadas de uno a otro, es decir, cada servidor se especializa en una determinada

14
 Unidad I (Introducción a las aplicaciones web)

tarea, (por ejemplo, servidor web/servidor de bases de datos). La arquitectura en tres

niveles permite:

• Un mayor grado de flexibilidad.

• Mayor seguridad, ya que la seguridad se puede definir independientemente para
cada servicio y en cada nivel.
• Mejor rendimiento, ya que las tareas se comparten entre servidores.

Hay que tener en cuenta que los distintos niveles representados como equipos físicos
distintos podrían ser llevados a cabo por programas “servidores” dentro de un mismo
servidor físico. Es decir, un software que funcionase como servidor de aplicaciones y otro
software como servidor de bases de datos. (Ferrer Martínez, 2015).

15
 Unidad I (Introducción a las aplicaciones web)

1.3 Tecnologías para el desarrollo de aplicaciones web

A continuación, se presentan algunas de las tecnologías de programación del lado

del cliente más conocidas y utilizadas.

JavaScript

JavaScript es un lenguaje interpretado basado en guiones que son integrados directamente

en el código HTML. El código es transferido al cliente para que este lo interprete al cargar
la página. Con JavaScript no pueden crearse programas independientes. La primera
versión de este lenguaje apareció con el navegador Netscape 2.0 en 1995, con el nombre
original de LiveScript y soportando gran cantidad de las instrucciones que tiene en la
actualidad. La versión JavaScript 1.1 se diseñó con la llegada de las versiones 3.0 de los
navegadores e incorporó algunas funcionalidades nuevas como el tratamiento dinámico de
imágenes y la creación de arrays. Es esta versión la primera que se incorpora al explorador
de Microsoft. En los navegadores 4.0 de Microsoft y Netscape se incorporó ya un intérprete
para una nueva versión del lenguaje, el JavaScript 1.2. Con esta versión se inicia un
proceso de diferenciación en algunos aspectos de la implementación en los dos
navegadores, proceso que culminaría con el nacimiento de JScript, nombre con el que
Microsoft denomina a su versión de JavaScript.

En la actualidad Microsoft ha desarrollado su [Link]. Las principales características de

este lenguaje son:

o Es un lenguaje interpretado.
o No necesita compilación.
o Multiplataforma.
o Lenguaje de alto nivel.
o Admite programación estructurada.
o Basado en objetos.
o Maneja la mayoría de los eventos que se pueden producir sobre la página
web.
o No se necesita ningún kit o entorno de desarrollo.

A diferencia de Java, JavaScript no dispone de elementos para crear interfaces de usuario

propias para los programas y tiene que utilizar para ello los formularios de HTML a través
de los denominados manejadores de eventos.

Java

Java es un lenguaje de programación clásico en cuanto a que requieren un proceso de

compilación. El código compilado puede ser integrado en la página web para que sea
ejecutado por el cliente. El nacimiento formal del lenguaje se sitúa en enero de 1996 con el
lanzamiento por parte de la empresa creadora, Sun Microsystems, del JDK 1.0 (Java
Development Kit). Este entorno de desarrollo Java puede obtenerse de forma totalmente
gratuita a través de Internet ([Link] e incorpora los elementos básicos
necesarios para el desarrollo de aplicaciones Java.

16
 Unidad I (Introducción a las aplicaciones web)

Con Java se pueden crear dos tipos de programas:

o Applets: programas que se integran en las páginas web y que, residiendo

en el servidor, son ejecutados por el cliente. La ejecución necesita de la
interpretación del código compilado por el software cliente.
o Aplicaciones: programas autónomos que se pueden ejecutar en cualquier
equipo. En este último caso puede optarse por generar código compilado
similar al de los applets y que para su ejecución necesita de un intérprete o
código compilado ejecutable directamente como en cualquier otro lenguaje
de programación.

En el caso de los applets, el código fuente no se incrusta directamente en el documento

HTML, sino que lo que se añade es un código binario resultado de la compilación, el
denominado JBC (Java Byte Code). Esto permite proteger el código fuente, aunque hasta
cierto punto, ya que las particularidades de este código compilado hacen que sea factible
el proceso inverso, es decir, la decompilación, recuperar el código fuente a partir del
compilado. En la propia Internet pueden encontrarse programas capaces de hacerlo. La
razón de todo esto está en el hecho de que para conseguir la portabilidad de los programas
el código compilado es un código que se encuentra a mitad de camino entre un código
fuente y un código objeto fuertemente dependiente de una plataforma. Es por ello que se
suele decir de Java que es un lenguaje que combina la flexibilidad de los lenguajes
interpretados y el poder de los compilados.

A diferencia de Java, JavaScript no dispone de elementos para crear interfaces de usuario

propias para los programas y tiene que utilizar para ello los formularios de HTML a través
de los denominados manejadores de eventos. Java Java es un lenguaje de programación
clásico en cuanto a que requieren un proceso de compilación. El código compilado puede
ser integrado en la página web para que sea ejecutado por el cliente. El nacimiento formal
del lenguaje se sitúa en enero de 1996 con el lanzamiento por parte de la empresa creadora,
Sun Microsystems, del JDK 1.0 (Java Development Kit). Este entorno de desarrollo Java
puede obtenerse de forma totalmente gratuita a través de Internet ([Link]
e incorpora los elementos básicos necesarios para el desarrollo de aplicaciones Java. Con
Java se pueden crear dos tipos de programas: — Applets: programas que se integran en
las páginas web y que, residiendo en el servidor, son ejecutados por el cliente. La ejecución
necesita de la interpretación del código compilado por el software cliente. — Aplicaciones:
programas autónomos que se pueden ejecutar en cualquier equipo. En este último caso
puede optarse por generar código compilado similar al de los applets y que para su
ejecución necesita de un intérprete o código compilado ejecutable directamente como en
cualquier otro lenguaje de programación. En el caso de los applets, el código fuente no se
incrusta directamente en el documento HTML, sino que lo que se añade es un código binario
resultado de la compilación, el denominado JBC (Java Byte Code). Esto permite proteger
el código fuente, aunque hasta cierto punto, ya que las particularidades de este código
compilado hacen que sea factible el proceso inverso, es decir, la decompilación, recuperar
el código fuente a partir del compilado. En la propia Internet pueden encontrarse programas
capaces de hacerlo. La razón de todo esto está en el hecho de que para conseguir la
portabilidad de los programas el código compilado es un código que se encuentra a mitad

17
 Unidad I (Introducción a las aplicaciones web)

de camino entre un código fuente y un código objeto fuertemente dependiente de una

plataforma. Es por ello que se suele decir de Java que es un lenguaje que combina la
flexibilidad de los lenguajes interpretados y el poder de los compilados.

Por supuesto, Java es un lenguaje con unas altas prestaciones, mucho mayores que las de
lenguajes interpretados.

Algunas de sus características son:

o Es un lenguaje orientado a objeto.

o Admite programación concurrente.
o Dispone de clases de objetos para la generación de interfaces gráficas de
usuario.
o Tiene prestaciones multimedia.
o Resulta un lenguaje familiar, al tener una sintaxis similar al C++, aunque
eliminando algunos de los problemas más engorrosos del lenguaje C: el uso
de punteros, la gestión de la memoria y el control de accesos a los elementos
de arrays.
o Es un lenguaje simple, robusto y seguro.
o A través de Internet se puede acceder a todo lo necesario para desarrollar
applets Java.

VBScript

VBScript es, al igual que JavaScript, un lenguaje basado en guiones que permite integrar
programas directamente en el código HTML. Admite un doble uso, por un lado, como
lenguaje del lado del cliente, pero también como lenguaje del lado del servidor para la
generación de páginas ASP.

Es un lenguaje desarrollado por Microsoft tomando como referente de sintaxis el VBA,

Visual Basic para Aplicaciones. Por supuesto, no ofrece todas las funcionalidades de un
entorno de desarrollo visual como Visual Basic, pero si se presenta como una herramienta
poderosa y de fácil uso para generar páginas web interactivas.

A continuación, se presentan algunas de las tecnologías de programación del lado

del servidor más conocidas.

Programación CGI

CGI son las siglas de Common Gateway Interface (Interfaz de Pasarela Común) y lo que
define es un estándar para establecer la comunicación entre un servidor web y un programa.
Esta interfaz define una forma cómoda y simple de ejecutar programas que se encuentran
en la máquina en la que se aloja el servidor, a través de la definición de una serie de reglas
que deben cumplir tanto las aplicaciones como los servidores para hacer posible la
ejecución de los programas. Al tratarse de una interfaz, no existe ningún tipo de
dependencia con el lenguaje de programación empleado. Para desarrollar programas CGI
se puede utilizar cualquier lenguaje. Los más habituales son: C, C++, Fortran, Perl, Tcl,

18
 Unidad I (Introducción a las aplicaciones web)

Visual Basic, AppleScript. Los lenguajes interpretados como Tcl y Perl, tienen mayor
facilidad de mantenimiento y depuración, presentan ventajas de seguridad, pero resultan
más lentos. Los lenguajes compilados (C, C++,...), por su parte, son mucho más rápidos.
En el caso de CGI la velocidad de ejecución es importante, ya que habrá que sumar el
tiempo de ejecución al tiempo de espera de red y a la velocidad de transmisión.

ASP: Páginas de Servidor Activas

ASP (Active Server Pages) es la tecnología diseñada por Microsoft para facilitar la creación
de sitios web con una mayor sencillez que la empleada en la programación CGI. El principal
inconveniente es la fuerte dependencia del entorno Microsoft, ya que requiere un servidor
web de Microsoft, como puede ser el Internet Information Server (IIS) o el Personal Web
Server (PWS).

Para utilizar la tecnología ASP sobre otros servidores, por ejemplo, servidores Unix, se
necesita un software intérprete (Chilisoft, Instant ASP).

El núcleo de funcionamiento de ASP es una aplicación ISAPI (Internet Server API). Una
aplicación ISAPI es una DLL de Windows que se ejecuta en el mismo espacio de
direcciones que el servidor web y que puede soportar varias peticiones simultáneas.

ASP no es realmente un lenguaje como tal, el lenguaje usado en realidad para programar
ASP es Visual Basic Script o Jscript (versión Microsoft de JavaScript).

Servlets y JSP: Páginas de Servidor Java

Los servlets y Java Server Pages (JSPs) son dos métodos de creación de páginas web
dinámicas en servidor usando el lenguaje Java. Se trata de tecnologías desarrolladas por
la empresa Sun Microsystems.

Las JSP se diferencian de otras tecnologías del lado del servidor como los CGI o las ASP
en dos aspectos principalmente: por un lado, los JSP y servlets se ejecutan en una máquina
virtual Java, lo cual permite que, en principio, se puedan usar en cualquier tipo de
ordenador, siempre que tenga instalado esa máquina virtual. Por otro lado, un programa
JSP se compila a un programa en Java la primera vez que se invoca, y del programa en
Java se crea una clase que se empieza a ejecutar en el servidor como un servlet. De esta
manera los servlets no se ejecutan cada vez que se recibe una petición, sino que persisten
de una petición a la siguiente, lo que permite realizar operaciones como la conexión a bases
de datos o manejo de sesiones de una manera más eficiente.

Un JSP es una página web con etiquetas especiales y código Java incrustado, mientras
que un servlet es un programa que recibe peticiones y genera a partir de ellas una página
web. En ambos casos se necesita un programa servidor que se encargue de recibir las
peticiones, distribuirlas entre los servlets y realizar las tareas de gestión propias de un
servidor web. Estos programas suelen llamarse contenedores de servlets o servlet engines,
y, entre otros, podrían citarse como ejemplos Resin, BEA Weblogic, JRun de Macromedia,
Lutris Hendirá, o, quizás el más popular y conocido: Toncat.

19
 Unidad I (Introducción a las aplicaciones web)

ColdFusion

ColdFusion es una tecnología desarrollada inicialmente por Allarie, que en la actualidad

pertenece a Macromedia. Es una herramienta sencilla de aprender y bastante potente que
funciona sobre la mayoría de servidores web. Los scripts se desarrollan por medio de
etiquetas al estilo HTML (ColdFusion en realidad se denomina Cold Fusion Markup
Language -CFML-). Estas etiquetas se sitúan dentro del documento HTML y son ejecutadas
por el servidor, de forma que el cliente solo ve el resultado, no el código.

Básicamente ColdFusion está formado por tres componentes: una aplicación servidor, un
lenguaje de marcación (ColdFusion Markup Language, CFML) y un programa
administrador. La aplicación servidor es la encargada de leer e interpretar las instrucciones
que le son pasadas a través de páginas ColdFusion. Estas páginas se identifican por tener
la extensión .cfm o .cfc y contienen etiquetas HTML y etiquetas específicas del lenguaje
propio de ColdFusion: CFML.

Las etiquetas del lenguaje CFML tienen una sintaxis similar a las de HTML y se distinguen
del resto por tener nombres que siempre comienzan con cf. Además de las etiquetas
predefinidas, el programador puede crear nuevas etiquetas e incluso puede integrar código
en otros lenguajes como C, C++ o Java.

Las aplicaciones ColdFusion pueden interactuar con cualquier base de datos que soporte
ODBC o JDBC.

PHP

PHP es un lenguaje interpretado del lado del servidor que surge dentro de la corriente
denominada código abierto (open source). Se caracteriza por su potencia, versatilidad,
robustez y modularidad. Al igual que ocurre con tecnologías similares, los programas son
integrados directamente dentro del código HTML.

Comparado con ASP, la principal ventaja de PHP es su carácter multiplataforma. Por otro
lado, los programas en ASP resultan más lentos y pesados, y también menos estables. En
los entornos Microsoft la ventaja de ASP es que los servidores web de Microsoft soportan
directamente ASP sin necesidad de ninguna instalación adicional.

Comparando el lenguaje PHP con el lenguaje Perl, utilizado habitualmente en la

programación CGI, puede decirse que PHP fue diseñado para desarrollo de scripts
orientados a web, mientras que Perl fue diseñado para hacer muchas más cosas y debido
a esto, se hace muy complicado. La sintaxis de PHP es menos confusa y más estricta, pero
sin perder la flexibilidad.

En comparación con ColdFusion, PHP es más rápido y eficiente para tareas complejas de
programación, además PHP resulta más estable y usa una menor cantidad de recursos.
Por el contrario, ColdFusion posee un mejor gestor de errores, un buen motor de
búsquedas, abstracciones de bases de datos y un gran número de funcionalidades para el
procesamiento de fechas. Finalmente, ColdFusion no está disponible para todas las
plataformas.

20
 Unidad I (Introducción a las aplicaciones web)

En definitiva, PHP es uno de los lenguajes más utilizados actualmente en el desarrollo de

aplicaciones web y viene experimentado un constante crecimiento en su nivel de utilización
en Internet. (Pérez & Cobo, 2007).

1.4 Planificación de aplicaciones web

Las metodologías o también llamados métodos, están compuestos por un número de fases
que cambia dependiendo de las metodologías que se utilice, pero si el método es más
complejo en sus pasos mayormente se tiene un menor número de errores en relación a la
calidad y consistencia de datos.

Las metodologías para aplicaciones Web contienen fases para el desarrollo de software
que pueden aumentar o disminuir dependiendo del método que utilicen, la mayoría de los
métodos coinciden en las siguientes etapas:

• Diseño Conceptual: en esta sección se abarca temas relaciones a la especificación

del dominio del problema, a través de su definición y las relaciones que contrae.
• Diseño Navegacional: está enfocado en lo que respecta al acceso y forma en la
que los datos son visibles.
• Diseño de la presentación o diseño de interfaz: se centra en la forma en la que
la información va a ser mostrada a los usuarios, cabe mencionar en esta sección
intervienen mayormente el cliente definiendo los requerimientos y lo usuarios
defiendo como quieren interactuar con el sistema.
• Implantación: es la construcción del software a partir de los artefactos generados
en las etapas previas.

Existen varias metodologías de desarrollo web:

✓ WSDM (Web Design Method)

✓ SOHDM (Scenario-Based Object-Oriented Hypermedia Design Methodology)
✓ OOHDM (Object Oriented Hypermedia Design Methodology)
✓ WAE (Web Application Extension)
✓ IWEB (Ingeniería Web)

A continuación, se explicará la siguiente metodología:

OOHDM (Object Oriented Hypermedia Design Methodology)

Según Soto, Palma & Roncagliolo OOHDM es una metodología orientada a objetos que
propone un proceso de desarrollo de cinco fases donde se combinan notaciones gráficas
UML con otras propias de la metodología. Cuando internet no era accesible para todas las
personas OOHDM simplemente era utilizado para aplicaciones hipermedia, pero gracias al
auge del internet en la actualidad se adaptó dicha metodología para el desarrollo de

21
 Unidad I (Introducción a las aplicaciones web)

aplicaciones hipermedias orientadas a la Web, como por ejemplo bibliotecas virtuales, sitios
educativos, motores de búsqueda, entretenimiento, etc. Esta metodología permite
desarrollar aplicaciones Web a partir de la utilización de modelos especializados como:
conceptual, navegación e interfaz de usuario teniendo como objetivo simplificar y hacer más
eficaz el diseño de aplicaciones.

A continuación, se describirán las cinco etapas de la metodología OOHDM.

Figura 4. Fases de la metodología OOHDM

Fuente: [Link]

Obtención de requerimientos: se plantea la obtención de requerimientos de manera

cuidadosa, entonces es muy importante conocer los actores y tareas que se deben modelar
en los casos de uso.

Diseño conceptual: se representa el modelo conceptual a través del modelamiento de

diagramas de clases basados en clases, relaciones y subsistemas, enfocándose en el
dominio semántico dejando de lado a los actores y tareas.

Diseño navegacional: representa los diferentes caminos que puede ejecutar la aplicación
dependiendo del tipo de usuario. Es decir, brinda un contexto navegacional capaz de
realizar acciones a través de enlaces, vínculos o índices que están relacionados dentro de
la aplicación Web dependiendo del perfil de usuario para mostrar sus vistas
correspondientes.

Diseño de interfaz abstracta: es ejecutada después del diseño navegacional, donde es

necesario especificar las interfaces de usuario que se visualizaran en la aplicación Web.
Dentro de este modelo se pueden identificar dos sub-tareas tales como el diseño estructural
y el diseño de comportamiento.

Implementación: implementar la aplicación Web independientemente de la plataforma que

será utilizada. Esta fase también es conocida como puesta en marcha ya que es partir de
aquí en donde los usuarios empiezan a utilizar y sacar provecho al sistema elaborado, a
través de un navegador Web y conexión a internet.

Es importante mencionar que el desarrollador y diseñador son los encargados del lado
técnico del sistema y su apariencia final, mientras que el cliente verifica que funcione

22
 Unidad I (Introducción a las aplicaciones web)

correctamente como lo ha solicitado en la primera fase o etapa. (Molina Rios, Zea

Ordóñez, Contento Segarra, & García Zerda, 2018).
Tabla 2. Productos y formalismos de la metodología OOHDM.

Fuente: [Link]

23
 Unidad I (Introducción a las aplicaciones web)

Actividades de aprendizaje

Actividad 1: Realizar una línea del tiempo sobre la evolución de las aplicaciones web.
Elaborarla en digital, revisar rúbrica.

Actividad 2: Realizar un mapa mental en el cual incluyas los temas: 1.2, 1.3,1.4. Elaborarlo
en digital, revisar rúbrica.

Materiales y recursos didácticos.

[Link]
bd8PK

24
 Unidad I (Introducción a las aplicaciones web)

ORIENTACIONES SOBRE LA EVALUACIÓN.

A continuación, se detallan los criterios de evaluación de la unidad I:

Actividad de Aprendizaje Valor

Línea del Tiempo Tema 1.1 30%
Mapa Mental Tema 1.2,1.3,1.4 35%
Evaluación (Revisar anexos) 35%
Total 100%

Calendarización de evaluación en semanas:

Semana 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
TP Evaluación
Unidad I
TR

Rúbrica a utilizar:

• Rúbrica de Línea del Tiempo (Revisar anexo).

• Rúbrica de Mapa Mental (Revisar anexo).

25
UNIDAD II (HTML, XML Y CSS)
 Unidad II (HTML, XML y CSS)

COMPETENCIA(S) A DESARROLLAR

Conoce y aplica las herramientas para construir páginas web, considerando la interfaz
gráfica de usuario, un lenguaje de marcado y de presentación.

COMPETENCIAS PREVIAS

Aplica métodos y herramientas de la ingeniería del software en el desarrollo de software

aplicando estándares de calidad y productividad.
Aplica un lenguaje orientado a objetos para la solución de problemas.
Crea y aplica esquemas de bases de datos para garantizar la confiabilidad de los datos en
aplicaciones para el tratamiento de información.

TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN.

Ante la necesidad de adaptarse a los cambios, algunas instituciones de Educación Superior

han empezado a hacer uso de nuevas estrategias para que sus estudiantes desarrollen
efectivamente los conocimientos, habilidades y actitudes que indican sus planes de estudio;
(Bergmann,2012), (Mingorance, Trujillo, Cáceres, y Torres, 2017) señalan entre las más
importantes:

➢ Aula Invertida
➢ Aprendizaje Semipresencial
➢ Aprendizaje Colaborativo
➢ Hiper-personalización
➢ Aprendizaje Experiencial
➢ Micro aprendizaje
➢ Entrenamiento Educativo
➢ Otras…

✓ Saber el nombre de los estudiantes y su situación: saber el nombre de los

estudiantes es el primer paso para trabajar la conexión con ellos. También es
importante conocer a cada estudiante con relación a sus fortalezas y debilidades.

27
 Unidad II (HTML, XML y CSS)

✓ Saber el estilo de aprendizaje: Utilizar diferentes vías de acceso al aprendizaje

(visual, auditivo, musical, kinestésico, entre otras).
✓ Entusiasmo del profesor: es evidente cuando al profesor le gusta enseñar. El
aprendizaje va relacionado con la emoción. Es importante que el profesor tenga
buen humor.
✓ Intentar dedicar tiempo a cada estudiante: es comprensible que esto sea algo
difícil ya que se manejan grupos grandes, sin embargo, el profesor puede intentar
acercarse a sus estudiantes de manera individualizada para saber si comprendieron
la instrucción y dar apoyo.
✓ Brindar respeto y confianza: evitar llamados de atención y ridiculizar a los
estudiantes en público, mejor decir las cosas en privado. Mostrar apertura cuando
le pase algo o nos quieran contar algo. Mostrar flexibilidad.
✓ Refuerzo positivo: cuando haga algo bien felicitarle. Reforzar las habilidades del
estudiante.
✓ Explicar la importancia de la asignatura: explicar con ejemplos la utilidad de la
materia en su vida profesional.
✓ Variar los métodos de enseñanza: esto es recomendable hacer para los estudiantes
sientan que vale la pena ir a clases y no sea algo aburrido y monótono a lo que
tengan que asistir. Por lo que se recomienda que sea visual, auditivo y kinestésico.
✓ Fomentar la participación activa de los estudiantes: esto hacer con la finalidad de
aumentar el interés y aprendizaje de los estudiantes. El profesor puede hacer
preguntas y moverse por toda el aula.
✓ Responder claramente a las preguntas: la mayoría de estudiantes no preguntan por
temor o vergüenza. Por lo que será fundamental responder a todas las preguntas
por más básicas que sean.

28
 Unidad II (HTML, XML y CSS)

2.1 Introducción.

Los lenguajes de marcado o lenguajes de marcas se pueden definir como una manera de
codificar documentos donde, junto con el texto, se establecen etiquetas, marcas o
anotaciones que contienen información relacionada con la estructura de dicho texto, su
forma de visualización, etc. Aunque HTML es el lenguaje de marcas que se utiliza para
crear páginas web, no es el único lenguaje de este tipo que existe. (Guerrero Pérez, 2015).

HTML5 es la versión 5 de HTML, que corresponde a las siglas en inglés de HiperText

Markup Language o Lenguaje de Marcas de Hipertexto. HTML es un lenguaje de
programación que utiliza una serie de códigos llamados etiquetas que van definiendo los
elementos que componen una página web: texto, imágenes, etc. Esas etiquetas serán
interpretadas por un programa navegador de internet (como por ejemplo Internet Explorer)
que mostrará adecuadamente la página web al usuario. Pero HTML5 no se limita a ser un
lenguaje de etiquetas HTML que sólo permiten definir elementos básicos, sino que combina
nuevas etiquetas de lenguaje HTML, propiedades CSS3, Javascript y algunas otras
tecnologías. Todas ellas suponen una actualización de gran potencia al conjunto de
herramientas ya existente, y con él se pueden crear páginas web más sofisticadas y útiles.
(Celaya Luna, 2014).

Las llamadas hojas de estilo en cascada, CSS o Cascading Style Sheets abren un nuevo
abanico de posibilidades para los creadores de páginas web. La idea que se encuentra
detrás del desarrollo de CSS es separar la estructura de un documento de su presentación
o aspecto, como, por ejemplo, la combinación de XHTML y CSS.

XHTML (eXtensible Hyper Text Markup Language) es el lenguaje de marcas creado para
sustituir al lenguaje HTML (Hyper Text Markup Language). Se podría decir que el XHTML
es la versión XML de HTML, ya que tiene básicamente las mismas funcionalidades,
cumpliendo las especificaciones más estrictas de XML. Su objetivo es avanzar en el
proyecto del W3C (World Wide Web Consortium), de lograr páginas web donde la
información y la forma de presentarla estén claramente separadas. XHTML es, por lo tanto,
un lenguaje semántico, que quiere decir que no definimos el aspecto de las cosas sino lo
que significan. Esta característica se aprecia claramente en su estructuración semántica,
ya que XHTML sirve únicamente para transmitir la información que contiene un documento,
dejando el aspecto y el diseño para las hojas de estilo (CSS), y la interactividad y
funcionalidad para JavaScript, por ejemplo. (Orós Cabello, 2014).

29
 Unidad II (HTML, XML y CSS)

2.2 Estructura global de un documento Web.

(Guerrero Pérez, 2015) menciona que en un documento escrito con un lenguaje de marcas
se pueden distinguir las siguientes partes fundamentales:

■ Metadatos e instrucciones de proceso.

■ Codificación de caracteres. Caracteres especiales (escape).

■ Etiquetas o marcas.

■ Elementos.

■ Atributos.

■ Comentarios.

El autor (Zofío Jiménez, 2013) menciona en su libre que un documento escrito en HTML
debe tener una estructuración que con tenga los siguientes elementos básicos o etiquetas
fundamentales:

<html> Indica el inicio del documento.

<head> Inicio de la cabecera del documento.

<title> Inicio del título del documento.

</title> Final del título del documento.

</head> Final de la cabecera del documento.

<body> Inicio del cuerpo del documento.

</body> Final del cuerpo del documento.

</html> Final del documento.

Todas las páginas HTML contienen los mismos elementos básicos:

— Doctype: Es la primera línea de código que tiene que estar en cualquier documento
HTML. Esta línea indica al navegador qué especificación de HTML se está
utilizando. Suele ser la siguiente:
— HTML: El par de etiquetas <html> y </html> se encuentran al principio y al final de
todo documento HTML y sirve para indicar a todos las aplicaciones que pueden
analizar texto sin formato (no solamente a los navegadores) que esa página utiliza
HTML.
— Head: Las etiquetas <head> y </head> delimitan el contenido de la cabecera del
documento, es decir, el título de la página y una información que no aparece en la
pantalla. Title: El par de etiquetas <title> y </title> rodea el texto del título. El título

30
 Unidad II (HTML, XML y CSS)

aparece en la barra de título del navegador web cuando presenta la página.

Normalmente va dentro del elemento <head>.
— Meta: <meta> permite aportar metainformación al documento, para su mejor
identificación e indexación por los motores de búsqueda.
— Body: Las etiquetas <body> y </body> rodean el contenido visible de la página.
También puede llevar incluida información sobre las propiedades de la página, por
ejemplo <body bgcolor="#RRGGBB"> define el color de fondo de la página. (Celaya
Luna, 2014).

Figura 5. Representación visual de un ejemplo de diseño de página web muy genérico y habitual

Fuente: [Link]

2.3 Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones.

Etiquetas HTML más Comunes

Comentarios: <! -- comentarios -->: Para escribir anotaciones que sirven para ayudar a
la comprensión del código. Lo que se escribe dentro de esta etiqueta es ignorado por el
navegador y no se muestra en la página.

Formato de Textos

• <b>...</b> : Aplica negrita al texto incluido entre las etiquetas (es equivalente usar
<strong>… </strong>)

31
 Unidad II (HTML, XML y CSS)

• <i>...</i>: Aplica cursiva al texto incluido entre las etiquetas (es equivalente usar
<em>…</em>)
• <u> </u>: Aplica subrayado
• <font>...</font>: Delimita un texto con un formato de fuente determinado definido
por sus propiedades:
❖ <font size=”X”>… </font>: Indica el tamaño del texto.
❖ <font color=”#RRGGBB”>… </font>: Define el color del texto, donde cada
letra RRGGBB es un valor hexadecimal (de 0 a F) que indica el color.
❖ <font face=”arial”>… </font>: Determina el tipo de fuente de texto, es decir,
la tipografía.

La etiqueta <font> puede incluir los tres parámetros (tamaño, fuente y color): <font size=X
color=#XXYYZZ face=fuente escogida> …… </font>

• h1, h2, h3, h4, h5, h6: Indican 6 niveles de formato de encabezados, en los que
<h1>...</h1> delimitaría el tipo de fuente de mayor tamaño.

Creación de Enlaces

— <a href=”[Link] del enlace</a>: Cuando se pulsa sobre

el texto "Nombre del enlace" en la web, se va al vínculo indicado en la dirección de
href.
— <a href=”[Link] del enlace</a>: Cuando se pulsa
sobre el texto "Nombre del enlace" en la web, se abre una ventana para enviar un
correo electrónico a la dirección indicada.

Creación de Listas

▪ Lista no numerada:

<ul> Inicio de la lista

<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul> Cierra la lista

▪ Lista numerada:

<ol> Inicio de la lista

<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
</ol> cierra lista.

Tablas

— <table>…</table>: Define dónde comienza y termina la tabla.

32
 Unidad II (HTML, XML y CSS)

o <table width="X">: Determina la anchura de la tabla. Puede darse en píxeles

o en porcentaje.
o <table height="X"> Determina la altura de la tabla en píxeles.
o <table border="X">: Establece el grosor en píxeles del borde de la tabla
o <table cellspacing="X">: Define el espacio en píxeles entre las celdas.
o <table cellpadding="X">: Define el espacio en píxeles entre el borde y el
texto.
— <tr>…</tr>: Indica el comienzo y el fin de cada una de las filas de la tabla.
— <td>...</td>: Indica el comienzo y el fin de cada una de las columnas o celdas dentro
de las filas.

Dentro de cada celda se puede alinear el texto o cualquier contenido, cambiar el color de
fondo, con las etiquetas habituales para texto, párrafos o imágenes.

Objetos

La etiqueta <object> permite insertar cualquier tipo de documentos (no solamente de texto)
dentro de un documento html. Para poder mostrar esos archivos, el navegador suele
necesitar plug-ins. Algunos tipos de documentos necesitan información adicional que se
proporciona mediante la etiqueta vacía <param>.

Ejemplo de objetos

Los vídeos de YouTube pueden obtenerse en formato Flash, por lo que se pueden insertar
en una página web mediante la etiqueta <object>, como muestra el siguiente ejemplo. Para
insertar otro vídeo habría que sustituir el código del vídeo en el atributo data (en el ejemplo,
el código del vídeo es vZV-t3KzTpw).

<object
type="application/x-shockwave-flash"
data="[Link]
style="width: 425px; height:350px;">
<param
name="movie"
value="[Link]
ERROR (no puede mostrarse el objeto)
</object>

Imágenes

❖ <img src="dirección de la imagen">: Inserta una imagen que se encuentra en la ruta

indicada por "dirección de la imagen". También se pueden incluir una serie de
propiedades:
✓ <img ... border="X">: Establece un borde de X pixels en torno a la imagen.
✓ <img ... height="XX" width="YY">: Establece un tamaño de la imagen, donde
XX e YY son al altura y anchura en pixels respectivamente.

33
 Unidad II (HTML, XML y CSS)

✓ <img ... alt="texto explicativo">: Se muestra un texto al pasar el ratón sobre

la imagen.
✓ <img ... align="bottom">: Alineación inferior de la imagen respecto al texto.
✓ <img ... align="middle">: Alineación de la imagen en medio del texto.
✓ <img ... align="top">: Alineación superior de la imagen respecto al texto.
✓ <img ... align="left">: Alineación izquierda de la imagen en el párrafo.
✓ <img ... align="right">: Alineación derecha de la imagen en el párrafo.
✓ <img ... hspace="x">: Espacio horizontal en pixeles entre la imagen y el texto.
✓ <img ... vspace="y">: Espacio vertical en pixeles entre la imagen y el texto.

Aplicaciones

APIS PARA HTML5

Una API (del inglés Application Programming Interface), es una biblioteca de utilidades que
añade funcionalidades a la programación web.

HTML5 permite la incorporación de varias APIs que van a permitir llevar a cabo actividades
desde el navegador web y dispositivos móviles compatibles que no eran posibles con las
versiones anteriores de HTML.

Uno de los objetivos principales de una API es el de normalizar el modo de trabajo de ciertos
mecanismos y simplificar tareas de programación, que, de lo contrario, serían bastante
complejas.

La API Geolocation permite que un navegador web pueda determinar la ubicación

geográfica de un usuario, esta ubicación se da en coordenadas de Latitud y Longitud. Utiliza
tecnología Javascript, que se inserta dentro de la página HTML5.

La API Web Storage es básicamente una mejora de las Cookies. Las cookies permiten que
los sitios web puedan guardar una pequeña información en los equipos de los usuarios,
datos que normalmente sirven para volver a utilizarlos en momentos posteriores, y de esta
manera, por ejemplo, ciertos sitios web recuerdan la información del usuario desde el último
acceso.

La API Offline Application Catching permite que una página web pueda ser consultada aun
cuando no se tenga conexión a internet, ya que todo o parte de su contenido quedará
almacenado en la memoria caché del ordenador.

Drag and Drop significa Arrastrar y Soltar, es decir, mediante esta API se puede arrastrar y
mover prácticamente cualquier tipo de elemento de elemento de una página web. Esta
funcionalidad puede ser muy útil en infinidad de aplicaciones web, por ejemplo, en un juego
de ajedrez, para poder mover con el ratón las piezas por el tablero. (Celaya Luna, 2014).

34
 Unidad II (HTML, XML y CSS)

Algunos atributos comunes a todas las etiquetas HTML5 son:

Tabla 3. Atributos comunes (HTML)

Atributo Significado
class: permite definir la clase.
id crea un identificador del elemento.
contextmenu permite asociar un menú de contexto que deberá estar definido en
una etiqueta MENU.
contenteditable: valor booleano que indica si el contenido delimitado por la etiqueta
se puede modificar. dir: dirección del elemento d.
lang: especifica el idioma
draggable: indica si el elemento puede ser arrastrado y soltado.
dropzone: especifica si los datos arrastrados serán copiados, movidos o
vinculados, cuando se suelta un elemento tras arrastrarlo.
hidden: elemento oculto que podrá visualizarse con código JavaScript.
accesskey: acceso directo de teclado que activa un elemento.
translate: modo de traducción.
spellcheck: para comprobar la gramá- tica y ortografía. style: para definir el
estilo.
tabindex: orden de tabulación.
title: información de ayuda.
eventos: en HTML son sucesos que ocurren en la interfaz de usuario y que
se asocian a un programa, por ejemplo, de JavaScript. Pueden ser
asociados a los elementos de HTML para ejecutar el script
relacionado cuando se produzca el evento, por ejemplo, onclick,
ondbl- click, onmouseup, onmouseover, on- focus, onplay, onreset,
ondrop, etc.

2.4 Formularios

Los formularios son secciones interactivas de una página web que los auto- res insertan en
la mismas para permitir que el usuario pueda enviar informa- ción al servidor donde esté
alojado el sitio. (Guerrero Pérez, 2015).

HTML5 incorpora nuevas etiquetas, atributos y tipos de entradas que facilitan el trabajo con
formularios.

Un formulario se define mediante la directiva <form> </form> y dentro de ella se incluirán el

resto de elementos que compongan el formulario de entrada. A la etiqueta de apertura
<form> le pueden acompañar varios atributos relacionados con el envío del formulario como
son: action, para indicar el programa o lugar al que se van a enviar los datos del formulario,
method, que indica el método de transferencia de los datos en http, enctype, que permite
indicar cómo deben ser codificados los datos al enviarlos a un servidor cuando se utiliza el

35
 Unidad II (HTML, XML y CSS)

método post, y target, que especifica dónde se debe mostrar la respuesta que se recibe
después de enviar el formulario. También se utiliza el atributo name, para asociarle un
nombre unívoco que permita diferenciarle entre otros formularios. Veamos ahora los
elementos que pueden contener los formularios.

La directiva <fieldset> </fieldset> sirve para agrupar un conjunto de elementos dentro de un

formulario bajo un nombre, nombre que se indica entre las etiquetas <legend> </legend>,
como primer elemento hijo del grupo; el resto de los descendientes serán las entradas que
forman el grupo de elementos del formulario agrupados en el conjunto “fieldset”. Con el
elemento <label> </label> podemos etiquetar y enmarcar con un borde los controles de un
formulario, organizando así el contenido.

Nuevos Tipos de Controles de Entradas

➢ <input type="email" />: Para introducir una dirección de correo electrónico. El

sistema validará que la sintaxis es correcta.
➢ <input type="url" />: Para introducir una dirección web o url. Muestra un mensaje de
error por ejemplo si se introducen caracteres no válidos.
➢ <input type="date" />: Permite introducir una fecha, incorpora un calendario
desplegable para elegirla. <input type="number" />: Para introducir un número, se
puede indicar un rango máximo y mínimo.
➢ <input type="range" />: Presenta una barra con un rango para arrastrar con el ratón.
➢ <input type="search" />: Para introducir un término de búsqueda en la web.
➢ <input type="color" />: Para elegir un color. Despliega una carta de colores.

Nuevos Atributos para las Etiquetas

Entre los nuevos atributos para las etiquetas de tipo <input> se encuentran:

➢ autocomplete: La función de autocompletar el texto cuando se rellena un formulario

es una característica del navegador. Sin embargo, HTML5 ofrece la posibilidad de
activar o desactivar esta característica, dando el valor "on" u "off" a este atributo.
➢ autofocus: Indica si se colocará el cursor del ratón por defecto en el formulario al
entrar en la página.
➢ min: Permite indicar un valor mínimo para un rango, por ejemplo, en el input de tipo
number.
➢ max: Permite indicar un valor máximo para un rango, por ejemplo, en el input de tipo
number.
➢ placeholder: Permite definir un texto que se desea que aparezca dentro del campo
del formulario a modo de ayuda. Este texto se resalta en un tono diferente, de forma
que, cuando se pone el cursor sobre el campo, el texto desaparece y el campo
vuelve a su color habitual.
➢ required: Si se coloca este atributo dentro de una etiqueta input, el sistema
comprobará que el campo ha sido rellenado antes incluso de pulsar el botón de

36
 Unidad II (HTML, XML y CSS)

envío. Si el usuario deja este campo en blanco, se mostrará un mensaje de error o

simplemente se colocará el cursor de escritura sobre el primer campo vacío.

Atributos comunes de los controles de un formulario

▪ name: para dar nombre a un elemento de entrada del formulario.

▪ disabled: permite desactivar los con- troles que conforman un formulario si se
incluye este atributo lógico. Así se consigue que no tengan efectos los eventos de
ratón que el usuario intente realizar sobre las entradas del formulario desactivadas
con este atributo.
▪ autofocus: atributo lógico para indicar que un control sea seleccionado en el
momento de cargar la página, lo que permite al usuario comenzar a escribir sin tener
que seleccionar con el ratón alguna entrada del formulario. Se suele indicar en el
primer control del formulario.
▪ maxlength: establece el límite en el número de caracteres de una entrada de
usuario; el valor del atributo debe ser un entero positivo.

Otros atributos de formularios:

▪ checked: especifica que un elemento de entrada aparezca preseleccionado cuando

se cargue la página (para entra- das "checkbox" o "radio"). S
▪ rc: indica la URL de una imagen.
▪ alt: establece un texto alternativo para la imagen.

Tabla 4. Resumen de etiquetas básicas de formularios.

37
 Unidad II (HTML, XML y CSS)

Fuente: Zofío Jiménez, J. (2013). Aplicaciones web. Macmillan Iberia, S.A.

[Link]

38
 Unidad II (HTML, XML y CSS)

2.5 Lenguajes de presentación en documentos Web.

Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos y que

ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un número
de reglas sintácticas para poder crear documentos. Uno de los lenguajes más comunes
para presentar información web es HTML.

El lenguaje de presentación es aquel que indica el formato del texto. Este tipo de marcado
es útil para maquetar la presentación de un documento para su lectura, pero resulta
insuficiente para el procesamiento automático de la información.

El marcado de presentación resulta más fácil de elaborar, sobre todo para cantidades
pequeñas de información. Sin embargo, resulta complicado de mantener o modificar, por lo
que su uso se ha ido reduciendo en proyectos grandes en favor de otros tipos de marcado
más estructurados.

Se puede tratar de averiguar la estructura de un documento de esta clase buscando pistas

en el texto. Por ejemplo, el título puede ir precedido de varios saltos de línea, y estar ubicado
centrado en la página. Varios programas pueden deducir la estructura del texto basándose
en esta clase de datos, aunque el resultado suele ser bastante imperfecto.

Actualmente los lenguajes de presentación y su sintaxis son utilizados para desarrollar

contenidos interactivos para la web, dependiendo del medio y del contenido que se desea
desarrollar, la sintaxis puede cambiar en pequeñas instrucciones, pues los medios de
renderizado y/o compilación cambian.

¿Cómo funciona un lenguaje de presentación?

Funciona por medio de reglas específicas las cuales presentan un soporte adecuado para
la correcta interpretación y estructuración de un documento en el que se exprese la
información necesaria solicitada.

En este lenguaje se expresan los atributos de los elementos de tal forma que se definen los
diseños y contenidos, por ejemplo:

• Márgenes
• Tipo de títulos
• Color de fondo
• Tipo de letra

Actualmente en el mundo de la web debido a la evolución del mundo electrónico y de

comunicación hacen falta lenguajes de presentación con la finalidad de señalar elementos,
estos funcionan en estructuras de programación como los navegadores web, la importancia
de los lenguajes es para que los elementos web se muestren correctamente, los lenguajes
más utilizados son:

39
 Unidad II (HTML, XML y CSS)

• XHTML para el marcado

• CSS para la presentación

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal
usado para definir la presentación de un documento estructurado escrito en HTML o XML
y por extensión en XHTML. El W3C (World Wide Web Consortium) es el encargado de
formular la especificación de las hojas de estilo que servirá de estándar para los agentes
de usuario o navegadores.

Las hojas de estilo representan un avance importante para los diseñadores de páginas web,
al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas. En
los entornos científicos en que la Web fue concebida, la gente estaba más preocupada por
el contenido de sus páginas que por su presentación.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura
de un documento de su presentación.

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de

los documentos electrónicos definidos con HTML y XHTML.
CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para
crear páginas web complejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas

ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado
completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad
del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo
documento en infinidad de dispositivos diferentes.

Estructura CSS

40
 Unidad II (HTML, XML y CSS)

2.6 Selectores.

De acuerdo al autor (Contreras Castañeda, 2016), las reglas de estilo serán los diseños
aplicados a cada etiqueta HTML de nuestro documento, pero en un documento pueden
existir muchas etiquetas, y en determinados casos queremos aplicar nuestro diseño a sólo
una parte.

Existen los selectores:

❖ Selectores de elemento.
❖ Selectores de ID.
❖ Selectores de Clase.
❖ Selector Universal
❖ Selectores descendentes y adyacentes

Selector de elemento.

Un selector de elemento nos va a permitir aplicar una regla de estilo sobre un tipo de
elemento concreto de HTML. Para ello tenemos que poner el tag o etiqueta seguido de los
pares de propiedad: valor, separadas por “;”, todo ello cerrado entre corchetes. Es muy
importante seguir estrictamente el formato porque si no tendremos errores difíciles de
detectar.

Ejemplo:
Figura 6. Selector de Elemento

/* Podemos añadir comentarios opcionalmente, y pueden ocupar una o varias líneas. Estos
comentarios los verá un usuario avanzado, por lo que no se debe poner información transcendental.
*/

etiquetaHTML {
propiedad1: valor1;
propiedad2: valor2;
propiedad3:
valor3;
}

Por ejemplo, si queremos aplicar a la etiqueta <h3> el color Azul y a la etiqueta de párrafo
<p>, el color Rojo y cursiva tendremos que escribir lo siguiente:

Ejemplo:
Figura 7. Aplicar estilos a la etiqueta h3

/* Comentario para la etiqueta h3*/

h3 {
color: blue;
}
/* Comentario para la etiqueta h3*/
p{
color: red;
font-style: italic;
41
}
 Unidad II (HTML, XML y CSS)

Selector de ID.

Los selectores de ID, seleccionarán aquellas etiquetas que coincidan con el identificador
asociado id=”nombre_identificador”. Estas etiquetas serán distinguidas en el fichero o estilo
CSS, porque les preceden una #, usándose de la siguiente forma:

Ejemplo:
Figura 8. Selector ID

/* En este caso seleccionamos todos los elementos que hay en documento que corresponde al
identificador dado. Solo se puede usar una vez en el documento CSS y debe ser declarado una
única vez en el CSS. Por lo que se suele usar para secciones bien diferenciadas, tipo menú
superior, contenido, barra lateral, etc. Aunque se puede usar para cualquier otra etiqueta como
párrafos, títulos, tablas, etc.
*/
#nombre_identificador {
propiedad1: valor1;
propiedad2: valor2;
propiedad3: valor3;
}

Selector de Clase.

Los selectores de Clase, seleccionan los elementos dados por un nombre de clase, esta se
puede utilizar al contrario de los selectores de ID varias veces, comienzan con punto ‘.’,
seguido del nombre que queramos darle a la clase. Esta regla afectará a todos los
elementos HTML que pongamos su atributo ‘class’.

Ejemplo:
Figura 9. Selector de Clase

/* En este caso seleccionamos todos los elementos que correspondan a la clase con el nombre
dado. */
nombre_clase {
propiedad1: valor1;
propiedad2: valor2;
propiedad3: valor3;
}

42
 Unidad II (HTML, XML y CSS)

Jerarquía entre selectores

En la siguiente tabla podemos ver el orden de prioridad:

Tabla 5. Jerarquía entre selectores

1° Selector de ID
2° Selector de Clase
3° Selector de Elemento
Fuente: [Link]

Es decir, si a un elemento lo seleccionamos por el elemento, por la clase y por el ID, el valor
que prevalecerá siempre será el del ID y luego la Clase.

Ejemplo:
Figura 10. Aplicando jerarquías

<p class=”desdeClase” id=”desdeID”>¿De qué color soy?, tengo ID= azul, Clase= rojo y elemento
= verde. Solución= AZUL

</p> <p class=”desdeClase”>¿De qué color soy?, No tengo ID, Clase= rojo y Elemento = verde.
Solución= ROJO</p>

<p>¿De qué color soy?, No tengo ID ni Clase pero si Elemento = verde. Solución= VERDE</p>

Selector Universal

Se define con * y se aplica a todos los elementos de la página:

Ejemplo:
Figura 11. Selector Universal

*{
margin: 0;
font-family: Verdana;
}

Como puedes ver en el ejemplo, suele utilizarse para configurar los márgenes, la fuente y
poco más.

43
 Unidad II (HTML, XML y CSS)

Selectores descendentes y adyacentes

Estos selectores permiten seleccionar elementos contenidos dentro de otros de acuerdo a

la estructura en árbol del DOM (Modelo de Objetos del Documento). Si separamos dos
selectores por un espacio en blanco, entonces estaremos aplicando la regla a todos los
descendientes del primer selector:

Ejemplo:
Figura 12. Descendientes del primer selector

section p {
text-font: Verdada;
}

Este selector se aplica a todos los elementos <p> que son descendientes de un elemento
<section> (recuerda que pueden ser descendientes de cualquier nivel).

Podemos mezclar selectores descendentes con los de clase o identificador:

Ejemplo:
Figura 13. Mezclar selectores descendentes

section .error {

color: red;

En este caso, se escribirá en rojo cualquier elemento de la clase error que sea descendiente
de un elemento <section>. Aquí vemos la importancia de usar correctamente los espacios
en blanco.

Si en lugar de aplicarlo a cualquier descendiente de un elemento lo queremos aplicar solo

a sus hijos (es decir, a sus descendientes directos), entonces usaremos el símbolo >:

Ejemplo:
Figura 14. Descendientes directos

section>p {

text-font: Verdana;

En este caso, la fuente Verdana solo se usa en los elementos <p> que son descendientes
directos de <section>.

44
 Unidad II (HTML, XML y CSS)

También podemos seleccionar elementos hermanos (siblings), es decir, elementos que

aparecen justo después de otros elementos. Para ello utilizaremos el símbolo +.

Ejemplo:
Figura 15. Seleccionar elementos hermanos

h1 + p {
text-indent: 1.5em;
}
}

Este selector indenta el primer párrafo que aparece justo después de un encabezado <h1>.
(Recio García, 2016).

2.7 Modelo de caja.

El navegador entiende cada etiqueta HTML como una caja, y cada caja tiene unas
propiedades definidas, según las cuales las ubicarán en un sitio y forma concreta. Conforme
el navegador va leyendo etiquetas, va creando su modelo de cajas, con las propiedades,
cuando nosotros le agregamos otro modelo en el archivo, prevalece nuestro estilo al del
navegador, y la mezcla de su modelo, más el nuestro, será nuestra aplicación web.
(Contreras Castañeda, 2016).

El modelo de cajas o "box model" es seguramente la característica más importante del

lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web.
El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las
páginas se representen mediante cajas rectangulares. (Uniwebside, 2006-2021).

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta
HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML
que incluye la página:

Figura 16. Las cajas se crean automáticamente al definir cada elemento HTML

Fuente: [Link]
4#:~:text=El%20modelo%20de%20cajas%20o,se%20representen%20mediante%20cajas%20rectangular
es.

45
 Unidad II (HTML, XML y CSS)

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran
ningún color de fondo ni ningún borde.

La siguiente imagen muestra las cajas que forman la página web de

[Link] después de forzar a que todas las cajas muestren su borde:
Figura 17. Cajas que forman la página [Link]

Fuente: [Link]
4#:~:text=El%20modelo%20de%20cajas%20o,se%20representen%20mediante%20cajas%20rectangular
es.

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite
modificar todas sus características.

Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:

46
 Unidad II (HTML, XML y CSS)

Figura 18. Representación tridimensional del box model de CSS

Fuente: [Link]
4#:~:text=El%20modelo%20de%20cajas%20o,se%20representen%20mediante%20cajas%20rectangular
es.

Las partes que componen cada caja y su orden de visualización desde el punto de vista del
usuario son las siguientes:

• Contenido (content): se trata del contenido HTML del elemento (las palabras de
un párrafo, una imagen, el texto de una lista de elementos, etc.)
• Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
• Borde (border): línea que encierra completamente el contenido y su relleno.
• Imagen de fondo (background image): imagen que se muestra por detrás del
contenido y el espacio de relleno.
• Color de fondo (background color): color que se muestra por detrás del contenido
y el espacio de relleno.
• Margen (margin): separación opcional existente entre la caja y el resto de cajas
adyacentes.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno
se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el
margen se muestra el color o imagen de fondo de su elemento padre (si están definidos).

47
 Unidad II (HTML, XML y CSS)

Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o
imagen de fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad
y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del
elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.
Combinando imágenes transparentes y colores de fondo se pueden lograr efectos gráficos
muy interesantes.

Anchura

La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.

Tabla 6 Características de la propiedad Width

Propiedad Width

Valores unidad de medida | porcentaje | auto | inherit

Todos los elementos, salvo los elementos en línea que no sean

Se aplica a
imágenes, las filas de tabla y los grupos de filas de tabla

Valor inicial Auto

Descripción Establece la anchura de un elemento

La propiedad width no admite valores negativos y los valores en porcentaje se calculan a

partir de la anchura de su elemento padre. El valor inherit indica que la anchura del
elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se
establece de forma explícita un valor a esta propiedad, indica que el navegador debe
calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el
sitio disponible en la página.

El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:

#lateral { width: 200px; }

<div id="lateral">
...
</div>

48
 Unidad II (HTML, XML y CSS)

Altura

La propiedad CSS que controla la altura de los elementos se denomina height.

Tabla 7 Características de la propiedad height

Propiedad height

Valores unidad de medida | porcentaje | auto | inherit

Todos los elementos, salvo los elementos en línea que no sean

Se aplica a
imágenes, las columnas de tabla y los grupos de columnas de tabla

Valor inicial auto

Descripción Establece la altura de un elemento

Al igual que sucede con width, la propiedad height no admite valores negativos. Si se indica
un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre
no tiene una altura definida explícitamente, se asigna el valor auto a la altura.

El valor inherit indica que la altura del elemento se hereda de su elemento padre. El
valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta
propiedad, indica que el navegador debe calcular automáticamente la altura del elemento,
teniendo en cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la altura del elemento <div> de cabecera:

#cabecera { height: 60px; }

<div id="cabecera">
...
</div>

49
 Unidad II (HTML, XML y CSS)

Margen

CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y
verticales de un elemento.

Tabla 8 Características de los márgenes

Propiedades margin-top, margin-right, margin-bottom, margin-left

Valores unidad de medida | porcentaje | auto | inherit

Todos los elementos, salvo margin-top y margin-bottom que sólo se

Se aplica a
aplican a los elementos de bloque y a las imágenes

Valor inicial 0

Establece cada uno de los márgenes horizontales y verticales de un

Descripción
elemento

Cada una de las propiedades establece la separación entre el borde lateral de la caja y el
resto de cajas adyacentes:

Figura 19 Las cuatro propiedades relacionadas con los márgenes

Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles
(cuando se requiere una precisión total), los em (para hacer diseños que mantengan las
proporciones) y los porcentajes (para hacer diseños líquidos o fluidos).

50
 Unidad II (HTML, XML y CSS)

El siguiente ejemplo añade un margen izquierdo al segundo párrafo:

.destacado {

margin-left: 2em;

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit.

Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum,

laoreet non, tincidunt a, viverra sed, tortor.</p>

<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices,

cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non

nisl tincidunt faucibus.</p>

<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros

egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt,

risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>

A continuación, se muestra el aspecto del ejemplo anterior en cualquier navegador:

Figura 20 Ejemplo de propiedad margin-left

51
 Unidad II (HTML, XML y CSS)

Algunos diseñadores web utilizan la etiqueta <blockquote> para tabular los contenidos de
los párrafos. Se trata de un error grave porque HTML no debe utilizarse para controlar el
aspecto de los elementos. CSS es el único responsable de establecer el estilo de los
elementos, por lo que en vez de utilizar la etiqueta <blockquote> de HTML, debería
utilizarse la propiedad margin-left de CSS.

Los márgenes verticales (margin-top y margin-bottom) sólo se pueden aplicar a los

elementos de bloque y las imágenes, mientras que los márgenes laterales (margin-
left y margin-right) se pueden aplicar a cualquier elemento, tal y como muestra la siguiente
imagen:

Figura 21 Los márgenes verticales sólo se aplican a los elementos de bloque e imágenes

La imagen anterior muestra el resultado de aplicar los mismos márgenes a varios enlaces
(elementos en línea) y varios párrafos (elementos de bloque). En los elementos en línea los
márgenes verticales no tienen ningún efecto, por lo que los enlaces no muestran ninguna
separación vertical, al contrario de lo que sucede con los párrafos. Sin embargo, los
márgenes laterales funcionan sobre cualquier tipo de elemento, por lo que los enlaces se
muestran separados entre sí y los párrafos aumentan su separación con los bordes
laterales de su elemento contenedor.

Además de las cuatro propiedades que controlan cada uno de los márgenes del elemento,
CSS define una propiedad especial que permite establecer los cuatro márgenes de forma
simultánea. Estas propiedades especiales se denominan "propiedades shorthand".

La propiedad que permite definir de forma simultánea los cuatro márgenes se

denomina margin.

52
 Unidad II (HTML, XML y CSS)

Figura 22 Características de la propiedad Margin

Propiedad Margin

Valores ( unidad de medida | porcentaje | auto ) {1, 4} | inherit

Todos los elementos salvo algunos casos especiales de elementos

Se aplica a
mostrados como tablas

Valor inicial -

Descripción Establece de forma directa todos los márgenes de un elemento

La notación {1, 4} de la definición anterior significa que la propiedad margin admite entre
uno y cuatro valores, con el siguiente significado:

• Si solo se indica un valor, todos los márgenes tienen ese valor.

• Si se indican dos valores, el primero se asigna al margen superior e inferior y el
segundo se asigna a los márgenes izquierdo y derecho.
• Si se indican tres valores, el primero se asigna al margen superior, el tercero se
asigna al margen inferior y el segundo valor se asigna los márgenes izquierdo y
derecho.
• Si se indican los cuatro valores, el orden de asignación es: margen superior, margen
derecho, margen inferior y margen izquierdo.
El ejemplo anterior de márgenes se puede reescribir utilizando la propiedad margin:

Código CSS original:

div img {

margin-top: .5em;

margin-bottom: .5em;

margin-left: 1em;

margin-right: .5em;

53
 Unidad II (HTML, XML y CSS)

Alternativa directa:

div img {

margin: .5em .5em .5m 1em;

Otra alternativa:

div img {

margin: .5em;

margin-left: 1em;

El comportamiento de los márgenes verticales es más complejo de lo que se puede

imaginar. Cuando se juntan dos o más márgenes verticales, se fusionan de forma
automática y la altura del nuevo margen será igual a la altura del margen más alto de los
que se han fusionado.

Figura 23 Fusión automática de los márgenes verticales

De la misma forma, si un elemento está contenido dentro de otro elemento, sus márgenes
verticales se fusionan y resultan en un nuevo margen de la misma altura que el mayor
margen de los que se han fusionado:

54
 Unidad II (HTML, XML y CSS)

Figura 24 Fusión de los márgenes de los elementos interiores

Aunque en principio puede parecer un comportamiento extraño, la razón por la que se

propuso este mecanismo de fusión automática de márgenes verticales es el de dar
uniformidad a las páginas web habituales. En una página con varios párrafos, si no se diera
este comportamiento y se estableciera un determinado margen a todos los párrafos, el
primer párrafo no mostraría un aspecto homogéneo respecto de los demás.

Figura 25 Motivo por el que se fusionan automáticamente los márgenes verticales

En el caso de un elemento que se encuentra en el interior de otro y sus márgenes se

fusionan de forma automática, se puede evitar este comportamiento añadiendo un pequeño
relleno (padding: 1px) o un borde (border: 1px solid transparent) al elemento contenedor.

55
 Unidad II (HTML, XML y CSS)

Relleno

CSS define cuatro propiedades para controlar cada uno de los espacios de relleno
horizontales y verticales de un elemento.

Tabla 9 relleno horizontales y verticales de un elemento

Propiedades padding-top, padding-right, padding-bottom, padding-left

Valores unidad de medida | porcentaje | inherit

Todos los elementos excepto algunos elementos de tablas como grupos

Se aplica a
de cabeceras y grupos de pies de tabla

Valor inicial 0

Establece cada uno de los rellenos horizontales y verticales de un

Descripción
elemento

Cada una de estas propiedades establece la separación entre el contenido y los bordes
laterales de la caja del elemento:

Figura 26 Las cuatro propiedades relacionadas con los rellenos

Como sucede con los márgenes, CSS también define una propiedad de
tipo "shorthand" llamada padding para establecer los cuatro rellenos de un elemento de
forma simultánea.

56
 Unidad II (HTML, XML y CSS)

Tabla 10 Características de la propiedad Padding

Propiedad Padding

Valores ( unidad de medida | porcentaje ) {1, 4} | inherit

Todos los elementos excepto algunos elementos de tablas como grupos

Se aplica a
de cabeceras y grupos de pies de tabla

Valor inicial -

Descripción Establece de forma directa todos los rellenos de los elementos

La notación {1, 4} de la definición anterior significa que la propiedad padding admite entre
uno y cuatro valores, con el mismo significado que el de la propiedad margin. Ejemplo:

body {padding: 2em} /* Todos los rellenos valen 2em */

body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y derecho = 2em */

body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo
= 2em */

body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em, inferior = 3em, izqu
ierdo = 4em */

Bordes

CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un
elemento. Para cada borde se puede establecer su anchura o grosor, su color y su estilo,
por lo que en total CSS define 20 propiedades relacionadas con los bordes.

57
 Unidad II (HTML, XML y CSS)

Anchura

La anchura de los bordes se controla con las cuatro propiedades siguientes:

Tabla 11 Características de las propiedades de los bordes

border-top-width, border-right-width, border-bottom-

Propiedades
width, border-left-width

Valores ( unidad de medida | thin | medium | thick ) | inherit

Se aplica a Todos los elementos

Valor inicial Medium

Descripción Establece la anchura de cada uno de los cuatro bordes de los elementos

La anchura de los bordes se indica mediante una medida (en cualquier unidad de medida
absoluta o relativa) o mediante las palabras clave thin (borde delgado), medium (borde
normal) y thick (borde ancho).

La unidad de medida más habitual para establecer el grosor de los bordes es el píxel, ya
que es la que permite un control más preciso sobre el grosor. Las palabras clave apenas
se utilizan, ya que el estándar CSS no indica explícitamente el grosor al que equivale cada
palabra clave, por lo que pueden producirse diferencias visuales entre navegadores. Así
por ejemplo, el grosor medium equivale a 4px en algunas versiones de Internet Explorer y
a 3px en el resto de navegadores.

El siguiente ejemplo muestra un elemento con cuatro anchuras diferentes de borde:

Figura 27 Ejemplo de propiedad border-width

58
 Unidad II (HTML, XML y CSS)

Las reglas CSS utilizadas se muestran a continuación:

div {
border-top-width: 10px;
border-right-width: 1em;
border-bottom-width: thick;
border-left-width: thin;
}

Si se quiere establecer de forma simultánea la anchura de todos los bordes de una caja, es
necesario utilizar una propiedad "shorthand" llamada border-width:

Propiedad border-width

Valores ( unidad de medida | thin | medium | thick ) {1, 4} | inherit

Se aplica a Todos los elementos

Valor inicial Medium

Descripción Establece la anchura de todos los bordes del elemento

La propiedad border-width permite indicar entre uno y cuatro valores. El significado de cada
caso es el habitual de las propiedades "shorthand":

p { border-width: thin } /* thin thin thin thin */

p { border-width: thin thick } /* thin thick thin thick */

p { border-width: thin thick medium } /* thin thick medium thick */

p { border-width: thin thick medium thin } /* thin thick medium thin */

Si se indica un solo valor, se aplica a los cuatro bordes. Si se indican dos valores, el primero
se aplica al borde superior e inferior y el segundo valor se aplica al borde izquierdo y
derecho.

Si se indican tres valores, el primero se aplica al borde superior, el segundo se aplica al

borde izquierdo y derecho y el tercer valor se aplica al borde inferior. Si se indican los cuatro
valores, el orden de aplicación es superior, derecho, inferior e izquierdo.

59
 Unidad II (HTML, XML y CSS)

Color

El color de los bordes se controla con las cuatro propiedades siguientes:

border-top-color, border-right-color, border-bottom-color, border-

Propiedades
left-color

Valores color | transparent | inherit

Se aplica a Todos los elementos

Valor inicial -

Descripción Establece el color de cada uno de los cuatro bordes de los elementos

El ejemplo anterior se puede modificar para mostrar cada uno de los bordes de un color
diferente:

Figura 28 Ejemplo de propiedad border-color

60
 Unidad II (HTML, XML y CSS)

Las reglas CSS necesarias para mostrar los colores anteriores son las siguientes:

div {
border-top-color: #CC0000;
border-right-color: blue;
border-bottom-color: #00FF00;
border-left-color: #CCC;
}

CSS incluye una propiedad "shorthand" llamada border-color para establecer de forma
simultánea el color de todos los bordes de una caja:

Tabla 12 Características de la propiedad border-color

Propiedad border-color

Valores ( color | transparent ) {1, 4} | inherit

Se aplica a Todos los elementos

Valor inicial -

Descripción Establece el color de todos los bordes del elemento

En este caso, al igual que sucede con la propiedad border-width, es posible indicar de uno
a cuatro valores y las reglas de aplicación son idénticas a las de la propiedad border-width.

61
 Unidad II (HTML, XML y CSS)

Estilo

Por último, CSS permite establecer el estilo de cada uno de los bordes mediante las
siguientes propiedades:

Tabla 13Características de las propiedades de los bordes

border-top-style, border-right-style, border-bottom-style, border-

Propiedades
left-style

none | hidden | dotted | dashed | solid | double | groove | ridge | inset |

Valores
outset | inherit

Se aplica a Todos los elementos

Valor inicial none

Descripción Establece el estilo de cada uno de los cuatro bordes de los elementos

El estilo de los bordes sólo se puede indicar mediante alguna de las palabras reservadas
definidas por CSS. Como el valor por defecto de esta propiedad es none, los elementos no
muestran ningún borde visible a menos que se establezca explícitamente un estilo de borde.

Siguiendo el ejemplo anterior, se puede modificar el estilo de cada uno de los bordes:

Figura 29 Ejemplo de propiedad border-style

62
 Unidad II (HTML, XML y CSS)

Las reglas CSS necesarias para mostrar los estilos anteriores son las siguientes:

div {
border-top-style: dashed;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: solid;
}

El aspecto con el que los navegadores muestran los diferentes tipos de borde se muestra
a continuación:
Figura 30 Tipos de bordes definidos por CSS

Los bordes más utilizados son solid y dashed, seguidos de double y dotted. Los
estilos none y hidden son idénticos visualmente, pero se diferencian en la forma que los
navegadores resuelven los conflictos entre los bordes de las celdas adyacentes en las
tablas.

63
 Unidad II (HTML, XML y CSS)

Para establecer de forma simultánea los estilos de todos los bordes de una caja, es
necesario utilizar la propiedad "shorthand" llamada border-style:

Tabla 14 Características de la propiedad border-style

Propiedad border-style

(none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Valores
) {1, 4} | inherit

Se aplica a Todos los elementos

Valor inicial -

Descripción Establece el estilo de todos los bordes del elemento

Como es habitual, la propiedad permite indicar de uno a cuatro valores diferentes y las
reglas de aplicación son las habituales de las propiedades "shorthand".

Propiedades shorthand

Como sucede con los márgenes y los rellenos, CSS define una serie de propiedades de
tipo "shorthand" que permiten establecer todos los atributos de los bordes de forma
simultánea. CSS incluye una propiedad "shorthand" para cada uno de los cuatro bordes y
una propiedad "shorthand" global.

Tabla 15 Características de las propiedades shorthand

Propiedades border-top, border-right, border-bottom, border-left

Valores ( unidad de medida_borde || color_borde || estilo_borde ) | inherit

Se aplica a Todos los elementos

Valor inicial -

Establece el estilo completo de cada uno de los cuatro bordes de los

Descripción
elementos

64
 Unidad II (HTML, XML y CSS)

El significado de cada uno de los valores especiales es el siguiente:

• <medida_borde>: una medida CSS o alguna de las siguientes palabras

clave: thin, medium, thick.
• <color_borde>: un color de CSS o la palabra clave transparent
• <estilo_borde>: una de las siguientes palabras
clave: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
Las propiedades "shorthand" permiten establecer alguno o todos los atributos de cada
borde. El siguiente ejemplo establece el color y el tipo del borde inferior, pero no su anchura:

h1 {
border-bottom: solid red;
}

En el ejemplo anterior, la anchura del borde será la correspondiente al valor por defecto
(medium). Este otro ejemplo muestra la forma habitual utilizada para establecer el estilo de
cada borde:

div {
border-top: 1px solid #369;
border-bottom: 3px double #369;
}

Por último, CSS define una propiedad de tipo "shorthand" global para establecer el valor de
todos los atributos de todos los bordes de forma directa:

Tabla 16 Característica de la propiedad Border

Propiedad Border

Valores ( unidad de medida_borde || color_borde || estilo_borde ) | inherit

Se aplica a Todos los elementos

Valor inicial -

Descripción Establece el estilo completo de todos los bordes de los elementos

65
 Unidad II (HTML, XML y CSS)

Las siguientes reglas CSS son equivalentes:

div {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}

div { border: 1px solid red; }

Como el valor por defecto de la propiedad border-style es none, si una

propiedad shorthand no establece explícitamente el estilo de un borde, el elemento no
muestra ese borde:

/* Sólo se establece el color, por lo que el estilo es

"none" y el borde no se muestra */
div { border: red; }

/* Se establece el grosor y el color del borde, pero no

su estilo, por lo que es "none" y el borde no se muestra */
div { border-bottom: 5px blue; }

Cuando los cuatro bordes no son idénticos, pero sí muy parecidos, se puede utilizar la
propiedad border para establecer de forma directa los atributos comunes de todos los
bordes y posteriormente especificar para cada uno de los cuatro bordes sus propiedades
particulares:

h1 {
border: solid #000;
border-top-width: 6px;
border-left-width: 8px;
}

66
 Unidad II (HTML, XML y CSS)

Margen, relleno, bordes y modelo de cajas

La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus

propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento
determinan la anchura y altura final del elemento. (Uniwebsidad, s.f.) .

En el siguiente ejemplo se muestran los estilos CSS de un elemento:

div {
width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;
}

La anchura total con la que se muestra el elemento no son los 300 píxel indicados en la
propiedad width, sino que también se añaden todos sus márgenes, rellenos y bordes:

Figura 31 La anchura total de un elemento tiene en cuenta los márgenes, rellenos y bordes

De esta forma, la anchura del elemento en pantalla sería igual a la suma de la anchura
original, los márgenes, los bordes y los rellenos:

30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 píxel

Así, la anchura/altura establecida con CSS siempre hace referencia a la anchura/altura del
contenido. La anchura/altura total del elemento debe tener en cuenta además los valores
del resto de partes que componen la caja del box model.

Por otra parte, la guerra de navegadores que se produjo en los años 90 provocó que cada
fabricante (Microsoft y Netscape) añadiera sus propias extensiones y mejoras en sus
productos. Posteriormente, aparecieron los estándares publicados por el W3C y los
fabricantes se encontraron con el problema de la incompatibilidad entre sus

67
 Unidad II (HTML, XML y CSS)

implementaciones anteriores de HTML y CSS y las implementaciones que requerían los

estándares.

La solución que adoptaron fue la de incluir en el navegador dos modos diferentes de

funcionamiento: modo compatible con las páginas antiguas (denominado "modo quirks" y
que se podría traducir como "modo raro") y modo compatible con los nuevos estándares
(denominado "modo estándar"). El modo quirks es equivalente a la forma en la que se
visualizaban las páginas en los navegadores Internet Explorer 4 y Netscape Navigator 4

La diferencia más notable entre los dos modos es el tratamiento del "box model", lo que
puede afectar gravemente al diseño de las páginas HTML. Los navegadores seleccionan
automáticamente el modo en el que muestran las páginas en función
del DOCTYPE definido por el documento. En general, los siguientes tipos
de DOCTYPE activan el modo quirks en los navegadores:

• No utilizar ningún DOCTYPE

• DOCTYPE anterior a HTML 4.0 (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
3.2 Final//EN">)
• DOCTYPE de HTML 4.01 sin URL (<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN">)
En el caso concreto de Internet Explorer, también activan el modo quirks los modos XHTML
1.0 que incluyen la declaración de XML (por ejemplo <?xml version="1.0" encoding="UTF-
8"?>) al principio de la página web:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]

Se pueden consultar todos los casos concretos que activan el modo quirks para cada
navegador en la página [Link]

La versión 5.5 y anteriores de Internet Explorer y las versiones 6 y 7 en modo quirks siguen
su propio modelo de cálculo de anchuras y alturas que es muy diferente al método definido
por el estándar.

La siguiente imagen muestra el elemento del ejemplo anterior en la versión 6 de Internet

Explorer en modo estándar:

68
 Unidad II (HTML, XML y CSS)

Figura 32 Internet Explorer 6 en modo estándar

La anchura del elemento es la que se obtiene de sumar la anchura de su contenido (300),

sus bordes (2 x 10) y sus rellenos (2 x 50). Por lo tanto, la anchura del elemento
son 420 píxel, a los que se suman los 30 píxel de margen lateral a cada lado.

Sin embargo, el mismo ejemplo en el modo quirks de la versión 6 de Internet Explorer

muestra el siguiente aspecto:

Figura 33 Internet Explorer 6 en modo quirks

69
 Unidad II (HTML, XML y CSS)

Las versiones anteriores de Internet Explorer y las versiones 6 y 7 en

modo quirks consideran que la anchura establecida por CSS no sólo es la anchura del
contenido, sino que también incluye los bordes y el relleno.

Por lo tanto, en este caso la anchura total del elemento (sin contar los márgenes laterales)
es de 300 píxel, el mismo valor que se indica en la propiedad width. El espacio ocupado por
los bordes del elemento (2 x 10) y sus rellenos (2 x 50) se resta de la anchura de su
contenido.

Para evitar este problema y crear diseños con el mismo aspecto en cualquier navegador,
es necesario evitar el modo quirks de Internet Explorer. Por tanto, todas las páginas deben
incluir la declaración apropiada de DOCTYPE.

Fondos

El último elemento que forma el box model es el fondo de la caja del elemento. El fondo
puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada
por el contenido y su relleno, ya que el color de los bordes se controla directamente desde
los bordes y las zonas de los márgenes siempre son transparentes.

Para establecer un color o imagen de fondo en la página entera, se debe establecer un

fondo al elemento <body>. Si se establece un fondo a la página, como el valor inicial del
fondo de los elementos es transparente, todos los elementos de la página se visualizan con
el mismo fondo a menos que algún elemento especifique su propio fondo.

CSS define cinco propiedades para establecer el fondo de cada elemento (background-
color, background-image, background-repeat, background-attachment, background-
position) y otra propiedad de tipo "shorthand" (background).

La propiedad background-color permite mostrar un color de fondo sólido en la caja de un

elemento. Esta propiedad no permite crear degradados ni ningún otro efecto avanzado.

Tabla 17 Características de la propiedad background-color

Propiedad background-color

Valores color | transparent | inherit

Se aplica a Todos los elementos

Valor inicial transparent

Descripción Establece un color de fondo para los elementos

70
 Unidad II (HTML, XML y CSS)

El siguiente ejemplo muestra una página web con un color gris claro de fondo:

body {
background-color: #F5F5F5;
}

Para crear efectos gráficos avanzados, es necesario utilizar la propiedad background-

image, que permite mostrar una imagen como fondo de la caja de cualquier elemento:

Tabla 18 Características de la propiedad background-image

Propiedad background-image

Valores url | none | inherit

Se aplica a Todos los elementos

Valor inicial none

Descripción Establece una imagen como fondo para los elementos

CSS permite establecer de forma simultánea un color y una imagen de fondo. En este caso,
la imagen se muestra delante del color, por lo que solamente si la imagen contiene zonas
transparentes es posible ver el color de fondo.

El siguiente ejemplo muestra una imagen como fondo de toda la página:

body { background-image: url("imagenes/[Link]") }

Las imágenes de fondo se indican a través de su URL, que puede ser absoluta o relativa.
Suele ser recomendable crear una carpeta de imágenes que se encuentre en el mismo
directorio que los archivos CSS y que almacene todas las imágenes utilizadas en el diseño
de las páginas.

Así, las imágenes correspondientes al diseño de la página se mantienen separadas del

resto de imágenes del sitio y el código CSS es más sencillo (por utilizar URL relativas) y
más fácil de mantener (por no tener que actualizar URL absolutas en caso de que se cambie
la estructura del sitio web).

Por otra parte, suele ser habitual indicar un color de fondo siempre que se muestra una
imagen de fondo. En caso de que la imagen no se pueda mostrar o contenga errores, el
navegador mostrará el color indicado (que debería ser, en lo posible, similar a la imagen) y
la página no parecerá que contiene errores.

71
 Unidad II (HTML, XML y CSS)

Si la imagen que se quiere mostrar es demasiado grande para el fondo del elemento,
solamente se muestra la parte de imagen comprendida en el tamaño del elemento. Si la
imagen es más pequeña que el elemento, CSS la repite horizontal y verticalmente hasta
llenar el fondo del elemento.

Este comportamiento es útil para establecer un fondo complejo a una página web entera.
El siguiente ejemplo utiliza una imagen muy pequeña para establecer un fondo complejo a
toda una página:

Imagen original

Figura 34 Imagen original utilizada para el fondo de la página

Reglas CSS

body {
background-image:url(imagenes/[Link]);
}

Resultado

Figura 35 Página con una imagen de fondo

Con una imagen muy pequeña (y que, por tanto, se puede descargar en muy poco tiempo)
se consigue cubrir completamente el fondo de la página, con lo que se consigue un gran
ahorro de ancho de banda.

72
 Unidad II (HTML, XML y CSS)

En ocasiones, no es conveniente que la imagen de fondo se repita horizontal y

verticalmente. Para ello, CSS introduce la propiedad background-repeat que permite
controlar la forma de repetición de las imágenes de fondo.

Tabla 19 Características de la propiedad background-repeat

Propiedad background-repeat

Valores repeat | repeat-x | repeat-y | no-repeat | inherit

Se aplica a Todos los elementos

Valor inicial Repeat

Descripción Controla la forma en la que se repiten las imágenes de fondo

El valor repeat indica que la imagen se debe repetir en todas direcciones y por tanto, es el
comportamiento por defecto. El valor no-repeat muestra una sola vez la imagen y no se
repite en ninguna dirección. El valor repeat-x repite la imagen sólo horizontalmente y el
valor repeat-y repite la imagen solamente de forma vertical.

El sitio web [Link] utiliza el valor repeat-x para mostrar una imagen de fondo
en la cabecera de la página:

73
 Unidad II (HTML, XML y CSS)

Figura 36 Uso de repeat-x en la página de [Link]

Las reglas CSS definidas para la cabecera son:

#hdr {
background: url("/images/[Link]") repeat-x;
width: 100%;
text-align: center;
}

74
 Unidad II (HTML, XML y CSS)

Por otra parte, el sitio web [Link] utiliza el valor repeat-y para mostrar el
fondo de una columna de contenidos:

Figura 37 Uso de repeat-y en la página de [Link]

Las reglas CSS definidas para esa columna de contenidos son:

.wide #content-secondary {
width: 272px;
margin: 13px 0 0 0;
position: relative;
margin-left: -8px;
background: url("./graphics/wide/[Link]") repeat-y;
}

Además de seleccionar el tipo de repetición de las imágenes de fondo, CSS permite

controlar la posición de la imagen dentro del fondo del elemento mediante la
propiedad background-position.

75
 Unidad II (HTML, XML y CSS)

Tabla 20 Características de la propiedad background-position

Propiedad background-position

( ( porcentaje | unidad de medida | left | center | right )

Valores ( porcentaje | unidad de medida | top | center | bottom )? ) | ( ( left |
center | right ) || ( top | center | bottom ) ) | inherit

Se aplica a Todos los elementos

Valor inicial 0% 0%

Controla la posición en la que se muestra la imagen en el fondo del

Descripción
elemento

La propiedad background-position permite indicar la distancia que se desplaza la imagen

de fondo respecto de su posición original situada en la esquina superior izquierda.

Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento horizontal

y el segundo el desplazamiento vertical respecto del origen (situado en la esquina superior
izquierda). Si solamente se indica un porcentaje o una medida, se considera que es el
desplazamiento horizontal y al desplazamiento vertical se le asigna automáticamente el
valor de 50%.

Cuando se utilizan porcentajes, su interpretación no es intuitiva. Si el valor de la

propiedad background-position se indica mediante dos porcentajes x% y%, el navegador
coloca el punto (x%, y%) de la imagen de fondo en el punto (x%, y%) del elemento.

Las palabras clave permitidas son equivalentes a algunos porcentajes significativos: top =
0%, left = 0%, center = 50%, bottom = 100%, right = 100%.

CSS permite mezclar porcentajes y palabras clave, como por ejemplo 50% 2cm, center
2cm, center 10%.

Si se utilizan solamente palabras clave, el orden es indiferente y por tanto, es equivalente

indicar top left y left top.

76
 Unidad II (HTML, XML y CSS)

El siguiente ejemplo muestra una misma imagen de fondo posicionada de tres formas
diferentes:

Figura 38 Ejemplo de propiedad background-position

Las reglas CSS del ejemplo anterior se muestran a continuación:

#caja1 {
background-image: url("images/[Link]");
background-repeat: no-repeat;
background-position: bottom left;
}
#caja2 {
background-image: url("images/[Link]");
background-repeat: no-repeat;
background-position: right top;
}
#caja3 {
background-image: url("images/[Link]");
background-repeat: no-repeat;
background-position: 50% 50%;
}

<div id="caja1"><h1>bottom left</h1></div>

<div id="caja2"><h1>right top</h1></div>
<div id="caja3"><h1>50% 50%</h1></div>

77
 Unidad II (HTML, XML y CSS)

Opcionalmente, se puede indicar que el fondo permanezca fijo cuando la ventana del
navegador se desplaza mediante las barras de scroll. Se trata de un comportamiento que
en general no es deseable y que algunos navegadores no soportan correctamente. La
propiedad que controla este comportamiento es background-attachment.

Tabla 21 Características de la propiedad background-attachment

Propiedad background-attachment

Valores scroll | fixed | inherit

Se aplica a Todos los elementos

Valor inicial Scroll

Controla la forma en la que se visualiza la imagen de fondo: permanece

Descripción fija cuando se hace scroll en la ventana del navegador o se desplaza junto
con la ventana

Para hacer que una imagen de fondo se muestre fija al desplazar la ventana del navegador,
se debe añadir la propiedad background-attachment: fixed.

Por último, CSS define una propiedad de tipo "shorthand" para indicar todas las
propiedades de los colores e imágenes de fondo de forma directa. La propiedad se
denomina background y es la que generalmente se utiliza para establecer las propiedades
del fondo de los elementos.

Tabla 22 Características de la propiedad background

Propiedad Background

( background-color || background-image || background-repeat ||

Valores
background-attachment || background-position ) | inherit

Se aplica a Todos los elementos

Valor inicial -

Descripción Establece todas las propiedades del fondo de un elemento

78
 Unidad II (HTML, XML y CSS)

El orden en el que se indican las propiedades es indiferente, aunque en general se sigue el

formato indicado de color, url de imagen, repetición y posición.

El siguiente ejemplo muestra la ventaja de utilizar la propiedad background:

/* Color e imagen de fondo de la página mediante una propiedad shorthand */

body { background: #222d2d url(./graphics/[Link]) repeat-x 0 0; }

/* La propiedad shorthand anterior es equivalente a las siguientes propiedades */

body {
background-color: #222d2d;
background-image: url("./graphics/[Link]");
background-repeat: repeat-x;
background-position: 0 0;
}

La propiedad background permite asignar todos o sólo algunos de todos los valores que se
pueden definir para los fondos de los elementos:

background: url("./graphics/wide/[Link]") repeat-y;

background: url("./graphics/wide/[Link]") no-repeat bottom left;

background: transparent url("./graphics/[Link]") no-repeat 0 -27px;

background: none;

background: #293838 url("./graphics/icons/[Link]") no-repeat center left;

79
 Unidad II (HTML, XML y CSS)

Actividades de aprendizaje

Actividad 1:

Realizar una presentación electrónica utilizando la herramienta Genially sobre:

❑ Lenguajes de Marcas

❑ Lenguaje de Presentación de Datos

Link de acceso a Genially: [Link]

La presentación debe contener lo siguiente:

➢ Hoja de Presentación
➢ Índice
➢ Introducción
➢ Desarrollo de los temas con imágenes y ejemplos
➢ Conclusión
➢ Referencias

Actividad 2: Avance de Proyecto

El estudiante deberá entregar un avance de su proyecto en el cual aplicará los temas vistos
en esta unidad.

Nota: Revisar la sección de Proyecto de Asignatura

80
 Unidad II (HTML, XML y CSS)

Prácticas

El alumno deberá desarrollar una práctica en la cual emplee todos los temas vistos en esta
unidad.

Práctica 1: Instalación de Software.

1) Descarga e instala los siguientes programas:

a. Xampp: [Link]
b. Sublime o Brackets (El que sea de su preferencia):
[Link]
[Link]

Xampp es una herramienta de desarrollo que te permite probar tu trabajo (páginas web o
programación, por ejemplo) en tu propia computadora sin necesidad de tener que acceder
a internet.

Sublime y Brackets son editores de texto de código abierto que te permitirán desarrollar tus
proyectos web.

81
 Unidad II (HTML, XML y CSS)

Práctica 2: Creación de mi primer página Web

1) Crear una nueva carpeta llamada miblog

2) Dentro de la carpeta miblog, crear dos carpetas con los siguientes nombres:
a. css
b. img
3) Dentro de la carpeta css crear un archivo llamado [Link]
4) Dentro de la carpeta img copiar las imágenes que debes descargar del siguiente
enlace:[Link]
kIlp5JZBR3dYMq?usp=sharing
5) Crear un archivo llamado [Link], su ubicación será en la raíz de la carpeta
miblog
6) Dentro del archivo [Link] comenzar a escribir la estructura de html y vincular
nuestro documento index con la hoja de estilos.
Creación de etiquetas HTML

<!DOCTYPE html>
<html ">
<head>
<meta charset="utf-8">
<title>Blog de Viajes</title>
<link rel="stylesheet" type="text/css" href="css/[Link]">
</head>
<body>

</body>
</html>

7) Dentro del body comenzar con el encabezado y contenedores, para proceder a

insertar la imagen de logo de nuestro sitio:
<body>

<header>

<div class="contenedor">

<div class="logo">

<img src="img/[Link]" alt="logo blog de Viajes">

</div>

</div>

</header>

</body>

82
 Unidad II (HTML, XML y CSS)

8) Debe quedar de la siguiente manera:

9) Después de haber cerrado el header, debemos crear nuestra barra de navegación,

las cuales se identifican con la etiqueta <nav>, añadiremos una lista sin ordenar, las
cuales se representan con las siguientes etiquetas:

<ul> (Lista sin Ordenar)

<li> (Elementos de la lista)
</ul>

------------------------------------------------------------------------------------------------------------------------
-----------<div class="navegacion">

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Nosotros</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Tienda</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

</div>

10) Quedará de la siguiente manera:

83
 Unidad II (HTML, XML y CSS)

11) Añadiremos una lista sin ordenar anidada en el apartado Nosotros y en Blog,
quedando el código de la siguiente manera:
Nota: La etiqueta <a href=””> nos permite crear enlaces.

<div class="navegacion">

<nav>

<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a>
<ul>
<li><a href="#">Misión</a></li>
<li><a href="#">Visión</a></li>
<li><a href="#">Valores</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Consejos</a></li>
<li><a href="#">Ciudades</a></li>
<li><a href="#">Promociones</a></li>
</ul>
</li>

<li><a href="#">Tienda</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>

84
 Unidad II (HTML, XML y CSS)

12) En su navegador se deberá visualizar de la siguiente forma:

13) Procederemos a crear las entradas de nuestro blog, dentro de las etiquetas:

<div> Contenedor
< main> Contenido Principal
< article> Se ocupa para noticias o artículos.

<div class="contenido contenedor">

<main>
<article>

</article>

</main>

</div>

14) Dentro de las etiquetas article, añadiremos una etiqueta h2, una imagen, dos
párrafos y un vínculo, quedando de la siguiente manera:
Nota: Recuerda que las etiquetas h, nos permiten asignar un determinado tamaño
al texto.
Para generar un párrafo automáticamente puedes escribir la palabra lorem y dar un
enter, en caso que tu párrafo creado esté desbordado puedes dar clic en la pestaña
view y das clic en la opción Word Wrap.

<article>

<h2>Viajar a Londres</h2>

85
 Unidad II (HTML, XML y CSS)

<img src="img/imagen_1.jpg" alt="imagen viajar a Londres">

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit ese cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.

</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit ese cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.

</p>

<a href="#" class="boton">Leer más</a>

</article>

Nota: Como puedes darte cuenta la etiqueta <a< href=” ”> tiene asignada una clase de tipo
botón.

15) Al visualizar en el navegador, veremos lo siguiente:

86
 Unidad II (HTML, XML y CSS)

16) Puedes copiar el código del artículo que acabas de crear y pegarlo dos veces, ya
que tendremos tres entradas de blog. Solo recuerda cambiar el texto
correspondiente a la etiqueta <h2> y su respectiva imagen.

Ejemplo de cómo debe quedar tu estructura:

<article>

<h2>Viajar a Londres</h2>

<img src="img/imagen_1.jpg" alt="imagen viajar a Londres">

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit ese cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.

</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit ese cillum dolore eu fugiat

87
 Unidad II (HTML, XML y CSS)

nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.

</p>

<a href="#" class="boton">Leer más</a>

</article>

<article>

<h2>Puente de la torre</h2>

<img src="img/imagen_2.jpg" alt=" Puente de la torre ">

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit ese cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.

</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit ese cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.

</p>

<a href="#" class="boton">Leer más</a>

</article>

<article>

<h2>Metro de Londres</h2>

<img src="img/imagen_3.jpg" alt=" Metro de Londres ">

<p>

88
 Unidad II (HTML, XML y CSS)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit ese cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.

</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit ese cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.

</p>

<a href="#" class="boton">Leer más</a>

</article>

Vista en el navegador:

17) Procederemos a crear una etiqueta <aside> asignándole una clase llamada sidebar,
asi como una lista sin ordenar. Sidebar hace referencia a una barra lateral.
Nota: La etiqueta <aside> “indica un contenido a un lado” y debe estar relacionado
con el contenido circundante. Este <aside> debe ir antes de finalizar la etiqueta
<div> del contenido <div class="contenido contenedor">.

89
 Unidad II (HTML, XML y CSS)

<aside class="sidebar">

<h2>Otros Posts</h2>

<ul>

<li><a href="#">Entrada 1</a></li>

<li><a href="#">Entrada 2</a></li>

<li><a href="#">Entrada 3</a></li>

<li><a href="#">Entrada 4</a></li>

<li><a href="#">Entrada 5</a></li>

</ul>

</aside>:

Nota: Este código deberá ir después de finalizar la etiqueta </main> y recuerda que la
etiqueta main la asignamos para crear nuestros artículos dentro de nuestro <div
class=”contenido”>

Visualizar en el navegador:

90
 Unidad II (HTML, XML y CSS)

18) Añadimos un comentario al </div> de cierre del contenido, quedando de la siguiente

manera: <!—comentario-->

.
.
.

</div> <!-- .contenido : finalizamos el div del contenido-->

</body>

</html>

19) Procedemos a crear el pie de nuestra página, asignando un footer con su respectivo
contenedor, creamos una etiqueta <h2>, un párrafo y un comentario:
<footer>

<div class="contenedor">

<div class="nosotros">

<h2>Sobre Nosotros</h2>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. </p>

</div> <!--.nosotros-->

</div> <!--.contenido-->

</footer>

20) Dentro del mismo footer y antes de finalizar el <div> de la clase contenedor,
crearemos otro contenedor para añadir un menú, recuerda que siempre debemos
crearlo dentro de un contenedor.
Deberá quedar de la siguiente manera:

<div class="menu">

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Nosotros</a></li>

91
 Unidad II (HTML, XML y CSS)

<li><a href="#">Blog</a></li>

<li><a href="#">Tienda</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

</div> <!--.menu-->

</div> <!--.contenido-->

En el navegador se visualizara asi:

21) Antes de finalizar el footer asignaremos un párrafo quedando de la siguiente

manera:

<p class="copyright">

Todos los derechos reservados &copy;. Blog de Viajes 2018

</p>

Nota: Asignaremos una clase llamada copyright a nuestro párrafo y el

símbolo ©, este símbolo se crea con el atributo &copy;

92
 Unidad II (HTML, XML y CSS)

Crear estilos CSS

1) Abrir el archivo [Link]

2) Empezar a desarrollar lo siguiente:
html{

box-sizing: border-box; /* Nos permite trabajar con el modelo caja, por ejemplo, cuando

defina un ancho de 600 px y si asigno un padding de 650 el ancho se

mantendra en 600px*/

*, *:before,*: after{ /* Selector universal*/

box-sizing: inherit; /*Forma recomendada de trabajar con el border-box*/

*{

margin: 0; /* Con esto resetearemos los margenes en nuestro navegador*/

padding: 0;

body{

font-family: verdana, geneva, serif; /*Asignamos un tipo de letra*/

header{

padding: 20px 0;

/*el padding establece el espacio de relleno requerido por todos los lados de un elemento.
Estructura: (padding-top, padding-right, padding-bottom, padding-left).*/

[Link]{ /*Asignaremos estilos de centrado al “contenedor” asignado con la clase:

contenedor*/

width: 1200px;

margin: 0 auto;

93
 Unidad II (HTML, XML y CSS)

/** ESTILOS AL MENÚ DE NAVEGACIÓN**/

.navegacion{ /*Añadir color de fondo a nuestro div de navegacion*/

background-color: #db008d;

nav{ /*Añadir ancho, margen, posicion a nuestro menu de navegacion*/

width: 1200px;

margin: 0 auto;

position: relative; /*Ocupamos esta declaracion porque trabajaremos con un submenu*/

nav ul{

list-style: none; /*Desaparecemos las biñetas del div de navegacion*/

nav > ul > li{ /*Añadimos un selector con el signo > para hacer referencia al primer nivel de ul y
el primer nivel de li, esto permitira que no se vea afectado nuestro submenu*/

float: left;

nav ul::after { /*limpiar el float con clear para que no distorcione la posicion de nuestro div de
navegacion*/

content: '';

display: block;

/* display es la propiedad más importante para controlar estructuras, El valor por defecto para
la mayoría de los elementos es usualmente block (de bloque) */

clear: both; /*La propiedad clear indica el lado o lados de una caja que no debe ser adyacente
a un elemento posicionado de forma flotante con la propiedad float*/

nav ul li a{ /*Seguimos añadiendo estilo a nuestro div de navegacion*/

display: inline-block; /*Nos permite definir un ancho*/

width: 200px; /* ancho del div de enlaces*/

color: #ffffff;

94
 Unidad II (HTML, XML y CSS)

text-decoration: none;

text-align: center; /* centramos nuestros enlaces*/

padding: 20px; /* Separacion de nuestros enlaces*/

nav ul li a:hover{ /*Permite que el enlace de navegacion cambie de color al posicionar el cursor
sobre el*/

background-color: #00b8e4;

/**ESTILOS AL SEGUNDO NIVEL DE NUESTRO MENU DE NAVEGACION**/

nav ul ul{

position: absolute;

top: 100%;

background-color: rgb(0, 128, 228, 0.7); /*La función rgba () define los colores usando el
modelo Rojo-verde-azul-alfa (RGBA).*/

display: none;

nav ul li:hover >ul{ /*Permite mostrar los items del submenu*/

display: block;

nav ul li:hover { /*Permite que el menu principal aparezca seleccionado con el color de los items
del submenu*/

background-color: rgb(0, 128, 228, 0.7);

/*ESTILOS AL CONTENIDO PRICIPAL*/

[Link]::after{ /*limpiamos nuestro float*/

95
 Unidad II (HTML, XML y CSS)

content: '';

display: block;

clear: both;

main{ /*Añadimos estilo a nuestro mail*/

width: 70%;

float: left;

padding-right: 40px;

/*ESTILOS A LAS ENTRADAS DE POST*/

article{ /*Añadiremos estilo a nuestros articulos*/

margin-top: 30px; /*Añadimos una separacion entre cada articulo*/

h2{ /*Añadimos estilos a las etiquetas h2*/

color: #00b8e4;

margin-bottom: 20px;

article img{ /*Añadimos estilos a las imagenes de los articulos*/

float: left;

width: 300px;

margin-right: 30px;

article p{ /*Añadimos estilos a los parrafos de los articulos*/

line-height: 2; /*Separacion en los reglones de los parrafos*/

text-align: justify;

.boton{ /*Añadimos estilo al boton de enlace de cada articulos*/

background-color: #00b8e4;

96
 Unidad II (HTML, XML y CSS)

padding: 10px 30px;

display: inline-block; /*Separacion entre el parrafo y el boton de enlace*/

margin-top: 10px;

font-weight: bold; /*Texto en negritas*/

color: #ffffff;

text-transform:uppercase; /*Permite poner un texto en mayusculas*/

text-decoration: none; /*Quitar el subrayado de las letras de los botones de enlace*/

/*SIDEBAR*/

aside{ /*Añadimos estilo a nuestro aside : Otros Posts*/

float: right;

width: 20%;

margin-top: 30px;

aside ul{

list-style: none; /*Quitamos biñetas*/

aside ul li{

padding: 10px 0 10px 10px;

aside ul li:hover{ /*Mostramos un color al situar el cursor en el item*/

background-color: #00b8e4;

cursor: pointer; /*Permite que el cursor aparezca con una manita en cada enlace*/

aside ul li a{

color: #00b8e4;

text-decoration: none; /*Quitar subrayado a los enlaces*/

97
 Unidad II (HTML, XML y CSS)

aside ul li:hover a{ /*Asignamos un color blanco a cada enlace*/

color: #ffffff;

/*ESTILOS AL FOOTER*/

footer{

background-color: #db008d;

padding-top: 40px; /*Hace una separacion entre el footer y el div nosotros*/

margin-top: 30px; /*Hace una separacion entre el div de articulos y el footer*/

footer h2{ /*Añadimos estilo a la etiqueta h2 creada en el footer*/

color: #ffffff;

footer .contenedor::after{

content: '';

display: block;

clear: both;

footer [Link]{ /*Añadimos estilo al contenedor nosotros creado en el footer*/

float: left;

width: 30%;

color: #ffffff;

footer p{

text-align: justify;

footer [Link]{ /*Añadimos estilo al menu de navegacion creado en el footer*/

98
 Unidad II (HTML, XML y CSS)

float: right;

width: 40%;

text-align: right;

footer nav{

width: auto;

footer nav a{

width: auto;

footer nav ul li a{

width: auto;

[Link]{ /*Añadimos estilo al texto de copyright*/

padding: 20px 0;

text-align: center;

color: white;

99
 Unidad II (HTML, XML y CSS)

Al finalizar la práctica, la página web se deberá visualizar de la siguiente manera:

100
 Unidad II (HTML, XML y CSS)

Materiales y recursos didácticos.

Descargar material para la práctica:

[Link]
kIlp5JZBR3dYMq?usp=sharing

Tutorial de Genially:

[Link]

Qué es HTML y CSS:

[Link]

Descargar e Instalar Xampp:

[Link]

Instalar Sublime Text y plugins esenciales:

[Link]

HTML desde cero:

[Link]

101
 Unidad II (HTML, XML y CSS)

ORIENTACIONES SOBRE LA EVALUACIÓN.

A continuación, se detallan los criterios de evaluación de la unidad II:

Actividad de Aprendizaje Valor

Presentación en Genially 20%
Práctica con su respectivo reporte 40%
Avance de proyecto 20%
Evaluación Teórica 20%
Total 100%

Calendarización de evaluación en semanas:

Semana 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
TP Evaluación
Unidad II
TR

102
UNIDAD III (PROGRAMACIÓN DEL LADO DEL CLIENTE)
 Unidad III

COMPETENCIA(S) A DESARROLLAR

Describir la(s) competencia(s) a desarrollar en la presente unidad. (Obtenerlas del

Temario.)

COMPETENCIAS PREVIAS

Describir las competencias que el estudiante debe de poseer para poder abordar los
contenidos de la presente unidad.

TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN.

Ante la necesidad de adaptarse a los cambios, algunas instituciones de Educación Superior

han empezado a hacer uso de nuevas estrategias para que sus estudiantes desarrollen
efectivamente los conocimientos, habilidades y actitudes que indican sus planes de estudio;
(Bergmann,2012), (Mingorance, Trujillo, Cáceres, y Torres, 2017) señalan entre las más
importantes:

➢ Aula Invertida
➢ Aprendizaje Semipresencial
➢ Aprendizaje Colaborativo
➢ Hiper-personalización
➢ Aprendizaje Experiencial
➢ Micro aprendizaje
➢ Entrenamiento Educativo
➢ Otras…

✓ Saber el nombre de los estudiantes y su situación: saber el nombre de los

estudiantes es el primer paso para trabajar la conexión con ellos. También es
importante conocer a cada estudiante con relación a sus fortalezas y debilidades.

104
 Unidad III

✓ Saber el estilo de aprendizaje: Utilizar diferentes vías de acceso al aprendizaje

(visual, auditivo, musical, kinestésico, entre otras).
✓ Entusiasmo del profesor: es evidente cuando al profesor le gusta enseñar. El
aprendizaje va relacionado con la emoción. Es importante que el profesor tenga
buen humor.
✓ Intentar dedicar tiempo a cada estudiante: es comprensible que esto sea algo
difícil ya que se manejan grupos grandes, sin embargo, el profesor puede intentar
acercarse a sus estudiantes de manera individualizada para saber si comprendieron
la instrucción y dar apoyo.
✓ Brindar respeto y confianza: evitar llamados de atención y ridiculizar a los
estudiantes en público, mejor decir las cosas en privado. Mostrar apertura cuando
le pase algo o nos quieran contar algo. Mostrar flexibilidad.
✓ Refuerzo positivo: cuando haga algo bien felicitarle. Reforzar las habilidades del
estudiante.
✓ Explicar la importancia de la asignatura: explicar con ejemplos la utilidad de la
materia en su vida profesional.
✓ Variar los métodos de enseñanza: esto es recomendable hacer para los estudiantes
sientan que vale la pena ir a clases y no sea algo aburrido y monótono a lo que
tengan que asistir. Por lo que se recomienda que sea visual, auditivo y kinestésico.
✓ Fomentar la participación activa de los estudiantes: esto hacer con la finalidad de
aumentar el interés y aprendizaje de los estudiantes. El profesor puede hacer
preguntas y moverse por toda el aula.
✓ Responder claramente a las preguntas: la mayoría de estudiantes no preguntan por
temor o vergüenza. Por lo que será fundamental responder a todas las preguntas
por más básicas que sean.

105
 Unidad III

3.1 Introducción al lenguaje.

¿Programar del lado del servidor o del lado del cliente?

A la hora de programar una determinada aplicación web, es interesante conocer

la diferencia entre la programación del lado del cliente y del lado del servidor. La
programación del lado del cliente, tal y como su propio nombre indica, se ejecuta en la
propia máquina del cliente; resulta una opción más segura, de forma que es por la que
optan la gran mayoría de programadores en la actualidad. No obstante, la programación
del lado del servidor ofrece un mayor abanico de opciones en cuanto a idiomas, lo cual es
un punto a valorar en un mundo cada vez más globalizado.

Lenguajes del lado del servidor

En cuanto al lado del servidor, los scripts se ejecutan en el propio servidor, de forma que
se reducen de forma considerable el número de errores a raíz de la compatibilidad; el código
se ejecuta en un determinado servidor haciendo uso de un lenguaje y un software.

Los scripts resultan más seguros en comparación con los del lado del cliente.

Lenguajes del lado del cliente

La programación del lado del cliente se caracteriza por ejecutarse en el equipo de los
usuarios. A pesar de ser una opción muy ventajosa, presenta una serie de límites de control,
así como determinados problemas tanto con los sistemas operativos como con los
navegadores web. (axarnet, s.f.).

La programación del lado del cliente tiene como principal ventaja que la ejecución de la
aplicación se delega al cliente, con lo cual se evita recargar al servidor de trabajo. El servidor
solo envía el código, y es tarea del browser interpretarlo. El navegador es una especie de
aplicación capaz de interpretar las órdenes recibidas en forma de código HTML
fundamentalmente y convertirlas en las páginas que son el resultado de dicha orden.
(HOPELCHEN, s.f.).

Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es que
establecemos una petición de un archivo HTML residente en el servidor (un ordenador que
se encuentra continuamente conectado a la red) el cual es enviado e interpretado por
nuestro navegador (el cliente). Así pues, podemos hablar de lenguajes de lado servidor que
son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio
servidor y que se envían al cliente en un formato comprensible para él.

Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra el HTML
sino también el Java y el Java Script los cuales son simplemente incluidos en el código
HTML) son aquellos que pueden ser directamente “digeridos” por el navegador y no

106
 Unidad III

necesitan un pretratamiento. Cada uno de estos tipos tiene por supuesto sus ventajas y sus
inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es totalmente independiente
del servidor, lo cual permite que la página pueda ser albergada en cualquier sitio sin
necesidad de pagar más ya que, por regla general, los servidores que aceptan páginas con
scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy limitadas.
Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es
mucho menos rígido respecto al cambio de un navegador a otro o respecto a las versiones
del mismo.

Lenguajes del lado cliente

HTML

El lenguaje llamado HTML indica al navegador donde colocar cada texto, cada imagen o
cada video y la forma que tendrán estos al ser colocados en la página.
HTML no es más que una serie de etiquetas que se utilizan para definir la forma o estilo
que queremos aplicar a nuestro documento.

JAVASCRIPT

JavaScript es un lenguaje de programación utilizado para crear pequeños programitas

encargados de realizar acciones dentro del ámbito de una página web. Se trata de un
lenguaje de programación del lado del cliente, porque es el navegador el que soporta la
carga de procesamiento. Su uso se basa fundamentalmente en la creación de efectos
especiales en las páginas y la definición de interactividades con el usuario. JavaScript es
un lenguaje con muchas posibilidades, es orientado a objetos, con funciones, estructuras
de datos complejas, etc. JavaScript no permite dos de las características clásicas de los
lenguajes orientados a objetos (herencia y polimorfismo), pero permite la creación y
manipulación de objetos sencillos, y la definición de métodos y propiedades para dichos
objetos.

APPLETS DE JAVA

Es otra manera de incluir código a ejecutar en los clientes que visualizan una página web.
Se trata de pequeños programas hechos en Java, que se transfieren con las páginas web
y que el navegador ejecuta en el espacio de la página. Los applets de Java están
programados en Java y precompilados, es por ello que la manera de trabajar de éstos varía
un poco con respecto a los lenguajes de script como JavaScript. Los applets son más
difíciles de programar que los scripts en JavaScript y requerirán unos conocimientos
básicos o medios del lenguaje Java. La principal ventaja de utilizar applets consiste en que
son mucho menos dependientes del navegador que los scripts en JavaScript, incluso
independientes del sistema operativo del ordenador donde se ejecutan. Además, Java es
más potente que JavaScript, por lo que el número de aplicaciones de los applets podrá ser
mayor.

Como desventajas en relación con JavaScript cabe señalar que los applets son más lentos
de procesar y que tienen espacio muy delimitado en la página donde se ejecutan, es decir,

107
 Unidad III

no se mezclan con todos los componentes de la página ni tienen acceso a ellos. Es por ello
que con los applets de Java no podremos hacer directamente cosas como abrir ventanas
secundarias, controlar Frames, formularios, capas, etc.

VISUAL BASIC SCRIPT

Es un lenguaje de programación de scripts del lado del cliente, pero sólo compatible con
Internet Explorer. Es por ello que su utilización está desaconsejada a favor de JavaScript.
Está basado en Visual Basic, un popular lenguaje para crear aplicaciones Windows. Tanto
su sintaxis como la manera de trabajar están muy inspirados en él. Sin embargo, no todo lo
que se puede hacer en Visual Basic lo podremos hacer en Visual Basic Script, pues este
último es una versión reducida del primero. El modo de funcionamiento de Visual Basic
Script para construir efectos especiales en páginas web es muy similar al utilizado en
Javascript y los recursos a los que se puede acceder también son los mismos: el navegador.
CSS CSS, es una tecnología que nos permite crear páginas web de una manera más
exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página,
pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como
incluir márgenes, tipos de letra, fondos, colores… Incluso podemos definir nuestros propios
estilos en un archivo externo a nuestras páginas; así, si en algún momento queremos
cambiar alguno de ellos, automáticamente se nos actualizarán todas las páginas vinculadas
de nuestro sitio.

DHTML

DHTML no es precisamente un lenguaje de programación. Más bien se trata de una nueva

capacidad de la que disponen los navegadores modernos, por la cual se puede tener un
mayor control sobre la página que antes. Cualquier página que responde a las actividades
del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML, pero
en este caso nos referimos más a efectos en el navegador por los cuales se pueden mostrar
y ocultar elementos de la página, se puede modificar su posición, dimensiones, color, etc.
DHTML nos da más control sobre la página, gracias a que los navegadores modernos
incluyen una nueva estructura para visualizar en páginas web denominada capa. Las capas
se pueden ocultar, mostrar, desplazar, etc. Para realizar las acciones sobre la página, como
modificar la apariencia de una capa, ¿seguimos necesitando un lenguaje de programación
del lado del cliente como JavaScript o VB Script? En la actualidad, DHTML también puede
englobar la programación en el servidor. Dentro del concepto de DHTML se engloban
también las Hojas de Estilo en Cascada o CSS (Cascade Style Sheets).

108
 Unidad III

3.2 Manejo de Frameworks

En inglés framework se puede traducir como estructura. En el sentido que nos ocupa un
framework sería un marco de trabajo. MVC son las siglas del Modelo- Vista-Controlador, un
paradigma de programación de aplicaciones que separa en tres niveles el trabajo:

➢ El modelo. Especifica la forma de manipular los datos por parte de la aplicación. Es

decir, especifica cómo son los datos (qué tipo tienen) y la forma de manipularlos.
Este modelado de datos enlaza con la lógica de negocio, es decir, con la forma en
la que los datos se almacenan en la capa de negocio (en la base de datos, en
definitiva).

➢ La vista. Hace referencia al aspecto visual de la aplicación de cara al usuario,

especifica la forma de interaccionar que tendrá la aplicación con el usuario.

➢ El controlador. Es la parte que controla las acciones del usuario y las comunica a
los dos niveles anteriores. (Pérez Martínez, 2015).

Figura 39 Esquema del patrón MVC

109
 Unidad III

MVC es, en definitiva, un modelo de trabajo que facilita la creación de aplicaciones web
complejas. Hoy en día esta separación en tres capas de las aplicaciones se realiza con
marcos o plantillas de trabajo (más conocidas como frameworks por su uso en inglés) que
facilitan la creación de aplicaciones MVC generando casi sin esfuerzo el núcleo de las
aplicaciones.

Algunas de las más populares son:

➢ Ruby on Rails. Se trata de un marco de trabajo muy exitoso por la facilidad que tiene
de programar y optimizado para la creación de aplicaciones Web. Se puede ejecutar
en casi cualquier servidor web, basta con instalar el componente correspondiente.

➢ Apache Struts. Uno de los primeros frameworks MVC que existieron para la
plataforma J2EE.

➢ Spring. El framework MVC para J2EE más utilizado.

➢ Django. Escrito en Python y pensado para utilizar en ese lenguaje que facilita la
creación de aplicaciones web.

➢ Symfony. Framework escrito para PHP. Uno de los más populares para este
lenguaje.

➢ Zend. Otro framework escrito para PHP.

➢ [Link] MVC. La versión para la plataforma de desarrollo de Microsoft.

110
 Unidad III

3.3 Estructuras de Control.

Los programas que se pueden realizar utilizando solamente variables y operadores son una
simple sucesión lineal de instrucciones básicas.

Sin embargo, no se pueden realizar programas que muestren un mensaje si el valor de una
variable es igual a un valor determinado y no muestren el mensaje en el resto de casos.
Tampoco se puede repetir de forma eficiente una misma instrucción, como por ejemplo
sumar un determinado valor a todos los elementos de un array.

Para realizar este tipo de programas son necesarias las estructuras de control de flujo, que
son instrucciones del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto
otro". También existen instrucciones del tipo "repite esto mientras se cumpla esta
condición".

Si se utilizan estructuras de control de flujo, los programas dejan de ser una sucesión lineal
de instrucciones para convertirse en programas inteligentes que pueden tomar decisiones
en función del valor de las variables. (Uniwebsidad, s.f.)

Estructura if

La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es

la estructura if. Se emplea para tomar decisiones en función de una condición. Su definición
formal es:

if(condicion) {
...
}

Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones
que se encuentran dentro de {...}. Si la condición no se cumple (es decir, si su valor es false)
no se ejecuta ninguna instrucción contenida en {...} y el programa continúa ejecutando el
resto de instrucciones del script.
Ejemplo:

var mostrarMensaje = true;

if(mostrarMensaje) {
alert("Hola Mundo");
}

En el ejemplo anterior, el mensaje sí que se muestra al usuario ya que la

variable mostrarMensaje tiene un valor de true y por tanto, el programa entra dentro del
bloque de instrucciones del if.

111
 Unidad III

El ejemplo se podría reescribir también como:

var mostrarMensaje = true;

if(mostrarMensaje == true) {
alert("Hola Mundo");
}

En este caso, la condición es una comparación entre el valor de la

variable mostrarMensaje y el valor true. Como los dos valores coinciden, la igualdad se
cumple y por tanto la condición es cierta, su valor es true y se ejecutan las instrucciones
contenidas en ese bloque del if.

La comparación del ejemplo anterior suele ser el origen de muchos errores de

programación, al confundir los operadores == y =. Las comparaciones siempre se realizan
con el operador ==, ya que el operador = solamente asigna valores:

var mostrarMensaje = true;

// Se comparan los dos valores

if(mostrarMensaje == false) {
...
}

// Error - Se asigna el valor "false" a la variable

if(mostrarMensaje = false) {
...
}

La condición que controla el if() puede combinar los diferentes operadores lógicos y
relacionales mostrados anteriormente:

var mostrado = false;

if(!mostrado) {
alert("Es la primera vez que se muestra el mensaje");
}

Los operadores AND y OR permiten encadenar varias condiciones simples para construir
condiciones complejas:

var mostrado = false;

var usuarioPermiteMensajes = true;

if(!mostrado && usuarioPermiteMensajes) {

112
 Unidad III

alert("Es la primera vez que se muestra el mensaje");

}

La condición anterior está formada por una operación AND sobre dos variables. A su vez,
a la primera variable se le aplica el operador de negación antes de realizar la
operación AND. De esta forma, como el valor de mostrado es false, ¡el valor!
mostrado sería true. Como la variable usuarioPermiteMensajes vale true, el resultado
de !mostrado && usuarioPermiteMensajes sería igual a true && true, por lo que el resultado
final de la condición del if() sería true y por tanto, se ejecutan las instrucciones que se
encuentran dentro del bloque del if().

Estructura if...else

En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la
condición, hazlo; si no se cumple, no hagas nada". Normalmente las condiciones suelen
ser del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro".

Para este segundo tipo de decisiones, existe una variante de la

estructura if llamada if...else. Su definición formal es la siguiente:

if(condicion) {
...
}
else {
...
}

Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones
que se encuentran dentro del if(). Si la condición no se cumple (es decir, si su valor es false)
se ejecutan todas las instrucciones contenidas en else { }.

Ejemplo:

var edad = 18;

if(edad >= 18) {

alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}

Si el valor de la variable edad es mayor o igual que el valor numérico 18, la condición
del if() se cumple y por tanto, se ejecutan sus instrucciones y se muestra el mensaje "Eres
mayor de edad". Sin embargo, cuando el valor de la variable edad no es igual o mayor

113
 Unidad III

que 18, la condición del if() no se cumple, por lo que automáticamente se ejecutan todas
las instrucciones del bloque else { }. En este caso, se mostraría el mensaje "Todavía eres
menor de edad".

El siguiente ejemplo compara variables de tipo cadena de texto:

var nombre = "";

if(nombre == "") {
alert("Aún no nos has dicho tu nombre");
}
else {
alert("Hemos guardado tu nombre");
}

La condición del if() anterior se construye mediante el operador ==, que es el que se emplea
para comparar dos valores (no confundir con el operador = que se utiliza para asignar
valores). En el ejemplo anterior, si la cadena de texto almacenada en la variable nombre es
vacía (es decir, es igual a "") se muestra el mensaje definido en el if(). En otro caso, se
muestra el mensaje definido en el bloque else { }.

La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas:

if(edad < 12) {

alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
alert("Eres un adolescente");
}
else if(edad < 35) {
alert("Aun sigues siendo joven");
}
else {
alert("Piensa en cuidarte un poco más");
}

No es obligatorio que la combinación de estructuras if...else acabe con la instrucción else,

ya que puede terminar con una instrucción de tipo else if().

Estructura for

Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de forma
repetitiva una instrucción. Por ejemplo, si se quiere mostrar un mensaje cinco veces, se
podría pensar en utilizar el siguiente if:

var veces = 0;

114
 Unidad III

if(veces < 4) {
alert("Mensaje");
veces++;
}

Se comprueba si la variable veces es menor que 4. Si se cumple, se entra dentro del if(),
se muestra el mensaje y se incrementa el valor de la variable veces. Así se debería seguir
ejecutando hasta mostrar el mensaje las cinco veces deseadas.

Sin embargo, el funcionamiento real del script anterior es muy diferente al deseado, ya que
solamente se muestra una vez el mensaje por pantalla. La razón es que la ejecución de la
estructura if() no se repite y la comprobación de la condición sólo se realiza una vez,
independientemente de que dentro del if() se modifique el valor de la variable utilizada en
la condición.

La estructura for permite realizar este tipo de repeticiones (también llamadas bucles) de una
forma muy sencilla. No obstante, su definición formal no es tan sencilla como la de if():

for(inicializacion; condicion; actualizacion) {

...
}

La idea del funcionamiento de un bucle for es la siguiente: "mientras la condición indicada

se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for.
Además, después de cada repetición, actualiza el valor de las variables que se utilizan en
la condición".

• La "inicialización" es la zona en la que se establece los valores iniciales de las

variables que controlan la repetición.
• La "condición" es el único elemento que decide si continua o se detiene la repetición.
• La "actualización" es el nuevo valor que se asigna después de cada repetición a las
variables que controlan la repetición.
var mensaje = "Hola, estoy dentro de un bucle";

for(var i = 0; i < 5; i++) {

alert(mensaje);
}

La parte de la inicialización del bucle consiste en:

var i = 0;

115
 Unidad III

Por tanto, en primer lugar se crea la variable i y se le asigna el valor de 0. Esta zona de
inicialización solamente se tiene en consideración justo antes de comenzar a ejecutar el
bucle. Las siguientes repeticiones no tienen en cuenta esta parte de inicialización.

La zona de condición del bucle es:

i<5

Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan de

ejecutar justo después de comprobar que la condición no se cumple. En este caso, mientras
la variable i valga menos de 5 el bucle se ejecuta indefinidamente.

Como la variable i se ha inicializado a un valor de 0 y la condición para salir del bucle es

que i sea menor que 5, si no se modifica el valor de i de alguna forma, el bucle se repetiría
indefinidamente.

Por ese motivo, es imprescindible indicar la zona de actualización, en la que se modifica el

valor de las variables que controlan el bucle:

i++

En este caso, el valor de la variable i se incrementa en una unidad después de cada

repetición. La zona de actualización se ejecuta después de la ejecución de las instrucciones
que incluye el for.

Así, durante la ejecución de la quinta repetición el valor de i será 4. Después de la quinta

ejecución, se actualiza el valor de i, que ahora valdrá 5. Como la condición es que i sea
menor que 5, la condición ya no se cumple y las instrucciones del for no se ejecutan una
sexta vez.

Normalmente, la variable que controla los bucles for se llama i, ya que recuerda a la palabra
índice y su nombre tan corto ahorra mucho tiempo y espacio.

El ejemplo anterior que mostraba los días de la semana contenidos en un array se puede
rehacer de forma más sencilla utilizando la estructura for:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(var i=0; i<7; i++) {

alert(dias[i]);
}

Estructura for…in

Una estructura de control derivada de for es la estructura for...in. Su definición exacta

implica el uso de objetos, que es un elemento de programación avanzada que no se va a

116
 Unidad III

estudiar. Por tanto, solamente se va a presentar la estructura for...in adaptada a su uso en

arrays. Su definición formal adaptada a los arrays es:

for(indice in array) {
...
}

Si se quieren recorrer todos los elementos que forman un array, la estructura for...in es la
forma más eficiente de hacerlo, como se muestra en el siguiente ejemplo:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(i in dias) {
alert(dias[i]);
}

La variable que se indica como indice es la que se puede utilizar dentro del
bucle for...in para acceder a los elementos del array. De esta forma, en la primera repetición
del bucle la variable i vale 0 y en la última vale 6.

Esta estructura de control es la más adecuada para recorrer arrays (y objetos), ya que evita
tener que indicar la inicialización y las condiciones del bucle for simple y funciona
correctamente cualquiera que sea la longitud del array. De hecho, sigue funcionando igual
aunque varíe el número de elementos del array.

3.4 Manipulación de objetos.

La creación del Document Object Model o DOM es una de las innovaciones que más ha
influido en el desarrollo de las páginas web dinámicas y de las aplicaciones web más
complejas. DOM permite a los programadores web acceder y manipular las páginas XHTML
como si fueran documentos XML. De hecho, DOM se diseñó originalmente para manipular
de forma sencilla los documentos XML. A pesar de sus orígenes, DOM se ha convertido en
una utilidad disponible para la mayoría de lenguajes de programación (Java, PHP,
JavaScript) y cuyas únicas diferencias se encuentran en la forma de implementarlo.

Árboles de Nodos

Una de las tareas habituales en la programación de aplicaciones web con JavaScript

consiste en la manipulación de las páginas web. De esta forma, es habitual obtener el valor
almacenado por algunos elementos (por ejemplo los elementos de un formulario), crear un
elemento (párrafos,
, etc.) de forma dinámica y añadirlo a la página, aplicar una animación a un elemento (que
aparezca/desaparezca, que se desplace, etc.). Todas estas tareas habituales son muy sencillas
de realizar gracias a DOM. Sin embargo, para poder utilizar las utilidades de DOM, es
necesario "transformar" la página original. Una página HTML normal no es más que una

117
 Unidad III

sucesión de caracteres, por lo que es un formato muy difícil de manipular. Por ello, los
navegadores web transforman automáticamente todas las páginas web en una estructura más
eficiente de manipular. Esta transformación la realizan todos los navegadores de forma
automática y nos permite utilizar las herramientas de DOM de forma muy sencilla. El motivo
por el que se muestra el funcionamiento de esta transformación interna es que condiciona el
comportamiento de DOM y por tanto, la forma en la que se manipulan las páginas. DOM
transforma todos los documentos XHTML en un conjunto de elementos llamados nodos, que
están interconectados y que representan los contenidos de las páginas web y las relaciones
entre ellos. Por su aspecto, la unión de todos los nodos se llama "árbol de nodos".
La siguiente página XHTML sencilla:

Se transforma en el siguiente árbol de nodos:

Figura 40. Árbol de nodos generado automáticamente por DOM a partir del código XHTML de la página

En el esquema anterior, cada rectángulo representa un nodo DOM y las flechas indican las
relaciones entre nodos. Dentro de cada nodo, se ha incluido su tipo (que se verá más
adelante) y su contenido. La raíz del árbol de nodos de cualquier página XHTML siempre
es la misma: un nodo de tipo especial denominado "Documento". A partir de ese nodo raíz,
cada etiqueta XHTML se transforma en un nodo de tipo "Elemento". La conversión de

118
 Unidad III

etiquetas en nodos se realiza de forma jerárquica. De esta forma, del nodo raíz solamente
pueden derivar los nodos HEAD y BODY. A partir de esta derivación inicial, cada etiqueta
XHTML se transforma en un nodo que deriva del nodo correspondiente a su "etiqueta
padre". La transformación de las etiquetas XHTML habituales genera dos nodos: el primero
es el nodo de tipo "Elemento" (correspondiente a la propia etiqueta XHTML) y el segundo
es un nodo de tipo "Texto" que contiene el texto encerrado por esa etiqueta XHTML.

Tipos de Nodos

La especificación completa de DOM define 12 tipos de nodos, aunque las páginas XHTML
habituales se pueden manipular manejando solamente cuatro o cinco tipos de nodos:

▪ Document, nodo raíz del que derivan todos los demás nodos del árbol. ▪ Element,
representa cada una de las etiquetas XHTML. Se trata del único nodo que puede contener
atributos y el único del que pueden derivar otros nodos.

▪ Attr, se define un nodo de este tipo para representar cada uno de los atributos de las
etiquetas XHTML, es decir, uno por cada par atributo=valor.

▪ Text, nodo que contiene el texto encerrado por una etiqueta XHTML.

▪ Comment, representa los comentarios incluidos en la página XHTML.

Los otros tipos de nodos existentes que no se van a considerar son

DocumentType, CDataSection, DocumentFragment, Entity, EntityReference,

ProcessingInstruction y Notation.

119
 Unidad III

Actividades de aprendizaje

Actividad 1:

Realizar un cuadro comparativo sobre las características, ventajas, desventajas y tipos de

Framework.

Valor de la actividad: 30%

Prácticas

Práctica 1: Descargar e instalar un framework.

Práctica 2: Realizar ejercicios con elementos básicos de texto, vínculos, listas, tablas,
objetos, imágenes, aplicaciones que reaccione a eventos y validarlos con rutinas del lado
del cliente mediante el Framework instalado, mostrando los resultados mediante un reporte
de práctica.

Práctica 3: Realizar aplicaciones con formularios dinámicos, que dispongan de elementos

generados y validados con lenguaje del lado del cliente mediante el Framework
seleccionado.

Valor: 30%

120
 Unidad III

ORIENTACIONES SOBRE LA EVALUACIÓN.

A continuación, se detallan los criterios de evaluación de la unidad III:

Actividad de Aprendizaje Valor

Cuadro Comparativo 30%
Práctica con su respectivo reporte 30%
Avance de proyecto 20%
Evaluación Teórica 20%
Total 100%

Calendarización de evaluación en semanas:

Semana 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
TP Evaluación
Unidad III
TR

121
UNIDAD IV (PROGRAMACIÓN DEL LADO DEL SERVIDOR)
COMPETENCIA(S) A DESARROLLAR

Conoce la evolución, arquitectura, tecnologías y planificación de las aplicaciones Web

para la preparación de un ambiente de desarrollo.

COMPETENCIAS PREVIAS

Aplica métodos y herramientas de la ingeniería del software en el desarrollo de software

aplicando estándares de calidad y productividad.
Aplica un lenguaje orientado a objetos para la solución de problemas.
Crea y aplica esquemas de bases de datos para garantizar la confiabilidad de los datos en
aplicaciones para el tratamiento de información.

TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN.

Ante la necesidad de adaptarse a los cambios, algunas instituciones de Educación Superior

han empezado a hacer uso de nuevas estrategias para que sus estudiantes desarrollen
efectivamente los conocimientos, habilidades y actitudes que indican sus planes de estudio;
(Bergmann,2012), (Mingorance, Trujillo, Cáceres, y Torres, 2017) señalan entre las más
importantes:

➢ Aula Invertida
➢ Aprendizaje Semipresencial
➢ Aprendizaje Colaborativo
➢ Hiper-personalización
➢ Aprendizaje Experiencial
➢ Micro aprendizaje
➢ Entrenamiento Educativo
➢ Otras…

✓ Saber el nombre de los estudiantes y su situación: saber el nombre de los

estudiantes es el primer paso para trabajar la conexión con ellos. También es
importante conocer a cada estudiante con relación a sus fortalezas y debilidades.
✓ Saber el estilo de aprendizaje: Utilizar diferentes vías de acceso al aprendizaje
(visual, auditivo, musical, kinestésico, entre otras).
✓ Entusiasmo del profesor: es evidente cuando al profesor le gusta enseñar. El
aprendizaje va relacionado con la emoción. Es importante que el profesor tenga
buen humor.
✓ Intentar dedicar tiempo a cada estudiante: es comprensible que esto sea algo
difícil ya que se manejan grupos grandes, sin embargo, el profesor puede intentar
acercarse a sus estudiantes de manera individualizada para saber si comprendieron
la instrucción y dar apoyo.
✓ Brindar respeto y confianza: evitar llamados de atención y ridiculizar a los
estudiantes en público, mejor decir las cosas en privado. Mostrar apertura cuando
le pase algo o nos quieran contar algo. Mostrar flexibilidad.
✓ Refuerzo positivo: cuando haga algo bien felicitarle. Reforzar las habilidades del
estudiante.
✓ Explicar la importancia de la asignatura: explicar con ejemplos la utilidad de la
materia en su vida profesional.
✓ Variar los métodos de enseñanza: esto es recomendable hacer para los estudiantes
sientan que vale la pena ir a clases y no sea algo aburrido y monótono a lo que
tengan que asistir. Por lo que se recomienda que sea visual, auditivo y kinestésico.
✓ Fomentar la participación activa de los estudiantes: esto hacer con la finalidad de
aumentar el interés y aprendizaje de los estudiantes. El profesor puede hacer
preguntas y moverse por toda el aula.
✓ Responder claramente a las preguntas: la mayoría de estudiantes no preguntan por
temor o vergüenza. Por lo que será fundamental responder a todas las preguntas
por más básicas que sean.
4.1 Introducción al lenguaje.

PHP es un lenguaje interpretado del lado del servidor que se caracteriza por su potencia,
versatilidad, robustez y modularidad. Los programas escritos en PHP son embebidos
directamente en el código HTML y ejecutados por el servidor web a través de un intérprete
antes de transferir al cliente que lo ha solicitado un resultado en forma de código HTML
puro. Al ser un lenguaje que sigue la corriente open source, tanto el intérprete como su
código fuente son totalmente accesibles de forma gratuita en la red. (Bahit, 2010).

Por su flexibilidad, PHP resulta un lenguaje muy sencillo de aprender; especialmente para
programadores familiarizados con lenguajes como C, Perl o Java, debido a las similitudes
de sintaxis entre ellos. Por supuesto, es un lenguaje multiplataforma; los programas
funcionan igual sobre diferentes plataformas, trabajando sobre la mayoría de servidores
web y estando preparado para interactuar con más de 20 tipos de bases de datos.

independiente de la plataforma y más sencillo de aprender y utilizar. Todas estas

características han hecho de este lenguaje uno de los que mayor crecimiento ha
experimentado en los últimos años, desde su aparición en 1994. Es de destacar
especialmente la facilidad para la conectividad con sistemas gestores de bases de datos a
través de un gran número de funciones especializadas. En este libro en concreto se
analizará la conectividad con el sistema gestor MySQL. Esa facilidad de conexión ha hecho
que PHP sea actualmente uno de los lenguajes más utilizados para la generación de
páginas dinámicas, no solo personales sino también portales de empresas y
organizaciones. Inicialmente diseñado para realizar poco más que contadores y libros de
visita de páginas, en la actualidad PHP permite realizar una multitud de tareas útiles para
el desarrollo web. Por ejemplo, dispone, entre otras, de:
— Funciones de correo electrónico que pueden ser utilizadas para programar completos
sistemas de correo electrónico vía web.
— Funciones de administración y gestión de bases de datos específicas para la mayoría de
gestores comerciales y funciones para conexiones ODBC con bases de datos en sistemas
Microsoft.
— Funciones de gestión de directorios y ficheros, incluso para la transferencia mediante
FTP.
— Funciones de tratamiento de imágenes y librerías de funciones gráficas
— Funciones de generación y lectura de cookies.
— Funciones para la generación de documentos PDF.

A la innumerable cantidad de funciones predefinidas en PHP deben añadirse, por supuesto

todas aquellas funciones propias de cada programador, y que pueden ser reutilizadas e
intercambiadas a través de foros específicos con otros programadores.
Etiquetas de apertura y cierre

Opción #1 (recomendada):

Esta opción, se sugiere como alternativa recomendada, puesto que independientemente

del valor establecido en short_open_tag en el [Link], funcionará por defecto y sin
necesidad de modificar el archivo [Link], en cualquier servidor.

Por otro lado, la utilización de esta alternativa, trae aparejadas las siguientes ventajas:

1. Permite la utilización de XML en el servidor. El lenguaje XML utiliza como etiquetas

de apertura y cierre, <? y ?>. Alternativamente, permite también <?xml y ?>. Por
lo tanto, utilizando <?php se permite ejecutar código XML como tal.
2. Evita tener que embeber1 código XML dentro de PHP
3. Es una forma de definir un lenguaje estandar de PHP.

Opción #2:

<?

// aquí irá todo el contenido en lenguaje PHP

?>

Esta alternativa, representa una forma abreviada de las etiquetas anteriores. Utilizarla,
requiere de configurar el archivo [Link], estableciendo el valor de short_open_tag a
On.

Impresión en pantalla
En PHP, existen varias funciones para imprimir contenido en pantalla. Las dos funciones
básicas son echo y print.

<?php

echo "Hola Mundo";

?>

Figura 41. Imprime Hola Mundo en pantalla.

 <?php

print "Adiós Mundo";

?>

Figura 42. Imprime Adiós Mundo en pantalla.

Variables y tipos básicos

Una variable es elemento destinado a almacenar datos. Ésta, puede almacenar datos
numéricos (enteros o flotantes), cadenes de texto, booleano (verdadero [true] o falso
[false]), etc.

Una variable se define (es decir, se crea), se le asigna un valor (es decir, se almacenan
datos), puede modificarse (cambiar de valor) y eliminarse.

Definición de una variable: Las variables en PHP se definen anteponiendo el sigo dólar
($) seguido del nombre que se le quiera dar a esta.

Nombre de las variables: El nombre de éstas, debe guardar ciertas reglas:

• Solo pueden comenzar por carácter alfabético o guión bajo (_)

• El nombre puede estar conformado por mayúsculas, minúsculas, guiones

bajos (_) y números

Asignación de valores: para asignar valor a una variable, se coloca el sigo igual (=)
segudio del valor.

Tipos de datos: cuando el valor de una variable, es una cadena de texto, éste, debe
escribirse entre comillas dobles ("), aunque también entre comillas simples (').

A fin de estandarizar el código, utilizaremos siempre comillas dobles para cadenas de

texto. Tanto los valores numéricos (ya sean éstos, números enteros o de coma flotante)
y los booleanos, no requieren ser entrecomillados.

Inclusión de archivos en PHP:

Para insertar archivos, PHP dispone de cuatro funciones:

1. include
2. include_once
3. require
4. require_once
Estas cuatro funciones, necesitan recibir como parámetro2, la ruta local o remota del
archivo a ser incluido.

4.2 Estructuras de Control.

El autor (López Quijado, 2014) menciona que los condicionales se emplean para determinar
si una determinada sentencia o grupo de sentencias se ejecutarán o no, en base al
cumplimiento de determinadas condiciones. La estructura condicional más simple obedece
al siguiente esquema:

if (condición) {

sentencias;

La palabra reservada if () evalúa la condición que aparece entre paréntesis. Si ésta resulta
ser cierta, se ejecuta el conjunto de sentencias que aparecen entre { y }. Si la condición no
es cierta, estas sentencias no se ejecutan.

Mire el ejemplo:

<?php

$edad=34;

if ($edad > 18) {

echo ("El usuario es mayor de edad.");

if ($edad > 65) {

echo ("El usuario está jubilado.");

?>

Fíjese en que, en primer lugar, declaramos una variable asignándole un valor. En realidad,
esta variable podría proceder de cualquier otro proceso en este script o en cualquier otro,
pero para los efectos didácticos, así nos vale. A continuación, tenemos dos condicionales.
En el primero se evalúa si el valor de la variable es mayor que 18 (observe que se usa el
operador comparativo > -mayor que-). Como la condición resulta ser cierta, la sentencia
que muestra el texto correspondiente se ejecuta. En el segundo condicional se comprueba
si el valor es mayor que 65. Como no lo es, la sentencia comprendida en el condicional no
se ejecuta.
Bubles

Los bucles son unas estructuras de control que permiten que una secuencia determinada
de instrucciones, conocida genéricamente como cuerpo del bucle, se ejecute más de una
vez. Estas estructuras son muy útiles para repasar el contenido de un fichero, una matriz,
una base de datos, etc. Dentro de los bucles se consideran dos tipos principales: aquéllos
que se ejecutan atendiendo a una condición numérica y aquéllos que se ejecutan en función
de una condición no necesariamente numérica. A continuación, vemos los dos tipos
detalladamente.

Bucles mediante condición numérica

Cuando necesitamos que una secuencia de instrucciones se ejecute n veces recurrimos a

la estructura for (). Está definida mediante una variable de control, que es la encargada de
determinar el número de iteraciones. La estructura es similar a la empleada en otros
lenguajes de script, y obedece al siguiente patrón:

for (inicio; condición; paso) {

cuerpo del bucle;

En este esquema, inicio es el valor inicial que se le asigna a la variable de control, condición
establece el valor que se debe alcanzar para que se deje de ejecutar el bucle, y paso es la
forma en que se modifica la variable de control.

Bucles mediante condición no numérica

Los bucles también pueden crearse de modo que obedezcan a condiciones no

necesariamente numéricas. Por ejemplo, podemos necesitar crear un bucle que recorra una
matriz buscando un determinado contenido y se detenga si lo encuentra. Este tipo de
iteraciones se basan en la estructura while (), que permite que un bucle itere mientras se
cumpla una condición. El formato genérico es el siguiente:

while (condición) {

cuerpo del bucle;

El bucle foreach

Desde la versión 4 de PHP se incluyó una instrucción específica para crear un bucle que
permita recorrer una matriz completamente de una forma más fácil. Se trata de foreach ().

Este bucle responde al siguiente formato genérico:

foreach ($matriz as $clave => $valor){

cuerpo del bucle;

}

Este bucle se repite para cada elemento de la matriz (en inglés las palabras “for each”
significan “para cada uno”).

Interrupciones y reiteraciones

Existen dos sentencias específicas para alterar la ejecución de un bucle. Se trata de break
y continue.

El uso de break aquí, en los bucles, interrumpe la ejecución del bucle aunque éste no se
haya completado. La sentencia continue, por el contrario, interrumpe la ejecución de la
iteración actual, pasando a la siguiente.

4.3 Tratamiento de Formularios.

Un formulario sencillo con dos campos a rellenar y un botón para enviar en HTML es de la
siguiente forma:

Figura 43. Formulario sencillo

Cuando un usuario rellena los datos y hace click en enviar, los datos del formulario se
envían para ser procesados al archivo [Link]. Los datos se envían a través de HTTP
con el método HTTP Post.

Una vez los datos están en [Link] pueden mostrarse, guardarse en una base de
datos o lo que se necesite.

En [Link] vamos a mostrarlos con echo:

 Figura 44. Uso de POST

Lo mismo se puede conseguir con el método HTTP GET:

Figura 45. Formulario con uso de GET

Ahora el archivo donde recibimos los datos es [Link]:

Figura 46. Uso de GET

Estos han sido dos ejemplos muy sencillos para ver el funcionamiento básico de un
formulario. Siempre que se crean formularios hay que tener muy en cuenta la seguridad, y
para ello se utiliza la validación de formularios.

Las superglobals $_GET y $_POST sirven para coleccionar datos de formularios, y vamos
a ver las diferencias a continuación.

GET y POST

$_GET y $_POST son variables superglobales que forman arrays de keys y values, donde
los keys son los nombres del formulario (atributo "name") y los values son los datos de
entrada de los usuarios. El hecho de que sean superglobals hace que sean accesibles
desde el script independientemente del ámbito.
$_GET es un array de variables que se pasan al script a través de los parámetros de URL.
La información que se envía es visible para todo el mundo y tiene limitada la cantidad de
información que se puede enviar a 2000 caracteres. Las URLs con los datos enviados
pueden guardarse en marcadores, lo que puede ser útil en ciertos casos. $_GET sólo se
emplea para el envío de información reducida y no sensible.

$_POST es un array de variables que se pasan al script a través del método HTTP POST.
La información que se envía no es visible para los demás ya que los nombres y variables
van embebidas en el body del HTTP request. No tiene límites en la cantidad de información
a enviar. Soporta datos de entrada multi-part binary a la hora se subir archivos al servidor
(lo que permite subir múltiples archivos a la vez).

Tipos de elementos

Los 10 tipos de elementos más importantes para los formularios HTML con PHP son:

Figura [Link] más importantes para los formularios HTML con PHP

Validación

La validación de formularios es algo fundamental ya que previene posibles ataques de

intrusos, además de asegurar que los datos que se reciben son realmente del tipo deseado.

Existen dos formas de validación de formularios: en el lado del cliente y en el lado del
servidor. En el lado del cliente la validación suele ser mediante JavaScript, es más rápida y
evita enviar más trabajo al servidor.

En el lado del servidor se emplea PHP para verificar que se envían valores correctos, es
más seguro, pero es más lento y da un poco de trabajo al servidor. En este artículo vamos
a ver algún ejemplo de esta segunda forma.
El siguiente es un sencillo formulario algo más complejo con los siguientes datos: Nombre,
Contraseña, Educación, Nacionalidad, Idiomas, Email y Sitio web:

Figura 48. Ejemplo de formulario

Vamos a ver los aspectos más característicos:

• El atributo maxlength limita el número de caracteres para una caja de texto.

• Contraseña es del tipo password, lo que permite ocultar los caracteres con * cuando
se escribe.
• Educación es un elemento select, que permite seleccionar options en una lista. El
texto en el atributo value es el que se enviará a través del formulario. El
atributo selected permite mostrar el seleccionado por defecto.
• Nacionalidad es del tipo radio, los elementos radio del mismo grupo han de tener un
único atributo name y sólo se puede seleccionar uno.
• Los idiomas están en un elemento checkbox, que permite enviar varios datos en
forma de array si se indica en el atributo name con corchetes. Se puede añadir un
atributo checked como seleccionado por defecto.
• En action se ha puesto _<?php echo htmlespecialchars($_SERVER["PHPSELF"]);
?>. $_SERVER["PHP_SELF"] es una superglobal que devuelve el nombre del
archivo en el que se encuentra el formulario, lo que hace que los datos se envíen al
mismo archivo, en lugar de llevarlos a otro archivo para tratarlos. Si se emplea esta
forma de indicar el archivo para action, es necesario usar la
 función htmlespecialchars(), que convierte caracteres especiales en entidades
HTML previniendo posibles ataques Cross-site Scripting.

En este ejemplo todas las acciones de validar, enviar y recibir datos se hacen en el mismo
archivo [Link].

Primero vamos a crear un filtrado común para todos los campos con la función filtrado():

Figura [Link]ón filtrado():

Esta función se aplicaría a cada campo a la hora de recibir los datos:

Figura 50 Aplicación de la función filtrado(): a cada campo

Para aceptar los datos se ha puesto _isset($POST["submit"]), que crea

la key submit cuando se hace click en el botón, y _$_SERVER["REQUESTMETHOD"] ==
"post", que especifica que el método request ha de ser POST. Se puede usar una de las
dos formas o las dos a la vez.

Para mostrar los datos:

Figura 51. Mostrar datos

Todos los campos anteriores son opcionales. La validación más básica consiste en exigir
que se rellene un campo, y comprobaremos también que el email tiene un formato de email,
que el sitio web es una URL correcta y que password tiene un mínimo de 5 caracteres.
Las validaciones de formatos pueden realizarse mediante expresiones regulares o
con filtros. Siempre que sea posible, es mejor utilizar los filtros de PHP.

Figura 52. Filtros de PHP

El array de errores $errores guarda cada uno de los errores que se registran para luego
mostrarlos. Si el array tiene algún elemento, el formulario no será aceptado. Para mostrarlos
podemos hacerlo así:

Figura 53. Array de errores

Subida de archivos

Lo más laborioso a la hora de hacer un formulario que permita la subida de archivos

es manejarlos y organizarlos una vez están en el servidor. Inicialmente los archivos se
suben a un directorio temporal y luego se relocalizan.

Configuración en PHP para la subida de archivos:

• Debe estar On la variable file_uploads en [Link].

• En [Link] también se encuentra la variable upload_tmp_dir, que indica el directorio
donde se dirigirán los archivos cuando se suban. El tamaño máximo viene indicado
en el mismo archivo de configuración por upload_max_filesize. Para ver estos
valores se puede
utilizar ini_get('upload_tmp_dir') e ini_get('upload_max_filesize'). upload_tmp_dir s
ólo es manipulable desde el [Link] o [Link], upload_max_filesize puede también
desde .htaccess o un [Link] (tienen
modo PHP_INI_SYSTEM y PHP_INI_PERDIR respectivamente).
• Es necesario que los permisos tanto del directorio temporal como del directorio
final sean de escritura.
• Para que un formulario tenga la capacidad de aceptar archivos se añade el
atributo enctype="multipart/form-data" al elemento form.

De nuevo en este ejemplo pondremos todo el contenido en un archivo [Link]:

Figura 54. Ejemplo en un archivo [Link]

Se incluye un input del tipo hidden que limita el tamaño máximo del archivo que se puede
subir (en bytes).

La información sobre un archivo subido la proporciona el array multidimensional $_FILES.

Este array se crea con el key que se indique en el input del formulario, en este caso
"imagen":

• $_FILES["imagen"]["name"]. Guarda el nombre original del archivo del cliente.

• $_FILES["imagen"]["type"]. Guarda el MIME type del archivo.
• $_FILES["imagen"]["size"]. Guarda el tamaño del archivo en bytes.
• $_FILES["imagen"]["tmp_name"]. Guarda el nombre del archivo temporal.
 • $_FILES["imagen"]["error"]. Guarda cualquier código de error que pueda provocar la
subida del archivo.

La función move_uploaded_file() mueve un archivo subido del directorio temporal al

directorio que se indique.

Figura 55. Función move_uploaded_file()

El array $_FILES['imagen']['error'] especifica por qué no se ha podido subir el archivo, lo

que permite especificar un mensaje de vuelta para cada tipo de error. Devuelve
un integer con el número de error:

Figura 56. Mensajes de errores

Subida múltiple de archivos

Una subida múltiple de archivos en PHP en la práctica se hace normalmente con ayuda
de JavaScript. Una buena librería para subir archivos es DropzoneJS.

En el formulario HTML lo único que cambia es que se añade un atributo múltiple y que en
el atributo name del input file se añade corchetes para indicar que es un array:

Figura 57. Atributo múltiple

En cuanto al backend, omitiendo validaciones esta puede ser una forma de hacerlo:

Figura 58. Forma de omitir validaciones

4.4 Manejo de objetos del servidor

Clase

Una clase es un modelo que se utiliza para crear objetos que comparten un mismo
comportamiento, estado e identidad.

Metáfora

Persona es la metáfora de una clase (la abstracción de Juan, Pedro, Ana y María), cuyo
comportamiento puede ser caminar, correr, estudiar, leer, etc. Puede estar en estado
despierto, dormido, etc. Sus características (propiedades) pueden ser el color de ojos, color
de pelo, su estado civil, etc.

class Persona {

# Propiedades

#Métodos

Objeto

Es una entidad provista de métodos o mensajes a los cuales responde (comportamiento);

atributos con valores concretos (estado); y propiedades (identidad).

$persona = new Persona();

/* El objeto, ahora, es $persona, que se ha creado siguiendo el modelo de la clase Persona

*/

Método

Es el algoritmo asociado a un objeto que indica la capacidad de lo que éste puede hacer.

function caminar() {

#...

Evento y Mensaje

Un evento es un suceso en el sistema mientras que un mensaje es la comunicación del

suceso dirigida al objeto.
Propiedades y atributos

Las propiedades y atributos, son variables que contienen datos asociados a un objeto.

$nombre = 'Juan';

$edad = '25 años';

$altura = '1,75 mts';

Características conceptuales de la POO

La POO debe guardar ciertas características que la identifican y diferencian de otros

paradigmas de programación. Dichas características se describen a continuación.

Abstracción

Aislación de un elemento de su contexto. Define las características esenciales de un objeto.

Encapsulamiento

Reúne al mismo nivel de abstracción, a todos los elementos que puedan considerarse
pertenecientes a una misma entidad.

Modularidad

Característica que permite dividir una aplicación en varias partes más pequeñas
(denominadas módulos), independientes unas de otras.

Ocultación (aislamiento)

Los objetos están aislados del exterior, protegiendo a sus propiedades para no ser
modificadas por aquellos que no tengan derecho a acceder a las mismas.

Polimorfismo

Es la capacidad que da a diferentes objetos, la posibilidad de contar con métodos,

propiedades y atributos de igual nombre, sin que los de un objeto interfieran con el de otro.

Herencia

Es la relación existente entre dos o más clases, donde una es la principal (madre) y otras
son secundarias y dependen (heredan) de ellas (clases “hijas”), donde a la vez, los objetos
heredan las características de los objetos de los cuales heredan.

Recolección de basura

Es la técnica que consiste en destruir aquellos objetos cuando ya no son necesarios,

liberándolos de la memoria.

Objetos en PHP 5
Una vez que las clases han sido declaradas, será necesario crear los objetos y utilizarlos,
aunque hemos visto que algunas clases, como las clases abstractas son solo modelos para
otras, y por lo tanto no necesitan instanciar al objeto.

Instanciar una clase

Para instanciar una clase, solo es necesario utilizar la palabra clave new. El objeto será
creado, asignando esta instancia a una variable (la cual, adoptará la forma de objeto).

Lógicamente, la clase debe haber sido declarada antes de ser instanciada, como se
muestra a continuación:

# declaro la clase

class Persona {

#...

# creo el objeto instanciando la clase

$persona = new Persona();

Propiedades en PHP 5

Las propiedades representan ciertas características del objeto en sí mismo. Se definen

anteponiendo la palabra clave var al nombre de la variable (propiedad):

class Persona {

var $nombre;

var $edad;

var $genero;

Las propiedades pueden gozar de diferentes características, como por ejemplo, la

visibilidad: pueden ser públicas, privadas o protegidas.

Propiedades públicas

Las propiedades públicas se definen anteponiendo la palabra clave public al nombre de la

variable. Éstas, pueden ser accedidas desde cualquier parte de la aplicación, sin restricción.

class Persona {

public $nombre;

public $genero;
}

Propiedades privadas

Las propiedades privadas se definen anteponiendo la palabra clave private al nombre de la

variable.

Éstas solo pueden ser accedidas por la clase que las definió.

class Persona {

public $nombre;

public $genero; private

$edad;

Propiedades protegidas

Las propiedades protegidas pueden ser accedidas por la propia clase que la definió, así
como por las clases que la heredan, pero no, desde otras partes de la aplicación. Éstas, se
definen anteponiendo la palabra clave protected al nombre de la variable:

class Persona {

public $nombre;

public $genero;

private $edad;

protected $pasaporte;

Propiedades estáticas

Las propiedades estáticas representan una característica de “variabilidad” de sus datos, de

gran importancia en PHP 5. Una propiedad declarada como estática, puede ser accedida
sin necesidad de instanciar un objeto. y su valor es estático (es decir, no puede variar ni ser
modificado). Ésta, se define anteponiendo la palabra clave static al nombre de la variable:

class PersonaAPositivo extends Persona {

public static $tipo_sangre = 'A+';

}
Accediendo a la propiedad de un objeto

Para acceder a las propiedad de un objeto, existen varias maneras de hacerlo. Todas ellas,
dependerán del ámbito desde el cual se las invoque así como de su condición y visibilidad.

Acceso a variables desde el ámbito de la clase

Se accede a una propiedad no estática dentro de la clase, utilizando la pseudo-variable

$this siendo esta pseudo-variable una referencia al objeto mismo:

return $this->nombre;

Cuando la variable es estática, se accede a ella mediante el operador de resolución de

ámbito, doble dos-puntos :: anteponiendo la palabra clave self o parent según si trata de
una variable de la misma clase o de otra de la cual se ha heredado, respectivamente:

print self::$variable estática de esta clase;

print parent::$variable estática de clase madre;

Acceso a variables desde el exterior de la clase

Se accede a una propiedad no estática con la siguiente sintaxis: $objeto->variable Nótese

además, que este acceso dependerá de la visibilidad de la variable. Por lo tanto, solo
variables públicas pueden ser accedidas desde cualquier ámbito fuera de la clase o clases
heredadas.

# creo el objeto instanciando la clase

$persona_a_positivo = new PersonaAPositivo();

# accedo a la variable NO estática

print $persona_a_positivo->nombre;

Para acceder a una propiedad pública y estática el objeto no necesita ser instanciado,
permitiendo así, el acceso a dicha variable mediante la siguiente sintáxis:

Clase::$variable_estática

# accedo a la variable estática

print PersonaAPositivo::$tipo_sangre;

(Bahit, POO Y MVC EN PHP. El paradigma de la Programación Orientada a Objetos en

PHP y el patrón de arquitectura de Software MVC, 2011).
4.5 Creación de clases.

El autor (López Quijado, 2014) menciona que para crear un objeto necesitamos tener lo
que se llama una clase. Podemos considerar las clases como moldes, a partir de los que
se crean los objetos. Volviendo a las analogías con el mundo real, su coche está formado
por una carrocería, que ha sido fabricada en unos moldes de estampación. Otros
elementos, como el bloque del motor o el volante, han sido fabricados en unos moldes de
fusión. Estos moldes existen también en el mundo de la programación. A partir de estos
moldes se crean los objetos.
Su coche tiene unas características que lo definen. Usa tal o cual combustible, es de un
determinado color, tiene un tamaño concreto, etc. Los objetos de software también tienen
unas características, en forma de variables, que se llaman propiedades. El coche
implementa determinadas funcionalidades. Usted puede poner el motor en marcha,
acelerar, frenar, girar las ruedas, etc. Los objetos hacen uso de unas funciones para lograr
su objetivo. Éstas se llaman métodos. Cuando se fabricó su coche, las piezas de la
carrocería, de la mecánica y del interior salieron con la misma forma que tenían los
respectivos moldes. Esto se conoce, en programación, como herencia. Los objetos tienen
las mismas propiedades y métodos que las clases a partir de las que han sido creados.
Además, a partir de una clase, se pueden crear otras. Estas clases, creadas a partir de
otras, también heredan sus propiedades y métodos.

CREACIÓN Y USO

Antes de crear un objeto necesitamos disponer de la clase a partir de la que se

implementará dicho objeto. Para crear una clase usamos la sentencia class, seguida del
nombre de la clase que vamos a crear y del cuerpo de la clase, que es donde se definen
las propiedades y métodos que luego tendrán los objetos de esa clase. La sintaxis genérica
obedece al siguiente esquema:

class nombreDeLaClase {

propiedades

métodos

A partir de que la clase haya sido definida podemos crear todos los objetos que necesitemos
de dicha clase. Para ello usamos el operador new, tal como se ve en la siguiente sintaxis
genérica:

$objeto = new nombreDeLaClase ();

Ejemplo:
 Figura 59. Clase destinada a sumar dos números.

4.6 Acceso a datos.

Una base de datos representa un conjunto de datos pertenecientes a un mismo contexto,

que son almacenados de forma sistemática para su posterior uso. (Bahit, 2010).

MySQL es un servidor de Bases de Datos SQL (Structured Query Language) que se

distribuye en dos versiones:

• Una versión GPL (Software Libre)

• Otra versión privativa, llamada MySQL AB

Crear tablas en una base de datos

Sintaxis:

CREATE TABLE nombre_de_la_tabla(

nombre_del_campo TIPO_DE_DATO,
nombre_de_otro_campo TIPO_DE_DATO

);
Ejemplo:

CREATE TABLE productos(

producto VARCHAR(125),
descripcion BLOB,
precio DECIMAL(6, 2),
en_stock BOOL

);

Explicación:
CREATE TABLE productos

Crear una nueva tabla llamada “productos”

producto VARCHAR(125),

Crear un campo llamado producto, de tipo cadena de texto de longitud variable, con una
longitud máxima de 125 caracteres

descripcion BLOB,

Crear un campo llamado descripción, de tipo bloque de texto de gran longitud

precio DECIMAL(6, 2),

Crear un campo precio de tipo numérico de longitud máxima de 6 digítos de los cuales, solo
2 pueden ser decimales
en_stock BOOL

Crear un campo llamado “en_stock” del tipo booleano

Insertar datos en una tabla

Sintaxis:

INSERT INTO

nombre_de_la_tabla(campo1, campo2, campo10..)

VALUES(dato1, dato2, dato10...);

Ejemplo:
INSERT INTO

productos(producto, precio, en_stock)

VALUES('Bolsa de dormir para alta montaña', 234.65, TRUE);

Explicación:
 INSERT INTO

productos(producto, precio, en_stock)

VALUES('Bolsa de dormir para alta montaña', 234.65, TRUE);

Insertar un nuevo registro en los campos producto, precio y en stock de la tabla productos

Con los valores “Bolsa de dormir para alta montaña”, 234.65 y verdadero, respectivamente
en cada uno de los campos indicado.

Seleccionar registros
Sintaxis:

SELECT campo1, campo2, campo10

FROM tabla;

Ejemplo:

SELECT producto, precio

FROM productos;

Explicación:
SELECT producto, precio

Seleccionar los campos producto y precio

FROM productos;

De la tabla productos

Modificar registros
Sintaxis:
UPDATE tabla

SET campo1 = valor,

campo2 = valor,
campo10 = valor;

Ejemplo:
 UPDATE productos
SET en_stock = FALSE,
precio = 0;

UPDATE productos

Explicación:

Actualizar la tabla productos

SET en_stock = FALSE,

Modificar el campo en_stock por falso

precio = 0;

y el campo precio a 0

Eliminar registros
Sintaxis:

DELETE FROM tabla;

Ejemplo:

DELETE FROM productos;

Explicación:

DELETE FROM productos;

Eliminar todos los registros de la tabla productos

 Unidad IV

Actividades de aprendizaje

Realizar un cuadro sinóptico de forma digital sobre la unidad 3, apoyándote en este material
de lectura proporcionado, puedes complementar con otras fuentes bibliográficas.

Valor: 30%

Prácticas

Valor: 40%

Práctica 1: Nuestra primer página web con php.

De acuerdo a la página que trabajaste en la unidad 2, deberás aplicar los siguientes

cambios que se indican, para poder comenzar a trabajar con php.

Restructurar carpetas en nuestro servidor local

assets/css e img

paginas/

149
 Unidad IV

Separar código

[Link]

[Link]

150
 Unidad IV

[Link]

[Link]

151
 Unidad IV

MODIFICACIONES EN [Link]

Eliminar la tabla

Modificar botón

<input class="controls" type="submit" name="registrar">

[Link]

152
 Unidad IV

[Link]

Crear BD en phpmyadmin

nombre de la base de datos: bd_sitio

nombre de la tabla: tbl_datos

153
 Unidad IV

Carpeta php/con_bd.php [Link]

con_bd.php

[Link]

154
 Unidad IV

Modificar [Link]

Si se apretó la variable post con el input name= registrar (botón)

if(isset($_POST['registrar'])){

validamos ¿Estan vacíos los campos?

if(strlen($_POST['nombre']) >= 1 && strlen($_POST['email']) >= 1 && strlen($_POST['tel'])

>= 1 && strlen($_POST['mensaje']) >= 1){

sino están vacíos arrancamos con las variables

$nombre = trim($_POST['nombre']);

$email = trim($_POST['email']);

$tel = trim($_POST['tel']);

$mensaje = trim($_POST['mensaje']);

trim elimina espacios en blanco u otro caracter al inicio y final de cada cadena

155
 Unidad IV

Modificar estilos

Crear la tabla artículos en la base de datos

156
 Unidad IV

CREAR FORMULARIO PARA AGREGAR ARTICULOS

php/artí[Link]

php/agregar_articulo.php

157
 Unidad IV

CORREGIR [Link] (para mostrar los artículos agregados)

MODIFICACION EN ESTILOS

ASIDE

158
 Unidad IV

php/mostrar_articulos.php

159
 Unidad IV

[Link]

php/modificar_articulo.php

160
 Unidad IV

php/proceso_modificar.php

161
 Unidad IV

php/eliminar_articulo.php

162
 Unidad IV

MOSTRAR DATOS DE LA BASE DE DATOS

INICIO DE SESION

Tabla login

163
 Unidad IV

Formulario [Link] en la raiz

php/[Link]

164
 Unidad IV

php/[Link]

php/bienvenido_admin.php

165
 Unidad IV

MODIFICACIONES EN [Link]

Eliminar la tabla

Modificar botón

<input class="controls" type="submit" name="registrar">

166
 Unidad IV

Modificar [Link]

Si se apretó la variable post con el input name= registrar (botón)

if(isset($_POST['registrar'])){

validamos ¿Estan vacíos los campos?

if(strlen($_POST['nombre']) >= 1 && strlen($_POST['email']) >= 1 && strlen($_POST['tel'])

>= 1 && strlen($_POST['mensaje']) >= 1){

sino están vacíos arrancamos con las variables

$nombre = trim($_POST['nombre']);

$email = trim($_POST['email']);

$tel = trim($_POST['tel']);

$mensaje = trim($_POST['mensaje']);

trim elimina espacios en blanco u otro caracter al inicio y final de cada cadena

167
 Unidad IV

Modificar estilos

168
 Unidad IV

ORIENTACIONES SOBRE LA EVALUACIÓN.

A continuación, se detallan los criterios de evaluación de la unidad IV:

Actividad de Aprendizaje Valor

Cuadro Sinóptico 30%
Práctica con su respectivo reporte 40%
Avance de proyecto 30%
Total 100%

Calendarización de evaluación en semanas:

Semana 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
TP Evaluación
Unidad IV
TR

169
UNIDAD V (CÓMPUTO EN LA NUBE Y SERVICIOS)
 Unidad V

COMPETENCIA(S) A DESARROLLAR

Conoce la evolución, arquitectura, tecnologías y planificación de las aplicaciones Web

para la preparación de un ambiente de desarrollo.

COMPETENCIAS PREVIAS

Aplica métodos y herramientas de la ingeniería del software en el desarrollo de software

aplicando estándares de calidad y productividad.
Aplica un lenguaje orientado a objetos para la solución de problemas.
Crea y aplica esquemas de bases de datos para garantizar la confiabilidad de los datos en
aplicaciones para el tratamiento de información.

TÉCNICAS DE AUTOESTUDIO Y MOTIVACIÓN.

Ante la necesidad de adaptarse a los cambios, algunas instituciones de Educación Superior

han empezado a hacer uso de nuevas estrategias para que sus estudiantes desarrollen
efectivamente los conocimientos, habilidades y actitudes que indican sus planes de estudio;
(Bergmann,2012), (Mingorance, Trujillo, Cáceres, y Torres, 2017) señalan entre las más
importantes:

➢ Aula Invertida
➢ Aprendizaje Semipresencial
➢ Aprendizaje Colaborativo
➢ Hiper-personalización
➢ Aprendizaje Experiencial
➢ Micro aprendizaje
➢ Entrenamiento Educativo
➢ Otras…

✓ Saber el nombre de los estudiantes y su situación: saber el nombre de los

estudiantes es el primer paso para trabajar la conexión con ellos. También es
importante conocer a cada estudiante con relación a sus fortalezas y debilidades.
✓ Saber el estilo de aprendizaje: Utilizar diferentes vías de acceso al aprendizaje
(visual, auditivo, musical, kinestésico, entre otras).

171
 Unidad V

✓ Entusiasmo del profesor: es evidente cuando al profesor le gusta enseñar. El

aprendizaje va relacionado con la emoción. Es importante que el profesor tenga
buen humor.
✓ Intentar dedicar tiempo a cada estudiante: es comprensible que esto sea algo
difícil ya que se manejan grupos grandes, sin embargo, el profesor puede intentar
acercarse a sus estudiantes de manera individualizada para saber si comprendieron
la instrucción y dar apoyo.
✓ Brindar respeto y confianza: evitar llamados de atención y ridiculizar a los
estudiantes en público, mejor decir las cosas en privado. Mostrar apertura cuando
le pase algo o nos quieran contar algo. Mostrar flexibilidad.
✓ Refuerzo positivo: cuando haga algo bien felicitarle. Reforzar las habilidades del
estudiante.
✓ Explicar la importancia de la asignatura: explicar con ejemplos la utilidad de la
materia en su vida profesional.
✓ Variar los métodos de enseñanza: esto es recomendable hacer para los estudiantes
sientan que vale la pena ir a clases y no sea algo aburrido y monótono a lo que
tengan que asistir. Por lo que se recomienda que sea visual, auditivo y kinestésico.
✓ Fomentar la participación activa de los estudiantes: esto hacer con la finalidad de
aumentar el interés y aprendizaje de los estudiantes. El profesor puede hacer
preguntas y moverse por toda el aula.
✓ Responder claramente a las preguntas: la mayoría de estudiantes no preguntan por
temor o vergüenza. Por lo que será fundamental responder a todas las preguntas
por más básicas que sean.

172
 Unidad V

5.1 Conceptos generales.

¿Qué es el almacenamiento en la nube?

El almacenamiento en la nube es un modelo de informática en la nube que almacena datos

en Internet a través de un proveedor de informática en la nube que administra y opera el
almacenamiento en la nube como un servicio. Se ofrece bajo demanda con capacidad y
costo oportunos, y elimina la necesidad de tener que comprar y administrar su propia
infraestructura de almacenamiento de datos. Esto le otorga agilidad, escala global y
durabilidad con acceso a los datos en cualquier momento y lugar.

¿Cómo funciona el almacenamiento en la nube?

El almacenamiento en la nube se compra a un proveedor de la nube externo que posee y

opera capacidad de almacenamiento de datos y la distribuye a través de Internet con un
modelo de pago por uso. Estos proveedores de almacenamiento en la nube administran la
capacidad, la seguridad y la durabilidad para lograr que sus aplicaciones de todo el mundo
tengan acceso a los datos.

Las aplicaciones obtienen acceso al almacenamiento en la nube mediante protocolos de

almacenamiento tradicionales o directamente mediante una API. Muchos proveedores
ofrecen servicios complementarios diseñados para ayudar a recopilar, administrar, proteger
y analizar datos a gran escala.

Beneficios del almacenamiento en la nube

El almacenamiento de datos en la nube permite a los departamentos de TI transformar tres

aspectos:

1. Costo total de la propiedad. Con el almacenamiento en la nube, no es

necesario comprar hardware, almacenar para aprovisionar o invertir capital en
situaciones que pueden darse "algún día". Puede agregar o eliminar capacidad
bajo demanda, modificar las características de desempeño y retención con
rapidez y pagar solamente por el almacenamiento que utilice. Incluso puede
trasladar los datos a los que se accede con menos frecuencia a capas de menor
costo de acuerdo con las reglas auditables, para aprovechar la economía de
escala.

2. Tiempo de implementación. Cuando los equipos de desarrollo están listos para

la ejecución, la infraestructura no debería detenerlos. El almacenamiento en la
nube permite al departamento de TI proporcionar con rapidez la cantidad de
almacenamiento necesaria en el momento necesario. Eso permite al
departamento de TI concentrarse en resolver problemas de aplicación complejos
en lugar de tener que administrar sistemas de almacenamiento.

3. Gestión de la información. Centralizar el almacenamiento en la nube aporta un

gran beneficio para nuevos casos de uso. Al utilizar políticas de administración

173
 Unidad V

del ciclo de vida del almacenamiento en la nube, puede realizar potentes tareas
de administración de la información, incluida la separación por niveles
automatizada o el bloqueo de datos para cumplir con los requisitos de
conformidad.

Requisitos del almacenamiento en la nube

Garantizar que los datos críticos de su empresa se mantienen seguros, a salvo y disponibles
es algo fundamental. A la hora de considerar el almacenamiento de datos en la nube,
existen varios requisitos fundamentales.

Durabilidad. Los datos deberían almacenarse de forma redundante, a poder ser en varias
instalaciones y en varios dispositivos de cada instalación. Los desastres naturales, los
errores humanos o los fallos mecánicos no deberían provocar una pérdida de los datos.

Disponibilidad. Todos los datos deberían estar disponibles cuando es necesario, pero existe
una diferencia entre los datos de producción y los archivos. El almacenamiento en la nube
ideal aporta el equilibrio ideal entre tiempos de recuperación y costo.

Seguridad. Lo ideal es cifrar todos los datos, tanto si están en reposo como en tránsito. Los
permisos y los controles de acceso deberían funcionar del mismo modo en la nube que en
el almacenamiento on-premise.

Tipos de almacenamiento en la nube

Existen tres tipos de almacenamiento de datos en la nube: almacenamiento de objetos, de

archivos y en bloque. Cada uno ofrece sus propios beneficios y casos de uso:

1. Almacenamiento de objetos: con frecuencia, las aplicaciones desarrolladas en

la nube aprovechan la gran escalabilidad y las características de metadatos del
almacenamiento de objetos. Las soluciones de almacenamiento de objetos
como Amazon Simple Storage Service (S3) son ideales para crear aplicaciones
modernas desde cero que requieren escala y flexibilidad, y que también puede
utilizar para importar almacenes de datos existentes para su análisis, backup o
archivado.

2. Almacenamiento de archivos: algunas aplicaciones necesitan obtener acceso

a archivos compartidos y requieren un sistema de archivos. A menudo, este tipo
de almacenamiento cuenta con un servidor de almacenamiento conectado a la
red (NAS). Las soluciones de almacenamiento de archivos como Amazon Elastic
File System (EFS) son ideales para casos de uso como depósitos de contenido
de gran tamaño, entornos de desarrollo, almacenes multimedia o directorios de
inicio del usuario.

3. Almacenamiento en bloque: otras aplicaciones empresariales, como bases de

datos o sistemas de planificación de recursos empresariales (ERP), a menudo

174
 Unidad V

requieren almacenamiento dedicado y de baja latencia para cada host. Esto es

similar al almacenamiento conectado directamente (DAS) o una red de área de
almacenamiento (SAN). Las soluciones de almacenamiento en la nube basadas
en bloques, como Amazon Elastic Block Store (EBS), se aprovisionan con cada
servidor virtual y ofrecen la latencia ultrabaja necesaria para cargas de trabajo
de alto rendimiento. (Amazon Web Services, 2021)

Tipos de cómputo en la nube

Hay tres tipos diferentes de nubes: pública, privada e híbrida. Todos ellas varían en términos
del nivel de administración que se requiere por parte del cliente, así como el nivel de
seguridad que proporcionan.

Figura 60 Tipos de cómputo en la nube

Nube pública

En una nube pública, toda la infraestructura informática se encuentra en las instalaciones

del proveedor de la nube, que ofrece estos servicios al cliente a través de Internet. El cliente
no necesita mantener su propia TI y puede agregar rápidamente más usuarios o potencia
informática según sea necesario. El proveedor de la nube tiene múltiples inquilinos que
comparten su infraestructura de TI.

Nube privada

Una nube privada es aquella utilizada exclusivamente por una organización. Podría estar
alojada en las instalaciones de la organización o en el centro de datos del proveedor de la
nube. Una nube privada proporciona el más alto nivel de seguridad y control.

Nube híbrida

Como su nombre lo indica, una nube híbrida es una combinación de las nubes pública y
privada. En general, el cliente alojará las aplicaciones críticas para su empresa en sus
propios servidores a fin de tener mayor seguridad y control, mientras que sus aplicaciones
secundarias se almacenarán en las instalaciones del proveedor de la nube.

175
 Unidad V

Nubes múltiples

La principal diferencia entre la nube híbrida y la nube múltiple es el uso de múltiples

dispositivos de almacenamiento y cómputo en la nube en una sola arquitectura. Con el
objetivo de agregar algunas palabras clave en el cuerpo.

(Oracle, 2021)

5.2 Tipos de Servicios en la nube.

Los servicios de nube son infraestructuras, plataformas o sistemas de software que los
proveedores externos alojan y que se ponen a disposición de los usuarios a través de
Internet. Estos facilitan el flujo de datos de los usuarios a través de Internet, desde los
clientes de front-end (p. ej.: los servidores, las tabletas y las computadoras de escritorio o
portátiles, es decir, cualquier sistema de hardware en los extremos de los usuarios) hasta
los sistemas de los proveedores, y viceversa. Para acceder a los servicios de nube, los
usuarios no necesitan más que una computadora, un sistema operativo y una conexión de
red a Internet.

Todas las infraestructuras, las plataformas, los sistemas de software o las tecnologías a los
que acceden los usuarios a través de Internet sin tener que descargar sistemas de software
adicionales se consideran servicios de nube, al igual que las siguientes soluciones como
servicio.

Tipos de servicios

• IaaS

La infraestructura como servicio (IaaS), también conocida como servicios de infraestructura

en la nube, es una forma de cloud computing que ofrece a los usuarios finales
una infraestructura de TI a través de Internet. Por lo general, se la asocia con la informática
sin servidor.

En IaaS los recursos informáticos ofrecidos consisten en hardware virtualizado, en otras

palabras, infraestructura de procesamiento (espacio en servidores virtuales, conexiones de
red, ancho de banda, direcciones IP, balanceadores de carga …).

• PaaS

La Plataforma como servicio (PaaS) es una modalidad del cloud computing en la cual un
tercero brinda el sistema de hardware y una plataforma de software de aplicaciones. La
PaaS es ideal principalmente para los desarrolladores y los programadores, ya que permite
que el usuario desarrolle, ejecute y gestione sus propias aplicaciones sin tener que diseñar
ni mantener la infraestructura ni la plataforma que suelen estar relacionadas con el proceso.

176
 Unidad V

El proveedor aloja el hardware y el software en su propia infraestructura, y ofrece la

plataforma al usuario como una solución integrada, una pila de soluciones o un servicio a
través de Internet.

Por ejemplo, supongamos que tiene una gran innovación en mente y escribió el código de
una aplicación que facilitará nuestras vidas y ejecutará ciertas tareas. Está entusiasmado
con la idea, con lo que puede hacer y cómo podría evolucionar. Para evitar el estrés
adicional de instalar el hardware on-premise, realizar mantenimiento en los servidores,
mantener actualizado el software de la infraestructura y configurar una plataforma
personalizada sobre la cual se puede diseñar la aplicación, puede recurrir a un proveedor
de PaaS que aloje la plataforma y le ofrezca el entorno necesario para ejecutar su código.

• SaaS

El software como servicio (SaaS) es una forma de cloud computing que ofrece a los
usuarios una aplicación en la nube junto con toda su infraestructura de TI y plataformas
subyacentes. Puede ser la solución ideal para las empresas, ya sean grandes o pequeñas,
o las personas con las siguientes características:

• No quieren encargarse de las tareas de mantenimiento de la infraestructura, las

plataformas y el software.
• Tienen desafíos que pueden resolverse con una personalización mínima.
• Prefieren los modelos de suscripción de software.

La implementación de SaaS permite reducir los costos iniciales de los usuarios. Esto se
debe a que ya no es necesario adquirir sistemas de software todo el tiempo ni invertir en
una infraestructura de TI sólida y on-premise, como sí ocurre con el software tradicional.
Sin embargo, se recomienda que los usuarios inviertan en sistemas de hardware de red
rápidos, ya que la velocidad de conexión a Internet determina el rendimiento del servicio.

Algunos ejemplos de SaaS son los servicios orientados a los consumidores, como
Google Docs y Microsoft Office 365, y los servicios empresariales que ofrecen sistemas de
software de gestión de recursos humanos, sistemas de gestión de contenido, herramientas
de gestión de las relaciones con los clientes y entornos de desarrollo integrado (IDE).

177
 Unidad V

Figura 61. Pilares de la nube

• FaaS

La función como servicio, o FaaS, es un modelo de ejecución informática que se basa en

eventos y se ejecuta en contenedores sin estado. Esas funciones son las que gestionan la
lógica y el estado de los servidores a través del uso de servicios.

Gracias a la FaaS, los desarrolladores pueden diseñar, ejecutar y gestionar esos paquetes
de aplicaciones como funciones, sin tener que mantener su propia infraestructura.

La FaaS es una forma de implementar la informática sin servidor, donde los desarrolladores
escriben la lógica empresarial que luego se ejecuta en los contenedores de Linux totalmente
gestionados por una plataforma.

Por lo general, esa plataforma se encuentra en la nube, pero el modelo se está expandiendo
para incluir implementaciones on-premise e híbridas.

La informática sin servidor traslada ciertas cuestiones relacionadas con la infraestructura,

como la gestión o la preparación de servidores y la asignación de recursos, a una plataforma
(como Red HatⓇ OpenShiftⓇ), para que los desarrolladores no tengan que preocuparse por
eso y puedan concentrarse en escribir el código y generar valor empresarial.

Una función es una parte del sistema de software que ejecuta la lógica empresarial. Las
aplicaciones pueden estar compuestas por varias funciones.

El uso de un modelo FaaS es una forma de diseñar aplicaciones con una arquitectura sin
servidor. Sin embargo, debido a que el paradigma de la informática sin servidor es cada vez
más popular, los desarrolladores buscan soluciones que admitan el desarrollo de
microservicios de este tipo y de contenedores sin estado.

178
 Unidad V

Estos son algunos ejemplos de FaaS conocidos:

• AWS Lambda
• Google Cloud Functions
• Microsoft Azure Functions (open source)
• OpenFaaS (open source)

¿Cómo funciona la FaaS?

La FaaS ofrece a los desarrolladores una abstracción para que ejecuten las aplicaciones
en respuesta a ciertos eventos, sin tener que gestionar servidores. Por ejemplo, al cargar
un archivo podría activarse un código personalizado que transcodifique el archivo a varios
formatos.

La infraestructura de FaaS se mide principalmente a través de un modelo de ejecución

basado en eventos, según se solicite. Esto significa que está a su disposición si la necesita,
pero ninguno de los procesos del servidor tiene que estar ejecutándose en segundo plano
de forma permanente; a diferencia de la plataforma como servicio (PaaS).

Las soluciones de PaaS modernas ofrecen capacidades sin servidor como parte de los
flujos de trabajo comunes que los desarrolladores pueden utilizar para implementar
aplicaciones, lo cual atenúa las diferencias entre la PaaS y la FaaS.

De hecho, las aplicaciones modernas estarán compuestas por una combinación de estas
soluciones: funciones, microservicios y servicios de ejecución prolongada.

Un proveedor de nube se encarga de que su función esté disponible y de gestionar la

asignación de los recursos. Dado que las funciones se basan en eventos y no en recursos,
son fáciles de ampliar.

Hay limitaciones arquitectónicas que impiden obtener algunos de estos beneficios, como
los límites de tiempo en la ejecución de una función, por lo cual una función debe ser un
elemento que pueda iniciarse y ejecutarse rápidamente.

Las funciones se inician en cuestión de milisegundos y procesan solicitudes individuales.

En caso de haber varias solicitudes simultáneas para su función, el sistema creará tantas
copias de la función como sea necesario para satisfacer la demanda.

Un beneficio de la FaaS es el escalamiento dinámico, lo cual significa que cuando la

demanda disminuye, la aplicación se reduce automáticamente. Pero no solo eso, además
es rentable, ya que los proveedores solo cobran por los recursos que se utilizan y no por el
tiempo de inactividad.

179
 Unidad V

Cuando la ejecución es on-premise, esta naturaleza dinámica también puede aumentar la

densidad de su plataforma, lo cual permite ejecutar más cargas de trabajo y optimizar el
uso de los recursos.

Un servicio basado en eventos que necesita escalar horizontalmente puede funcionar bien
como una función, así como aplicaciones de RESTful.

La FaaS funciona correctamente para las operaciones de gran volumen, las cargas de
trabajo que solo ocurren de vez en cuando, como la elaboración de informes, el
procesamiento de imágenes o cualquier tarea programada. Los casos de uso comunes de
FaaS son el procesamiento de datos, los servicios de IoT y las aplicaciones móviles o web.

Puede diseñar una aplicación completamente sin servidor utilizando la FaaS, o conformar
una aplicación de microservicios parcialmente sin servidor y parcialmente tradicionales.

Beneficios de la FaaS

• La productividad de los desarrolladores aumenta y el tiempo de implementación

disminuye.
• No tiene que ocuparse de la gestión de los servidores.
• Es fácil de ampliar, y la plataforma gestiona el escalamiento horizontal.
• Solo se utilizan los recursos cuando es necesario y se paga solo por aquellos
utilizados.
• Las funciones pueden escribirse en casi todos los lenguajes de programación.

(Red Hat, 2021)

180
 Unidad V

5.3 Patrones de diseño.

Estos patrones de diseño son útiles para crear aplicaciones confiables, escalables y
seguras en la nube. (Microsoft, 2018).

Cada patrón describe el problema al que hace frente, las consideraciones sobre su
aplicación y un ejemplo basado en Microsoft Azure. La mayoría incluye ejemplos de código
o fragmentos de código que muestran cómo implementar el patrón en Azure. Sin embargo,
la mayoría de los patrones es importante para todos los sistemas distribuidos, tanto si están
hospedados en Azure como en otras plataformas en la nube.

Desafíos del desarrollo en la nube

Administración de datos

La administración de datos es el elemento clave de las aplicaciones en la nube e influye en

la mayoría de los atributos de calidad. Los datos se hospedan normalmente en distintas
ubicaciones y entre varios servidores por motivos tales como el rendimiento, la escalabilidad
o la disponibilidad, lo cual puede conllevar varios desafíos. Por ejemplo, se debe mantener
la coherencia de los datos y estos deben estar sincronizados entre las diferentes
ubicaciones.

Diseño e implementación

Un buen diseño incluye factores como la coherencia en el diseño e implementación de los

componentes, el mantenimiento para simplificar la administración y el desarrollo, y la
reutilización para permitir que los componentes y subsistemas se puedan utilizar en otras
aplicaciones y escenarios. Las decisiones tomadas durante la fase de diseño e
implementación tienen un gran impacto en la calidad y el costo total de propiedad de las
aplicaciones y servicios hospedados en la nube.

Mensajería

La naturaleza distribuida de las aplicaciones en la nube requiere una infraestructura de

mensajería que permite conectar los componentes y servicios, idealmente mediante un
acoplamiento flexible, para maximizar la escalabilidad. La mensajería asincrónica se usa
ampliamente y ofrece numerosas ventajas, pero también supone desafíos como la
ordenación de los mensajes, la administración de mensajes dudosos, la idempotencia, etc.

181
 Unidad V

Catálogo de Patrones

CATÁLOGO DE PATRONES

Patrón Resumen Category

Ambassador Crea servicios auxiliares que envían Diseño e implementación,

solicitudes de red en nombre de una
aplicación o servicio de consumidor.
Excelencia operativa

Anti-Corruption Implementa una capa de fachada o de Diseño e implementación,

Layer adaptador entre una aplicación moderna
y un sistema heredado.
Excelencia operativa

Solicitud y Desacople el procesamiento de back-end Mensajería

respuesta de un host de front-end en el que el
asincrónicas procesamiento de back-end tiene que ser
asincrónico, pero en el que, aún así, el
front-end necesita una respuesta clara.

Backends for Crea servicios independientes de back-end Diseño e implementación

Frontends que determinadas aplicaciones de front-
end o interfaces puedan usar.

Bulkhead Aísle los elementos de una aplicación en Confiabilidad

grupos para que, si se produce un error
en uno, los demás sigan funcionando.

Cache-Aside Carga datos a petición en una memoria Administración de datos,

caché desde un almacén de datos

Eficiencia del rendimiento

Organización Permita a cada servicio decidir cuándo y Mensajería,

cómo se procesa una operación
empresarial, en lugar de depender de un
orquestador central. Eficiencia del rendimiento

Circuit Breaker Controla los errores que pueden tardar una Confiabilidad
cantidad variable de tiempo en

182
 Unidad V

CATÁLOGO DE PATRONES

Patrón Resumen Category

solucionarse durante la conexión a un

recurso o servicio remoto.

Comprobación Divida un mensaje grande en una Mensajería

de comprobación de notificaciones y una
notificaciones carga para evitar sobrecargar un bus de
mensajes.

Compensating Deshace el trabajo realizado mediante una Confiabilidad

Transaction serie de pasos, que conjuntamente
definen una operación definitivamente
coherente.

Competing Permite que varios consumidores Mensajería

Consumers simultáneos procesen los mensajes
recibidos en el mismo canal de
mensajería.

Compute Consolida varias tareas u operaciones en Diseño e implementación

Resource una sola unidad de cálculo.
Consolidation

CQRS Segrega las operaciones de lectura de Administración de datos,

datos de las de actualización de datos
mediante interfaces independientes.
Diseño e implementación,

Eficiencia del rendimiento

Sellos de Implemente varias copias independientes Confiabilidad

implementación de los componentes de la aplicación,
incluidos los almacenes de datos.
Eficiencia del rendimiento

183
 Unidad V

CATÁLOGO DE PATRONES

Patrón Resumen Category

Event Sourcing Usa un almacén de solo anexar para Administración de datos,

registrar la serie completa de eventos
que describen las acciones realizadas en
los datos de un dominio. Eficiencia del rendimiento

External Extrae la información de configuración del Diseño e implementación,

Configuration paquete de implementación de la
Store aplicación y la lleva a una ubicación
centralizada. Excelencia operativa

Federated La autenticación se delega a un proveedor Seguridad

Identity de identidad externo.

Gatekeeper Protege aplicaciones y servicios mediante Seguridad

una instancia de host dedicada que actúa
como agente entre los clientes y la
aplicación o servicio, valida y sanea las
solicitudes, y pasa las solicitudes y datos
entre ellos.

Gateway Usa una puerta de enlace para agregar Diseño e implementación,

Aggregation varias solicitudes individuales en una
sola solicitud.
Excelencia operativa

Gateway Descarga una funcionalidad de servicio Diseño e implementación,

Offloading compartida o especializada en un proxy
de puerta de enlace.
Excelencia operativa

Gateway Routing Enruta las solicitudes a varios servicios Diseño e implementación,

mediante un solo punto de conexión.

Excelencia operativa

Geodes Implementar servicios back-end en un Confiabilidad

conjunto de nodos geográficos, cada uno

184
 Unidad V

CATÁLOGO DE PATRONES

Patrón Resumen Category

de los cuales puede atender la solicitud

de cualquier cliente en cualquier región.
Excelencia operativa

Health Endpoint Implementa comprobaciones funcionales Confiabilidad

Monitoring en una aplicación a la que pueden
acceder herramientas externas a través
de los puntos de conexión expuestos en Excelencia operativa
intervalos regulares.

Index Table Crea índices en los campos de los Administración de datos,

almacenes de datos a los que suelen
hacer referencia las consultas.
Eficiencia del rendimiento

Leader Election Coordina las acciones realizadas por una Diseño e implementación,
colección de instancias de tareas de
colaboración de una aplicación
distribuida mediante la elección de una Confiabilidad
instancia como líder que asume la
responsabilidad de administrar las
demás instancias.

Materialized Genera vistas rellenadas previamente de Administración de datos,

View los datos en uno o más almacenes de
datos cuando los datos no tienen el
formato idóneo para las operaciones de Excelencia operativa
consulta requeridas.

Pipes and Filters Desglosa una tarea que realiza un Diseño e implementación,
procesamiento complejo en una serie de
elementos independientes que se
pueden volver a utilizar. Mensajería

Priority Queue Clasifica por orden de prioridad las Mensajería,

solicitudes enviadas a los servicios para
que aquellas con una prioridad más alta
se reciban y procesen más rápidamente Eficiencia del rendimiento
que las que tienen una prioridad más
baja.

185
 Unidad V

CATÁLOGO DE PATRONES

Patrón Resumen Category

Publicador y Permita que una aplicación anuncie Mensajería

suscriptor eventos de forma asincrónica a varios
consumidores interesados, sin necesidad
de emparejar los remitentes con los
receptores.

Queue-Based Usa una cola que actúa como búfer entre Confiabilidad
Load Leveling una tarea y un servicio que invoca para
equilibrar cargas pesadas intermitentes.
Mensajería,

Resistencia,

Eficiencia del rendimiento

Retry Permite que una aplicación trate los errores Confiabilidad

temporales anticipados cuando intenta
conectarse a un servicio o un recurso de
red, mediante el reintento de forma
transparente de una operación que
anteriormente produjo error.

Scheduler Agent Coordina un conjunto de acciones en un Mensajería,

Supervisor conjunto distribuido de servicios y otros
recursos remotos.
Confiabilidad

Convoy Procesa un conjunto de mensajes Mensajería

secuencial relacionados en un orden definido, sin
bloquear el procesamiento de otros
grupos de mensajes.

Sharding Divida un almacén de datos en un conjunto Administración de datos,

de particiones horizontales o particiones
de base de datos.
Eficiencia del rendimiento

Sidecar Implementa componentes de una Diseño e implementación,

aplicación en un proceso o contenedor

186
 Unidad V

CATÁLOGO DE PATRONES

Patrón Resumen Category

independientes para proporcionar

aislamiento y encapsulación.
Excelencia operativa

Static Content Implemente contenido estático en un Diseño e implementación,

Hosting servicio de almacenamiento basado en la
nube que pueda entregarlo directamente
al cliente. Administración de datos,

Eficiencia del rendimiento

Fig Strangler Migra de forma incremental un sistema Diseño e implementación,

heredado reemplazando gradualmente
funciones específicas por los servicios y
aplicaciones nuevas. Excelencia operativa

Limitaciones Controlan el consumo de recursos que usa Confiabilidad

una instancia de una aplicación, un
inquilino individual o un servicio
completo. Eficiencia del rendimiento

Valet Key Usa un token o clave que proporciona a los Administración de datos,
clientes acceso directo restringido a un
recurso o servicio específico.
Seguridad
Figura 62. Catálogo de Patrones

5.4 Estándares en servicios.

Los estándares para los servicios de Computación en la Nube, pueden ser divididos en dos
clases: estándares prescriptivos y estándares evaluativos. Los primeros se refieren a los
estándares de comunicaciones, tales como los protocolos TCP, IP, SNMP, HTTP, etc. De
otra parte, los estándares evaluativos se refieren a estándares de Calidad de los sistemas
de Cloud Computing, los cuales se encargan de describir y evaluar los procedimientos
seguidos en los procesos en general, como es el caso de la familia de estándares ISO 9000,
y procedimientos específicos para seguridad de la información como los de la familia ISO
27000. Algunos aspectos de Calidad de los proveedores de Servicios de Cloud Computing
incluyen características medibles como: el tiempo de actividad, el rendimiento, la

187
 Unidad V

disponibilidad, la seguridad, la privacidad, el cumplimiento, el servicio al cliente y

portabilidad a través de los vendedores. (Padilla Aguilar & Pinzón Castellanos, 2015).

Entre los principales esfuerzos de estandarización de la Computación en la Nube se

encuentran los realizados por la UIT (Unión Internacional de Telecomunicaciones ó ITU por
sus siglas en inglés). La ITU-T estudia la computación en nube mediante el FG (Grupo
Focal sobre la computación en nube), y se decidió que el grupo de trabajo SG13 dirigirá la
actividad de normalización de Cloud Computing, y el grupo SG17 cubrirá la seguridad en la
nube. Algunas de las recomendaciones que han sido desarrolladas por estos grupos son
según:

• ITU-T Y.3501: Esta recomendación proporciona un marco de referencia para Cloud

Computing mediante la identificación de requisitos de alto nivel para la computación en
nube. La Recomendación trata los requisitos generales y los casos de uso de: (a) la
computación en nube; (b) Infraestructura como Servicio (IaaS), la Red como un Servicio
(NaaS) y el escritorio como servicio (DaaS); y también (c) interconexión entre las nubes, la
gestión de extremo a extremo de los recursos y la infraestructura Cloud.

• UIT-T Y.3510: Esta Recomendación identifica los requisitos para las capacidades de
infraestructura en la nube para apoyar los servicios de nube. El alcance de esta
Recomendación incluye: visión general de la infraestructura de la nube, los requisitos para
los recursos informáticos, los requisitos de recursos de la red, los requisitos de recursos de
almacenamiento, y los requisitos para la abstracción y control de recursos. La abstracción
y control de los recursos físicos son medios esenciales para alcanzar a la carta y las
características elásticas de infraestructura Cloud.

• UIT-T Y.3520: Describe la plataforma de computación en nube necesaria para la gestión

de recursos de los usuarios finales; por tanto, proporciona un marco para la gestión de
extremo a extremo de los recursos de computación en nube. Esta Recomendación incluye
(a) conceptos generales de extremo a extremo la gestión de recursos de Cloud Computing,
(b) una visión para la adopción de la gestión de recursos de computación en nube en un
entorno rico en telecomunicaciones, y (c) la gestión de extremo a extremo de los recursos
y servicios de la nube a través de múltiples plataformas, es decir, la gestión de todo el
hardware y el software utilizado en favor de la prestación de servicios en la nube.

• UIT-T Y.3511: Marco de la computación en nube para la comunicación interredes y la

infraestructura. Esta recomendación describe el marco para las interacciones de múltiples
proveedores de servicios Cloud (CSP) que se conoce como inter-Cloud Computing. Sobre
la base de los casos de uso que implican varios CSP y la consideración de los diferentes
tipos de ofertas de servicios, esta recomendación se describe la posible relación entre
varios CSP, las interacciones, y los requisitos funcionales pertinentes.

• UIT-T X.1600: Marco de seguridad para el Cloud Computing. En esta recomendación se

analizan las amenazas y los retos en el entorno de Cloud Computing en cuanto a seguridad;
también describe las capacidades de seguridad que podrían mitigar estas amenazas y
desafíos a la seguridad. Se proporciona una metodología marco para determinar cuál de
estas capacidades de seguridad requerirá de especificación para mejorar la mitigación de

188
 Unidad V

las amenazas de seguridad y hacer frente a los desafíos de seguridad de la computación

en nube. De otra parte, la ITU-T también ha hecho esfuerzos conjuntos con la ISO
(International Standards Organization) y la IEC (International Electrotechnical Commission),
y han desarrollado algunas recomendaciones conjuntas a través de la JTC (Joint Technical
Commission) ó Comisión Técnica Conjunta denominada ISO/IEC 1, encargada de
Tecnologías de la Información, y el subcomité 38, conocido como DAPS (Distributed
application platforms and services). Estas normas son:

• UIT-T [Link] | ISO / IEC 17788: Información general y vocabulario de Cloud Computing.
Esta Recomendación proporciona una visión general de la computación en nube, junto con
un conjunto de términos, definiciones y conceptos. Es aplicable a todo tipo de organización
(por ejemplo, empresas comerciales, agencias gubernamentales, organizaciones sin fines
de lucro).

• UIT-T [Link] | ISO / IEC 17789: Esta Norma Internacional especifica la arquitectura de
referencia de Cloud Computing.

• También se está trabajando en aspectos de Calidad del Servicio en Cloud Computing

tales como el Acuerdo de Nivel de Servicio (SLAService Level Agreement), en sus aspectos
básicos y su terminología. Allí se describe una visión general de los SLA de servicios en la
nube, conceptos y requerimientos que pueden ser usados para construir los SLA, y los
términos y las métricas de uso común en los SLA de servicios en la nube. Esta norma es
para el beneficio y el uso tanto del proveedor y del cliente. Esta norma no proporciona una
estructura estándar que se utiliza para los contratos de SLA. Esta norma tiene por objeto
establecer un conjunto de bloques de construcción de SLA comunes (conceptos, términos,
definiciones, contextos) que luego pueden ser utilizados para crear SLAs, lo que ayudará a
evitar confusiones y facilitar la comprensión común entre los proveedores de servicios
Cloud y los clientes de servicios Cloud.

Otra entidad que ha iniciado labores de estandarización es la IETF (Internet Engineering

Task Force), entidad que genera los estándares de Internet. La IETF tiene un grupo de
trabajo en Cloud Computing y hasta el momento ha generado el RFC 6208, que describe
los tipos de medios para las interfaces de Gestión de Datos de Nubes (Cloud Data
Management Interface-CDMI- Media Types). En este documento se describen varios tipos
de medios de internet definidos para la Interfaz de Manejo de Datos en la Nube (CDMI) por
la Asociación de industrias de Redes de Almacenamiento (SNIA). Los tipos de medios son:

• Aplicación / CDMI-objeto

• Aplicación / CDMI-contenedor

• Aplicación / CDMI-dominio

• Aplicación / CDMI-capacidad

• Aplicación / CDMI-cola

189
 Unidad V

La CDMI propone un grupo de interfaces funcionales entre datos y la gestión de los mismos
(control) para crear, editar, actualizar y borrar los datos en un almacenamiento en la nube.
Otro concepto es el estándar de metadatos, Los metadatos facilitan el flujo de trabajo
convirtiendo datos automáticamente de un formato a otro. Para eso es necesario que los
metadatos describan el contenido y estructura de los datos. Algunos metadatos hacen
posible una compresión de datos más eficaz. Por ejemplo, si en un vídeo el software sabe
distinguir el primer plano del fondo puede usar algoritmos de compresión diferentes y así
mejorar la cuota de compresión.

Otras organizaciones que han tomado un papel importante en la estandarización de los

sistemas de Cloud Computing por las vías de hecho son:

• Open Grid Forum (OGF): Es una comunidad abierta comprometida en ir con la rápida
evolución y la adopción de Computación distribuida aplicada. El propósito de este grupo es
la creación de una solución práctica para interconectarse con Infraestructuras de Nubes
expuestas como Servicio (IaaS). Esta comunidad complementa su trabajo con foros
abiertos que construye la comunidad, explora tendencias, comparte buenas prácticas y
consolida estas prácticas en estándares.

• Cloud Computing Interoperability Forum (CCIF): Fue conformado para dinamizar el

ecosistema de Cloud Computing de manera que las empresas trabajen de manera conjunta
para la adopción amplia de la tecnología de Cloud Computing y servicios relacionados. Se
ha puesto especial énfasis en la creación de una estructura común que permita la capacidad
de intercambiar información entre dos plataformas de Cloud Computing de manera
unificada.

• DMTF: Está trabajando en los estándares de virtualización en la Iniciativa de Gestión de

la Virtualización (VMAN-Virtualization Management Initiative). En el 2009 anunció los
estándares de Formatos de Virtualización abiertos (OVF- Open Virtualization Format), los
cuales simplifican la interoperabilidad, seguridad y gestión del ciclo de máquina virtual
mediante la descripción de un formato extensible, abierto, seguro, portable y eficiente para
el empaquetado y distribución de una o más aplicaciones virtuales. Esto permite a los
desarrolladores de Software lanzar soluciones pre-configuradas y listas para implementar,
permitiendo a los usuarios finales distribuir aplicaciones en sus ambientes con mínimo
esfuerzo. Este estándar también puede servir como bloques de construcción para Cloud
Computing.

• Open Cloud Consortium (OCC): Es una organización sin ánimo de lucro establecida y
dirigida por la Universidad de Illinois en Chicago, que está investigando la creación de
interfaces entre nubes con el objetivo de desarrollar estándares de Compatibilidad. El
objetivo de tales estándares es permitir las transiciones suaves de un servicio Cloud a otro.
Esta organización también está investigando sobre el uso del protocolo UDP-Based Data
Transfer (UDT) en la capa de transporte para lograr el volcado de transferencia de datos de
alta velocidad.

• Cloud Security Alliance: Es una organización sin ánimo de lucro formada para promover
el uso de mejores prácticas para proveer aseguramiento de la seguridad dentro de sistemas

190
 Unidad V

Cloud Computing. También trabaja en proveer educación en el uso de Cloud Computing

para ayudar a asegurar otras formas de Computación.

• ETSI: El comité Técnico GRID de la ETSI, está actualizándose en términos de referencia

para incluir las tendencias comerciales emergentes con énfasis en acceso de red ubicuo
para recursos de almacenamiento y computación escalables. TC GRID tiene un interés
particular en desarrollar soluciones interoperables en situaciones que envuelven las
industrias de TI y Telecomunicaciones, en particular en el modelo de entrega de IaaS
(Infrastructure as a Service).

5.5 Plataformas tecnológicas

Plataformas Cloud Computing analizadas

Amazon Elastic Compute Cloud (EC2)

Amazon Elastic Compute Cloud (Amazon EC2) es un servicio web que proporciona
capacidad informática con tamaño modificable en la nube. Está diseñado para facilitar a los
desarrolladores recursos informáticos escalables y basados en web. Amazon EC2 reduce
el tiempo necesario para obtener y arrancar nuevas instancias de servidor en minutos, lo
que permite escalar rápidamente la capacidad, ya sea aumentándola o reduciéndola, según
cambien sus necesidades. Amazon EC2 cambia el modelo económico de la informática, al
permitir pagar sólo por la capacidad que utiliza realmente. Amazon EC2 presenta un
auténtico entorno informático virtual, que permite utilizar interfaces de servicio web para
iniciar instancias con distintos sistemas operativos, cargarlas con su entorno de
aplicaciones personalizadas, gestionar sus permisos de acceso a la red y ejecutar su
imagen utilizando los sistemas que desee.

Windows Azure

Windows Azure es una plataforma de nube abierta y flexible que permite compilar,
implementar y administrar aplicaciones rápidamente en una red global de centros de datos
administrados por Microsoft. Puede compilar aplicaciones en cualquier lenguaje,
herramienta o marco, permitiendo además integrar sus aplicaciones de nube públicas con
el entorno de TI existente.

Google App Engine

Google App Engine permite crear y alojar aplicaciones web en los mismos sistemas
escalables con los que funcionan las aplicaciones de Google. Google App Engine ofrece
procesos de desarrollo y de implementación rápidos, y una administración sencilla, sin
necesidad de preocuparse por el hardware, las revisiones o las copias de seguridad y una
ampliación sin esfuerzos. Las aplicaciones Google App Engine son fáciles de crear, fáciles
de mantener y fáciles de escalar a medida que el tráfico y las necesidades de

191
 Unidad V

almacenamiento de datos crecen. Con App Engine no es necesario mantener ningún

servidor. Basta con cargar su aplicación y esta ya se encontrará lista para servir a los
usuarios.

Red Hat Openshift

OpenShift es la oferta de plataforma como servicio para Computación en la nube de Red

Hat. En esta plataforma los desarrolladores de aplicaciones pueden construir, desplegar,
probar y correr sus aplicaciones. Prporciona espacio en disco, recursos de CPU, memoria,
conectividad de red y un servidor Apache o JBoss. Dependiendo del tipo de aplicación que
se está construyendo, también proporciona acceso a una plantilla de sistema de archivos
para esos tipos (por ejemplo PHP, Python y Ruby/Rails). También proporciona
herramientas de desarrollo integradas para apoyar el ciclo de vida de las aplicaciones,
incluyendo la integración de Eclipse, JBoss Developer Studio, Jenkins, Maven y GIT.
OpenShift utiliza un ecosistema de código abierto para proporcionar servicios clave de la
plataforma de aplicaciones móviles (Appcelerator), servicios NoSQL (MongoDB), servicios
de SQL (PostgreSQL, MySQL), y más. JBoss proporciona una plataforma de middleware
empresarial para aplicaciones Java, proporcionando apoyo para Java EE6 y servicios
integrados tales como transacciones y mensajes, que son fundamentales para las
aplicaciones empresariales.

IBM SmartCloud

SmartCloud ofrece una gestión de cloud con el valor agregado que permite la elección y la
automatización más allá del aprovisionamiento de máquinas virtuales. IBM SmartCloud
Enterprise+ es un entorno Cloud seguro, totalmente administrado y listo para producción,
diseñado para garantizar una alta performance y disponibilidad. SmartCloud Enterprise+
ofrece un control completo de «governance», administración y gestión, permitiendo definir
acuerdos de nivel de servicio (SLA) para alinear las necesidades de negocio y los requisitos
de uso. Ofrece además múltiples opciones de seguridad y aislamiento, integrados en la
infraestructura virtual y de red, manteniendo el cloud separado de otros entornos cloud.

VM Cloud Suite

La virtualización de VMware ha ayudado a los clientes a reducir drásticamente los gastos

de capital gracias a la consolidación de servidores. Ha mejorado los gastos de explotación
mediante la automatización y ha minimizado la pérdida de ingresos porque reduce el tiempo
de inactividad, planificado y no planificado. Sin embargo, las empresas actuales también
necesitan reducir el tiempo de comercialización de sus productos y servicios. Las unidades
de negocio exigen acceso rápido a los recursos de TI y a las aplicaciones.

Openstack

OpenStack es un conjunto de proyectos de software de código abierto que las empresas /

proveedores de servicios pueden usar para configurar y ejecutar su nube de computación

192
 Unidad V

e infraestructura de almacenamiento. Rackspace y la NASA son los contribuyentes iniciales

clave para la pila. Rackspace contribuyó con su plataforma «Archivos en la Nube» (código)
para alimentar la parte de almacenamiento de objetos de OpenStack, mientras que la NASA
aportó su plataforma «Nebulosa» (código) para alimentar la parte Compute. El Consorcio
OpenStack ha logrado tener más de 100 miembros, incluyendo Canonical, Dell, Citrix, etc
en menos de un año. OpenStack hace que sus servicios se encuentren disponibles por
medio de una API compatible con Amazon EC2/S3. Por lo tanto, las herramientas cliente
escritas para AWS se pueden utilizar con OpenStack.

Características evaluadas de las plataformas Cloud Computing

En la instancia de diseño del cuadro comparativo que puede descargarse desde aquí, se
seleccionaron un conjunto de características que por diversas razones fueron consideradas
relevantes. A continuación, se define cada una de ellas.

Escalabilidad automática (auto-scaling)

Brinda la posibilidad de incrementar o reducir de manera automática, utilizando un monitor

provisto por la plataforma, la cantidad de recursos asignado a un sistema o aplicación.

Blueprints / Imágenes para acelerar el aprovisionamiento

Las imágenes o blueprints son máquinas virtuales que ya disponen de un sistema operativo
y de los aplicativos o marcos de trabajo (frameworks) instalados y preconfigurados, para
que sea más rápido comenzar a trabajar en la plataforma, permitiendo al usuario final
focalizarse en la construcción o despliegue de sus aplicaciones. Un ejemplo popular de
blueprint es llamado “LAMP”, imagen de máquina virtual conformada por Linux Apache
MySQL y PHP.

Soporta Sistema operativo Windows

Esta característica permite evaluar la capacidad de implementar sistemas o aplicaciones

de usuarios finales que operen bajo Sistemas Operativos Windows, y en caso afirmativo,
también definir cuáles de sus versiones son soportadas.

Soporta Sistema operativo Linux

Esta característica permite evaluar la capacidad de implementar sistemas o aplicaciones

de usuarios finales que operen bajo Sistemas Operativos Linux, y en caso afirmativo,
también definir cuáles de sus versiones son soportadas.

Soporte para lenguajes

Esta característica permite definir cuáles son los lenguajes soportados por las distintas
plataformas en análisis.

193
 Unidad V

Soporte para almacenamiento de datos

Define cuáles son los medios físicos que ofrecen las plataformas analizadas para la
persistencia de datos.

Soporte para Colas (queues)

Define cuáles son los soportes para colas brindados por las diferentes plataformas. Una
cola es una estructura de datos, caracterizada por ser una secuencia de elementos en la
que la operación de inserción push se realiza por un extremo y la operación de extracción
pop por el otro. También se le llama estructura FIFO (del inglés First In First Out), debido a
que el primer elemento en entrar será también el primero en salir.

Servidor Web

Esta característica permite evaluar cuáles son las opciones de servidores web (del inglés
web server) ofrecidas por cada proveedor. Un servidor web o servidor HTTP es un programa
informático que procesa una aplicación del lado del servidor realizando conexiones
bidireccionales y/o unidireccionales, y síncronas o asíncronas con el cliente generando o
cediendo una respuesta en cualquier lenguaje o Aplicación del lado del cliente.

Alternativas de hipervisor

Permite evaluar cuáles son los hipervisores disponibles ofrecidos por cada plataforma. Un
hipervisor (del inglés hypervisor) o monitor de máquina virtual (virtual machine monitor) es
una plataforma que permite aplicar diversas técnicas de control de virtualización para utilizar
al mismo tiempo diferentes sistemas operativos en una misma computadora.

Cache In-Memory distribuido / DataGrid

Los caches distribuidos o datagrids son frecuentemente implementados por tablas de hash
distribuidas. Las tablas de hash distribuidas (en inglés, Distributed Hash Tables, DHT) son
una clase de sistemas distribuidos descentralizados que proveen un servicio de búsqueda
similar al de las tablas de hash, donde pares (clave, valor) son almacenados en el DHT, y
cualquier nodo participante puede recuperar de forma eficiente el valor asociado con una
clave dada.

Esta clase de productos ofrecen el beneficio de mejorar los tiempos de respuesta para la
búsqueda de datos, con respecto a los mecanismos de persistencia tradicionales, tales
como base de datos relacionales (BDR), puesto que para acceder a un set de datos alojado
en una BDR generalmente se debe establecer una comunicación TCP y luego acceder al
dato realizando una lectura de disco, lo cual es menos eficiente que los caches distribuidos,
a los cuales generalmente se accede por protocolo TCP y luego se accede al dato
almacenado en memoria RAM (Random Access memory).

194
 Unidad V

Soporte para tecnologías Big Data

Las tecnologías Big Data (del idioma inglés grandes datos) hace referencia a los sistemas
que manipulan grandes conjuntos de datos (o data sets). Las dificultades más habituales
en estos casos se centran en la captura, el almacenado, búsqueda, compartición, análisis,
y visualización. La tendencia a manipular ingentes cantidades de datos se debe en muchos
casos a la necesidad de incluir los datos del análisis en un gran conjunto de datos
relacionado, tal es el ejemplo de los análisis de negocio, los datos de enfermedades
infecciosas, la lucha contra el crimen organizado, etc.

(Bocchio, 2015).

5.6 Seguridad e interoperabilidad.

La característica principal de un Servicio Web es que le permite cierto grado

de flexibilidad, accesibilidad e interoperabilidad. Esto permite que los desarrolladores
abstraigan la lógica de negocio y se centren en el desarrollo del servicio sin preocuparse
de los criterios anteriormente citados.

Como objetivos básicos a cubrir por la seguridad de un servicio WEB

El Instituto de Ingenieros Eléctricos y Electrónicos (IEEE) define interoperabilidad como la

habilidad de dos o más sistemas o componentes para intercambiar información y utilizar la
información intercambiada.

La característica principal de un Servicio Web es que le permite cierto grado de flexibilidad,

accesibilidad e interoperabilidad. Esto permite que los desarrolladores abstraigan la lógica
de negocio y se centren en el desarrollo del servicio sin preocuparse de los criterios
anteriormente citados.

Como objetivos básicos a cubrir por la seguridad de un servicio WEB

▪ Es necesario asegurar que existe una autenticación mutua entre el cliente que
accede a los servicios web y el proveedor de dichos servicios.
▪ Se debe mantener una política de autorización del acceso a recursos y, más
importante, a operaciones y procesos en un entorno en el que debe administrarse y
controlarse el acceso de clientes, proveedores, vendedores, competidores y los
posibles ataques que reciban de personal externo.
▪ Mantener al cliente identificado, de manera que se identifique una sola vez y pueda
acceder a servicios en diversos sistemas, sin que resulte necesario identificarse
nuevamente en cada uno de ellos.

195
 Unidad V

▪ Controlar y asegurar la confidencialidad de los datos intercambiados, ya que SOAP

no es capaz de cifrar la información, la cual viaja en claro a través de la red.
Es necesario asegurar la comunicación con algún estándar que permita crear un
canal seguro de comunicación. El estándar ya firmemente establecido de creación
de canales seguros SSL y el cifrado de partes específicas de documentos mediante
el cifrado XML son las direcciones que se están siguiendo en este terreno.
▪ Se debe asegurar la integridad de los datos, de manera que estén protegidos a los
posibles ataques o a manipulaciones fortuitas. En este campo se está utilizando el
estándar de firmas XMLDSIG, que permiten la firma de partes específicas del
documento XML.
▪ Comprobar que no se repudian las operaciones, para lo cual es necesario mantener
firmas en XML.

A continuación, se ofrece una tabla resumen con los principales elementos de seguridad
dentro de los servicios Web, así como las recomendaciones de madeja al respecto.

Tabla 23. Principales elementos de seguridad dentro de los servicios Web

196
 Unidad V

Los protocolos de seguridad para servicios web comienzan por la especificación WS-
Security que define una arquitectura basada en señales para comunicaciones seguras.
Existen seis principales especificaciones de componentes construidas sobre esa base:

▪ WS-Policy y sus especificaciones relacionadas, que definen las reglas de políticas

sobre la interacción de servicios.
▪ WS-Trust, que define el modelo confiable para el intercambio seguro.
▪ WS-Privacy, que define cómo se mantiene la privacidad de las informaciones.
▪ WS-Secure Conversation, que define cómo establecer una sesión protegida entre
servicios para intercambiar datos usando las reglas definidas en WS-Policy, WS-
Trust, y WS-Privacy.
▪ WS-Federation, que define las reglas de identidad distribuida y de la gestión de esa
identidad.
▪ WS-Authorization, que maneja el procesamiento de autorización para acceder a los
datos e intercambiarlos.
Además del modelo de seguridad, existen las especificaciones específicas de las
aplicaciones, incluyendo el lenguaje de ejecución de procesos empresariales para servicios
web (BPEL4WS), que define las operaciones de flujos de trabajo, y WS-Transaction y WS-
Coordination, que funcionan en conjunto para manejar el procesamiento distribuido de
transacciones.

Actualmente está en desarrollo una especificación para la gestión distribuida de servicios

web que trata de la gestión administrativa de software de todos los servicios y de la
arquitectura orientada a servicios. Por fin, existen especificaciones para interfaces de
usuario (WS-InteractiveApplications) y acceso remoto a servicios web (WS-RemotePortals).
Las especificaciones y protocolos para servicios web aún están siendo definidas y sólo
están comenzando a explicar cómo los servicios deben interactuar. Sin embargo, no
pueden abarcar todas las situaciones y combinaciones posibles. Así, el Web Services
Interoperability Group (WS-I), constituido por prácticamente todos los grandes y pequeños
proveedores involucrados en el desarrollo de los servicios web, se encargó de la tarea de
desarrollar estudios de caso, ejemplos de aplicaciones, casos de ejemplo de
implementación y herramientas de prueba para asegurar que esos estándares y
especificaciones realmente funcionarán los unos con los otros, independientemente de las
implementaciones de productos de los proveedores.

WS-I ha definido su primer Basic Profile 1.0 para servicios web y también ha lanzado sus
casos de ejemplo, ejemplos de aplicaciones y herramientas de prueba para evaluar y
comparar resultados de varias implementaciones de acuerdo con los casos de ejemplo.

Además de WS-I, una buena parte del trabajo de los estándares está siendo realizado por
la Organización para el Avance de Estándares de Informaciones Estructuradas (OASIS), el
World Wide Web Consortium (W3C) y el Grupo de Trabajo de Ingeniería de Internet (IETF).

197
 Unidad V

Actividades de aprendizaje

Realizar un mapa mental sobre la unidad V de forma digital, puede apoyarse en este
material de lectura y si gusta complementar con otra fuente bibliográfica.

Valor: 25%

Prácticas

Práctica 1: Realizar un registro en alguna plataforma de cómputo en la nube para publicar

su proyecto web realizado a lo largo del semestre.

Valor: 15%

198
 Unidad V

ORIENTACIONES SOBRE LA EVALUACIÓN.

A continuación, se detallan los criterios de evaluación de la unidad V:

Actividad de Aprendizaje Valor

Mapa Mental 20%
Registro en una plataforma de la nube 15%
Entrega de proyecto final publicado en 45%
la plataforma registrada
Evaluación Teórica 20%
Total 100%

Calendarización de evaluación en semanas:

Semana 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
TP Evaluación
Unidad V
TR

199
 Proyecto de Asignatura

PROYECTO DE ASIGNATURA

El objetivo del proyecto en esta asignatura es demostrar el desarrollo y alcance de la(s)

competencia(s) de la asignatura, considerando las siguientes fases:

Fundamentación: marco referencial (teórico, conceptual, contextual, legal) en el cual se

fundamenta el proyecto de acuerdo con un diagnóstico realizado, mismo que permite a los
estudiantes lograr la comprensión de la realidad o situación objeto de estudio para definir
un proceso de intervención o hacer el diseño de un modelo.

Planeación: con base en el diagnóstico en esta fase se realiza el diseño del proyecto
por parte de los estudiantes con asesoría del docente; implica planificar un proceso: de
intervención empresarial, social o comunitario, el diseño de un modelo, entre otros, según
el tipo de proyecto, las actividades a realizar los recursos requeridos y el cronograma de
trabajo.

Ejecución: consiste en el desarrollo de la planeación del proyecto realizada por parte de

los estudiantes con asesoría del docente, es decir en la intervención (social, empresarial),
o construcción del modelo propuesto según el tipo de proyecto, es la fase de mayor duración
que implica el desempeño de las competencias genéricas y especificas a desarrollar.

Evaluación: es la fase final que aplica un juicio de valor en el contexto laboral-profesión,

social e investigativo, ésta se debe realizar a través del reconocimiento de logros y aspectos
a mejorar se estará promoviendo el concepto de “evaluación para la mejora continua”, la
metacognición, el desarrollo del pensamiento crítico y reflexivo en los estudiantes.

El proyecto a realizar debe ser un sitio web dinámico, el alumno puede elegir la temática.

El sitio web a realizar debe cumplir con todo lo que se vaya realizando en las prácticas de
cada unidad de la asignatura:

*Uso de etiquetas html

*Uso de php

*Uso de css

*Registrar, eliminar, actualizar datos.

*Finalmente publicar el sitio web terminado en una plataforma de cómputo en la

nube.

Los tiempos de revisión del proyecto serán en cada unidad entregando un avance de
acuerdo a los temas correspondientes por unidad.

200
REFERENCIAS

Amazon Web Services. (2021). Obtenido de [Link]

storage/

axarnet. (s.f.). Obtenido de [Link]

servidor#:~:text=Los%20lenguajes%20de%20programaci%C3%B3n%20del%20la
do%20del%20cliente%20se%20utilizan,HTML%20y%20se%20ejecuta%20interpre
tado.

Bahit, E. (2010). Programador PHP. sefe creative. Obtenido de

[Link]

Bahit, E. (2011). POO Y MVC EN PHP. El paradigma de la Programación Orientada a

Objetos en PHP y el patrón de arquitectura de Software MVC. Obtenido de
[Link]
content/uploads/2014/12/[Link]

Bocchio, F. (16 de Septiembre de 2015). EVALUANDO [Link]. Obtenido de Estudio

comparativos de plataformas Cloud Computing:
[Link]
computing/

Celaya Luna, A. (2014). Creación de páginas web: HTML 5. ICB. Obtenido de

[Link]

Contreras Castañeda, M. Á. (2016). Desarrollo de aplicaciones web multiplataforma.

España: Ministerio de Educación de España. Obtenido de
[Link]

Ferrer Martínez, J. (2015). Implantación de aplicaciones web. Madrid, Spain: RA-MA

Editorial. Obtenido de [Link]

Guerrero Pérez, R. (2015). Elaboración de documentos web mediante lenguajes de marcas

(UF1841). Antequera, Málaga, Spain.: IC Editorial. Obtenido de
[Link]

HOPELCHEN. (s.f.). Obtenido de

[Link]

Latorre Ariño, M. (Marzo de 2018). Universidad Marcelino Champagnat. Obtenido de

[Link]

López Quijado, J. (2014). Domine PHP y MySQL, 2a. ed. (R.-M. Editorial, Editor) Obtenido
de [Link]

Mateu, C. (2004). Software Libre. Desarrollo de aplicaciones web. (Primera Edición ed.).
Barcelona: Eureca Media. Obtenido de
 [Link]
aplicaciones%[Link]

Microsoft. (2018). Obtenido de [Link]

es/azure/architecture/patterns/

Molina Rios, J., Zea Ordóñez, M. P., Contento Segarra, M. J., & García Zerda, F. G. (14 de
Marzo de 2018). 3ciencias. Recuperado el 23 de Abril de 2021, de
[Link]

Oracle. (2021). Obtenido de [Link]

Orós Cabello, J. C. (2014). Diseño de páginas web con XHTML, JavaScript y CSS. Madrid:
RA-MA Editorial. Obtenido de [Link]

Padilla Aguilar, J., & Pinzón Castellanos, J. (2015). ESTÁNDARES PARA CLOUD
COMPUTING: ESTADO DEL ARTE Y ANÁLISIS DE PROTOCOLOS PARA
VARIAS NUBES. Obtenido de
[Link]
DARES%20PARA%20CLOUD%[Link]?sequence=1&isAllowed=y

Pérez Martínez, E. (2015). Desarrollo de aplicaciones mediante el Framework de Spring.

RA-MA. Obtenido de [Link]

Pérez, D., & Cobo, A. (2007). PHP y MySQL: Tecnologías para el desarrollo de aplicaciones
web. Madrid, Spain: Ediciones Díaz de Santos. Obtenido de
[Link]

Recio García, J. A. (2016). HTML5, CSS3 y JQuery: Curso práctico. Paracuellos de Jarama,
Madrid: RA-MA. Obtenido de [Link]

Red Hat. (2021). Obtenido de [Link]

cloud-services

Uniwebsidad. (s.f.). Obtenido de [Link]

3/estructuras-de-control-de-flujo

Uniwebside. (2006-2021). Obtenido de [Link]

4#:~:text=El%20modelo%20de%20cajas%20o,se%20representen%20mediante%2
0cajas%20rectangulares.

Zofío Jiménez, J. (2013). Aplicaciones web. Madrid, Spain: Mcmillan Iberia, S.A. Obtenido
de [Link]
ANEXOS
 Anexos

NOMBRE DEL ALUMNO: _________________________________________ FECHA: __________

MATERIA: ________________________________________SEMESTRE: ___________________
DOCENTE: MTI. ALEJANDRINA ISABEL CRUZ RODRIGUEZ_ EXAMEN: ORDINARIO UNIDAD I

INSTRUCCIÓN 1: RELACIONA CADA PREGUNTA CON SU RESPUESTA CORRECTA

1. Está compuesto por los módulos que incrementa la capa de presentación y que ( )ARPANET
se ejecuta en un servidor web:
2. Permite el intercambio de información en las páginas web. Opera por petición y ( )TCP/IP
respuesta entre el cliente y el servidor:
3. Es en donde se tienen las direcciones IP con sus correspondientes URL, este ( ) MOSAIC
proceso es el que se lleva a cabo entre la comunicación de las computadoras:
4. Red creada en 1969, con un inicio de 4 computadoras: ( )Tim Berners-Lee
5. También es conocida como arquitectura Cliente/ Servidor: ( ) HTML
6. Está compuesto por el servidor de BD que maneja la aplicación web: ( )HTTP
7. Permite la comunicación entre las computadoras: ( )URL
8. Está compuesta por las páginas HTML que el usuario solicita a un servidor web ( )DNS
y se visualiza mediante un navegador:
9. Fue el primer navegador y es así como evoluciona la web: ( )ARQUITECTURA
DE DOS CAPAS
10. Se refiere a la dirección única que identifica una página web: ( ) CAPA DE
PRESENTACIÓN
11. Es conocido como el Padre de la Web: ( ) LOGICA DE
NEGOCIO
12. Permite mostrar páginas con hipertexto ( ) NIVEL DE
DATOS

INSTRUCCIÓN 2: CONTESTA CORRECTAMENTE LAS SIGUIENTES PREGUNTAS.

1. Define que es una aplicación web:

2. Menciona como ha sido la evolución de las páginas web:

3. Menciona dos servidores web:

4. Explica en un diagrama la arquitectura de dos capas:

5. Explica en un diagrama la arquitectura de tres capas:

6. Menciona las fases para la planificación de un sitio web y descríbelas brevemente:

204
 Anexos

NOMBRE DEL ALUMNO: _________________________________________ FECHA: __________

MATERIA: ________________________________________SEMESTRE: ___________________
DOCENTE: MTI. ALEJANDRINA ISABEL CRUZ RODRIGUEZ_ EXAMEN: ORDINARIO UNIDAD II

INSTRUCCIONES: RESPONDE CORRECTAMENTE LAS PREGUNTAS:

1. Menciona cuales son las tecnologías front-end

2. Menciona cuales son las tecnologías back-end

3. Define que es html

4. Plasma la estructura básica de html

5. Define que es css

6. Plasma la estructura básica de css

7. Plasma la estructura básica para crear un menú de navegación

8. Plasma la estructura básica para crear una lista sin ordenar

9. Define como vinculamos un archivo css con un documento de html

10. Explica los pasos y la estructura de las carpetas para crear nuestro primer sitio
usando xampp

205
 Anexos

NOMBRE DEL ALUMNO: _________________________________________ FECHA: __________

MATERIA: ________________________________________SEMESTRE: ___________________
DOCENTE: MTI. ALEJANDRINA ISABEL CRUZ RODRIGUEZ_ EXAMEN: ORDINARIO UNIDAD III

INSTRUCCIONES: RESPONDE CORRECTAMENTE LAS PREGUNTAS:

1) Define que es un framework:

2) Cuál es el uso que le podemos dar a un framework:

3) Menciona el objetivo de un framework:

4) Define que es el MVC:

5) Menciona 3 ejemplos de framework:

6) Plasma un diagrama sobre el MVC:

206
 Anexos

NOMBRE DEL ALUMNO: _________________________________________ FECHA: __________

MATERIA: ________________________________________SEMESTRE: ___________________
DOCENTE: MTI. ALEJANDRINA ISABEL CRUZ RODRIGUEZ_ EXAMEN: ORDINARIO UNIDAD V

Responde correctamente las siguientes preguntas.

1.- ¿Qué es la computación en la nube?

2.- ¿Qué tipos de nubes existen?

3.- Explica en que consiste el modelo IAAS:

4.- Explica en que consiste el modelo PAAS:

5.- Explica en que consiste el modelo SASS:

6.- Menciona 1 ejemplo de empresa que ofrecen servicio IAAS, SAAS, PAAS:

207