61T ProgramacionWeb Apuntes

PROGRAMACIÓN WEB 1
Unidad 1. Introducción A Las Aplicaciones Web.
1.1 Evolución De Las Aplicaciones Web.
En la historia humana, los medios de comunicación han evolucionado continuamente de
una forma progresiva. La humanidad se ha caracterizado por transmitir el conocimiento entre
generaciones. Esta es una característica que nos ha permitido el avance de la humanidad. Se
mencionan a continuación algunos acontecimientos importantes en la comunicación (Mora,
2002).
Año 1833 se realiza la distribución en masa de periódicos. Año 1844 se emite el primer
mensaje telegrafiado. Año 1858 se realiza el primer intento de tender un cable de
comunicaciones a través del Océano Atlántico. Año 1866 se tiende con éxito un cable de
comunicaciones a través del Océano Atlántico. Año 1876 Alexander Graham Bell inventa el
teléfono. Año 1901 se envía la primera señal de radio enviada a través del Océano Atlántico.
Año 1917 se realiza la primera llamada de teléfono transcontinental. Año 1927 se
proyecta la primera película hablada. Año 1939 en la feria mundial celebrada en New York es la
presentación de la televisión. Año 1950 inicio de las transmisiones de televisión a color. Año
1958 se inventa el módem por los laboratorios Bell. Año 1969 se crea ARPANET, el primer
internet el primer medio de comunicación que engloba todos los medios existentes, ya que
permite comunicación escrita, sonora y de vídeo.
Las bases del actual internet se crearon en la década de los sesenta (Comer, 2007). De
manera paralela y sin que hubiera conocimiento entre ellos en tres centros de investigación, se
desarrollaron estudios sobre la comunicación entre computadoras, las redes distribuidas y la

PROGRAMACIÓN WEB 2
conmutación de paquetes, estos centros fueron el MIT (Massachusetts Institute of Technology),
el RAND (Research and Development) y el NPL (National Physical Laboratory).
El origen de Internet se sitúa en plena Guerra Fría. En 1957, la URSS (Unión de
Repúblicas Socialistas Soviéticas) lanzó al espacio el primer satélite (Sputnik), ganando así la
carrera espacial hasta ese momento. Los Estados Unidos de Norteamérica, visualizó como una
amenaza bélica este acontecimiento, por lo que se desarrollaron distintas iniciativas entre ella fue
crear en 1958 el ARPA (Advanced Reseach Projects Agency). En 1962 comenzó el programa de
investigación computacional de ARPA. En 1966 inició el programa de comunicaciones y dentro
de este programa se desarrolló ARPANET (advanced research projects agency network), con el
objetivo de explorar la distribución y el uso compartido de recursos informáticos y las
comunicaciones basadas en conmutación de paquetes principalmente para facilitar la
comunicación entre los científicos.
De igual forma la Fuerza Aérea de Estados Unidos encargó a la RAND el estudio de
sistemas de comunicaciones digitales basados en sistemas distribuidos. El objetivo fue
desarrollar una red de comunicaciones militares contra ataques nucleares.
Por otro lado y para completar esta tecnología de Internet el NPL trabajó a mediados de
los sesenta en el desarrollo de paquetes y conmutación de paquetes; este es un método de agrupar
los datos transmitidos a través de una red digital en paquetes los cuales forman una cola y se
transmiten aun cuando la velocidad sea lenta.
El 29 de octubre de 1969 Leonar Kleinrock y su equipo enviaron desde su laboratorio en
la UCLA (Universidad de California, Los Angeles) el primer mensaje, de tan solo dos letras
PROGRAMACIÓN WEB 3
“LO”, que recibió a más de 500 kilómetros en la Universidad de Stanford. Este mensaje es la
base de lo que hoy conocemos como Internet.
El desarrollo de la Web (Word wide web) no se debe a una persona, sin embargo a Tim
Bernes-Lee se le deben los tres elementos clave: 1) HTML (HyperText Markup Language) es el
lenguaje para crear contenidos en la web. 2) HTTP (Hypertext Transfer Protocol) es el protocolo
de comunicación entre las computadoras de la web, es el encargado de transferir páginas web y
otros recursos. 3) URL (Uniform Resource Locator) es un medio de localización o
direccionamiento de los distintos recursos en Internet (Mora, 2002).
Sin embargo algunos acontecimientos importantes de la web tienen sus inicios en los
años cuarenta. En el año 1945 Vannevar Bush escribe un artículo “As we May Think” sobre un
dispositivo fotoeléctrico y mecánico “memex” para crear y seguir enlaces entre documentos
diferentes que se almacenaban en microfichas. Este es el precursor de hipertexto. En el año 1965
Ted Nelson acuña el término hipertexto en su artículo A file Structure for the Complex, the
Changing, and the Indeterminate. En donde manifiesta la inquietud de definir los tipos de
estructuras de archivo necesarios en el procesamiento de datos comerciales y científicos.
En el año 1967 Andy van Dam y equipo de investigación construyen HES (Hypertext
Editing System), el primer sistema de hipertexto para editar grandes cantidades de texto en
pantalla. Permiten enlaces dentro de un documento que conducen a otras partes del mismo
documento o bien a otro documento. Su fin fue para ser utilizado en la educación y permite a los
estudiantes agregar datos, conectar textos y navegar.
En el año 1978 Andrew Lippman del MIT (Instituto de Tecnología de Massachusetts)
desarrolla el sistema Aspen Movie Map, el primer sistema hipermedia en funcionamiento en

PROGRAMACIÓN WEB 4
videodisco. En el año 1980 Tim Berners-Lee escribe el programa “Enquire-Within-Upon-
Everything”, que permite crear enlaces entre nodos, cada nodo tiene título, tipo y enlace.
En el año 1990 Tim Berners-Lee inicia el desarrollo de un editor y navegador gráfico
hipertexto para el sistema operativo NeXTStep, de la computadora NeXT. Elige WorldWideWeb
como nombre del programa y “World Wide Web” como nombre del proyecto.
En el año 1990 Tim Berners instala el primer servidor web y se publica la primera página
web en el CERN (Conseil Européen pour la Recherche Nucléaire). En el año 1991 Paul Kunz
instala el primer servidor web fuera de Europa. Se instala el SLAC (Standord Linear Accelerator
Center). En el año 1992 aparecen los primeros navegadores Erwise, Viola y Midas.
En el año 1993 Se publica el navegador gráfico NCSA Mosaic para X-Windows basado
en Unix. Desarrollado por el National Center for Supercomputing Applications. Este se
considera el segundo navegador.
En el año 1993 los directores del CERN anuncian que la tecnología WWW podrá ser
usada gratuitamente por cualquier usuario, sin tener que pagar ningún tipo de licencia.
En el año 1994 se forma la empresa Netscape Communications Corporation y lanza
Netscape Navigator 1.0. En el año 1995 Sun Microsystems anuncia la existencia de java 1.0 y
Netscape soporta sus applets. En el año 1995 Aparece MicroSoft Internet Explorer 2.0.
1.2 Arquitectura De Las Aplicaciones Web.
La arquitectura de la aplicación web es un patrón de interacción entre los componentes de
la aplicación web. La forma en que se planifica esta interacción determina la resistencia, el
rendimiento y la seguridad de una aplicación web.

PROGRAMACIÓN WEB 5
Las aplicaciones web se basan en una arquitectura cliente/servidor. El cliente puede ser
un navegador, explorador o bien un visualizador (Yaskevich, 2017). Por otro lado está el
servidor web. Las arquitecturas tienen las variantes que a continuación se explican.
Todo en un servidor. Este modelo (figura 1.1) simple y riesgoso, donde una sola base de
datos es parte del único servidor de la aplicación web. Si el servidor se cae, también lo hace la
aplicación web. En este caso en solo una computadora se hospeda el servicio HTTP (Hypertext
Transfer Protocol) junto con la lógica de negocio y la lógica de datos y los datos (Mora, 2002).
Las tecnologías que emplea esta arquitectura son ASP (Active Server Pages) y PHP (Hypertext
Pre Processor).
Figura 1.1 Todo en un servidor. Fuente (Mora, 2002).
Servidor de datos separado. A partir de la arquitectura anterior, se separa la lógica de
datos y los datos a un servidor de bases de datos específico (figura 1.2). En este caso las
tecnologías que emplean esta arquitectura son ASP (Active Server Pages) y PHP (Hypertext Pre
Processor). La idea detrás de este modelo es que un servidor web no tiene que almacenar ningún
dato: incluso cuando obtiene información de un cliente, el servidor web la procesa, escribe los
datos en la base de datos (ubicada en una máquina físicamente separada) y se olvida de ellos.
Con al menos dos servidores web, reduce significativamente los riesgos de fallas. Incluso si uno
PROGRAMACIÓN WEB 6
de los servidores web deja de funcionar, otro se hace cargo de inmediato; todas las solicitudes se
re direccionan automáticamente al nuevo servidor y la aplicación web sigue ejecutándose. Sin
embargo, con solo una base de datos, todavía tiene riesgos de rendimiento: si falla, todo el
sistema también lo hará.
Figura 1. 2. Servidor de datos separado. Fuente (Mora, 2002).
Todo en un servidor con servicio de aplicaciones (figura 1.3). En este caso se separa la
lógica de negocio del servicio de HTTP y se incluye el servicio de aplicaciones para gestionar los
procesos que implementan lo lógica de negocio. La tecnología que se emplea es JSP (Java Server
Pages).
Figura 1.3. Todo en un servidor, con servicio de aplicaciones. Fuente (Mora, 2002).
PROGRAMACIÓN WEB 7
Servidor de datos separado, con servicio de aplicaciones. A partir de la arquitectura
anterior, se separa la lógica de datos y los datos a un servidor de bases de datos específico (figura
1.4). La arquitectura que se emplea es JSP (Java Server Pages).
Figura 1.4. Servidor de datos separado con servicio de aplicaciones. Fuente (Mora, 2002).
Todo separado. Las funciones de servidor web, el servidor de base de datos y el servidor
de aplicaciones se separan en tres servidores específicos (figura 1.5). La tecnología empleada es
JSP (Java Server Pages).
Figura 1.5. Todo separado. Fuente (Mora, 2002).

PROGRAMACIÓN WEB 8
El objetivo de separar los distintos servicios de lógica de negocio, lógica de datos y
HTTP en distintos servidores es con el fin de aumentar la escalabilidad del sistema con el fin de
obtener un mayor rendimiento. Al separar las distintas funcionalidades en distintos servidores,
cada uno de ellos se puede configurar de forma adecuada a los requisitos que presenta cada uno
de ellos. Otra ventaja es que se aísla la lógica de negocio y la lógica de datos en servidores
separados que no están conectados directamente a internet y se aumenta en nivel de seguridad, ya
que no es tan fácil acceder a ellos.
En algunos casos, las arquitecturas donde se separan el servicio de HTTP del resto de los
servicios es la única opción disponible. Un ejemplo de estos es en los sistemas heredados, en
donde ya no existe una lógica de negocio en un servidor de aplicaciones y una lógica de datos en
un servidor de bases de datos, la única forma de acceder desde internet al sistema heredado es a
través de un servidor que ofrezca un servicio de HTTP y se comunique internamente con el
servidor de aplicaciones.
Aplicación web HTML heredada. De acuerdo con la arquitectura de la aplicación web
muy básica, un servidor, que consta de la lógica de construcción de la página web y la lógica
empresarial, interactúa con un cliente enviando una página HTML completa (figura 1.6). Para
ver una actualización, el usuario debe recargar completamente la página o, en otras palabras, que
el cliente envíe una solicitud de una página HTML al servidor y cargue su código completo una
vez más (Yaskevich, 2017).

PROGRAMACIÓN WEB 9
Figura 1.6. Aplicación web HTML heredada. Fuente (Yaskevich, 2017).
Este tipo de arquitectura es altamente seguro, ya que todas las lógicas y datos se
almacenan en el servidor y el usuario no tiene acceso a él. Sin embargo, debido a la recarga
constante de contenido y al gran intercambio de datos, es más común para los sitios web
estáticos que están desapareciendo constantemente y dando paso a tipos de aplicaciones web más
ágiles e interactivas.
Aplicación web de widgets. En este tipo, la lógica de construcción de la página web se
reemplaza por servicios web, y cada página del cliente tiene entidades separadas
llamadas widgets (figura 1.7). Al enviar consultas AJAX a servicios web, los widgets pueden
recibir fragmentos de datos en HTML o JSON y mostrarlos sin recargar toda la página.
PROGRAMACIÓN WEB 10
Figura 1.7. Aplicación web de widgets. Fuente (Yaskevich, 2017).
Con actualizaciones de widgets en tiempo real, este tipo es más dinámico, compatible con
dispositivos móviles. Sin embargo, siempre tener en mente la disminución de la seguridad de
estas aplicaciones debido a que la lógica de la aplicación se desplazó parcialmente al lado del
cliente expuesto.
Arquitectura de aplicaciones web de una sola página. Con las aplicaciones de una sola
página (SPA), solo descarga una página web una vez. En el lado del cliente, esta página tiene una
capa de JavaScript que puede comunicarse libremente con los servicios web en el servidor y,
utilizando los datos de los servicios web, se actualiza en tiempo real. La forma en que funciona
se muestra en el diagrama de la figura 1.8.

Figura 1.8. Arquitectura de aplicaciones web de una sola página. Fuente (Yaskevich, 2017).
Los fragmentos de datos transferidos desde el servidor al cliente aquí son mínimos,
especialmente en comparación con el primer tipo. Se considera que este tipo de aplicación web
es muy ágil, receptiva y liviana, lo que facilita la transformación en una aplicación móvil híbrida.
1.3 Tecnologías Para El Desarrollo De Aplicaciones Web.
Podemos dividir estas tecnologías del lado del cliente por mencionar algunas JavaScript,
HTML, CSS; del lado del servidor se describen PHP, Python, Java EE, MySQL, Mongo DB.
JavaScript. Fue desarrollado por Brendan Eich, desarrollador de Netscape
Communications Corporation, en 1995. Su desarrollo inicial fue muy rápido, JavaScript inició
con el nombre Mocha, y antes se llamaba LiveScript. Siendo oficialmente renombrado a
JavaScript en una versión de Netscape Navigator en 1995. La palabra "Java" en "JavaScript" no
es una coincidencia, pero es confusa: aparte de una ascendencia sintáctica común, JavaScript
tiene más en común con Self (un prototipo basado lenguaje desarrollado en Xerox PARC a
mediados de los 80) y Scheme (un idioma desarrollado en la década de 1970 por Guy Steele y
Gerald Sussman, que a su vez fue influenciado por Lisp y ALGOL) que con Java. El nombre
JavaScript fue por mercadotecnia, aprovechando la popularidad que Java tenía en ese tiempo.
Al usar este lenguaje de programación multiplataforma, es posible dar una mayor
interactividad y dinamismo a los sitios web (Brown, 2016). Debido a que permite crear tanto
animaciones como objetos, localizar errores en formularios, cambiar elementos web de manera
intuitiva y crear cookies, etc. Además, también permite desarrollar aplicaciones tan robustas
como Facebook o Twitter. Por esto, JavaScript es una de las tecnologías web más usadas en la
actualidad.
HTML. El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee,
investigador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo
sistema de "hipertexto" para compartir documentos.
Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a
una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Junto con
el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada
WorldWideWeb (W3).
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el
nombre HTML tags. La primera propuesta oficial para convertir HTML en un estándar se realizó
en 1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque se
consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes,
tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+
consiguieron convertirse en estándar oficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar,
el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0
es el primer estándar oficial de HTML. A partir de 1996, los estándares de HTML los publica
otro organismo de estandarización llamado W3C (World Wide Web Consortium). La versión
HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML
publicada por el W3C. Esta revisión incorpora los últimos avances de las páginas web
desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.
Debido a que las tecnologías evolucionan continuamente, HTML está en constante
renovación, la versión actual es HTML5. Consiste en un conjunto de códigos cortos, que se
clasifican como archivos de textos en las etiquetas. Es decir, el texto se guarda en un archivo
llamado HTML que se puede encontrar a través de los buscadores. Cada una de las etiquetas
generadas tiene diferentes funciones. En resumen, HTML sirve para describir el contenido de un
sitio web, como la información estructurada de párrafos, imágenes, etc. Por eso, HTML es una
de las tecnologías web indispensables para la programación web (Dean, 2019).
CSS. En el idioma inglés (Cascading Style Sheets) es el lenguaje de hojas de estilo en
cascada y se usa para mejorar la estética de páginas web programadas en un lenguaje de marcado
como HTML (Gasston, 2015). CSS separa el contenido de la representación visual del sitio, ya
que HTML no fue diseñado para tener etiquetas que ayuden a dar formato y estética a la página.
El gran impulso de los lenguajes de hojas de estilos se produjo con el crecimiento de Internet y
del lenguaje HTML para la creación de documentos electrónicos. La competencia de
navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de
documentos con la misma apariencia en diferentes navegadores, de esta forma el
organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares
relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el
lenguaje HTML y se presentaron nueve propuestas.
Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style
Sheets) y la SSP (Stream-based Style Sheet Proposal). La propuesta CHSS fue realizada por
Håkon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se
unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron
CSS (Cascading Style Sheets).
En 1995, el W3C decidió apoyar el desarrollo y estandarización de CSS y lo añadió a su
grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial,
conocida como "CSS nivel 1". A principios de 1997, el W3C decide separar los trabajos del
grupo de HTML en tres secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y
el grupo de trabajo de CSS.
El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación
oficial, conocida como CSS nivel 2. El mismo año que se publicó CSS 1, Microsoft lanzaba su
navegador Internet Explorer 3.0, que disponía de un soporte bastante reducido de CSS. El primer
navegador con soporte completo de CSS 1 fue la versión para Mac de Internet Explorer 5, que se
publicó en el año 2000.
Es una de las tecnologías web a la que más recurren los programadores gráficos a la hora
de desarrollar sus proyectos. Es un lenguaje de diseño gráfico que sirve, entre otras muchas
funciones, para indicar la representación visual de las estructuras HTML, así como las
estructuras HTML definidas anteriormente deben representarse visualmente. De esta manera, el
lenguaje CSS sirve para acotar y trazar el aspecto visual de las etiquetas generadas por el HTML.
PHP. Es un acrónimo recursivo (no explica del todo el significado completo) de PHP
Hypertext Preprocessor. Es un lenguaje de código abierto muy popular especialmente adecuado
para el desarrollo web que puede ser incrustado en HTML . Su desarrollo se remonta a 1994,
cuando un desarrollador llamado Rasmus Lerdorf creó por primera vez un conjunto de scripts
CGI para monitorear las visitas a las páginas de su currículum en línea. Esta primera versión de
PHP, llamado PHP / FI, era bastante básico; aunque tenía soporte para entrada de formulario y
base de datos; carecía de muchas de las características de seguridad y complementos que se
encuentran en las versiones modernas de PHP. Lerdorf luego mejoró PHP / F1 1.0 y lo lanzó
como PHP / FI 2.0, pero solo fue en 1997, cuando los desarrolladores Andi Gutmans y Zeev
Suraski reescribieron el analizador PHP y lo lanzó como PHP 3.0, que el movimiento PHP
realmente comenzó a ser popular y comenzó a aparecer en muchos miles de servidores web.
La característica principal de PHP es que se usa para la comunicación de tu sitio web con
un servidor de datos. Debido a esta comunicación, es posible crear un contenido dinámico que
permite trabajar con bases de datos como MySQL y con HTML. Así, gracias a este lenguaje de
programación de propósito general, es posible ingresar datos de formularios, la modificación de
base de datos o la administración de archivos en el servidor, entre muchos otras funciones.
Python. La historia de este lenguaje de programación se remonta hacia finales de los 80s
y principio de los 90s, su implementación comenzó en diciembre de 1989 cuando Guido Van
Rsossum quien trabajaba en el CWI (Centrum Wiskunde & Informatica) un centro de
investigación holandés de investigación en matemáticas y ciencias, decide iniciar el proyecto
como un pasatiempo dándole continuidad al lenguaje de programación ABC del que había
formado parte del equipo de desarrollo en el mismo centro. Este lenguaje se enfocaba en ser fácil
de usar y aprender manteniendo potencia en su desempeño pero el hardware disponible en la

época de su creación hacía difícil su uso y el proyecto no trascendió como se esperaba. Van
Rossum es por tanto el autor principal de Python y continúa ejerciendo un rol central decidiendo
la dirección del lenguaje. El nombre "Python" viene dado por la afición de Van Rossum al grupo
británico de humoristas llamado Monty Python, este grupo de humoristas se ha considerado
como los Beatles en la música.
Se trata de un lenguaje de programación cuya popularidad está creciendo en los últimos
años. Debido al alto número de librerías, es totalmente gratis. Sin embargo, y a pesar de su
sencillez, es bastante potente, ya que usa menos líneas de código que cualquier otro lenguaje de
programación para cualquier aplicación que se ejecute (Valenzuela, 2018). Esto presenta una
gran ventaja respecto a otros tipos de lenguajes de programación.
Java EE. El Java Enterprise Edition, también conocido como Jakarta EE, es un grupo de
tecnologías que se dedica al desarrollo de Java del lado del servidor. Se orienta, en concreto, a
objetos de alto nivel, es decir, al desarrollo de aplicaciones empresariales, pero a gran escala. Por
tanto, Java EE suele ser utilizado en tipos de proyectos que necesiten abarcar una mayor cantidad
de recursos.
MySQL. Fue creado por la empresa sueca MySQL AB. Surgió alrededor de la década del
90 y su desarrollo fue por Michael Windenis quien comenzó a usar mSQL para conectar tablas
usando sus propias rutinas de bajo nivel. Después de realizar las primeras pruebas, concluyó que
mSQL no era lo bastante flexible ni rápido para lo que se necesitaba, por lo que tuvo que
desarrollar nuevas funciones. El nombre de MySQL se debe a la hija de uno de los fundadores
llamada My. Es importante mencionar que mSQL o mini SQL es un sistema administrador de
base de datos desarrollado entre 1993 y 1994

MySQL, es una base de datos relacional y es el sistema gestor de bases de datos que más
utilizan los programadores en la actualidad. Esto es por varias razones, entre ellas, que está
basada en un código abierto GPL, que es multiplataforma y que está desarrollado en C. Además,
este sistema trabaja con tablas múltiples. Estas se interconectan entre sí, de manera que se
asegura el correcto almacenaje y organización de toda la información extraída (Seyed,
Tahaghoghi, & Williams, 2007).
Mongo DB. Su desarrollo inicia en 2007 por la empresa 10gen Inc. que actualmente tiene
el nombre de MongoDB. En 2009 se libera bajo licencia de código abierto. Por la potencia que
ofrece a sus usuarios, Mongo DB es una de las bases de datos más utilizadas en la actualidad y es
una base de datos NoSQL. Es un sistema de código abierto que permite un desarrollo rápido e
iterativo que asegura nuevos niveles de escalabilidad y disponibilidad. Esta base de datos está
orientada, principalmente, a documentos (Banker, Bakkum, Verch, Garrett, & Hawkins, 2016).
Una de sus características más importantes es que está escrito en C++ lo que permite un mejor
uso de los recursos disponibles. Al igual que ocurre en MySQL, aparte de crear las bases de
datos, también es posible hacer consultas.
1.4 Planificación De Aplicaciones Web.
Aun cuando no existe una metodología de desarrollo de sitios web ampliamente aceptada
entre las metodologías más usadas está: 1) RMM (Relationship Management Methodology) que
se define como un proceso de análisis, diseño y desarrollo de aplicaciones hipermedia. Esta
metodología es apropiada para dominios con estructuras regulares, es decir con clases de objetos
bien definidas y con claras relaciones entre esas clases. 2. OOHDM (Object Oriented
Hypermedia Design Method) propone el desarrollo de aplicaciones hipermedia a través de un
proceso compuesto por cuatro etapas que son diseño conceptual, diseño de navegación, diseño de
interfaces abstractas e implementación. 3. UMl-Based Web. Es un método que hace uso de
técnicas que proceden del modelo orientado a objetos para especificar aplicaciones hipermedia.
Se plantea un enfoque iterativo y progresivo. Las actividades fundamentales son el análisis de
requisitos, diseño conceptual, diseño de la navegación y diseño de la presentación.
Sin embargo, de forma general la metodología de planificación de aplicaciones web se
presenta en las siguientes líneas: a) se estudian los requisitos y especificaciones del sitio web, b)
a partir de los requisitos se decide la arquitectura y tecnología del sitio, hospedaje o servidor
propio, ancho de banda archivos o bien base de datos, c) Se diseña la estructura lógica o de
navegación del sitio web. d) Se define la estructura física, que puede ser igual a la lógica o
totalmente independiente. e) se crean los contenidos del sitio web. f) Se realiza el diseño gráfico
y ergonómico como colores, montaje, tipografía, botones de navegación. g) Se crean las páginas
estáticas y los elementos multimedia. h) se desarrollan los scripts y páginas dinámicas, i). Por
último, se verifica el correcto funcionamiento del sitio web. Se comprueba la conexión con la
base de datos, se verifica que no existan enlaces rotos, se confirma que todos los recursos
empleados se encuentran en el sitio web y en su lugar correspondiente. Se comprueba también el
sitio web con distintos navegadores para asegurar su compatibilidad. Se evalúa el rendimiento
mediante la prueba de carga. j). Puesta en marcha (Acevedo & Reinoso, 2011).
Unidad II. HTML, XML, CSS.
2.1 Introducción.
Hace ya varias décadas Tim Berenrs-Lee presentó una propuesta para administrar la
información y compartir los recursos mediante la red de computadoras. El sistema que propuso
llegó a ser el www (World Wide Web) que se ha utilizado durante varios años por instituciones
educativas, en forma individual, en el ámbito de los negocios y otros (Mora, 2002).
Frecuentemente se pasa por alto la distinción entre la web e internet. La línea entre estas
dos tecnologías es muy delgada en parte porque la web tiene sus raíces en los protocolos
asociados con internet.
Internet es una gran red mundial de computadoras conectadas mediante diferentes tipos
de enlaces (satelitales, por radio o, incluso, submarinos). Esta gran red permite compartir
información tanto como recursos hardware y tiene varias peculiaridades ya que es barata,
pública, fácil de usar, entre otras. Internet se ha definido también como la red de redes o bien
como la autopista de la información (Shklar & Rosen, 2003).
Tim Berners-Lee promovió originalmente la World Wide Web como una biblioteca
virtual, un sistema para compartir recursos de información entre investigadores. Los documentos
en línea se pueden acceder a través de una dirección de documento única, una URL (universal
Resource Locator). Estos documentos pueden tener referencias cruzadas a través de enlaces de
hipertexto. Su visión fue conectar literalmente todo junto, de manera uniforme y universal.
La Web está construida sobre los protocolos básicos de Internet que habían existido
durante muchos años antes del inicio de la Web. Comprender la relación entre la tecnología web
y los protocolos de Internet es fundamental para el diseño e implementación de aplicaciones

web. De hecho, es la explotación de esa relación lo que distingue una página web o sitio web de
una aplicación web.
El crecimiento exponencial de la Web puede atribuirse, parcialmente, a su proliferación
de base como herramienta de publicación personal. La tecnología fundamental detrás de la Web
es relativamente simple. Una computadora conectada a Internet, y ejecutar un servidor web, es
todo lo que se necesita para compartir o servir (palabra para relacionar al servidor) documentos.
Sin embargo, entre aquellos asociados con tales organizaciones, rápidamente se convirtió
en un proceso sencillo para crear sus propias páginas web. Además, todo lo que se necesitaba era
editor de texto simple. El lenguaje HTML original era lo suficientemente simple como para que,
incluso sin las herramientas más sofisticadas que tenemos a nuestra disposición hoy, era fácil
tarea para que alguien cree una página web.
Los sitios web son archivos que los usuarios descargan con sus navegadores desde
computadoras remotas. Cuando un usuario accede a un sitio web, le comunica al navegador la
dirección del sitio y el programa descarga los archivos, procesa su contenido y lo muestra en
pantalla.
Los sitios web son de acceso público e Internet es una red global, por lo tanto estos
archivos deben estar siempre disponibles. Por tal razón, los sitios web no se almacenan en
computadoras personales, sino en computadoras especializadas diseñadas para enviar estos
archivos a los usuarios que los solicitan. La computadora que almacena los archivos y datos de
un sitio web se llama servidor y computadora que accede a esta información se llama cliente, tal
como lo ilustra la Figura 2.1.

Figura 2.1 Arquitectura cliente – servidor. Fuente (Gauchat, 2017)
Los servidores son muy similares a computadoras personales, con la diferencia de que
están continuamente conectados a la red y ejecutando programas que les permiten responder a las
solicitudes de los usuarios, sin importar cuándo se reciben o de donde proceden.
Una aplicación web es una programa cliente servidor que utiliza un navegador web como
programa cliente y realiza un servicio interactivo mediante la conexión con servidores a través de
Internet (o Intranet).
2.2 Estructura Global De Un Documento Web.
Los sitios web están compuestos de múltiples documentos que el navegador descarga
cuando el usuario lo solicita. Los documentos que conforman un sitio web se llaman páginas y el
proceso de abrir nuevas páginas se conoce como navegar (el usuario navega a través de las
páginas del sitio).
Para desarrollar un sitio web, se tiene que crear un archivo por cada página que se quiere
incluir. Junto con estos archivos, también se debe incluir los archivos con las imágenes y
cualquier otro recurso que se quiere mostrar dentro de estas páginas (las imágenes y otros medios
gráficos se almacenan en archivos aparte). Los servidores se identifican con un valor llamado IP
(Internet Protocol). Esta IP es única para cada computadora y, por lo tanto, trabaja como una
dirección que permite ubicar a una computadora dentro de una red. Cuando el navegador tiene
que acceder a un servidor para descargar el documento solicitado por el usuario, primero busca el
servidor a través de esta dirección IP y luego le pide que le envíe el documento. Las direcciones
IP están compuestas por números enteros entre 0 y 255 separados por un punto, este es un
ejemplo de dirección: IP 216.58.198.100.
Es posible acceder a cualquier servidor utilizando su dirección IP, pero estos valores son
crípticos y difíciles de recordar. Por esta razón, Internet utiliza un sistema que identifica a cada
servidor con un nombre específico. Estos nombres personalizados, llamados dominios, son
identificadores sencillos que cualquier persona puede recordar, como google o yahoo, con una
extensión que determina el propósito del sitio web al que hacen referencia, como .com
(comercial) o bien .org (organización). Cuando el usuario le pide al navegador que acceda al sitio
web con el dominio www.google.com, el navegador accede primero a un servidor llamado DNS
(Sistema de Nombre de Dominio) que contiene una lista de dominios con sus respectivas
direcciones IP. Este servidor encuentra la IP 216.58.198.100 asociada al dominio
www.google.com, la devuelve al navegador, y entonces el navegador accede al sitio web de
Google por medio de esta IP. Debido a que las direcciones IP de los sitios web siempre se
encuentran asociadas a sus dominios, no necesitamos recordar la dirección de un servidor para
acceder a él, solo tenemos que recordar el domino y el navegador se encarga de encontrar el
servidor y descargar los archivos.
Los elementos de la web se componen de textos, imágenes, videos, etc. Se colocan dentro
de la página de forma que facilite mejor su rendimiento y uso. La colocación de estos elementos
sobre la página se llama estructura. La forma en que se colocan los elementos se define como la
estructura de la página o documento.

Los elementos de una correcta estructura son: cabecera. Se coloca en la parte superior de
la página, menú es el elemento principal de la barra de navegación entre los apartados, cuerpo de
la página, es donde se incluye la información principal, barra institucional, como se muestra en la
figura 2.2.
Figura 2.2. Estructura de un documento web. Fuente (Gauchat, 2017).
Las características de los documentos se pueden modificar dependiendo del lenguaje de
programación con el que se trabaje, es decir, no es la misma estructura de un documento XML,
HTML, PHP, MySQL; las diferencias se notarán en la sintaxis de cada uno y las instrucciones y
manejos de códigos con los que se cuenten. En la siguiente figura 2.3 se muestra la estructura
HTML de un documento web.

Figura 2.3. Estructura HTML de un documento web. Fuente (Acosta, 2015).
Los elementos básicos como texto, vínculos, tablas, objetos, imágenes y aplicaciones son
elementos básicos con los que cuenta un documento HTML, y son el medio por el cual el usuario
tiene interacción con la información. Adicionalmente se puede incluir animaciones, videos,
realidad aumentada, etc.
2.3 Elementos Básicos: Texto, Vínculos, Listas, Tablas, Objetos, Imágenes y Aplicaciones.
A pesar de las innovaciones introducidas por CSS y JavaScript, la estructura creada por el
código HTML sigue siendo la parte fundamental del documento. Esta estructura define el
espacio dentro del documento donde el contenido estático y dinámico es posicionado y es la
plataforma básica para toda aplicación. Para crear un sitio o una aplicación web, lo primero que
se hace, es programar el código HTML que define la estructura de cada una de las páginas que
lo componen. Los documentos HTML son archivos de texto y se pueden crear con cualquier
editor de texto.
Para asegurarnos que el contenido del documento se interprete correctamente como
código HTML, se agrega la declaración <!DOCTYPE> al inicio del archivo. En caso de
programar en HTML5 se debe de agregar el atributo html en la misma línea de la declaración
<!DOCTYPE html>. La instrucción <html> Delimita el código HTML. Puede incluir el atributo
lang para definir el idioma del contenido del documento. <head> Define la información
necesaria para configurar la página web, como el título, el tipo de codificación de caracteres y los
archivos externos requeridos por el documento. <body> Este elemento delimita el contenido del
documento (la parte visible de la página).
Para construir la página, se inicia por la definición de la cabecera. La cabecera incluye
toda la información y los recursos necesarios para generar la página. Los siguientes son los
elementos disponibles para este propósito: <title> Este elemento define el título de la página.
<base> Este elemento define la URL usada por el navegador para establecer la ubicación real de
las URL relativas. El elemento debe incluir el atributo href para declarar la URL base. Cuando
se declara este elemento, en lugar de la URL actual, el navegador usa la URL asignada al
atributo href para completar las URL relativas. <meta> Este elemento representa metadatos
asociados con el documento, como la descripción del documento, palabras claves, el tipo de
codificación de caracteres, etc. El elemento puede incluir los atributos name para describir el
tipo de metadata, content para especificar el valor, y charset para declarar el tipo de codificación
de caracteres a utilizar para procesar el contenido.
El elemento <link> especifica la relación o vínculo entre el documento y un recurso
externo (generalmente usado para cargar archivos CSS). El elemento puede incluir los atributos
href para declarar la ubicación del recurso, rel para definir el tipo de relación, media para
especificar el medio al que el recurso está asociado (pantalla, impresora, etc.), y type y sizes para
declarar el tipo de recurso y su tamaño (usado a menudo para cargar iconos). <style> Este
elemento se usa para declarar estilos CSS dentro del documento. <script> Se utiliza para cargar o
declarar código JavaScript.

Lo primero que tenemos que hacer cuando declaramos la cabecera del documento es
especificar el título de la página con el elemento <title>. Este texto es el que muestran los
navegadores en la parte superior de la ventana, y es lo que los usuarios ven cuando buscan
información en nuestro sitio web por medio de motores de búsqueda como Google o Yahoo. En
la figura 2.4 se muestra un ejemplo de estos elementos.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
</head>
<body>
<h1>This is a Headinng</h1>
<p>This is a paragraph.</p>
</body>
</html>
Figura 2.4. Elementos HTML básicos. Fuente elaboración propia.
Además del título, también tenemos que declarar los metadatos del documento. Los
metadatos incluyen información acerca de la página que los navegadores, y también los motores
de búsqueda, utilizan para generar y clasificar la página web. Los valores se declaran con el
elemento <meta>. Este elemento incluye varios atributos, pero cuáles usemos dependerá del tipo
de información que queremos declarar. Por ejemplo, el valor más importante es el que define la
tabla de caracteres a utilizar para presentar el texto en pantalla, el cual se declara con el atributo
charset, el cual asegura que la página se visualice correctamente al especificar el parámetro “utf-
8”, también proporciona mayor seguridad.
Como se muestra en el ejemplo de la figura 2.5 se pueden incluir múltiples elementos
<meta> para declarar información adicional. Por ejemplo, dos datos que los navegadores pueden
considerar a la hora de procesar nuestros documentos son la descripción de la página y las

palabras claves que identifican su contenido. Estos elementos <meta> requieren el atributo name
con los valores "description" y "keywords", y el atributo content con el texto que queremos
asignar como descripción y palabras clave (las palabras clave se deben separar por comas).
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
</head>
<body>
</body>
</html>
Figura. 2.5. Agregando información adicional con la instrucción <meta>. Fuente elaboración propia.
Otro elemento importante de la cabecera del documento es <link>. Este elemento se usa
para incorporar al documento estilos, códigos, imágenes o iconos desde archivos externos. Por
ejemplo, algunos navegadores muestran un icono en la parte superior de la ventana junto con el
título de la página. Para cargar este icono, tenemos que incluir un elemento <link> con el
atributo rel definido como icon, el atributo href con la ubicación del archivo que contiene el
icono, el atributo type para especificar el formato con el que se ha creado el icono, y el atributo
sizes con el ancho y la altura del icono separados por la letra x. En la figura 2.6 se muestra el
código fuente para la acción descrita.

<!DOCTYPE html>
<html lang="es">
<head>
<link rel="icon" href="carrito.png" type="image/png"
sizes="16x16">
</head>
<body>
</body>
</html>
Figura 2.6 Ejemplo de la instrucción “link”. Fuente elaboración propia.
La Figura 2.7 muestra cómo se ve la ventana cuando se abre un documento que contiene
un icono (en este caso, se muestra una imagen de un automóvil en el lado superior izquierdo del
título).
Figura 2.7 Ejemplo de la página generada por el programa de la figura 2.6. Fuente elaboración propia.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Este es un documento HTML5"> <meta
name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
</body>
</html>
Figura 2.8. Carga de un archivo CSS con la instrucción link. Fuente elaboración propia.
Para el caso del programa de la figura 2.8, El elemento <link> se usa para cargar
archivos CSS con los estilos necesarios para generar la página web. Por ejemplo, el documento
carga el archivo misestilos.css. Después de cargar el archivo, todos los estilos declarados en su
interior se aplican a los elementos del documento. En este caso, solo necesitamos incluir el
atributo rel para declarar el tipo de recurso (para hojas de estilo CSS se debe asignar el valor
"stylesheet") y el atributo href con la URL que determina la ubicación del archivo.
Con la cabecera codificada, se construye el cuerpo con la etiqueta <body>) que se
encarga de generar la parte visible del documento (la página web). HTML siempre ha ofrecido
diferentes maneras de construir y organizar la información en el cuerpo del documento. Uno de
los primeros elementos utilizados con este propósito es <table> (tabla). Este elemento permite a
los desarrolladores organizar datos, textos, imágenes, así como herramientas en filas y columnas
de celdas. Con la introducción de CSS, la estructura generada por estas tablas ya no resulta
práctica, por lo que los desarrolladores pueden implementar un elemento más flexible llamado
<div> (división). Este elemento define una división genérica. Se usa cuando no se puede aplicar
ningún otro elemento. <main> Este elemento define una división que contiene el contenido
principal del documento (el contenido que representa el tema central de la página).
El elemento <nav> define una división que contiene ayuda para la navegación, como el
menú principal de la página o bloques de enlaces necesarios para navegar en el sitio web
(Gauchat, 2017) . <section> Este elemento define una sección genérica, se usa frecuentemente
para separar contenido temático, o para generar columnas o bloques que ayudan a organizar el
contenido principal. <aside> Este elemento define una división que contiene información
relacionada con el contenido principal pero que no es parte del mismo, como referencias a
artículos o enlaces que apuntan a publicaciones anteriores. <article> Este elemento representa
un artículo independiente, como un mensaje de foro, el artículo de una revista, una entrada de un
blog, un comentario, etc. <header> Este elemento define la cabecera del cuerpo o de secciones
dentro del cuerpo. <footer> Este elemento define el pie del cuerpo o de secciones dentro del
cuerpo. Estos elementos han sido definidos con el propósito de representar secciones específicas
de una página web. Aunque son flexibles y se pueden implementar en diferentes partes del
diseño, todos siguen un patrón que se encuentra comúnmente en la mayoría de los sitios web. La
Figura 2.9 ilustra este tipo de diseño.
Figura 2.9: Representación visual de un diseño web tradicional. Fuente (Gauchat, 2017).
A pesar de que cada desarrollador crea sus propios diseños, en general podremos
describir todo sitio web considerando estas secciones. En la barra superior, descrita como
cabecera en la Figura 2.9, ubicamos el logo, el nombre del sitio, los subtítulos y una descripción
breve del sitio o página web. En la barra de navegación situada debajo es donde se establece un
menú o una lista de enlaces para navegar en el sitio. El contenido relevante de la página se ubica
en el medio del diseño, donde generalmente se encuentran artículos o noticias, y también
enlaces a documentos relacionados o recursos. En el ejemplo de la Figura 2.9, esta sección se ha
dividido en dos columnas, información principal y barra lateral. En la parte inferior de un diseño
tradicional, se encuentra la barra llamada barra institucional. En esta área es donde se muestra
información general acerca del sitio web, el autor, la compañía, los enlaces relacionados con
reglas de uso, términos y condiciones, el mapa del sitio, etc.
Como mencionamos anteriormente, los elementos de HTML5 se han diseñado siguiendo
este patrón. En la Figura 2.10 aplicamos los elementos introducidos anteriormente para definir el
diseño de la Figura 2.9.
Figura 2.10. Estructura de un documento usando elementos de Html5. Fuente (Gauchat, 2017).
Los elementos se declaran en el documento en el mismo orden en el que se presentarán en
pantalla, desde la parte superior a la inferior y de izquierda a derecha (este orden se puede
modificar por medio de estilos CSS). El primer elemento de un diseño tradicional es <header>.
No se debe confundir este elemento con el elemento <head> utilizado anteriormente para crear la
cabecera del documento. Al igual que <head>, el elemento <header> se ha definido para
facilitar información introductoria, como títulos o subtítulos, pero no para el documento, sino
para el cuerpo o secciones dentro del cuerpo del documento. En el ejemplo de la figura 2.11, este
elemento se usa para definir el título de la página web.

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
Este es el título
</header>
</body>
</html>
Figura 2.11. Incluyendo el elemento header. Fuente elaboración propia.
La inserción del elemento <header> representa el comienzo del cuerpo y de la parte
visible del documento (Gauchat, 2017). De esta forma se puede ver el resultado de la ejecución
del código en la ventana del navegador. El siguiente ejemplo mostrado en la figura 2.12 es la
barra de navegación. Esta barra define una sección con ayuda para la navegación y se representa
con el elemento <nav>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
Este es el título
</header>
<nav>
Principal | Fotos | Videos | Contacto
</nav>
</body>
</html>
Figura 2.12 Incluyendo el elemento nav. Fuente elaboración propia.
La estructura y el orden que se decide implementar dependen de lo que nuestro sitio web
o aplicación requieran. Los elementos HTML son bastante flexibles y solo nos dan ciertos
parámetros para trabajar, pero el modo en que se utilicen depende de nosotros. Un ejemplo de
esta versatilidad es que el elemento <nav> se podría insertar dentro de etiquetas <header> o en
otra sección del cuerpo. Sin embargo, siempre se debe considerar que estos elementos se han
creado para ofrecer información adicional al navegador, y ayudar a cada nuevo programa y
dispositivo a identificar las partes relevantes del documento. Si se quiere mantener el código
HTML portable y legible, es mejor seguir los estándares establecidos por estos elementos el
elemento <nav> se ha creado con la intención de contener ayuda para la navegación, como el
menú principal o bloques de enlaces importantes, y debería usarse con este propósito. Otro
ejemplo de especificidad es el que ofrecen los elementos <main>, <section>, y <aside>, que se
han diseñado para organizar el contenido principal del documento. En nuestro diseño, estos
elementos representan las secciones llamadas información principal y barra lateral. Debido a que
la sección información principal abarca más, su contenido generalmente se representa por
elementos <section> (uno o varios, dependiendo del diseño), y debido al tipo de información que
contiene, el elemento <aside> se ubica en los laterales de la página. La mayoría del tiempo, estos
dos elementos son suficientes para representar el contenido principal, pero como se pueden usar
en otras áreas del documento, se implementa el elemento <main> para agruparlos, como lo
muestra el ejemplo de la figura 2.13.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
Este es el título
</header>
<nav>
</nav>
<main>
<section>
Artículos
</section>
<aside>
Cita del artículo uno
Cita del artículo dos

</aside>
</main>
</body>
</html>
Figura 2.13 Organizando el contenido principal. Fuente elaboración propia.
El elemento <aside> describe la información que contiene, no un lugar en la estructura,
por lo que se podría ubicar en cualquier parte del diseño, se puede usar mientras su contenido no
se considere el contenido principal del documento. Como los artículos de un periódico, las
páginas web presentan información dividida en secciones que comparten características
similares. El elemento <article> permite identificar estas partes. En el ejemplo de la figura 2.14
se implementa este elemento para representar las publicaciones a mostrar en la sección principal
de la página web.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
Este es el título
</header>
<nav>
</nav>
<main>
<section>
<article>
Este es el texto de mi primer artículo
</article>
<article>
Este es el texto de mi segundo artículo
</article>
</section>
<aside>
</aside>
</main>
</body>
</html>
Figura 2.14. Incluyendo el elemento article. Fuente elaboración propia.
En este punto, ya se cuenta con la cabecera y el cuerpo del documento, secciones con
ayuda para la navegación y el contenido, e información adicional a un lado de la página. Lo
único que queda por hacer es cerrar el diseño y finalizar el cuerpo del documento. Con este fin,
HTML ofrece el elemento <footer> que se muestra en el programa de la figura 2.15.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
Este es el título
</header>
<nav>
</nav>
<main>
<section>
<article>
Este es el texto de mi primer artículo
</article>
<article>
Este es el texto de mi segundo artículo
</article>
</section>
<aside>
</aside>
</main>
<footer>
© Derechos Reservados 2016
</footer>
</body>
</html>
Figura 2.15 Incluyendo el elemento footer. Fuente elaboración propia.
Aunque la mayoría de los elementos estructurales tienen un propósito implícito que se
refleja en sus nombres, esto no significa que se deban usar solo una vez en el mismo documento.
Por ejemplo, algunos elementos como <section> y <aside> se pueden utilizar muchas veces para
representar diferentes partes de la estructura, y otros como <div> aún son implementados de
forma repetida para separar contenido dentro de secciones. Por esta razón, HTML define
atributos globales que pueden utilizarse para asignar identificadores personalizados a cada
elemento.
El atributo <id> permite asignar un identificador único a un elemento. Mientras que
<class> asigna el mismo identificador a un grupo de elementos. El atributo <id> identifica
elementos independientes con un valor único, mientras que el valor del atributo <class> se puede
duplicar para asociar elementos con características similares. Por ejemplo, si tenemos dos o más
elementos <section> que necesitamos diferenciar entre sí, podemos asignar el atributo <id> a
cada uno con valores que declaran sus propósitos.
<main>
<section id="noticias">
Artículos largos
</section>
<section id="noticias locales">
Artículos cortos
</section>
<aside>
Quote from article one
Quote from article two
</aside>
</main>
Figura 2.16. Dos elementos section. Fuente elaboración propia.
El ejemplo de la figura 2.16 incluye dos elementos <section> en la sección principal del
documento para separar artículos de acuerdo a su extensión. Debido a que el contenido de estos
elementos es diferente, requieren distintos estilos y, por lo tanto, se requiere identificarlos con
diferentes valores. El primer elemento <section> se ha identificado con el valor "noticias" y el
segundo elemento con el valor "noticias locales". Por otro lado, si lo que necesitamos es
identificar un grupo de elementos con características similares, podemos usar el atributo
< class>. El ejemplo de la figura 2.17 divide el contenido de una sección con elementos <div>.
Debido a que todos tienen un contenido similar, compartirán los mismos estilos y, por lo tanto,
se identifican con el mismo valor (todo son de la misma clase).
<main>
<section>
<div class="libros">Libro: IT, Stephen King</div>
<div class="libros">Libro: Carrie, Stephen King</div>
<div class="libros">Libro: El resplandor, Stephen King</div>
<div class="libros">Libro: Misery, Stephen King</div>
</section>
<aside>
</aside>
</main>
Figura 2.17 Elementos con el atributo class. Fuente elaboración propia.
En el código del Listado 2-17, tenemos un único elemento <section> con el que se
representa el contenido principal del documento, pero se han creado varias divisiones con
elementos <div> para organizar el contenido. Debido a que estos elementos se han identificado
con el atributo <class> y el valor "libros", cada vez que se accede a modificar los elementos
referenciando la clase libros, todos estos elementos se ven afectados.
Texto.
El medio más importante que puede incluir un documento es texto. HTML define varios
elementos para determinar el propósito de cada palabra, frase, o párrafo en el documento. El
siguiente elemento se usa para representar títulos. Este elemento representa un título <h1>. El
título se declara entre las etiquetas de apertura y cierre. HTML también incluye elementos
adicionales para representar subtítulos, hasta seis niveles (<h2>, <h3>, <h4>, <h5>, y <h6>).
Cada vez que se necesita insertar un título o un subtítulo en el documento, tenemos que incluirlo
dentro de etiquetas <h> como se muestra en el ejemplo de la figura 2.18.

<header>
<h1>Este es el título</h1>
</header>
Figura 2.18. Incluyendo h1. Fuente elaboración propia.
Los navegadores otorgan estilos por defecto a los elementos <h> que incluyen márgenes
y diferentes tamaños de letras, dependiendo de la jerarquía (<h1> es el de más alta jerarquía y
<h6> el de menor jerarquía). La Figura 2.19 muestra cómo se ve el texto dentro de un
elemento<h1> con los estilos por defecto.
Figura 2.19. Título representado <h1> con estilos por defecto. Fuente elaboración propia.
Los siguientes son los elementos que ofrece HTML para representar el cuerpo del texto.
<p> representa un párrafo. Por defecto, los navegadores le asignan un margen en la parte
superior para separar un párrafo de otro. <pre> Este elemento representa un texto con formato
predefinido, como código de programación o un párrafo que requiere que los espacios asignados
a cada carácter y los saltos de línea se muestren como se han declarado originalmente. <span>
Este elemento puede contener un párrafo, una frase o una palabra. No aplica ningún estilo al
texto pero se usa para asignar estilos personalizados. El elemento <p> se utiliza ampliamente
para representar el cuerpo del texto. Por defecto, los navegadores les asignan estilos que incluyen
márgenes y un salto de línea para diferenciar un párrafo de otro. Debido a estas características,
también podemos utilizar los elementos <p> para dar formato a líneas de texto.
<aside>
<p>Cita del artículo uno</p>
<p>Cita del artículo dos</p>
</aside>
Figura 2.20 Definiendo líneas de texto con el elemento <p>. Fuente elaboración propia.
El programa de la figura 2.20 presenta las citas dentro del elemento <aside> de ejemplos
anteriores con elementos <p>.
Cuando un párrafo incluye múltiples espacios, el elemento <p> automáticamente reduce
ese espacio a solo un carácter e ignora el resto. El elemento también hace algo similar con los
saltos de línea. Todo salto de línea introducido en el documento no se considera cuando el texto
se muestra en la pantalla. Si lo que se quiere es que estos espacios y saltos de línea se muestren
al usuario, en lugar de usar el elemento <p> se utiliza el elemento <pre> como en el ejemplo de
la figura 2.21.
<article>
<pre>
La muerte es una quimera: porque mientras yo existo, no existe la
muerte;
y cuando existe la muerte, ya no existo yo.
Epicuro de Samos
</pre>
</article>
2.21 Mostrando texto en su formato original. Fuente elaboración propia.
El ejemplo del programa de la figura 2.21 se define un elemento <article> que contiene
una cita de Epicuro de Samos. Como usamos el elemento <pre>, los saltos de línea son
considerados por el navegador y las frases se muestran una por línea, tal como se han definido en
el código. El elemento <pre> se configura por defecto con márgenes y un tipo de letra que
respeta el formato asignado al texto original, lo que lo hace apropiado para presentar código de
programación y cualquier clase de texto con formato predefinido. En casos como el del ejemplo
de la figura 2.21, donde lo único que necesitamos es incluir saltos de línea dentro del párrafo,
podemos usar otros elementos que se han diseñado específicamente con este propósito. <br>
Este elemento se usa para insertar saltos de línea. <wbr> Este elemento sugiere la posibilidad de
un salto de línea para ayudar al navegador a decidir dónde cortar el texto cuando no hay
suficiente espacio para mostrarlo entero. Estos elementos se insertan dentro del texto para
generar saltos de línea. Por ejemplo, se puede escribir el párrafo anterior en una sola línea e
insertar elementos <br> al final de cada frase para presentarlas en líneas aparte como en el
ejemplo de la figura 2.22.
<article>
<p>Curso de programación: Lenguajes web, Características ;<br>Servidores
.<br>Itlac</p>
</article>
Figura 2.22 Agregando saltos de línea a un párrafo con el elemento <br>. Fuente elaboración propia.
A diferencia de los elementos <p> y <pre>, los elementos <br> y <wbr> no asignan
ningún margen o tipo de letra al texto, por lo que las líneas se muestran como si pertenecieran al
mismo párrafo y con el tipo de letra definida por defecto.
Debido a que no todas las palabras en un texto tienen el mismo énfasis, HTML incluye
los siguientes elementos para declarar un significado especial a palabras individuales o frases
completas. <em> Este elemento se usa para indicar énfasis. El texto se muestra por defecto con
letra cursiva. <strong> Se utiliza para indicar importancia. El texto se muestra por defecto en
negrita. <i> Representa una voz alternativa o un estado de humor, como un pensamiento, un
término técnico, etc. El texto se muestra por defecto con letra cursiva. <u> Este elemento
representa texto no articulado. Por defecto se muestra subrayado. <b> Se usa para indicar
importancia. Debería ser implementado solo cuando ningún otro elemento es apropiado para la
situación. El texto se muestra por defecto en negrita. Estos elementos se pueden utilizar para
resaltar títulos o etiquetas, o para destacar palabras o frases en un párrafo, según muestra el
ejemplo de la figura 2.23.

<article>
<p>Curso de <em>programación</em>Nivel<i> A </i>;<br>báSICO <i>WEB</i>,
<strong>iTLAC</strong>.<br>isc</p>
</article>
Figura 2.23 Resaltando texto. Fuente elaboración propia.
HTML incluye los siguientes elementos para insertar textos que tienen un propósito
claramente definido. <mark> Resalta texto que es relevante en las circunstancias actuales (por
ejemplo, términos que busca el usuario). <small> Representa letra pequeña, como declaraciones
legales. <cite> representa el autor o título de una obra, como un libro, una película, etc.
<address> Información de contacto. Se implementa con frecuencia dentro de los pies de página
para definir la dirección de la empresa o el sitio web. <time> Fecha en formato legible para el
usuario. <code> Este elemento representa código de programación. Se usa en conjunto con el
elemento. <pre> Para presentar código de programación en el formato original. <data> Datos
genéricos, puede incluir el atributo value para especificar el valor en formato de computadora
(por ejemplo, <data value="32">Treinta y Dos</data>). Como estos elementos representan
información específica, normalmente se utilizan para complementar el contenido de otros
elementos. Por ejemplo, se usa el elemento <time> para declarar la fecha en la que un artículo se
ha publicado y otros elementos como <mark> y <cite> para otorgarle significado a algunas
partes del texto.
<article>
<header>
<h1>Título del artículo</h1>
<time datetime="2016-10-12" pubdate>publicado 12-10-2016</time>
</header>
<p>La muerte es una quimera: porque mientras yo <mark>existo</mark>,
no existe la muerte;<br>y cuando existe la muerte, ya no existo
yo.<br><cite>Epicuro de Samos</cite></p>
</article>
Listado 2-24: Complementando el elemento<article>. Fuente elaboración propia.

El programa de la figura 2.24 expande el elemento <article> utilizado en ejemplos
anteriores. Este elemento ahora incluye un elemento <header> con el título del artículo y la
fecha de publicación, y el texto se ha resaltado con los elementos <mark> y <cite>. El elemento
<mark> resalta partes del texto. Por defecto, los navegadores asignan estilos al texto dentro del
elemento <mark> que incluyen un fondo amarillo y muestran el contenido del elemento <cite>
en cursiva. Adicionalmente, los elementos <address> y <small> se insertan normalmente dentro
de un elemento <footer> para resaltar información acerca de la página o una sección. En la
figura 2.25 se muestra este ejemplo.
<footer>
<address>Toronto, Canada</address>
<small>© Derechos Reservados 2016</small>
</footer>
Listado 2-25: Complementando el elemento <footer>. Fuente elaboración propia.
Vínculos.
Conectar documentos con otros documentos mediante enlaces es lo que hace posible la
Web. Como mencionamos anteriormente, un enlace es contenido asociado a una URL que indica
la ubicación de un recurso. Cuando el usuario hace clic en el contenido (texto o imagen), el
navegador descarga el recurso. HTML incluye el siguiente elemento para crear enlaces <a> este
elemento crea un enlace. El texto o la imagen que representa el enlace se incluye entre las
etiquetas de apertura y cierre. El elemento incluye el atributo href para especificar la URL del
enlace. Los enlaces se pueden crear para conectar el documento actual con otros documentos en
el mismo sitio web o en otros sitios. En el ejemplo de la figura 2.26 se enlazan las opciones en el
menú de una página web a otros documentos en el servidor.

<nav>
<a href="index.html">Principal</a> |
<a href="fotos.html">Fotos</a> |
<a href="videos.html">Videos</a> |
<a href="contacto.html">Contacto</a>
</nav>
Figura 2.26: Enlazando el documento a otros documentos con el elemento <a>. Fuente elaboración propia.
El elemento <nav> en la figura 2-26 incluye cuatro elementos <a> por cada opción del
menú. Los elementos incluyen el atributo href para indicar al navegador el documento que tiene
que abrir cuando el usuario hace clic en el enlace. Por defecto, los enlaces se muestran
subrayados y en color azul. Cuando el usuario hace clic en cualquiera de estos enlaces, el
navegador descarga el documento indicado por el atributo href y muestra su contenido en
pantalla. Por ejemplo, si hacemos clic en el enlace creado para la opción “contacto” en el código
de la figura 2-26, el navegador descarga el archivo contacto.html y muestra su contenido en la
pantalla.
Los documentos enlazados en el menú de la figura 2-26 pertenecen al mismo sitio web y
esa es la razón por la que se codifican URL relativas para especificar su ubicación, pero si lo que
requiere es crear enlaces a documentos que no están almacenados en nuestro servidor, se utilizan
URL absolutas, como en el ejemplo de la figura 2.27.
<footer>
<address>Michoacán, México</address>
<small>© 2021 <a href="https://www.timonel.mx/">Noticias
</a></small>
</footer>
Listado 2.27: Enlaza documento a documentos en otros sitios web con el elemento <a>. Fuente elaboración propia.
El código en la figura 2.27 se agrega un enlace al pie de página que apunta al sitio web
www.timonel.mx. El enlace trabaja como cualquier otro, pero ahora el navegador tiene la URL
completa para acceder al documento.

Los documentos se pueden abrir en recuadros insertados dentro de otros documentos. El
valor del atributo target considera esta jerarquía de recuadros, pero debido a que los recuadros no
se usan de forma frecuente, los dos valores más comunes son self, para abrir el documento en la
misma ventana, y blank, para abrir el documento en una nueva ventana. El ejemplo de la figura
2.28 implementa el último valor para acceder al dominio www.timonel.mx desde una nueva
ventana, de modo que el usuario nunca abandona el sitio web.
< <footer>
<address>Michoacán, México</address>
<small>© 2021 <a href="http://www.timonel.mx"
target="_blank">Noticias</a></small>
</footer>
Figura 2.28: Abriendo un enlace en una nueva ventana. Fuente (elaboración propia).
Además de conectar un documento con otro, los enlaces también se pueden crear hacia
otros elementos dentro del mismo documento. Esto es particularmente útil cuando el documento
genera una página extensa que el usuario debe desplazar para poder ver todo su contenido.
Aprovechando esta característica, se crean enlaces hacia diferentes partes de una página. Cuando
el usuario quiere ver algo que no es visible al momento, puede hacer clic en estos enlaces y el
navegador desplaza la página hasta que el elemento apuntado por el enlace aparece en la
pantalla. El elemento a enlazar tiene que ser identificado con el atributo id. Para crear un enlace a
un elemento, debemos incluir el valor asignado a este atributo precedido por el carácter # (figura
2.29).
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header id="titulo">
Este es el título
</header>
<nav>
</nav>
<main>
<section>
<p>Artículo 1</p>
<p>Artículo 2</p>
<p>Artículo 3</p>
<p>Artículo 4</p>
<p><a href="#titulo">Volver</a></p>
</section>
</main>
<footer>
© Derechos Reservados 2016
</footer>
</body>
</html>
Figura 2.29. Creando enlaces a elementos en el mismo documento. Fuente (elaboración propia).
El elemento <a> crea enlaces a aplicaciones. HTML ofrece los atributos mailto y tel para
especificar una cuenta de correo o un número de teléfono. El sistema abre el programa encargado
de responder a este tipo de solicitudes (enviar un correo o hacer una llamada telefónica) y le
envía los datos especificados en el enlace. El ejemplo de la figura 2.30 implementa la palabra
clave mailto para enviar un correo electrónico.
<footer>
<address>Toronto, Canada</address>
<small>© 2016 <a href="mailto:info@jdgauchat.com">J.D
Gauchat</a></small>
</footer>
Figura 2.30. Uso de mailto. Fuente (elaboración propia).
Listas.
Permiten agrupar un conjunto de datos relacionados en forma de lista. Una lista
desordenada inicia con la instrucción <ul>. Cada campo en la lista inicia con la instrucción <li>.
Los elementos de la lista se marcan con viñetas. Una lista ordenada de elementos inicia con la
instrucción <ol>. Cada elemento de la lista inicia con la instrucción <li>. El programa de la
figura 2.31 muestra el código HTML de listas.
<!DOCTYPE html>
<html>
<body>
<h2>Lista desordenada en Html</h2>
<ul>
<li>Café</li>
<li>Vino</li>
<li>Leche</li>
</ul>
<h2>Lista ordenada en Html</h2>
<ol>
<li>Café</li>
<li>Vino</li>
<li>Leche</li>
</ol>
</body>
</html>
Figura 2.31. Ejemplo de listas. Fuente (elaboración propia).
En la figura 2.32 se muestra el resultado de este segmento de código HTML. Note que la
lista ordenada se despliega numerada en 1, 2,3.
Figura 2.32. Lista desplegado desordenada y ordenada. Fuente (elaboración propia).
HTML también soporta descripción en las listas. Una descripción de la lista es una lista
de términos, con una pequeña descripción de cada término. La instrucción <dl> define la
descripción de la lista, la instrucción <dt> define el término (nombre) y la instrucción <dd>
describe cada término. El ejemplo de la figura 2.33 muestra este caso.
<!DOCTYPE html>
<html>
<body>
<h2>Descripción de una lista </h2>
<dl>
<dt>Café</dt>
<dd>- Negro de Veracruz</dd>
<dt>Leche</dt>
<dd>- Natural de Almendras</dd>
</dl>
</body>
</html>
Figura 2.33. Ejemplo descripción en listas. Fuente (elaboración propia).
Tablas.
Una tabla es una forma de representar información de manera esquematizada, ordenada y
compacta. La información se representa mediante datos en filas y columnas. Esta estructura es
ampliamente utilizada en comunicación, investigación y análisis de datos. Aparecen en medios
impresos, notas escritas a mano, software de computadora, señales de tráfico y muchos otros
casos. Las convenciones precisas y la terminología para describir las tablas varían según el
contexto. Además, pueden diferir significativamente en variedad, estructura, flexibilidad,
notación, representación y uso. La instrucción <table> define una tabla HTML. Cada fila de la
tabla se define con la instrucción <tr>. El encabezado de cada columna se define con la
instrucción <th>. Cada celda de la tabla se define con la instrucción <td>. Por defecto los
elementos del texto en <th> se despliegan en negritas y se centran. Por defecto, los elementos en
el texto <td> no vienen en negritas y se alinean a la izquierda. En la figura 2.34 se muestra un
ejemplo para este caso.

<!DOCTYPE html>
<html>
<body>
<h2>Tabla Básica HTML</h2>
<table style="width:100%">
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>Rosas</td>
<td>50</td>
</tr>
<tr>
<td>Evelina</td>
<td>Romero</td>
<td>94</td>
</tr>
<tr>
<td>Silvia</td>
<td>Carmona</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Figura 2.34. Ejemplo de una tabla básica. Fuente (elaboración propia).
Es importante mencionar que los elementos dentro de la instrucción <td> son los datos
comprendidos en la tabla, por lo que se puede incluir todos los tipos de elementos HTML, como
lo son texto, imágenes, listas, otras tablas, etc. Para adicionar un borde a la tabla se utiliza la
propiedad borde de CSS. Se pueden definir bordes para la tabla y para las celdas. El programa de
la figura 2.35 muestra estas características.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Tabla con Bordes</h2>
<p>Se utiliza propiedades de CSS</p>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Juana</td>
<td>Sosa</td>
<td>50</td>
</tr>
<tr>
<td>Evelina</td>
<td>Rosas</td>
<td>94</td>
</tr>
<tr>
<td>Silvia</td>
<td>Carmona</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Figura 2.35. Tabla con bordes en HTML. Fuente (elaboración propia).
También se puede especificar el espacio entre bordes. Para ello se utiliza la propiedad de
CSS “border-spacing”. En la figura 2.36 se muestra el programa.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Espacio en Bordes</h2>
<p>El espacio de bordes especifíca el espacio entre celdas</p>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>Romero</td>
<td>50</td>
</tr>
<tr>
<td>Evelina</td>
<td>Molina</td>
<td>94</td>
</tr>
<tr>
<td>Silvia</td>
<td>Carmona</td>
<td>80</td>
</tr>
</table>
<p><strong>Tip:</strong> Cambia el borde a 5 puntos</p>
</body>
</html>
Figura 2.36. Espacio en bordes de una tabla. Fuente (elaboración propia).
En el ejemplo de la figura 2.37 se muestra una tabla con varios campos.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Tabla HTML</h2>
<table>
<tr>
<th>Compañia</th>
<th>Contacto</th>
<th>País</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Figura 2.37. Tabla con varios campos. Fuente (elaboración propia).
Objetos.
La instrucción object es muy similar a las instrucciones de video y audio. Object habilita
archivos multimedia insertados o embebidos en una página web. Se pueden insertar archivos
multimedia, ya sea de audio, video, Flash, PDF, ActiveX y Applets. También se puede insertar
otra página web dentro del documento HTML.
En el ejemplo de la figura 2.38 el atributo data define la dirección del recurso embebido
dentro del documento HTML. El atributo type define el tipo del contenido del recurso. El
atributo typemustmatch indica que el recurso debe incluirse solo si el valor del atributo type
coincide con el tipo de recurso proporcionado en el atributo data. El atributo name define el
nombre para el elemento object HTML. El atributo usemap define el nombre de un mapa de
imagen que se utilizará con el objeto. El nombre del formulario al que pertenece el elemento
HTML del objeto se indica con form. Los atributos height y width define la dimensión del
objeto embebido.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts.js">
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<object data="https://cdn.bitdegree.org/learn/giphy%20(1).gif?raw=true"
width="300" height="200"></object>
</body>
</html>
Figura 2.38. Ejemplo de objetos tipo data. Fuente (elaboración propia).
Imágenes.
Una imagen es una representación visual, que manifiesta la apariencia visual de un objeto
real o imaginario. En HTML una imagen mejora el diseño, apariencia y presentación de la
página. Para insertar una imagen en una página web, se utiliza la instrucción img. Técnicamente
hablando la imagen no se inserta en la página, lo que se hace es referenciarla. El atributo img
contiene los parámetros src y alt. El atributo src específica la ruta en donde se encuentra la
imagen. El atributo alt específica un texto alterno para la imagen. La sintaxis es <img src=”url”
alt=”alternatetext”>. El atributo src específica la ruta de la imagen Cuando se carga una página
web; es el navegador, en ese momento, el que obtiene la imagen de un servidor web y la inserta
en la página. Por lo tanto, se debe de estar seguro de que la imagen permanezca en el mismo
lugar en relación con la página web, de lo contrario, los visitantes de la página obtendrán un
icono de enlace roto. El icono de enlace roto y el texto alternativo se muestran si el navegador no
puede encontrar la imagen. La figura 2.39 muestra un ejemplo de estos atributos.
<!DOCTYPE html>
<html>
<body>
<h2>Texto Alternativo</h2>
<p>Contenido de la imagen, el fin es dar una breve explicación acerca de la
imagen.</p>
<img src="carrito.png" alt=" Texto alternative informativo" width="460"

height="345">
</body>
</html>
Figura 2.39. Manejo de imágenes en HTML. Fuente (elaboración propia).
El atributo width y height especifican el ancho y alto de la imagen respectivamente. Otro
atributo muy importantes es alt, este despliega un texto alternativo en el caso de que por alguna
razón no se pueda desplegar la imagen. Es posible utilizar el atributo style para especificar el
ancho y alto de una imagen, para este caso la codificación es de la siguiente manera <img
src=”myImagen.jpg” alt=”Error en carga de imagen” style= “width:500px;height:600px;”>.
En caso de tener la imagen a desplegar en una carpeta diferente a la del proyecto, se
deberá especificar la carpeta <img src="/images/html5.gif" alt="HTML5 Icon
" style="width:128px;height:128px;">
En caso de que la imagen a mostrar se encuentre en un servidor o sitio diferente al del
proyecto deberá de utilizarse la siguiente instrucción:
<img src="https://www.sitio.com/images/miImagen.jpg" alt="imagen en otro servidor">
Para desplegar una imagen animada se utiliza lo siguiente:
<img src="programming.gif" alt="usuario de pc" style="width:48px;height:48px;">
En caso de utilizar una imagen como un enlace o vínculo se debe de especificar la
instrucción img dentro del atributo <a>, como se muestra en la siguiente codificación:
<a href="default.asp">
<img src="Imglink.gif" alt="HTML tutorial" style="width:42px;height:42px;">. En este caso al

dar click en la imagen con el nombre Imglink.gif se despliega la información del archivo
default.asp.
Para desplegar una imagen a la derecha con relación al texto, se utilizan los atributos
float:right como se muestra en la siguiente codificación:
<p><img src="myImagen.gif" alt="Sonriendo" style="float:right;width:42px;height:42px;">,
en otro caso para desplegar una imagen a la izquierda con relación al texto, se utilizan los
atributos float:left como se muestra en la codificación:
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">.
En la tabla 2.1 se muestran los formatos de imagen más comunes que son soportados por
HTML. Se especifica también la extensión y el nombre del archivo de imagen.
Tabla 2.1. Tipos de formatos de archivos de imagen soportados por HTML.
Abreviación Nombre Extensión

APNG Png animados .apng
GIF Formato de intercambio de imágenes .gif
ICO Iconos MicroSoft .ico, .cur
JPEG Compresión y codificación de .jpg, .jpef, .jfif., .pjpeg, .pjp
imágenes fijas
PNG Gráficos de red portátiles .png
SVG Gráficos vectoriales redimensionales .svg
2.4 Formularios.
Los formularios son herramientas que se incluyen en un documento para permitir a los
usuarios insertar información, tomar decisiones, comunicar datos y cambiar el comportamiento
de una aplicación. El propósito principal de los formularios es permitir al usuario seleccionar o
insertar información y enviarla al servidor para ser procesada.
Los formularios presentan varias herramientas que permiten al usuario interactuar con el
documento, incluidos campos de texto, casillas de control, menús desplegables y botones. Cada
una de estas herramientas se representa por un elemento y el formulario queda definido por el
elemento <form>, que incluye etiquetas de apertura y cierre para agrupar al resto de los
elementos y requiere de algunos atributos para determinar cómo se envía la información al
servidor.
Un formulario HTML se utiliza para almacenar temporalmente el ingreso de información
del usuario. Comúnmente esta información se envía a un servidor para su procesamiento. En la
figura 2.40 se muestra un ejemplo de formulario.
Figura 2.40. Ejemplo de formulario. Fuente (elaboración propia).

El elemento <input> despliega en distintas formas de acuerdo al tipo de atributo, que
pueden ser: <input type="text"> define un campo de entrada de texto como se muestra en el
programa de la figura 2.41.
<!DOCTYPE html>
<html>
<body>
<h2>Text field</h2>
<p>La instrucción <strong>input type="text"</strong> define la entrada de una
línea de texto:</p>
<form action="/action_page.php">
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Aceptar">
</form>
</body>
</html>
Figura 2.41 Ejemplo de formulario en HTML. Fuente (elaboración propia).
En la figura 2.42 se muestra el resultado al momento de ejecutar el programa de la figura
2.41. Note que se aplican atributos de texto.
Figura 2.42 Ejemplo de formulario, muestra atributos de texto. Fuente (elaboración propia).
El atributo <input type="password"> define un campo de password, el cual proporciona
una forma para que el usuario ingrese contraseña de forma segura. En la figura 2.43 se
proporciona el código HTML para este fin.

<form
<label for="username">Usuario:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Contraseña:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
</form>
Figura 2.43. Código HTML para campo password. Fuente (elaboración propia).
La figura 2.44 muestra el resultado al momento de cargar el programa de la figura 2.43 en
el navegador.
Figura 2.44. Resultado del código HTML campo password. Fuente (elaboración propia).
El atributo <input type="submit"> define un botón para enviar los datos del formulario
al manejador de formularios, que puede ser un servidor con un script para procesar datos de
entrada. El manejador de formularios se especifica en el atributo “action”, como se aprecia en el
programa de la figura 2.45.
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname" value="Juan"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname" value="Pérez"><br><br>
</form>
Figura 2.45. Ejemplo de atributo input type. Fuente (elaboración propia).
El atributo <input type="radio"> que se muestra en el ejemplo de la figura 2.46 define
una opción que pertenece a un grupo en el que no más de una opción puede ser seleccionada al
mismo tiempo.
<input type="radio" id="marry" name="civil" value="casado">
<label for="civil">Casado</label><br>
<input type="radio" id="singer" name="civil" value="soltero">
<label for="civil">Soltero</label><br>
<input type="radio" id="div" name="civil" value="divorced">
<label for="civil">Divorciado</label><br><br>
</form>
Figura 2.46. Atributo para un grupo de opciones. Fuente (elaboración propia).
El atributo <input type="checkbox"> que se codifica en la figura 2.47 define una casilla
de verificación. Control que permite al usuario seleccionar una o más opciones de varias
disponibles.
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> Bicicleta</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> Automóvil</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Combi</label><br><br>
</form>
Figura 2.47. Control casilla de verificación. Fuente (elaboración propia).
El atributo <input type="button"> define un botón de entrada. El código HTML se
muestra en la figura 2.48. En este caso al momento de seleccionar el botón “Aceptar” se
despliega en la pantalla el mensaje “Hola Mundo!”.
<!DOCTYPE html>
<html>
<body>
<h2>Botón entrada</h2>
<input type="button" onclick="alert('Hola mundo!')" value="Aceptar">
</body>
</html>
Figura 2.48. Ejemplo de botón de entrada. Fuente (elaboración propia).
La instrucción <input type="color"> como se muestra en la figura 2.49 proporciona un
elemento de interfaz de usuario que permite a los usuarios especificar un color, bien mediante
una interfaz visual de selección, o bien a través de un cuadro de texto donde ingresar un valor
hexadecimal en formato <<#rrggbb>>.
<!DOCTYPE html>
<html>
<body>
<h2>Muestra un ejemplo de manejo de color</h2>
<label for="favcolor">Selecciona tu color favorito:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
</form>
</body>
</html>
Figura 2.49. Ejemplo de manejo de color. Fuente (elaboración propia).
Para utilizar datos de entrada que contiene un campo de tipo fecha se utiliza <input
type="date"> tal y como se muestra en la figura 2.50.
<!DOCTYPE html>
<html>
<body>
<h2>Campo tipo Fecha</h2>
<label for="birthday">Fecha de Nacimiento:</label>
<input type="date" id="birthday" name="birthday">
</form>
</body>
</html>
Figura 2.50. Ejemplo de tipo fecha. Fuente (elaboración propia).
Para especificar un dato de entrada tipo fecha y tipo hora local se utiliza el atributo <input
type="datetime-local"> mostrado en la figura 2.51.
<!DOCTYPE html>
<html>
<body>
<h2>Campo Fecha Local</h2>

<label for="birthdaytime">Fecha de casamiento (día y hora):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
</body>
</html>
Figura 2.51. Ejemplo tipo fecha y hora. Fuente (elaboración propia).
Para utilizar datos de entrada que requieren ingresar un correo electrónico se utiliza
<input type="email">. El momento de posicionar el cursor sobre el campo de entrada,
automáticamente se despliegan los correos del buffer del navegador. En la figura 2.52 se muestra
el código HTML para esta acción.
<!DOCTYPE html>
<html>
<body>
<h2>Campo correo electrónico</h2>
<label for="email">Ingresa email:</label>
<input type="email" id="email" name="email">
</form>
</body>
</html>
Figura 2.52. Datos de entrada email. Fuente (elaboración propia).
El código <input type="file"> permite que el usuario seleccione archivos para enviarlos
o subirlos al servidor, como en el ejemplo de la figura 2.53. El control de entrada de archivos
muestra una caja de texto donde el usuario debe especificar la ruta del archivo que se encuentra
en la computadora del usuario.
<!DOCTYPE html>
<html>
<body>
<h1>Cargar archivo</h1>
<label for="myfile">Selecciona archivo:</label>

<input type="file" id="myfile" name="myfile"><br><br>
</body>
</html>
Figura 2.53. Selección de archivos. Fuente (elaboración propia).
<input type="hidden"> de la figura 2.54 define un campo de entrada oculto, no visible
para el usuario. Este tipo de entrada permite al programador web incluir datos que no pueden ser
vistos o modificados por el usuario cuando el formulario se envía.

<!DOCTYPE html>
<html>
<body>
<h1>Entrada oculta no visible </h1>
<label for="fname">Nombre:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
</form>
</body>
</html>
Figura 2.54. Campo de entrada no visible. Fuente (elaboración propia).
En el ejemplo de la figura 2.55 se muestra el atributo <input type="month"> el cual
permite al usuario seleccionar un mes y año.
<!DOCTYPE html>
<html>
<body>
<h2>Campo tipo Mes</h2>
<label for="bdaymonth">Fecha de casamiento (mes y año):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit" value="Enviar">
</form>
</body>
</html>
Figura 2.55. Selección de mes y año en HTML. Fuente (elaboración propia).
Para ingresar un campo de entrada numérico se codifica el atributo <input
type="number">, el cual se muestra en la figura 2.56.
<!DOCTYPE html>
<html>
<body>
<h2>Campo numérico</h2>
<label for="quantity">Volumen (entre 1 y 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
</body>
</html>
Figura 2.56. Ingreso de un campo numérico.Fuente (elaboración propia).
Como se aprecia en la figura 2.56 la instrucción name="quantity" min="1" max="5"
utiliza restricciones de valor máximo y mínimo. En la tabla 2.2 se resumen las restricciones de
entrada que se utiliza con la instrucción input.
Tabla 2.2. Restricciones para el atributo input.
Atributo Descripción
Checked Especifica que un campo de entrada debe ser pre seleccionado cuando la
página se carga (para campos checkbox o radio).
Disabled Específica que el campo de entrada está deshabilitado.
Max Indica el máximo valor para la entrada de datos
Maxlength Número máximo de caracteres para el ingreso de datos
Min Valor mínimo para el campo
Pattern Permite definir nuestras propias reglas para validar el valor de entrada
Readonly El dato de entrada es de solo lectura y no puede ser cambiado
Required Debe de ingresar un valor, no puede dejarse vacío
Size Especifica el tamaño en caracteres
Step Especifica el intervalo entre valores válidos en una entrada numérica
Value Especifica un valor por defecto para la entrada de datos
El atributo <input type="range"> Permite que el usuario especifique un valor numérico
comprendido entre un valor mínimo y máximo. La figura 2.57 ejemplifica este atributo.
<!DOCTYPE html>
<html>
<body>
<h2>Campo Rango</h2>
<label for="vol">Volumen (entre 0 y 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
</body>
</html>
Figura 2.57. Ejemplo para el atributo range. Fuente (elaboración propia).
Para representar un campo de texto de una sola línea para propósito de búsqueda se
utiliza el atributo <input type="search"> que se muestra en la figura 2.58.
<!DOCTYPE html>
<html>
<body>
<h2>Campo de búsqueda</h2>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
</body>
</html>
Figura 2.58. Ejemplo de campo de búsqueda. Fuente (elaboración propia).
En el caso del atributo <input type="tel"> se utiliza cuando el dato de entrada es un
número telefónico y se da un ejemplo en la figura 2.59
<!DOCTYPE html>
<html>
<body>
<h2>Campo Teléfono</h2>
<label for="phone">Ingresa el número telefónico:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="753-00-000"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
<small>Formato: 753-00-000</small><br><br>
</form>
</body>
</html>
Figura 2.59. Entrada para tipo dato telefónico. Fuente (elaboración propia).
En caso de necesitar ingresar un dato en formato tipo hora, el atributo <input
type="time"> permite hacer esta función. El código HTML se muestra en la figura 2.60.
<!DOCTYPE html>
<html>
<body>
<h1>Muestra Control Tipo Hora</h1>

<label for="appt">Selecciona hora:</label>
<input type="time" id="appt" name="appt">
</form>
</body>
</html>
Figura 2.60. Campo tipo hora. Fuente (elaboración propia).
Es muy común ingresar a un formulario una dirección url, para este fin, se utiliza <input
type="url"> y se muestra en la figura 2.61.

<!DOCTYPE html>
<html>
<body>
<h1>Campo url</h1>
<label for="homepage">Ingresa url:</label>
<input type="url" name="url" id="url"

placeholder="https://google.com"
pattern="https://.*" size="30"
required>
</form>
</body>
</html>
Figura 2.61. Ejemplo HTML para ingresar url. Fuente (elaboración propia).
La instrucción que permite al usuario seleccionar una semana y año es <input
type="week"> y se codifica en la figura 2.62.
<!DOCTYPE html>
<html>
<body>
<h1>Campo semana</h1>
<label for="week">Selecciona semana:</label>
<input type="week" id="week" name="week">
</form>
</body>
</html>
Figura 2.62. Instrucción selección semana y año. Fuente (elaboración propia).
2.5 Lenguajes De Presentación En Documentos Web.
Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos que
ofrecen un significado visual para cada elemento del lenguaje, además ofrece un número de
reglas sintácticas para poder crear documentos.
El lenguaje HTML permite organizar, estructurar y determinar qué elementos representan
el contenido de un documento web, sin embargo no determina cómo se mostrará en pantalla la
información. Desde la introducción de HTML5, esa función es del lenguaje CSS. CSS es un
lenguaje que facilita instrucciones que podemos usar para asignar estilos a los elementos HTML,
como colores, tipos de letra, o bien tamaños (Grant, 2018).
Los estilos se deben definir con CSS y luego asignar a los elementos hasta que se logra el
diseño visual que se requiere para la página. CSS (Cascading Style Sheets) es lo que se
denomina lenguaje de hojas de estilo en cascada y se usa para mejorar la estética de elementos
escritos en un lenguaje de marcado como HTML. CSS separa el contenido de la representación
visual del sitio (Robbins, 2012).
El organismo W3C (World Wide Consortium) que se encarga de establecer los estándares
relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el
lenguaje HTML. A finales de 1996, se publica la primera recomendación oficial, con el nombre
CSS nivel 1.
Aun cuando HTML proporciona las herramientas para desarrollar una página web
completa, CSS nos da la facilidad de adoptar un estilo propio a esta página. En CSS los estilos
personalizados se declaran con propiedades. Un estilo se define declarando el nombre de la
propiedad y su valor separados por dos puntos. Por ejemplo, el código de la figura 2.63 declara
una propiedad que cambia el tamaño de la letra a 24 píxeles (debido a que algunas propiedades
pueden incluir múltiples valores separados por un espacio, se debe indicar el final de la línea con
un punto y coma).
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 24px;
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hola mundo!</p>
<p>Estilo creado con CSS.</p>
</body>
</html>
Figura 2.63. Ejemplo de Hola mundo en CSS. Fuente (elaboración propia).
Observe en la figura 2.63 que se adicionan las instrucciones <style> </style> para indicar
que se trata de una hoja CSS; entre llaves {} se codifica la regla. En este caso la regla es “font-
size:24px”. El atributo px indica pixeles. Recordar que el elemento p distribuye el texto en
párrafo. Adicionalmente el color del texto es rojo y se despliega centrado.
Para aplicar estilos se dispone de tres formas de hacerlo. Estilos en línea. CSS en línea.
Los estilos en línea son declaraciones CSS que se integran en las etiquetas HTML mediante el
atributo style. Este método tan solo afecta al elemento en el que se integra el código.
El CSS en línea es complicado de entender y mantener ya que mezcla los estilos CSS con el
código HTML. La regla <p style="font-size: 20px;">Mi Texto</p> se codifica en la sección
<body> del archivo HTML.
Estilos incrustados. Se usa cuando un único documento HTML debe tener
un estilo único. El conjunto de reglas de CSS debe estar dentro del archivo HTML en la sección
principal, es decir, el CSS está incrustado dentro del archivo HTML. La regla <style p {font-size:
20px} </style> debe ser incrustada en la sección <head> del archivo HTML.
Hojas de estilo. Una hoja de estilo es un archivo de extensión *. CSS que contempla la
lista de reglas CSS que se requiere asignar a los elementos del documento. Se utiliza la
instrucción <link> para cargar este archivo de reglas de estilo. Para cargar hojas de estilo CSS,
se necesitan los atributos rel y href. El atributo rel específica la relación entre el documento y el
archivo que se incorpora, y se declara con el valor stylesheet para comunicarle al navegador que
el recurso es un archivo CSS con los estilos requeridos para presentar la página. El atributo href
declara la URL del archivo a cargar. La instrucción <link rel=”stylesheet”
href=”myestilo.css”> se agrega en la sección <head> del archivo HTML.
Una característica importante de CSS es que los estilos se asignan en cascada, es decir los
elementos en los niveles bajos de la jerarquía heredan los estilos asignados a los elementos en
los niveles más altos. Sin embargo los estilos heredados se pueden reemplazar por nuevos estilos
definidos en niveles inferiores de la jerarquía.
Los comentarios en CSS se codifican dentro del elemento <style> e inicia con /* y
finaliza */. Ejemplo: /* Este es un comentario */. Incluso el comentario puede abarcar más de
una línea.
Para asignar color se hace mediante dos formas. La primera es combinar los colores
básicos rojo, verde y azul. La otra forma es definir el matiz, la saturación y la luminosidad.
Dependiendo de uno de los dos tipos, se utilizan valores hexadecimales (00 a FF) o bien números
decimales (0 a 255), también puede ser porcentajes. Por ejemplo color: #996633 especifica 99
niveles de rojo, 66 verde y 33 azul. En la tabla 2.3 se muestran los valores para el atributo color.
En la figura 2.64 se ejemplifica la asignación de colores.
Tabla 2.3. Valores para atributo color.
Descripción Hex Rgb Color

Rojo #FF0000 rgb(255,0,0) red
Verde #00FF00 rgb(0,255,0) green
Azul #0000FF rgb(0,0,255) blue
<!DOCTYPE html>
<html>
<style>
div {height:50px;width:100%;}
</style>
<body>
<h1>Los colores </h1>
<div style="background-color:red"></div>
<div style="background-color:#ffff00"></div>
<div style="background-color:#00ff00"></div>
<div style="background-color:#00ffff"></div>
<div style="background-color:blue"></div>
<h1 style="color:#ff0000">Hexadecimal</h1>
<h1 style="color:gray">gris</h1>
<h1 style="color:rgb(0,255,0)">verde</h1>
<h1 style="color:aqua">azul agua</h1>
<h1 style="color:blue">azul</h1>
</body>
</html>
Figura 2.64. Ejemplo CSS de asignación de colores. Fuente (elaboración propia).
Para especificar bordes se utiliza la regla border con los valores tamaño, tipo, color. Por
ejemplo <style> p { border: 5px solid red; } </style>, especifica un contorno de 5 pixeles
sólido en color rojo. Para determinar las propiedades de márgenes en el documento se hace como
en el ejemplo de la figura 2.65.
<style>
div {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
Figura 2.65. Ejemplo de bordes. Fuente (elaboración propia).
2.6 Selectores.
Como vimos en el tema anterior, existen varios métodos para seleccionar los elementos
que serán afectados por una regla CSS. En los ejemplos anteriores se ha utilizado el nombre del
elemento, pero también se puede usar los valores de los atributos id y clase para referenciar un
solo elemento o un grupo de elementos, e incluso combinarlos para construir selectores más
específicos.
Una regla declarada con el nombre del elemento como selector afecta a todos los
elementos de ese tipo encontrados en el documento. Se ha utilizado el nombre p para modificar
elementos <p>, pero es posible modificar este nombre para trabajar con cualquier elemento en el
documento requerido. Si en lugar se declara el nombre span, por ejemplo, se modificarán todos
los textos dentro de elementos <span>.
Para referenciar elementos <span> por su nombre, se hace con la regla de la figura 2.66.
<style>
span { font-size: 20 px }
</style>
Figura 2.66. Regla span. Fuente (elaboración propia).
En caso de asignar los mismos estilos a elementos con nombres diferentes, se declaran los
nombres separados por una coma, como en el ejemplo de la figura 2.67. La regla afecta a todos
los elementos <p> y <span> encontrados en el documento.
<style>
p, span { font-size: 20 px }
</style>
Figura 2.67. Regla p y span. Fuente (elaboración propia).
De igual forma se puede referenciar solo los elementos que se encuentran dentro de un
elemento en particular listando los selectores separados por un espacio. Estos tipos de selectores
se les nombran selectores de descendencia ya que afectan a elementos dentro de otros elementos,
sin importar el lugar que ocupan en la jerarquía. Este caso se ejemplifica en la figura 2.68.
<style>
main p { font-size: 20 px }
</style>
Figura 2.68. Selector de descendencia. Fuente (elaboración propia).
En el ejemplo de la figura 2.68 se afecta solo a los elementos <p> que se encuentran
dentro de un elemento <main>, ya sea como contenido directo o insertados en otros elementos.
El ejemplo de la figura 2.69 incluye una sección principal con una cabecera y una sección
adicional. Ambos elementos incluyen elementos <p> para representar su contenido. Si aplicamos
la regla de la figura 2.68, el texto dentro de cada elemento <p> se mostrará con un tamaño de 20
píxeles ya que todos son descendientes del elemento <main>.
La regla del listado de la figura 2.68 solo afecta a los elementos <p> que se encuentran
dentro del elemento <main>. En caso de agregar un elemento <footer> al final del documento
del listado de la figura 2.69, los elementos <p> dentro de este pie de página no se verán
modificados.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<main>
<header>
<h1>Título</h1>
<p>Esta es la introducción</p>
</header>
<section>
<p>Frase 1</p>
<p>Frase 2</p>
<p>Frase 3</p>
<p>Frase 4</p>
</section>
</main>
</body>
</html>
Figura 2.69. Ejemplo de Descendencia. Fuente (elaboración propia).
2.7 Modelo De Caja.
Todos los elementos HTML se consideran modelo de caja. En CSS el término modelo de
caja se utiliza cuando hablamos acerca de diseño y maquetación (proceso en el que el prototipo
gráfico pasa a transformarse en código HTML, CSS, PHP, etc.). El modelo de caja en CSS es
esencialmente una caja que envuelve cada elemento HTML. Este consiste de contenido, margen,
bordes, espacio entre contenido del elemento y su borde. La figura 2.70 muestra el modelo de
caja.
Figura 2.70. Modelo de caja. Fuente (https://desarrolladoresweb.org/css/modelo-de-cajas-css/, 2019).
Este modelo se compone de contenido, el contenido de la caja, en donde se despliegan las
imágenes. Relleno, limpia un área alrededor del contenido. Bordes, establece el estilo de línea
para los cuatro lados del borde de un elemento. Márgenes, establece un margen para los cuatro
lados. El modelo de caja permite adicionar un borde alrededor de los elementos, y también
definir espacio entre los elementos. En el ejemplo de la figura 2.71 se muestra un ejemplo,
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Modelo de caja</h2>
<p> Contenido, Relleno, Bordes, y Márgenes.</p>
<div>
Este es un curso de programación web. Los contenidos son de acuerdo al
programa de estudios del Tecnológico Nacional de México. </div>
</body>
</html>
Figura 2.71. Codificación modelo de caja. Fuente (elaboración propia).
Como se puede apreciar en la figura 2.72 se muestra el resultado al momento de ejecutar
en un navegador el código de la figura 2.71.
Figura 2.72. Resultado de modelo de caja. Fuente (elaboración propia).
Con el fin de definir el ancho y alto de un elemento de forma correcta en el navegador, es
necesario conocer cómo funciona el modelo de caja. Cuando se realiza esta acción, se deberá de
especificar el ancho y alto del contenido en el área, para este cálculo se deberá de contemplar el
relleno, el borde y también los márgenes. En la figura 2.73 se codifica lo necesario para esta
acción.
div {
width : 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
Figura 2.73. Ancho y alto modelo de caja. Fuente (elaboración propia).
El cálculo es el siguiente: 320 px de ancho + 20 px de relleno (10 px izquierdo+10 px
derecho) + 10 px de bordes + 0 px de margen. Esto nos da un total de 350 px. Para calcular el
ancho total de un elemento se hace con la siguiente operación: Ancho=ancho + relleno izquierdo
+ relleno derecho + borde izquierdo + borde derecho + margen izquierdo + margen derecho. Para
calcular la altura de un elemento se hace con la siguiente operación: Altura=altura + relleno
superior + relleno inferior + borde superior + borde inferior + margen superior + margen inferior.
Unidad III. Programación Del Lado Del Cliente.
3.1 Introducción al lenguaje.
JavaScript fue desarrollado por Brendan Eich, desarrollador de Netscape
Communications Corporation, en 1995 (Brown, 2016). Surgió con el nombre Mocha, y antes se
llamaba LiveScript; fue oficialmente renombrado a JavaScript en una versión de Netscape
Navigator en 1995. Se considera que la palabra Java en JavaScript fue cuestión de
mercadotecnia, y se aprovechó la popularidad y aceptación del lenguaje de programación Java en
esa época. JavaScript tiene más en común con el lenguaje Self desarrollado por Xerox Parc en la
década de los ochentas y por el lenguaje Scheme que fue desarrollado por Guy Steele y Gerald
Sussman en la década de los setentas.
En noviembre de 1996, Netscape anunció que había enviado JavaScript a Ecma, una
organización de estándares privada e internacional sin fines de lucro que tiene una influencia
significativa en las industrias de la tecnología y las comunicaciones. Ecma International emitió la
primera edición de la especificación ECMA-26, que fue, en naturaleza, JavaScript.
JavaScript es un lenguaje de programación que se usa para procesar información y
manipulación de documentos (Rauschmayer, 2014). Al igual que cualquier otro lenguaje de
programación, JavaScript provee instrucciones que se ejecutan de forma secuencial para
indicarle al sistema lo que queremos que haga (realizar una operación aritmética, asignar un
nuevo valor a un elemento, etc.). Cuando el navegador encuentra este tipo de código en nuestro
documento, ejecuta las instrucciones al momento y cualquier cambio realizado en el documento
se muestra en pantalla.
La razón para usar JavaScript es para crear páginas web dinámicas, páginas que
incorporan efectos, animaciones, y en general programación para mayor funcionalidad en el
documento. JavaScript es el único lenguaje de programación que funciona en los navegadores de
forma nativa, es decir un lenguaje interpretado sin necesidad de compilación. Por lo tanto se
utiliza como complemento de HTML y CSS.
Siguiendo el mismo enfoque que CSS, el código JavaScript se puede incorporar al
documento mediante tres técnicas diferentes: a) el código se puede insertar en un elemento por
medio de atributos (en línea), b) incorporar al documento como contenido del elemento <script>
o c) cargar desde un archivo externo. La técnica en línea aprovecha atributos especiales que
describen un evento, como un clic del ratón. Para lograr que un elemento responda a un evento
usando esta técnica, lo que se tiene que hacer es agregar el atributo correspondiente con el
código que se quiere ejecutar. En el programa de la figura 3.1se muestra un ejemplo.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Mi Primer script en JavaScript";
</script>
</body>
</html>
Figura 3.1 Ejemplo JavaScript. Fuente (elaboración propia).
Como se aprecia en la figura 3.1, el código de JavaScript se inserta entre la etiqueta
<script> y </script> dentro del documento HTML. Una función de JavaScript es un segmento de
código que se ejecuta cuando se invoca dentro del documento web (Pollock, 2010). Por ejemplo,
una función puede ser llamada cuando ocurre un evento, como cuando el usuario presiona un
botón de la pantalla. Se pueden insertar scripts en el documento HTML. En el programa de la

figura 3.2 una función de JavaScript se posiciona en la sección <body> del documento HTML.
Igual que el ejemplo de la figura 3.1 la función se invoca al seleccionar el botón Aceptar.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Párrafo modificado.";
}
</script>
</head>
<body>
<h2>JavaScript en la sección head</h2>

<p id="demo">Este es el párrafo original.</p>
<button type="button" onclick="myFunction()">Aceptar</button>
</body>
</html>
Figura 3.2. Ejemplo de etiqueta script. Fuente (elaboración propia).
Los espacios y tabulaciones no se toman en cuenta al escribir el programa. Sí se
distinguen las mayúsculas y minúsculas. Para insertar una línea de comentario se realiza entre /*
…*/. Cada sentencia o instrucción termina con punto y coma (;). Para definir una variable se
codifica con la palabra reservada var : var variable. En caso de asignarle un valor se hace con:
variable = valor ejemplo :variable=8, o bien : var variable=8; Para dar nombre a una variable no
deberá de usar las palabras reservadas para el lenguaje Javascript. Solo podemos usar letras,
números, y los signos $ (dólar) y _ (guión bajo). El primer carácter no puede ser un número.
Dependiendo del dato que almacene, la variable puede ser Numérico: Su valor es un
número. Pueden ser números enteros, con decimales o en notación científica. También admite
números en sistema octal o hexadecimal. Cadena: Su valor es una cadena de texto. Para
escribirlo debemos ponerlo entre comillas var texto = "esta es una cadena de texto". Booleano:
Indica si se cumple una condición. Los únicos valores posibles son true (verdadero) y false
(falso). Objetos: Elementos más complejos como pueden ser arrays, funciones, etc. Los
Operadores numéricos realizan las operaciones aritméticas clásicas entre dos números, los
números pueden pasarse directamente o con variables. Los operadores que proporciona
JavaScript se resumen en la tabla 3.1
Tabla 3-1. Operadores JavaScript.
Signo Descripción Ejemplo

+ Suma dos o más valores numéricos o bien cadenas de c = a + b
texto.
- Resta de dos números c = a – b
* Multiplicación de dos números c = a * b
/ División entre dos números c = a / b
% Resto de la división entre dos números c = a % b
++ Incremento creciente. Aumenta en una unidad el ++a,a++
número
-- Incremento decreciente. Disminuye en una unidad el --a,a--
número
JavaScript proporciona operadores de asignación entre datos numéricos. En la tabla 3.2 se
muestra un resumen de estos operadores.
Tabla 3-2. Operadores de asignación compuestos.

+= Suma y asignación. Suma dos números y asigna el a += b
resultado al primero.
-= Resta y asignación. Resta dos números y asigna el a -= b

resultado al primero.
*= Multiplicación y a *= b
Asignación. Multiplicación y
asignación
/= División y asignación. Divide dos números y a /= b
asigna el resultado al primero
Otro tipo de valores que se puede almacenar en variables son los booleanos. Las variables
booleanas pueden contener solo dos valores: true (verdadero) o false (falso). Estas variables son
particularmente útiles cuando solo necesitamos determinar el estado actual de una condición. Los
valores booleanos son útiles cuando los usamos junto con instrucciones que permiten realizar
una tarea o tareas repetitivas de acuerdo a una condición. En la figura 3.3 se muestra la
codificación para este tipo de variable.
var valido = true;

alert(valido);
Figura 3.3. Ejemplo definición variable boolena. Fuente (elaboración propia).
Las variables también pueden almacenar varios valores al mismo tiempo en una
estructura llamada array. Los arrays se pueden crear usando una sintaxis simple que incluye los
valores separados por comas dentro de corchetes. Los valores se identifican luego mediante un
índice, comenzando desde 0 (cero). En la figura 3.4 se muestra un ejemplo.
var miarray = ["rojo", "verde", "azul"];

alert(miarray[0]); // "rojo"
Figura 3.4. Ejemplo de tipo array Fuente (elaboración propia).
En el programa de la figura 3.5, se crea un array llamado miarray con tres valores, las
cadenas de caracteres "rojo", "verde" y "azul". JavaScript asigna automáticamente el índice 0 al
primer valor, 1 al segundo, y 2 al tercero. Para leer estos datos, tenemos que mencionar el índice
del valor entre corchetes después del nombre de la variable. Por ejemplo, para obtener el primer
valor de miarray, tenemos que escribir la instrucción miarray[0]. La función alert() puede
mostrar no solo valores independientes, sino arrays completos. Si se quiere ver todos los valores
incluidos en el array, solo tenemos que especificar el nombre del array.
var miarray = ["rojo", "verde", "azul"];

alert(miarray); // "rojo,verde,azul"
Figura 3.5. Ejemplo función alert. Fuente (elaboración propia).
Los arrays, al igual que cualquier otra variable, pueden contener cualquier tipo de valor
que se requiera almacenar. Por ejemplo, se puede crear un array como el de la figura 3.6
combinando números y cadenas de caracteres.

var miarray = ["rojo", 32, "HTML5 es genial!"];

alert(miarray[1]);
Figura 3.6. Ejemplo de arreglo con elementos de distinto tipo. Fuente (elaboración propia).
También se puede realizar operaciones en los valores de un array y almacenar los
resultados, como se hace con variables sencillas. Como se muestra en la figura 3.7.
var miarray = [64, 32];

miarray[1] = miarray[1] + 10;
alert("El valor actual es " + miarray[1]); // "El valor actual es 42"
Figura 3.7. Operación con array. Fuente (elaboración propia).
Los arrays pueden incluir cualquier tipo de valores, por lo que es posible declarar arrays
de arrays. Estos tipos de arrays se denominan arrays multidimensionales y se codifica de la
siguiente forma: var miarray = [[2, 45, 31], [5, 10], [81, 12]];
El ejemplo de la figura 3.8 crea un array de arrays de números enteros. Para acceder a
estos valores, tenemos que declarar los índices de cada nivel entre corchetes, uno después del
otro. El ejemplo citado devuelve el primer valor (índice 0) del segundo array (índice 1). La
instrucción busca el array en el índice 1 y luego busca por el número en el índice 0.
var miarray = [[2, 45, 31], [5, 10], [81, 12]];

alert(miarray[1][0]); // 5
Figura 3.8. Acceso al elemento de un arreglo. Fuente (elaboración propia).
Si se requiere eliminar uno de los valores, se declara como undefined o null, o
declararlo como un array vacío asignando corchetes sin valores en su interior. Tal y como se
muestra en la figura 3.9.
var miarray = [[2, 45, 31], [5, 10], [81, 12]];

miarray[1] = []
alert(miarray[1][0]); // undefined
Figura 3.9. Asignación de un elemento nulo en el arreglo. Fuente (elaboración propia).
3.2 Manejo De Frameworks.
Un Framework es una estructura previa que se puede aprovechar para desarrollar un
proyecto. Los Frameworks han mostrado ser herramientas útiles para dar apoyo al proceso de
construcción de software, debido a que impulsan la reutilización del código, al prescribir y
soportar una arquitectura estandarizada que garantiza su mantenibilidad.
Algunas de las definiciones de Frameworks para la creación de aplicaciones Web hacen
referencia a: a) Soluciones de alto nivel para la reutilización de piezas de software, permiten
reutilizar funciones comunes y lógica genérica en un dominio de aplicación. Estos garantizan
calidad del producto final, ya que una parte importante ha sido construida, probada y validada. b)
Conjunto de códigos predefinidos o bibliotecas que proporcionan funcionalidad común a toda
una clase de aplicaciones. Puede ser visto como una base o esqueleto para construir aplicaciones
o sitios web. c) Estructuras para la creación de aplicaciones web que permiten al programador
desarrollar aplicaciones con interfaces interactivas y también para que la aplicación se ejecute en
una máquina que está controlada por el proveedor de la aplicación.
Entre las ventajas de utilizar un framework para el desarrollo de software se distingue que
el programador ahorra tiempo ya que dispone del esqueleto sobre el que desarrollar una
aplicación. Facilita los desarrollos colaborativos, al dejar definidos unos estándares de
programación. Al estar ampliamente extendido, es más fácil encontrar herramientas, módulos e
información para utilizarlo. Proporciona mayor seguridad, al tener gran parte de las potenciales
vulnerabilidades resueltas. Normalmente existe una comunidad detrás, un conjunto de
desarrolladores que pueden ayudar a responder consultas.

Diversos Frameworks basados en diferentes lenguajes de programación están disponibles
en la web para su libre utilización, como es el caso de: JSF, Apache Strutts, Ruby on Rails,
Grails, Cake PHP, Django, Catalyst y Symfony. A continuación se describe brevemente cada
uno de ellos:
Java Server Faces (JSF), framework para la creación de contenido web dinámico basado
en Java, el cual emplea Java Server Pages (JSP) para la visualización de páginas.
Apache Strutts, framework modelo vista controlador (MVC) de código fuente abierto
para la creación de aplicaciones web Java de alta estética y modernas.
Ruby on Rails (RoR), software de código abierto que permite a programadores
desarrollar aplicaciones utilizando únicamente RoR, sin necesidad de utilizar otros lenguajes de
programación tales como JavaScript, C ++ o HTML.
Grails: framework de código fuente abierto de desarrollo web construido sobre el
lenguaje de programación Groovy para la plataforma Java, que acelera la productividad de los
desarrolladores.
Cake PHP, es uno de varios entornos de aplicaciones de código abierto como Ruby, Zend
o symfony que permite la rápida generación de una interfaz gráfica de usuario basada en web
para una base de datos SQL, está escrito en PHP.
Django, framework web de Python de código fuente abierto de alto nivel que fomenta el
rápido desarrollo y el diseño limpio y funcional (Samuel, Aidas, & Arun, 2016).
Catalyst, framework para la construcción de aplicaciones web escrito en Perl, el cual
soporta la arquitectura modelo vista controlador.

Symfony, conjunto de componentes de PHP para crear sitios y aplicaciones web basadas
en el patrón modelo vista controlador.
3.3 Estructuras De Control.
Las estructuras de control, son instrucciones que permiten romper la secuencia de la
ejecución de un programa; es decir, una estructura de control permite que se realicen unas
instrucciones y omitir otras, de acuerdo a la evaluación de una condición (Flanagan, 2011).
Las estructuras de control son selectivas y repetitivas. Las primeras permiten seleccionar
un camino a ejecutarse entre dos o más opciones por una sola vez; y las segundas, permiten
ejecutar un conjunto de instrucciones varias veces mientras se cumpla una condición.
Al escribir una estructura de control, se deberá tener presente que una correcta tabulación,
permitirá que el programa sea más legible y fácil de comprender. Los lenguajes de
programación, realizan esta tabulación de forma automática, siempre y cuando se escriban
correctamente el inicio y final de cada estructura.
Las estructuras de control selectivas o condicionales nos permiten ejecutar una o más
instrucciones solo cuando se cumple una determinada condición (Goodman, 2001). JavaScript
proporciona la instrucción if, y la instrucción switch para este caso.
var mivariable = 9;
if (mivariable < 10) {
alert("El número es menor que 10");
}
Figura 3.10. Ejemplo de condicional if. Fuente (elaboración propia).
En el código de la figura 3.10, el valor 9 se asigna a mivariable, y luego, usando if se
compara la variable con el número 10. Si el valor de la variable es menor que 10, la función
alert() muestra un mensaje en la pantalla.

El operador usado para comparar el valor de la variable con el número 10 se llama
operador de comparación. En la tabla 3.3 se expresan los operadores de comparación
disponibles en JavaScript.
Tabla 3-3. Operadores de comparación.

== Igual. Comprueba si los dos elementos son iguales num1 == num2
=== Idéntico. Comprueba si los dos elementos son num1 === num2
iguales, pero aquí se comprueba también que los
datos sean del mismo tipo.
!= No igual. Comprueba si los dos elementos son num1 != num2

distintos, si son iguales devuelve false
.
!== No idéntico. Igual que el anterior, pero también num1 !== num2
comprueba si los datos son del mismo tipo
> Mayor que. Comprueba si el primer valor es mayor num1 > num2
que el segundo, si es así devuelve true y si no
devuelve false
< Menor que. Comprueba si el primer valor es menor num1 == num2

que el segundo
>= Mayor o igual que. Comprueba si el primer valor num1 >= num2
es mayor o igual que el segundo.
<= Menor o igual que. Comprueba si el primer valor num1 <= num2
es mayor o igual que el segundo
Después de evaluar una condición, esta devuelve un valor lógico verdadero o falso. Esto
nos permite trabajar con condiciones como si fueran valores y combinarlas para crear
condiciones más complejas. JavaScript ofrece los siguientes operadores lógicos con este
propósito, estos se muestran en la figura 3.4.
Tabla 3-4. Operadores Lógicos.

¡ Negación. Permuta el estado de la var mivariable = 9;
condición. Si la condición es if (!(mivariable < 10)) {
verdadera, devuelve falso, y alert("El número es
viceversa. menor que 10");
}
&& y. comprueba dos condiciones y var inteligente = true;

devuelve verdadero si ambas son var edad = 19;
verdaderas. if (edad < 21 &&
inteligente) {
alert("Juan está
autorizado");
}
|| o. comprueba dos condiciones y var lluvia = “NO”;
devuelve verdadero si una o ambas var nublado = “SI”;
son verdaderas. if (lluvia==”SI” ||
nublado==”SI”) {
alert("Cargue
paraguas");
}
El operador lógico “!” invierte el estado de la condición. Si la condición se evalúa como
verdadera, el estado final será falso, y las instrucciones entre llaves no se ejecutarán. La figura
3.11 muestra el código para este caso.
var mivariable = 9;
if (!(mivariable < 10)) {
}
Figura 3.11. Ejemplo operador lógico invierte. Fuente (elaboración propia).
El código de la figura 3.11 no muestra ningún mensaje en la pantalla. El valor 9 es aún
menor que 10, pero debido a que alteramos la condición con el operador !, el resultado final es
falso, y la función alert() no se ejecuta.
Para que el operador trabaje sobre el estado de la condición y no sobre los valores que se
están comparando, se encierra la condición entre paréntesis. Debido a los paréntesis, la condición
se evalúa en primer lugar y luego el estado que devuelve se invierte con el operador !.
Los operadores && (y), || (o) trabajan de un modo diferente. Estos operadores calculan el
resultado final basándose en los resultados de las condiciones involucradas. El operador && (y)
devuelve verdadero solo si las condiciones a ambos lados devuelven verdadero, y el operador ||
(o) devuelve verdadero si una o ambas condiciones devuelven verdadero. Por ejemplo, el
siguiente código ejecuta la función alert() solo cuando la edad es menor de 21 y el valor de la
variable inteligente es igual a "SI" (debido a que usamos el operador &&, ambas condiciones
tienen que ser verdaderas para que la condición general sea verdadera). La figura 3.12
ejemplifica este caso.
var inteligente = "SI";

var edad = 19;
if (edad < 21 && inteligente == "SI") {
alert("Juan está autorizado");
}
Figura 3.12. Ejemplo de operador && (y). Fuente (elaboración propia)
Otra forma de codificar el ejemplo de la figura 3.12 se considera dos valores para la
variable inteligente, "SI" y "NO", para este caso se puede convertir en una variable booleana.
Debido a que los valores booleanos son valores lógicos, no se necesita comparar con nada. El
código de la figura 3.13 simplifica el ejemplo de la figura 3.12 empleando una variable booleana.
var inteligente = true;

var edad = 19;
if (edad < 21 && inteligente) {
}
Figura 3.13. Reemplazando variable a tipo booleano. Fuente (elaboración propia).
JavaScript es flexible en cuanto a los valores que se usan para establecer condiciones. El
lenguaje es capaz de determinar una condición basándose en los valores de cualquier variable.
En el ejemplo de la figura 3.14, una variable con un número entero devolverá falso si el valor es
0 o verdadero si el valor es diferente de 0.
var edad = 0;
if (edad) {
}
Figura 3.14. Comparación booleana en una variable tipo entero. Fuente (elaboración propia)
El código de la instrucción if de la figura 3.14 no se ejecuta porque el valor de la variable
edad es 0 y, por lo tanto, el estado de la condición se considera falso. Si se almacena un valor

diferente dentro de esta variable, la condición será verdadera y el mensaje se mostrará en la
pantalla. Las variables con cadenas de caracteres vacías también devuelven falso. El ejemplo de
la figura 3.15 comprueba si se ha asignado una cadena de caracteres a una variable y muestra su
valor solo si la cadena no está vacía.
var nombre = "Juan";

if (nombre) {
alert(nombre + " está autorizado");
}
Figura 3.15. Condición boleana verdadera. Fuente (elaboración propia)
En ocasiones se requiere ejecutar instrucciones para cada estado de la condición
(verdadero o falso). JavaScript incluye la instrucción if else para ayudarnos en estas situaciones.
Las instrucciones se presentan en dos bloques de código delimitados por llaves. El bloque
precedido por if se ejecuta cuando la condición es verdadera y el bloque precedido por else se
ejecuta en caso contrario, como se muestra en la figura 3.16.
var mivariable = 21;

if (mivariable < 10) {
} else {
alert("El numero es igual o mayor que 10");
}
Figura 3.16. Condición if else. Fuente (elaboración propia)
En el ejemplo de la figura 3.16, el código considera dos condiciones: cuando el número
es menor que 10 y cuando el número es igual o mayor que 10. Si lo que se requiere es comprobar
múltiples condiciones, en lugar de las instrucciones if else podemos usar la instrucción switch.
Esta instrucción evalúa una expresión (generalmente una variable), compara el resultado con
múltiples valores y ejecuta las instrucciones correspondientes al valor que coincide con la
expresión. La sintaxis incluye la palabra clave switch seguida de la expresión entre paréntesis.
Los posibles valores se listan usando la palabra clave case, tal como muestra se muestra en la
figura 3.17.
var mivariable = 8;
switch(mivariable) {
case 5:
alert("El número es cinco");
break;
case 8:
alert("El número es ocho");
break;
case 10:
alert("El número es diez");
break;
default:
alert("El número es " + mivariable);
}
Figura 3.17. Ejemplo instrucción switch. Fuente (elaboración propia)
En el ejemplo de la figura 3.17, la instrucción switch evalúa la variable mivariable y
luego compara su valor con el valor de cada caso. Si el valor es 5, por ejemplo, el control se
transfiere al primer case, y la función alert() muestra el texto "El número es cinco" en la pantalla.
Si el primer case no coincide con el valor de la variable, se evalúa el siguiente caso, y así
sucesivamente. Si ningún caso coincide con el valor, se ejecutan las instrucciones en el caso
default.
En JavaScript, una vez que se encuentra una coincidencia, las instrucciones en ese caso se
ejecutan junto con las instrucciones de los casos siguientes. Este es el comportamiento por
defecto, pero normalmente no lo que el programa necesita. Por esta razón, JavaScript incluye la
instrucción break. Para evitar que el sistema ejecute las instrucciones de cada caso después de
que se encuentra una coincidencia, tenemos que incluir la instrucción break al final de cada caso.
Las instrucciones switch e if son útiles pero realizan una tarea sencilla: evalúan una
expresión, ejecutan un bloque de instrucciones de acuerdo al resultado y al final devuelven el
control al código principal. Sin embargo en otros casos se requiere ejecutar las instrucciones
varias veces para la misma condición o evaluar la condición nuevamente cada vez que se termina
un proceso. Para estas situaciones, contamos con dos instrucciones for y while.
JavaScript proporciona distintos tipos de ciclos for. La instrucción for ejecuta el código
entre llaves mientras la condición es verdadera. Usa la sintaxis for (inicialización; condición;
incremento). El primer parámetro establece los valores iniciales del bucle, el segundo parámetro
es la condición que queremos comprobar y el último parámetro es una instrucción que determina
cómo van a evolucionar los valores iniciales en cada ciclo. Esto se ejemplifica en la figura 3.18.
<!DOCTYPE html>
<html>
<body>
<h2>Ciclo for</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
document.writeln("El número es " + i + "<br>");
}
/*Esta es otra forma para desplegar los números:*/
/*document.getElementById("demo").innerHTML = text;*/
</script>
</body>
</html>
Figura 3.18. Ejemplo ciclo for. Fuente (elaboración propia)
La sentencia de la figura 3.19 for/in itera sobre todas las propiedades enumerables de un
objeto que está codificado por cadenas. En el siguiente ejemplo (figura 3.19) la sintaxis for/in
itera sobre el objeto persona. Cada iteración regresa el nombre del campo que es usado para
accesar el valor. El valor del campo es persona[x]. Así el valor de nombre es Juan, el valor de
apellido es Aguirre y el valor de edad es 25.
<!DOCTYPE html>
<html>
<body>
<h2>for/in</h2>
<p>La instrucción for/in itera sobre las propiedades de un objecto.</p>
<p id="demo"></p>
<script>
var txt = "";
var persona = {nombre:"Juan", apellido:"Aguirre", edad:25};
var x;
for (x in persona) {
txt += persona[x] + " ";
}
document.writeln(txt + "<br>");
</script>
</body>
</html>
Figura 3.19. Ejemplo instrucción for in. Fuente (elaboración propia)
La instrucción for/in también puede iterar sobre las propiedades de un arreglo. En la
figura 3.20 se muestra un ejemplo.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
</head>
<body>
<h2>for in en un arreglo</h2>
<p>for/in itera en los valores de un arreglo.</p>
<p id="demo"></p>
<script>
var txt = "";
var numeros = [45, 4, 9, 16, 25];
var x;
for (x in numeros) {
txt += numeros[x] + "<br>";
}
document.writeln(txt + "<br>");
</script>
</body>
</html>
Figura 3.20. Instrucción for in sobre propiedades de un arreglo. Fuente (elaboración propia)
La instrucción for/of itera sobre los valores de un objeto que son iterables, es decir que el
objeto tiene dos elementos o más. Esta instrucción itera sobre arreglos, cadenas, mapas, nodos,
listas, etc. La sintaxis es for (variable para iterar) { //bloque de instrucciones } el ejemplo 3.21
muestra esta instrucción.
<!DOCTYPE html>
<html>
<body>
<h2>for of </h2>
<p>for/of itera sobre los valores de un arreglo</p>
<p id="demo"></p>
<script>
const autos = ["Ford", "Honda", "Toyota","VW","Fiat"];
let text = "";
for (let x of autos) {

text += x + "<br>";
}
/*Imprime x en la pantalla*/
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Figura 3.21. Instrucción for of. Fuente (elaboración propia)
En el ejemplo de la figura 3.22 se muestra la instrucción for/in en una cadena de texto.
<!DOCTYPE html>
<html>
<body>
<h2>Ciclo for/Of </h2>
<p>Itera sobre una cadena de texto</p>
<p id="demo"></p>
<script>
let cadena = "Ejemplo sobre una cadena.";
let text = "";
for (let x of cadena) {

text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Figura 3.22. Instrucción for in en una cadena de texto. Fuente (elaboración propia).
La instrucción for es útil cuando podemos determinar ciertos requisitos, como el valor
inicial del bucle o el modo en que evolucionarán esos valores en cada ciclo. Cuando esta
información es poco clara, podemos utilizar la instrucción while. La instrucción while solo
requiere la declaración de la condición entre paréntesis y el código a ser ejecutado entre llaves.
El bucle se ejecuta constantemente hasta que la condición es falsa. La sintaxis es la siguiente:
while (condición) {//bloque de instrucciones}. En el ejemplo de la figura 3.23, el código en el
ciclo se ejecutará mientras la variable i sea menor que 10.
<!DOCTYPE html>
<html>
<body>
<h2>While</h2>
<p id="demo"></p>
<script>
var i = 0;
while (i < 10) {
document.writeln("El número es "+i + " <br>");
i++;
}
</script>
</body>
</html>
Figura 3.23. Instrucción while. Fuente (elaboración propia)
La instrucción do while ejecuta las instrucciones entre llaves y luego comprueba la
condición, lo cual garantiza que las instrucciones se ejecutarán al menos una vez. La sintaxis es
similar, solo tenemos que preceder las llaves con la palabra clave do y declarar la palabra clave
while con la condición al final. La sintaxis es la siguiente: do {//bloque de instrucciones} while
(condición). El ejemplo de la figura 3.24 muestra el ciclo do while. El ciclo se ejecuta al menos
una vez, aún si la condición es falsa, ya que el bloque de instrucciones se ejecuta antes de que la
condición sea evaluada. Es importante mencionar que no se debe de olvidar incrementar la
variable utilizada en la condición, ya que esto ocasiona que el ciclo nunca finalice
<!DOCTYPE html>
<html>
<body>
<h2>do while</h2>
<p id="demo"></p>
<script>
var i = 0;
do {
document.writeln("El número es "+i + " <br>");
i++;
}
while (i < 10);
</script>
</body>
</html>
Figura 3.24. Instrucción do while. Fuente (elaboración propia).
3.4 Manipulación De Objetos.
En Javascript, un objeto es una entidad independiente, una estructura de información que
contienen variables (propiedades), así como funciones (métodos). Debido a que los objetos
almacenan valores junto con funciones, son como programas independientes que se comunican
entre sí para realizar tareas comunes. Por ejemplo en la tabla 3.5 un auto es un objeto, ya que
tiene propiedades como color, marca, modelo, año, etc. Todos los autos tienen las mismas
propiedades, pero el valor de las propiedades es diferente en cada auto. También tienen los
mismos métodos, pero los métodos se ejecutan en diferente orden y distinto tiempo.
Tabla 3.5. Ejemplo de objeto.
Objeto: auto. Propiedades. Métodos.

auto.marca=Honda auto.inicio
auto.modelo=City auto.manejo
auto.color=Gris auto.frena
auto.cilindros=4 auto.para
auto.año=2021 auto.acelera
Para asignar valores a las variables, atributos o propiedades del objeto, se hace como en
el ejemplo de la figura 3.25.
var auto = {
marca: "Honda",
modelo: "City",
color: "Gris",
cilindros: 4,
año: 2021
};
Figura 3.25. Ejemplo de asignación de valores a objeto. Fuente (elaboración propia).
Se observa en la figura 3.25 que del lado izquierdo de los dos puntos se especifica la
propiedad y del lado derecha se tiene el valor de la propiedad o atributo. En el ejemplo de la
figura 3.26 se muestra el documento completo para el manejo de objetos. Se crea y asignan
valores al objeto y se despliega la información.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objetos</h2>
<p id="demo"></p>
<script>
// Crea un objeto:
var auto = {
marca: "Honda",
modelo: "City",
color: "Gris",
cilindros: 4,
año: 2021
};
// Despliega los valores del objeto:

document.getElementById("demo").innerHTML =
auto.marca+ ", "+auto.modelo+ ", "+auto.color+ ", "+auto.cilindros+ ",
"+auto.año;
</script>
</body>
</html>
Figura 3.26. Creación, asignación de valores e impresión en pantalla. Fuente (elaboración propia)
Unidad IV. Programación Del Lado Del Servidor.
4.1 Introducción al Lenguaje.
PHP, es un lenguaje desarrollado por programadores voluntarios que ha sido muy
utilizado en los servidores web del mundo. PHP es flexible, escalable, extendible, estable y
abierto, es gratuito y tiene soporte de una comunidad mundial de voluntarios lo que ha producido
una plataforma robusta.
PHP es un lenguaje interpretado, una de las ventajas es que el código fuente se puede
modificar y ponerlo a prueba de inmediato, sin necesidad de compilar (Nixon, 2014). La
estructura general de un programa PHP se muestra en la figura 4.1.
<?php
Instrucciones PHP
?>
Figura 4.1. Estructura de un programa PHP. (Fuente elaboración propia).
Cuando se desarrolla una aplicación Web, la forma más común de hacerlo es incrustando
el código PHP en uno de los documentos HTML utilizando etiquetas o delimitadores especiales.
En el ejemplo de la figura 4.2 el código PHP inicia con la etiqueta <?php, La instrucción echo
imprime el mensaje Hola mundo en la pantalla. Para finalizar utilizamos la etiqueta ?>.
<!DOCTYPE html>
<html>
<head>
<title> Prueba PHP </title>
</head>
<body>
<?php
echo "Hola Mundo";
?>
</body>
</html>
Figura 4.2. Programa PHP para imprimir un mensaje en pantalla. (Fuente elaboración propia).
Para ejecutar este programa PHP se realizan las instrucciones 1 a 4. El resultado se visualiza en
la figura 4.3.
1. Se ingresa al editor el código fuente de la figura 4.2.

2. Se guarda el archivo con la extensión Php (4.2.Php) en el directorio wamp>www.
3. Encender Wampserver32.
4. Abrir en algún navegador el programa 4.2.php con la instrucción
“http://localhost/4.2.php”
Figura 4.3. Resultado en pantalla del programa hola mundo. (Fuente elaboración propia).
Por otro lado también puede ingresar su código PHP directamente en un archivo de texto, sin
tener que incrustar el código PHP en un archivo HTML.
En la figura 4.4 se muestra el código fuente sin incrustación en un archivo HTML, en la
figura 4.5 se visualiza el resultado.
<?php
echo "Hola Mundo";
?>
Figura 4.4. Ejemplo sin incluir código HTML. (Fuente elaboración propia).
Figura 4.5. Ejemplo de hola mundo en PHP sin código HTML. (Fuente elaboración propia).
Note que en el ícono de Wampserver32 no se despliega el título “Prueba PHP”, debido a
que no se incluye este programa en un documento HTML.
En la figura 4.6 se proporciona un ejemplo que despliega en pantalla el texto de
bienvenida al curso de programación web en mayúsculas utilizando una función PHP.
<?php
// Define cadena
$texto = "Bienvenidos al curso de programación web";
//Convierte a mayúsculas la cadena de texto.
$ucstr=strtoupper($texto);
echo $ucstr;
//Convierte a minúsculas la cadena de texto

$lcstr=strtolower($texto);
echo $lcstr;
?>
Figura 4.6. Utiliza función PHP para convertir a mayúsculas texto. (Fuente elaboración propia).
En el programa de la figura 4.7 ejemplifica como terminar una línea de programación en
el lenguaje PHP. Como se puede apreciar se utiliza “;” o bien la etiqueta “?>”.
<html>
<head></head>
<body>
<div>
<?php echo sqrt(49); ?>
</div>
</body>
</html>
Figura 4.7. Ejemplo PHP para terminar línea de programa. (Fuente elaboración propia).
Variables. Una variable es el nombre que se le da a una posición de la memoria de la
unidad central de procesamiento, en la cual se almacena la información. En los lenguajes de
programación, al definir o declarar una variable es común expresar la naturaleza del tipo de
información que se va a guardad. En el caso de PHP, no es necesario declarar las variables antes
de su utilización. Las variables se crean en el instante en que son utilizadas por primera vez; para
su inicialización se utiliza el operador de asignación =. Las variables no tienen asociada la
naturaleza del tipo de información que almacenan, incluso las variables pueden almacenar
durante todo su tiempo de vida diferentes tipos de información.
En PHP los nombres de las variables van precedidos por el símbolo “$”, seguido al
menos por una letra o un guion bajo “_” para después continuar por cualquier combinación de
letras, de dígitos y de guiones bajos.
Tabla 4.1. Como asignar nombre a variables.
Válidos No válidos Motivo

$Valor_actual $Valor actual Contiene espacio
$NumerdeDatos $#Datos Carácter no válido #
$N $2Saldos Empieza por número
El intérprete PHP distingue entre mayúsculas y minúsculas, así la variable $nombre es
distinta a la variable $NOMBRE. También se puede asignar a una variable el valor de otra, o
bien el resultado de una operación. Cualquier variable puede ser desplegada en pantalla. En caso
de requerir un espacio entre el despliegue de los valores de las variables, se codifica la función
<BR>. En el programa de la figura 4.8 se muestra un ejemplo PHP de asignación y despliegue
del valor de una variable.
<?php
//Booleano
$usuario=true;
//entero
$capacidad=815;
//punto flotante
$radio=2.2;
//cadena de texto
$perro="Labrador";
//nulo
$lugar=null;
echo"\n $usuario <br> $capacidad <br> $radio <br> $perro <br> $lugar
<br> Fin"
?>
Figura 4.8. Ejemplo de asignación y despliegue de valores de una variable. (Fuente elaboración propia).
Operadores Aritméticos. En la tabla 4.2 se resumen los operadores aritméticos estándar PHP. La
descripción de cada operador se incluye.
Tabla 4.2. Operadores aritméticos PHP.
Operador Descripción
+ Suma
- Resta
* Multiplicación
/ División, Regresa el cociente
% División, Regresa el residuo
En la figura 4.9 se proporciona un ejemplo en PHP con los operadores aritméticos de la tabla 4.2.
<?php
//Se definen variables
$x=10;
$y=5;
$z=3;
echo "x=$x y=$y z=$z\n";

//suma
$suma=$x+$y;
//resta
$resta=$x-$y;
//multiplicar
$producto=$x*$y;
//divide, cociente
$cociente=$x/$y;
//divide, residuo
$residuo=$x%$y;
echo "Suma=$suma <br> Resta=$resta <br>

Multiplicacion=$producto <br> Cociente=$cociente <br>
Residuo=$residuo";
?>
Figura 4.9. Ejemplo de operadores PHP. (Fuente elaboración propia).
En la tabla 4.3 se resume las funciones matemática mas utilizadas. Se incluye un ejemplo
de codificación en cada caso.

Tabla 4.3. Funciones matemáticas PHP.
Función Descripción Ejemplo

abs Valor absoluto echo abs(-4.2);
Acos Arco Coseno $c=(acos(0.121)); echo
$c;
** Elevar al cuadrado $c=$vol**2;
exp $c=exp($vol);
pow Elevar base a una potencia $c=pow($vol,3);
abs Valor absoluto $c=abs($vol);
Cos Coseno $c=cos($vol);
Sin Seno $c=sin($vol);
4.2 Estructuras De Control.
PHP proporciona diferentes estructuras de control. Entre estás se tiene la instrucción
condicional “if”. Se utiliza cuando se requiere escribir código para ejecutar distintas acciones.
“if”. Se ejecutan una serie de instrucciones en caso de que la condición se cumpla. La
sintaxis es como sigue, if (condición) {bloque de condiciones a ejecutarse si la condición se
cumple}. En la figura 4.10 se da un ejemplo de esta estructura.
<!DOCTYPE html>
<html>
<body>
<?php
$prom = 91;
echo $prom;
echo " ";
if ($prom > 70) {
echo "Aprobado!";
}
?>
</body>
</html>
Figura 4.10. Ejemplo de instrucción “if”. (Fuente elaboración propia).
“if” … “else”. Se ejecuta el bloque de instrucciones si la condición se cumple y otro
segmento de código si la condición es falsa. La sintaxis es la siguiente: if (condición) {bloque de
condiciones a ejecutarse si la condición es verdadera} else {bloque de condiciones a ejecutarse
si la condición es falsa}. Un ejemplo se muestra en el programa de la figura 4.11.

<!DOCTYPE html>
<html>
<body>
<?php
$prom = 69;
echo $prom;
echo " ";
if ($prom >= 70) {

echo "Aprobado!";
} else {
echo " No Aprobado!";
echo " Favor de solicitar Asesoría.";
}
?>
</body>
</html>
Figura 4.11. Ejemplo “if”…”else”. (Fuente elaboración propia).
“if”…”elseif”…”else. En esta condicional se ejecutan diferentes segmentos de código
para más de dos condiciones. La sintaxis de la condicional “if”…”elseif”…”else” es la siguiente:
if (condición) {código a ejecutarse si la condición es verdadera;} elseif (condición) {código a
ejecutar si la primera condición es falsa y esta condición es verdadera;} else { código a
ejecutarse si todas las condiciones son falsas;}. En la figura 4.12 se muestra el ejemplo de esta
condicional.
<!DOCTYPE html>
<html>
<body>
<?php
$prom = 69;
echo $prom;
echo " ";
if ($prom > 90) {
echo "Aprobado";
echo " Sobresaliente!";
}
elseif ($prom >= 70) {
echo " Aprobado!";
echo " Muy bien";
}
else {
echo " NO Aprobado!";
echo " Favor de solicitar Asesoría.";
}
?>
</body>
</html>
Figura 4.12. Ejemplo PHP de condicional “if”…”elseif”…”else”. (Fuente elaboración propia).
“switch”. Selecciona un bloque de instrucciones de varios bloques existentes.
Sintaxis “switch”. Selecciona un bloque de instrucciones, de varios bloques existentes.
Switch (n) {
Case etiqueta1: código a ejecutarse si n=etiqueta1;
Break:
Break;
Break;
……….
Default: código a ejecutarse si n es distinto a las etiquetas anteriores.
En la figura 4.13 se proporciona un ejemplo para esta condicional de selección de un
bloque de instrucciones.
<!DOCTYPE html>
<html>
<body>
<?php
$prom = 97;
echo $prom;
echo " ";
switch ($prom) {
case 100:
echo "Sobresaliente Solicite Beca!";
break;
case 99:
echo "Sobresaliente Solicite Reconocimiento!";
break;
case 98:
echo "Sobresaliente Solicite Mencionar en Acto Cívico!";
break;
default:
echo "Registro no Sobresaliente!";
}
?>
</body>
</html>
Figura 4.13. Ejemplo switch. (Fuente elaboración propia).
Un bucle o ciclo, en programación, es una secuencia de instrucciones de código que se
ejecuta repetidas veces, hasta que la condición asignada a dicho bucle deja de cumplirse. Los tres
bucles más utilizados en programación PHP son el bucle while, el bucle for y el bucle do-while,
además del ciclo foreach.
El bucle while en PHP se utiliza para ejecutar un segmento de código mientras la
condición siga siendo verdadera. Generalmente se utilizan para acumuladores, o para mostrar
registros de una base de datos. La sintaxis para este bucle es el siguiente: while (condición)
{código a ejecutarse si la condición se cumple}. En la figura 4.14 se muestra un ejemplo de esta
condicional.
<!DOCTYPE html>
<html>
<body>
<?php
$contador = 1;
while($contador <= 6 ) {
echo "Registro: $contador <br>";
$contador++;
}
?>
</body>
</html>
Figura 4.14. Ejemplo while. (Fuente elaboración propia).
La estructura repetitiva do-while (hacer… mientras) es muy similar a la estructura while,
excepto que la condición es verificada al final de cada iteración en lugar de al principio. De esta
forma el bloque de instrucciones en el ciclo, se ejecuta al menos una vez. La sintaxis es la
siguiente do {bloque de instrucciones} while (condición). Un ejemplo se muestra en la figura
4.15
<!DOCTYPE html>
<html>
<body>
<?php
$contador = 1;
do {
echo "Registro: $contador <br>";
$contador++;
} while($contador <= 0 )
?>
</body>
</html>
Figura 4.15. Ejemplo de bucle do..while. (Fuente elaboración propia).
Un bucle for es un bucle que repite el bloque de instrucciones un número predeterminado
de veces. El bloque de instrucciones que se repite se llama cuerpo del bucle y cada repetición se
conoce como iteración. La sintaxis para este ciclo es el siguiente: for (valor inicial; condición;
incremento) { Bloque de instrucciones que se ejecutarán en cada iteración.}. Un ejemplo está en
la figura 4.16.
<!DOCTYPE html>
<html>
<body>
<?php
for ($cont = 0; $cont <= 6; $cont++) {
echo "Valor de Contador: $cont <br>";
}
?>
</body>
</html>
Figura 4.16. Ejemplo de ciclo for. (Fuente elaboración propia).
El bucle foreach es un tipo especial de bucle que permite recorrer estructuras que
contienen varios elementos (como matrices, recursos u objetos) sin necesidad de preocuparse por
el número de elementos. Este ciclo solo funciona en este tipo de estructuras. La sintaxis es:
foreach (arreglo as $valor) {bloque de instrucciones}. En este caso se recorre el arreglo dado por
arreglo. En cada iteración, el valor del elemento actual se asigna a la variable $valor y el puntero
interno del arreglo avanza una posición (de esta forma la siguiente iteración se observará el
siguiente elemento). La figura 4.17 proporciona un ejemplo.
<!DOCTYPE html>
<html>
<body>
<?php
$moneda = array("Peso", "Dólar", "Euro", "Rublo");
foreach ($moneda as $value) {

echo "$value <br>";
}
?>
</body>
</html>
Figura 4.17. Ejemplo foreach. (Fuente elaboración propia).
foreach (arreglo as $clave => $valor) {bloque de instrucciones}. En este caso se asigna la
clave del elemento actual a la variable $clave en cada iteración. Por lo tanto se despliega la llave
y el valor en el arreglo, tal y como se muestra en la figura 4.18.
<!DOCTYPE html>
<html>
<body>
<?php
$moneda = array("Peso"=>"Méx", "Dólar"=>"USA", "Euro"=>"Europa",
"Rublo"=>"Rusia");
foreach($moneda as $x => $val) {
echo "$x = $val<br>";
}
?>
</body>
</html>
Figura 4.18 Ejemplo foreach (arreglo as $clave => $valor). (Fuente elaboración propia).
4.3. Tratamiento De Formularios.
Un formulario en PHP o cualquier otro lenguaje sirve para enviar datos (ingresados por
un usuario) a un servidor con el fin procesarlos o bien guardarlos en una base de datos.
Un formulario puede incluir distintos campos, tales como datos numéricos, fechas, textos,
contraseñas, etc.
Para enviar información al servidor, el protocolo HTTP provee diferentes métodos de
petición. Los dos más importantes son GET y POST, los cuales, aunque entregan los mismos
resultados, revelan algunas diferencias entre ellos. El método POST es aconsejable cuando el
usuario debe enviar datos o archivos al servidor, como, por ejemplo, cuando se completan
formularios o se suben fotos. El método GET es adecuado para la personalización de páginas
web: el usuario puede guardar búsquedas, configuraciones de filtros y ordenaciones de listas
junto al URL como marcadores, de manera que en su próxima visita la página web se mostrará
según sus preferencias, en general para la configuración de páginas web (filtros, ordenación,
búsquedas, etc.). En el ejemplo de la figura 4.19 se muestra un formulario simple con dos datos
de entrada y un botón de envío.
<!DOCTYPE HTML>
<html>
<body>
<form action="Registro.php" method="post">

Nombre: <input type="text" name="nombre"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
Figura 4.19. Ejemplo de formulario. (Fuente elaboración propia).
En el ejemplo de la figura 4.19 se utiliza el método post que almacena datos para enviar
los valores de la variable nombre y email al programa “registro.php”.

Para el manejo de formularios, PHP permite distintos “input fields”, entre ellos están los
“text fields”, “radio buttons”, y “submit button”. En el ejemplo de la figura 4.20 se muestra el
manejo de un formulario con diferentes “input fields”.
Como se puede apreciar se utiliza “text fields” para ingresar nombre, email. El nombre
del website es un “text input”, los comentarios se ingresan en un “text area”. El género se
ingresa mediante “radio buttons”.
El formulario se inicia con la instrucción “form method=”post” action=”<?php echo
htmlspecialchars($_SERVER[“PHP_SELF”]);?>”> y cuando se envía el formulario, los datos
del formulario se envían mediante el método “post”. La instrucción $_SERVER["PHP_SELF"]
es una variable global que regresa el nombre del archivo del actual script en ejecución. Así, $
_SERVER ["PHP_SELF"] envía los datos del formulario enviado a la página misma, en lugar de
saltar a una página diferente. De esta forma, el usuario recibirá mensajes de error en la misma
página que el formulario. La función htmlspecialchars() convierte caracteres especiales en
entidades HTML.
Como se muestra en el programa de la figura 4.20 la función htmlspecialchars()
convierte caracteres especiales en entidades HTML. Ahora, si el usuario intenta modificar la
variable PHP_SELF, dará como resultado un mensaje de error y no se ejecutará la instrucción.
La función test_input() en el programa de la figura 4.20 se codifica con el fin de validar los datos
de entrada del formulario y así proporcionar una mayor seguridad en el formulario evitando que
en el programa se inserten líneas de código maliciosas.
Tener en cuenta que al comienzo del script, verificamos si el formulario se ha enviado
utilizando $ _SERVER ["REQUEST_METHOD"]. Si REQUEST_METHOD es POST, entonces

el formulario ha sido enviado y debe ser validado. Si no se ha enviado, se omite la validación y
se muestra un formulario en blanco. Sin embargo, en el ejemplo de la figura 4.20, todos los
campos de entrada son opcionales. El script funciona bien incluso si el usuario no ingresa dato.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<?php
// define variables e inicializa en vacio los valores
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);
$gender = test_input($_POST["gender"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>Ejemplo de validación de datos</h2>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Nombre: <input type="text" name="name">
<br><br>
E-mail: <input type="text" name="email">
<br><br>
Website: <input type="text" name="website">
<br><br>
Comentarios: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Sexo:
<input type="radio" name="gender" value="female">Femenino
<input type="radio" name="gender" value="male">Masculino
<input type="radio" name="gender" value="other">Otro
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Ingresaste:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
</body>
</html>
Figura 4.20. Ejemplo completo de formulario. (Fuente elaboración propia).
4.4 Manejo De Objetos Del Servidor.
La programación orientada a objetos es una metodología de desarrollo de software y un
paradigma de programación que define los programas mediante clases y objetos (Hayder, 2007).
Estos son entidades que contienen atributos o variables y métodos o funciones. Este paradigma
de programación introduce conceptos como clase, herencia, objeto, método, atributo, mensaje,
entre otros.
PHP es un lenguaje de programación estructurado, sin embargo posee la capacidad de
orientación a objetos, de esta forma el programa se ejecuta más rápido. Se facilita la
programación ya que se pueden reutilizar los objetos. Los principales componentes de este
paradigma son las clases y los objetos.
Entendiéndose que una clase representa un objeto o un conjunto de objetos que comparte
una estructura y un comportamiento comunes. Un objeto representa una instancia específica de
una clase. Por ejemplo un automóvil es una clase, y un objeto para esta clase puede ser volvo,
Audi, Toyota, Honda. Así la clase es lo general y el objeto es lo específico.
Cuando se crea el objeto, este hereda todos los atributos y métodos de la clase, y cada objeto
tiene distintos valores en sus atributos. Los mecanismos básicos de la orientación a objetos son
los siguientes:
Objetos. Son unidades básicas de construcción de los programas, que se componen por
atributos y métodos. Por ejemplo si se tiene la clase automóvil con los atributos marca, modelo,
cilindros, año, el objeto será honda, Crv, 4, 2021. Los métodos son acciones que determinan
como debe de actuar un objeto y que acción debe realizar, en otras palabras los métodos son
funciones y la acción es el algoritmo dentro de esa función. Para este ejemplo los métodos son:
marcha, acelerar, detenerse, girar, etc.
Otro componente muy importante es Clase, Superclase y Subclase. Como se definió
anteriormente una clase es la generalización de un tipo específico de objetos, es decir, es el
conjunto de atributos o características y métodos de todos los objetos que componen la clase.
Algunos de los principios de la programación orientada a objetos son la
Encapsulación. Contiene toda la información importante de un objeto dentro del
mismo y solo expone la información seleccionada hacia su exterior. Así se permite asegurar que
la información de un objeto esté oculta, agrupando en una Clase las características o atributos
que cuentan con un acceso privado, y los comportamientos o métodos que presentan un acceso
público. La encapsulación de cada objeto es responsable de su propia información y de su propio
estado. La única forma en la que este se puede modificar es mediante los propios métodos del
objeto. Por lo tanto, los atributos internos de un objeto deberían ser inaccesibles desde fuera,
pudiéndose modificar sólo llamando a las funciones correspondientes. Con esto se mantiene
seguro de usos indebidos.
En el ejemplo de la clase automóvil la encapsulación el coche comparte información
pública a través de las luces de freno o intermitentes para indicar los giros (interfaz pública). Por
el contrario, tenemos la interfaz interna, que sería el mecanismo propulsor del coche, que está
oculto bajo el cofre. Cuando se conduce un automóvil es necesario indicar a otros conductores
los movimientos, pero no exponer datos privados como la temperatura del motor.
La abstracción se entiende cuando el usuario interactúa solo con los atributos y métodos
seleccionados de un objeto, utilizando herramientas simplificadas de alto nivel para acceder a un

objeto complejo. En el ejemplo del automóvil el usuario o conductor no requiere conocer los
detalles de funcionamiento del motor para poder conducir.
La herencia. Define relaciones jerárquicas entre clases, de forma que atributos y métodos
comunes puedan ser reutilizados. Las clases principales extienden atributos y comportamientos a
las clases secundarias. A través de la definición en una clase de los atributos y comportamientos
básicos, se pueden crear clases secundarias, ampliando así la funcionalidad de la clase principal y
agregando atributos y comportamientos adicionales. En el ejemplo de la clase automóvil se
utiliza una sola clase, y las clases secundarias heredan todas las características de la clase
principal.
Poliformismo. Consiste en diseñar objetos para compartir comportamientos, lo que nos
permite procesar objetos de diferentes maneras. Es la capacidad de presentar la misma interfaz
para diferentes tipos de datos. Al utilizar la herencia, los objetos pueden anular los
comportamientos principales compartidos, con comportamientos secundarios específicos. El
polimorfismo permite que el mismo método ejecute diferentes comportamientos de dos formas:
anulación de método y sobrecarga de método.
La principal ventaja de este paradigma de programación es la reutilización de código.
Además de simplificar la complejidad,

4.5 Creación De Clases.
Como se definió en el tema anterior, una clase es una plantilla de objetos y un objeto es
una entidad específica de la clase.
Cuando el objeto individual se crea, este hereda todos los atributos y métodos de la clase,
pero cada objeto tendrá diferentes valores para los atributos. Así la clase llamada automóvil y
podemos declarar los atributos marca, modelo, año, cilindros. Se definen las variables $marca,
$modelo, $anio, $cilindros para almacenar los valores de los atributos.
Una clase se define en PHP mediante la palabra reservada “class”, seguido por el nombre.
A continuación se declaran los atributos o variables de la clase automóvil. Estas son $marca y
$modelo. Se declaran también los métodos asigna_marca() y obtén_marca() para asignar y
recuperar la marca del automóvil. La figura 4.21 ejemplifica la clase.
<?php
class Automovil {
// Atributos
public $marca;
public $modelo;
// Métodos
function asigna_marca ($marca) {
$this->marca = $marca;
}
function obten_marca() {
return $this->marca;
}
}
?>
Figura 4.21. Creación de clase en PHP. (Fuente elaboración propia).
A partir de una clase se pueden crear múltiples objetos. Cada objeto tendrá todos los
atributos y métodos que se definieron en la clase pero estos objetos tendrán valores distintos
como se muestra en el ejemplo de la figura 4.22.

<?php
class Automovil {
// Atributos
public $marca;
public $modelo;
// Métodos
function asigna_marca ($marca) {
$this->marca = $marca;
}
function obten_marca() {
return $this->marca;
}
function asigna_modelo($modelo) {
$this->modelo = $modelo;
}
function obten_modelo() {
return $this->modelo;
}
}
$honda = new Automovil();

$honda->asigna_marca('Honda');
$honda->asigna_modelo('HRV');
echo "Marca: " . $honda->obten_marca();
echo "<br>";
echo "Modelo: " . $honda->obten_modelo();
?>
Figura 4.22. Creación de objetos. (Fuente elaboración propia).
Es importante mencionar que el símbolo “$” se utiliza para designar a la variable y no al
atributo de la clase. Así “modelo” es el atributo de la clase y “$modelo” es el nombre de la
variable temporal.
4.6 Acceso A Datos.
Una base de datos es un conjunto de información que está relacionada entre si y que
representa la información operacional de una organización. Cada base de datos está compuesta
por una o más tablas. Estas tablas, que estructuran los datos en filas y columnas, imponen
organización a los datos. La figura 4.23 ilustra una tabla típica.

Figura 4.23. Tabla en base de datos. Fuente (Vaswani, PHP A Beginner´s Guide, 2009)
Esta tabla contiene cifras de ventas para varias ubicaciones, con cada fila o registro que
contiene información para una ubicación y año diferentes. Cada registro se subdivide en
columnas, o campos, y cada campo contiene un fragmento diferente de información. Esta
estructura tabular facilita la búsqueda en la tabla de registros que coincidan con criterios
particulares: por ejemplo, todas ubicaciones con ventas superiores a $ 10,000, o ventas para
todas las ubicaciones en el año 2008. Para agregar un atributo de identificación único a cada
registro, como un número de serie o una secuencia código. En el ejemplo anterior, cada registro
se identifica mediante un campo de "ID” de registro único; este campo se conoce como la llave
principal de esa tabla.
Una vez que tenga la información en una tabla, normalmente se usa para responder
preguntas, por ejemplo, ¿cuántas ubicaciones tuvieron ventas superiores a $ 5000 en 2008? estas
preguntas se conocen como consultas, y los resultados devueltos por la base de datos en
respuesta a estas las consultas se conocen como conjuntos de resultados. Las consultas se
realizan utilizando el lenguaje de consulta estructurado.
Una sola base de datos puede contener varias tablas. En una base de datos relacional,
estas tablas se pueden vincular entre sí por uno o más campos comunes, llamados llaves. Estas
llaves externas permiten crear uno a uno o uno a muchos relaciones entre diferentes tablas y
combinar datos de varias tablas para crear conjuntos de resultados más completos. Para
ilustrarlo, considere la Figura 4.24, que muestra tres tablas vinculadas.
Figura 4.24. Relación de Tablas. (Vaswani, PHP A Beginner´s Guide, 2009).
La Figura 4.24 muestra tres tablas, que contienen información sobre autores (Tabla A),
géneros (Tabla G) y libros (Tabla L) respectivamente. Las tablas A y G son bastante sencillas:
contienen una lista de géneros y nombres de autor respectivamente, con cada registro
identificado por un llave primaria única. La tabla L es un poco más compleja: cada libro de la
tabla está vinculado a un género específico por medio de la llave principal del género (de la
Tabla G) y a un autor específico a través de la llave principal del autor (de la Tabla A). Al seguir
estas llaves para sus respectivas tablas de origen, es fácil identificar al autor y género para un
libro específico. Por ejemplo, se puede ver que el título "El resplandor" es escrito por "Stephen
King" y pertenece al género "Horror". Del mismo modo, partiendo del otro extremo, se puede
ver que el autor "Michael Connelly" ha escrito dos libros, "The Overlook ”y“ Trunk Music ”.
Relaciones como las que se ven en la Figura 4.24 forman los cimientos de una relación
sistema de bases de datos. Vincular tablas usando llaves externas también es más eficiente que la
alternativa de crear una sola tabla.
El proceso de simplificar una base de datos mediante la definición e implementación de
uno a uno y las relaciones de uno a muchos entre sus tablas de componentes se conocen como
normalización de base de datos, y es una tarea clave a la que se enfrenta cualquier ingeniero de
bases de datos al crear una nueva base de datos. En el proceso de normalización, el ingeniero de
bases de datos también identifica relaciones y dependencias incorrectas entre tablas, y optimiza
la organización de datos para que las consultas SQL funcionen con la máxima eficacia (Nixon,
2014). Varias formas normales están disponibles para ayudar a probar hasta qué punto su base de
datos está normalizada.
El lenguaje de consulta estructurado, o SQL, es el lenguaje estándar que se utiliza para
comunicarse con una base de datos, agregar o cambiar registros y privilegios de usuario, y
realizar consultas. El idioma, que se convirtió en un estándar ANSI en 1989, es utilizado
actualmente por casi todos los RDBMS comerciales.
El primer paso que se hace es crear la base de datos, esto se hace mediante el comando
“CREATE”. Por ejemplo para crear una base de datos llamada “empleados”, esto lo hacemos
mediante el comando de la figura 4.25.

Figura 4.25. Crear una base de datos. Fuente (elaboración propia).
A la base de datos empleados se agrega una tabla que le daremos el nombre de
“empleados” y a esta tabla se le agregan los campos “nombre” y “puesto”, tal y como se muestra
en la figura 4.26.
Figura 4.26. Agregando dos campos a la tabla empleados. Fuente (elaboración propia).
Se nombran los campos de la tabla a continuación con su tipo de datos y tamaño.
En este caso contendrá 5 campos el cual es el id del empleado, nombre, apellido paterno y
materno y el puesto que desempeña. La clave primaria será el id del empleado y tendrá un
tamaño de 10 caracteres, los demás tendrán un tamaño de 25 caracteres. Como se muestra en la
figura 4.27
Figura 4.27. Estructura de una tabla en la base de datos. Fuente (elaboración propia).
Posteriormente se crea una carpeta en wamp>www> en donde se guarda el archivo PHP
con el código de la conexión a la base de datos (figura 4.28).
<?php
$mysqli = new mysqli('localhost','root','','empresagycp');

if($mysqli -> connect_errno){
echo "error en la conexion :(".$mysqli ->connect_error;
}else
{
echo "conexion exitosa :)";
}
?>
Figura 4.28. Conexión a base de datos en PHP. Fuente (elaboración propia).
Posteriormente se codifica el código de la ventana principal que es donde está el
formulario (figura 4.29).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Examen 4 unidad</title>
</head>
<body>
<h1>Registro de empleados</h1>
<hr>
<form id="form" action="insertar.php" method="post">
<fieldset>
<legend> Ingresar empleado</legend>
<div class="campo">
<div class="etiqueta"> ID del empleado
</div> <br>
<div class="caja">
<input type="text" name="id_empleado"
placeholder=""></div>
</div><br>
<div class="campo">
<div class="etiqueta"> Nombre del empleado</div><br>
<div class="caja">
<input type="text" name="nom_empleado"
placeholder=""></div><br>
<div class="campo">
<div class="etiqueta"> Apellido paterno del empleado</div><br>
<div class="caja">
<input type="text" name="ap_empleado"
<div class="campo">
<div class="etiqueta">Apellido materno del empleado</div><br>
<div class="caja">
<input type="text" name="am_empleado"
<div class="campo">
<div class="etiqueta"> Puesto del empleado</div><br>
<div class="caja">
<input type="text" name="puesto_emp"
placeholder=""></div>
</div>
<div id="botones"><br>
<div> <input type="submit" name="btguardar"
value="Guardar"></div><br>
<div> <input type="reset" name="btlimpiar" value="Limpiar"></div>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
Figura 4.29. Programa PHP manejo de formulario. Fuente (elaboración propia).
Posteriormente se programa el comando de la figura 4.30 que insertará en la base de datos
la información, para este caso es insert into.
<?php
require_once('conectar.php');
$id_empleado= $_POST['id_empleado'];
$nom_empleado= $_POST['nom_empleado'];
$ap_empleado=$_POST['ap_empleado'];
$am_empleado=$_POST['am_empleado'];
$puesto_emp=$_POST['puesto_emp'];
$sql="INSERT INTO empleados VALUES
('$id_empleado','$nom_empleado','$ap_empleado',
'$am_empleado','$puesto_emp')";
$consulta= $mysqli -> query($sql) or die
("Error".$mysqli -> error);
if($consulta) echo "Registro insertado";

echo '<a href= "index.php"> Insertar nuevo registro </a>';
$mysqli -> close();
echo " ";
echo "ID: $id_empleado | ";
echo " Nombre: $nom_empleado $ap_empleado $am_empleado | ";
echo " Puesto: $puesto_emp";
?>
Figura 4.30. Programa PHP que inserta datos en la base de datos. Fuente (elaboración propia).
Finalmente la figura 4.31 muestra el resultado para el ejemplo de la figura 4.30 .
Figura 4.31. Ejemplo de formulario con datos capturados. Fuente (elaboración propia).
Unidad V. Cómputo En La Nube y Servicios.
5.1. Conceptos Generales.
De acuerdo al National Institute of Standards and Technology (NIST) y su Information
Technology Laboratory, se define cómputo en la nube como un modelo que permite el acceso
bajo demanda a través de la red, a un conjunto compartido de recursos de computación
configurables como redes, servidores, almacenamiento, aplicaciones y servicios (Peter Mell,
2011).
Cómputo en la nube es un conjunto de hardware, software, almacenamiento, e interfaces
que facilitan la entrada de la información como un servicio. La tecnología de nube tiene un gran
número de actores o participantes, entre ellos los vendedores o proveedores quienes
proporcionan las aplicaciones y facilitan las tecnologías, infraestructura, plataformas y la
información correspondiente; los socios de los proveedores que crean servicios para la nube,
ofreciendo servicios a los clientes; los administradores de negocios quienes evalúan los servicios
de la nube para implantarlos en sus organizaciones y empresas; los usuarios finales quienes
utilizan los servicios de la nube, gratuitamente o mediante un pago periódico (Marks & Lozano,
2010).
El modelo de la nube, de acuerdo al NIST (Peter Mell, 2011), se compone de cinco
características esenciales, tres modelos de servicio y cuatro modelos de despliegue.
Las características esenciales son:
1. Autoservicio bajo demanda. Un consumidor puede proveerse unilateralmente de
tiempo de servidor y almacenamiento en red, a medida que lo necesite; sin requerir interacción
humana con el proveedor del servicio.

2. Acceso ubicuo a la red. Se realiza mediante mecanismos estándares, que promueven
el uso por plataformas de clientes como teléfonos móviles, computadoras portátiles, tabletas,
etc.
3. Distribución de recursos independientes de la ubicación. Los recursos de
computación del proveedor son agrupados para servir a múltiples consumidores utilizando un
modelo multi distribuido con diferentes recursos físicos y virtuales asignados y reasignados
dinámicamente conforme a la demanda del consumidor. Existe una sensación de independencia
de la ubicación, de modo que el cliente, normalmente, no tiene control ni conocimiento sobre la
posición exacta de los recursos proporcionados. Pero podría especificarla a un nivel más alto de
abstracción (país, región geográfica o centro de datos). Ejemplos de recursos incluyen
almacenamiento, procesamiento, memoria, ancho de banda de la red y computadoras virtuales.
4. Elasticidad rápida. Las funcionalidades se pueden proporcionar de modo rápido y
elástico, en algunos casos automáticamente. Sus características de almacenamiento dan la
sensación de ser ilimitadas y pueden adquirirse en cualquier cantidad o momento.
5. Servicio medido. Los sistemas de computación en la nube controlan y optimizan
automáticamente el uso de recursos, potenciando la capacidad de medición en un nivel de
abstracción apropiado al tipo de servicio (almacenamiento, procesamiento, ancho de banda y
cuentas activas de usuario). El uso de recursos puede ser monitoreado, controlado e informado,
proporcionando transparencia para el proveedor y para el consumidor.
Los modelos de servicio se refieren a los servicios específicos a los que se puede acceder
en una plataforma de computación en la nube y son los siguientes:

1. Software. Al usuario se le ofrece la capacidad de que las aplicaciones suministradas se
desenvuelvan en una infraestructura de la nube, siendo las aplicaciones accesibles a través de un
navegador web, como en el correo electrónico. Posiblemente, este es el ejemplo más
representativo, por lo extendido, de este modelo de servicio. El usuario carece de cualquier
control sobre la infraestructura o sobre las propias aplicaciones, excepción hecha de las posibles
configuraciones de usuario o personalizaciones que se le permitan.
2. Plataforma. Al usuario se le permite desplegar aplicaciones propias (adquiridas o
desarrolladas por el propio usuario) en la infraestructura de la nube de su proveedor, que ofrece
la plataforma de desarrollo y las herramientas de programación. En este caso, el usuario
mantiene el control de la aplicación, aunque no de toda la infraestructura.
3. Infraestructura. El proveedor ofrece recursos como capacidad de procesamiento, de
almacenamiento o comunicaciones, que el usuario puede utilizar para ejecutar cualquier
software; desde sistemas operativos hasta aplicaciones.
Los modelos de despliegue se refieren a la posición, localización y administración de la
infraestructura de la nube y son:
1. Nube privada. Los servicios no son ofrecidos al público en general. La infraestructura
es íntegramente gestionada por una organización.
2. Nube pública. La infraestructura es operada por un proveedor que ofrece servicios al
público en general.
3. Nube híbrida. Resultado de la combinación de dos o más nubes individuales que
pueden ser privadas, compartidas o públicas. Permite enviar datos o aplicaciones entre ellas.
4. Nube comunitaria. Ha sido organizada para servir a una función o propósito común.
Es preciso compartir objetivos comunes (misión, políticas, seguridad). Puede ser administrada
por las organizaciones constituyentes o bien por terceras partes. Este modelo (figura 5.1) es el
definido por el NIST, aunque la mayoría de organizaciones, proveedores y usuarios de la nube
aceptan los tres modelos de despliegue: pública, privada e híbrida
Figura 5.1. Diagrama de modelo de computación en la nube. Fuente ( (http://clasesoria.com/queescloud.html, 2019).
5.2 Tipos De Servicios En La nube.
Independientemente de que se trate de una nube privada, pública o híbrida, existen
diferentes tipos de servicios, los más genéricos o comunes son los siguientes: 1) software como
servicio (Software as a Service SaaS). 2) Plataforma como servicio (Plataform as a Service
PaaS). 3) Infraestructura como servicio (Infrastructure as a Service IaaS).
Software como servicio (Software as a Service SaaS). En el software como servicio,
la capacidad proporcionada al consumidor consiste en utilizar las aplicaciones del
proveedor que se ejecutan en una infraestructura de nube. Puede accederse a las
aplicaciones desde varios dispositivos del cliente a través de una interfaz de cliente como un
navegador de internet. El consumidor no gestiona la infraestructura de nube subyacente que

incluye la red, servidores, sistemas operativos, almacenamiento o incluso capacidades de
aplicaciones individuales, con la posible excepción de unos parámetros de configuración de la
aplicación específica del usuario (Velte, Velte, & Elsenpeter, 2010).
Plataforma como servicio (Plataform as a Service PaaS). En la plataforma como
servicio, la capacidad proporcionada al consumidor es para desplegar en la infraestructura de
nube aplicaciones adquiridas o creadas por el consumidor, utilizando lenguajes y herramientas de
programación soportadas por el proveedor. El consumidor no administra la infraestructura de
nube que incluye la red, servidores, sistemas operativos o de almacenamiento, pero tiene el
control sobre las aplicaciones desplegadas y la posibilidad de controlar las configuraciones de
entorno del hosting de aplicaciones.
Infraestructura como servicio (Infrastructure as a Service IaaS). En la infraestructura
como servicio se suministra al consumidor capacidad de procesamiento, almacenamiento, redes
y otros recursos computacionales fundamentales, de tal forma que el consumidor pueda
desplegar y ejecutar el software de su elección, que puede incluir sistemas operativos y
aplicaciones. El consumidor no administra la infraestructura de nube, pero tiene el control sobre
los sistemas operativos, almacenamiento, aplicaciones desplegadas y la posibilidad de tener un
control limitado de los componentes de red seleccionados.

Figura 5.2. Modelos de servicio en la nube. Fuente (https://www.stackscale.com/es/blog/modelos-de-servicio-
cloud/, 2021).
5.3 Patrones De Diseño.
Los patrones de diseño son unas técnicas para resolver problemas comunes en el
desarrollo de software y otros ámbitos referentes al diseño de interacción o interfaces. Un patrón
de diseño resulta ser una solución a un problema de diseño. Para que una solución sea
considerada un patrón debe poseer ciertas características. Una de ellas es que debe haber
comprobado su efectividad resolviendo problemas similares en ocasiones anteriores. Otra es que
debe ser reutilizable, lo que significa que es aplicable a diferentes problemas de diseño en
distintas circunstancias.
Los patrones de diseño son útiles para crear aplicaciones confiables, escalables y seguras
en la nube. Cada patrón describe el problema al que hace frente. Algunas de sus características
son:
Disponibilidad. La disponibilidad se mide como un porcentaje del tiempo de actividad y
define la proporción de tiempo que un sistema es funcional y funciona. La disponibilidad se ve
afectada por errores del sistema, problemas de infraestructura, ataques malintencionados y carga
del sistema. Las aplicaciones en la nube normalmente proporcionan a los usuarios un acuerdo de
nivel de servicio (SLA), lo que significa que las aplicaciones deben diseñarse e implementarse
para maximizar la disponibilidad.
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 esto con el fin de 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.
Administración y Supervivencia. Las aplicaciones en la nube se ejecutan en un centro
de datos remoto en el que no tiene un control completo de la infraestructura, o bien del sistema
operativo. Esto puede hacer que la administración y la supervisión sean más complejas que en
una implementación local. Las aplicaciones deben exponer la información del entorno de
ejecución que los administradores y operadores pueden usar para administrar y supervisar el
sistema, así como dar soporte a los cambios en los requisitos empresariales y de personalización
sin necesidad de detener o volver a implementar la aplicación.
Rendimiento y Escalabilidad. El rendimiento es un indicativo de la capacidad de
respuesta de un sistema a la hora de ejecutar cualquier acción dentro de un intervalo de tiempo
determinado, mientras que la escalabilidad es la capacidad que tiene un sistema para controlar
los aumentos de carga sin que afecte al rendimiento o para aumentar los recursos disponibles en
el momento adecuado. Las aplicaciones en la nube normalmente se encuentran con cargas de
trabajo variables y picos en la actividad. Predecirlos, especialmente en un escenario multiusuario
es muy difícil. Por lo que las aplicaciones se deben poder escalar horizontalmente dentro de
ciertos límites para satisfacer los picos de demanda, y reducir horizontalmente cuando la
demanda disminuya. La escalabilidad no se refiere solo a instancias de proceso, sino también a
otros elementos como el almacenamiento de datos o bien, la infraestructura de mensajería.
Resistencia. La resistencia es la capacidad de un sistema para manejar los errores y
recuperarse de ellos satisfactoriamente. La naturaleza del hospedaje en la nube, donde las
aplicaciones a menudo son multiusuario, utiliza servicios de plataforma compartidos, compiten
por los recursos y el ancho de banda, y se ejecutan en hardware estándar, implica que hay una
mayor probabilidad de que se produzcan errores transitorios o permanentes. La detección de
errores y una recuperación de ellos que sea rápida y eficaz, son necesarias para mantener la
resistencia.
Seguridad. La seguridad es la capacidad de un sistema para impedir acciones
malintencionadas o involuntarias que se salgan del uso para el que fue diseñado, y para impedir
la revelación o pérdida de información. Las aplicaciones en la nube están expuestas en internet,
más allá de los límites locales de confianza y, a menudo, están abiertas al público y pueden dar
servicio a usuarios que no son de confianza. Se deben diseñar e implementar las aplicaciones de
forma que se las proteja frente a ataques malintencionados, se restrinja el acceso solo a los
usuarios autorizados y se proteja la información confidencial (Krutz & Vines, 2010).
5.4 Estándares En Servicios.
La computación en la Nube, o Cloud Computing, es una tecnología que ha tenido un
rápido crecimiento en los últimos años. Al intentar entender la forma en que está construida está
tecnología, se ha encontrado que se encuentra mucha información sobre la arquitectura del
software, pero la información sobre los protocolos de comunicación utilizados es muy escasa o
nula. La computación en la nube se ha ido desarrollando por diferentes fabricantes de software,
pero no se tienen unos criterios de estandarización ni para la arquitectura del software, ni para los
esquemas de comunicación que se utilizan. La falta de normas es el mayor problema para la
nube. Se puede partir del hecho que los servicios de computación en la nube, tales como IaaS
(Infraestructura como Servicio), PaaS (Plataforma como servicio) y SaaS (Software como
Servicio), se basan en los protocolos de comunicaciones TCP/IP y que las aplicaciones y
servicios ofrecidos por los sistemas de cómputo en la nube están basados en servicios web,
protocolos y formatos de datos web con estándares bien establecidos.
Desde el punto de vista de los estándares, la computación en la nube puede ser vista
como una red de comunicaciones con servidores, clientes y servicios similares a los de cualquier
otra red de comunicaciones basada en internet. Es así, que el intercambio de paquetes está regido
por protocolos de comunicaciones típicos en un ambiente de computación distribuido tales como
TCP (protocolo de control de transmisión), IP (protocolo de internet), SMTP (protocolo simple
de transferencia de correo) y HTTP (protocolo de transferencia de hipertexo).
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 estándares prescriptivos se refieren a los estándares de comunicaciones, tales como
los protocolos TCP, IP, SNMP (protocolo simple de administración de redes), HTTP, etc.
Mientras que los estándares evaluativos se refieren a estándares de calidad de los sistemas de
cómputo en la nube, 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 cómputo en la nube
incluyen características medibles como: el tiempo de actividad, el rendimiento, la disponibilidad,
la seguridad, la privacidad, el cumplimiento, el servicio al cliente y portabilidad a través de los
Algunas de las recomendaciones que han sido desarrolladas para los estándares en servicios son:
ITU-T Y.3501. Esta recomendación proporciona un marco de referencia para cómputo en
la nube mediante la identificación de requisitos de alto nivel. 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.
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 cómputo en la nube, (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 inter redes 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 cómputo en la nube. 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 cómputo en la nube. En esta recomendación
se analizan las amenazas y los retos en el entorno de cómputo en la nube 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 base para determinar cuál de estas capacidades de
seguridad requerirá de especificación para mejorar la mitigación de las amenazas de seguridad y
hacer frente a los desafíos de seguridad de la computación en nube.
UIT-T Y.ccdef / ISO / IEC 17788. Información general y vocabulario de cómputo en la
nube. 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.
UIT-T Y.ccra | ISO / IEC 17789: Esta norma internacional especifica la arquitectura de
referencia de cómputo en la nube.
5.5 Plataformas Tecnológicas.
Concepto. Las plataformas digitales o plataformas virtuales, son espacios en internet que
permiten la ejecución de diversas aplicaciones o programas en un mismo lugar para satisfacer
distintas necesidades. Cada una cuenta con funciones diferentes que ayudan a los usuarios a
resolver distintos tipos de problemas de manera automatizada, usando menos recursos.
Objetivo principal. El principal objetivo que cumplen las plataformas digitales es facilitar
la ejecución de tareas a través de programas o aplicación en un mismo lugar en la web. Debido a
que existe una gran variedad de plataformas digitales, los objetivos específicos de cada una de
ellas varían de acuerdo con la necesidad de los usuarios.
Otros de sus objetivos son: a) genera nuevas oportunidades de negocio ya que atrae
consumidores a tus puntos de venta. b) ayuda a vender más rápido y mejor utilizando internet. c)
mantiene tu marca en la mente de tus usuarios, colaboradores y asociados. d) distribuye de mejor
manera el contenido que produce.

Existe una infinidad de tipos de plataformas digitales. Con cada problemática se puede
generar un tipo de plataforma digital diferente. A continuación vamos a ver los principales tipos
que existen:
Plataformas educativas. Estas plataformas se enfocan en la educación a distancia e
intentan simular las mismas experiencias de aprendizaje que encontramos en un salón de clase.
Sirven para complementar o sustituir el proceso de educación tradicional. Como ejemplos de
plataformas educativas podemos mencionar a Blackboard, e-College, Moodle, Zoom, MsTeams.
Plataformas sociales. Las plataformas sociales conocidas también como redes sociales,
son muy utilizadas actualmente por gran parte de nuestra sociedad. Son aquellas plataformas
digitales donde se guardan diversas informaciones relacionadas con las interacciones sociales.
Gracias a ellas los usuarios se conectan y mantienen relaciones con familiares, amigos o
conocidos a través de Internet. Por citar algunas se menciona Facebook, LinkedIn, Instagram y
Twitter.
Plataformas de comercio electrónico. Las plataformas de comercio electrónico
permiten comprar los más diversos productos y servicios sin necesidad de salir de casa. Cada vez
más las plataformas de comercio electrónico crecen en todos los sectores. Incluso en países
donde esta práctica no era tan común hace algunos años, cada día se está popularizando más.
Cómo ejemplos de plataformas de comercio electrónico tenemos a WooCommerce, Magento,
Shopify, Amazon, ebay, Mercadolibre.
Plataformas especializadas. Las plataformas digitales especializadas son creadas para
satisfacer las necesidades de un grupo de usuarios. Existen las más diversas plataformas virtuales
para todos los segmentos que podamos imaginar. Siempre que haya una necesidad, podrá crearse
una plataforma para satisfacerla, independientemente del sector. Un claro ejemplo de esto son las
plataformas digitales creadas para ayudar en las tareas relacionadas con el marketing digital.
5.6 Seguridad e Interoperabilidad.
La nube da la sensación de que el nivel de seguridad es inferior al de los modelos
tradicionales. En algunos modelos de la nube, se pierde el control de seguridad sobre dichos
servicios. Sin embargo, si las políticas de seguridad del proveedor están bien definidas, y el
cliente las ejecuta fielmente, se espera que trabajar en la nube sea seguro.
El usuario no sabe exactamente dónde está almacenada la información, mientras que en la
computación tradicional sí. Trasladar toda la información a la nube significa confiar la seguridad
a terceros. Así, se plantean preguntas clave en la estrategia de seguridad en la nube: ¿dónde
estarán desplegados los datos?, ¿con qué protección?, ¿quién es responsable de ellos?
La seguridad tiene que partir del cliente. Cuando una empresa quiere llevar sus datos a la
nube, debe especificar sus preferencias. Una vez definidos sus requerimientos y perfil el
proveedor diseña un servicio específico para la empresa.
La computación en nube tiene características específicas que requieren evaluación de los
riesgos en áreas como integridad, recuperación y privacidad de los datos, así como en asuntos
legales en áreas como normativa de regulación y auditoría de los sistemas de seguridad de la
información.
La evaluación de riesgos y la revisión de la seguridad en la nube deben considerar en
primer lugar las opciones de despliegue de la nube (pública, privada e híbrida) y modelos de
entrega de servicios (SaaS, PaaS, IaaS). Estrechamente relacionados con los modelos anteriores,
están los procesos relacionados con la virtualización y almacenamiento en los centros de datos.
El desarrollo del software seguro se basa en la aplicación de principios de diseño de
software seguro que forman los principios fundamentales del aseguramiento de calidad del
software.
Los principios que soportan el aseguramiento de los sistemas de información en la nube
son similares a los establecidos para las Tecnologías de la Información, pero con las
características de la Nube. Se consideran los siguientes: confidencialidad, integridad y
disponibilidad; los principios complementarios son: autenticación, autorización, auditoría,
responsabilidad y privacidad.
Confidencialidad Se refiere a la prevención de divulgación (revelación), intencionada o
no, de información no autorizada. La pérdida de la confidencialidad se puede producir de
muchas formas. Algunos elementos de telecomunicaciones utilizados para garantizarla son:
Protocolos de seguridad de redes. Verificación de claves. Cifrado (encriptación) de datos.
En la nube, confidencialidad es la protección de datos durante la transferencia entre
entidades. Una política de confidencialidad define los requisitos para asegurarla, previniendo la
divulgación no autorizada de la información. Se debe especificar qué información o datos se
pueden intercambiar. Los temas relacionados con la confidencialidad incluyen: derechos de
propiedad intelectual, control de acceso, cifrado, inferencia, anonimato y canales de cobertura y
análisis de tráfico.
Integridad. Es la garantía de que el mensaje enviado es recibido, de que no ha sido
alterado. Esta integridad de los datos se debe garantizar en el tránsito y almacenamiento.
También deben especificarse los medios de recuperación, a partir de errores detectados
(borrados, inserciones o modificaciones). Estos incluyen políticas de control de acceso, quién

puede transmitir y recibir datos, y qué información puede ser intercambiada. Asimismo, es muy
importante asegurar la integridad de sus datos. La confidencialidad no implica integridad, los
datos pueden ser cifrados con propósitos de confidencialidad, pero el usuario puede carecer de
un mecanismo para verificar su integridad. El cifrado. Sólo es suficiente para la confidencialidad.
La integridad precisa también el uso de códigos de mensajes de autenticación. El aspecto de la
integridad de los datos es especialmente significativo en aplicaciones de almacenamiento.
Disponibilidad. Cuando se ha conseguido mantener la confidencialidad y la integridad, se
debe asegurar la disponibilidad de sus datos. La disponibilidad asegura el acceso fiable y a
tiempo por el personal apropiado. Garantiza que los sistemas funcionen adecuadamente. La
disponibilidad apunta a los elementos que crean fiabilidad y estabilidad en redes y sistemas.
Asegura que la conectividad es accesible cuando se necesita y permite a los usuarios autorizados
acceder a la red o sistemas. Las amenazas a la disponibilidad incluyen intentos maliciosos para
controlar, destruir o dañar recursos de computación y denegar acceso legítimo al sistema.
Una primera amenaza son los ataques en la red, como la denegación de servicio DoD
(Denial-of-service). Otra es la propia disponibilidad del proveedor de servicios. Ningún
proveedor garantiza la disponibilidad completa. Los requisitos de disponibilidad deben
garantizar que los recursos de computación estén disponibles, a los usuarios autorizados, cuando
sean necesarios.
Los términos opuestos a confidencialidad, integridad y disponibilidad son la divulgación
(revelación), alteración y destrucción.
Interoperabilidad. Cómputo en la nube se centra en la idea de servicio como la unidad
elemental para construir cualquier aplicación. Sin embargo, existe el desafió de que la
infraestructura del cloud permita compartir estos servicios a toda la comunidad de manera que
los usuarios puedan interoperar con otras nubes, ya sea de forma gratuita o mediante pago. Para
ello, es necesario implementar un nivel de abstracción de los recursos físicos, uniformar sus
interfaces y proporcionar los medios para su gestión, adaptándolos a los requerimientos del
usuario.
Iniciativas de Interoperabilidad. En el ámbito de la Cómputo en la nube, existen tres
términos íntimamente ligados: portabilidad, interoperabilidad y seguridad. Esto se debe a que
evitar la dependencia absoluta de un solo proveedor implica algo más que tener acceso a precios
competitivos o a un mejor servicio. Contar con un solo proveedor supone un riesgo,
especialmente en lo que concierne a la disponibilidad de servicios y datos. La necesidad de
portabilidad e interoperabilidad se ha solucionado mediante la estandarización, lo cual permite la
interoperabilidad mediante abstracción (o intermediación) y la portabilidad mediante la
conversión en un entorno con muchos estándares.

Bibliografía.
Acevedo, R. V., & Reinoso, C. R. (2011). Una Comparación de Metodologías Para el Modelado
de Aplicaciones Web . Revista Cubana de Ciencias Informáticas, 5(2), 1-9.
Alagic, S. (2015). Object-Oriented Technology. Dordrecht, London: Springer International
Publishing.
Banker, K., Bakkum, P., Verch, S., Garrett, D., & Hawkins, T. (2016). MongoDB in Action
Second Edition. Shelter Island, NY: Manning Publications Co.
Booch, G., Maksimchuk, R., Engle, M., Young, B., Conallen, J., & Houston, K. (2007). Object-
Oriented Analysis and Design with Applications. Boston, Massachusetts: Pearson
Education Inc.
Bowers, M., Synodinos, D., & Sumner, V. (2011). Pro HTML5 and CSS3 Design Patterns. New
York, NY: Apress.
Brown, E. (2016). Learning JavaScript. Sebastopol, California: O´Reilly Media Inc.
Budd, A., & Bjorklund, E. (2016). CSS Mastery Advanced Web Standards Solutions Third
Edition. Brighton, United Kingdom: Apress.
Comer, D. E. (2007). The Internet Book, Fourth Edition. Upper Saddle River, NJ: Pearson
Prentice Hall.
Chodorow, K. (2013). MondoDB: The Definitive Guide Second Edition. Sebastopol, California:
O´Reilly Media Inc.
Dean, J. (2019). Web Programming with HTML5, CSS, and JavaScript. Burlington, MA: Jones
& Bartlett Learning.
Duckett, J. (2011). HTML & CSS Design and Build Websites. Indianapolis, IN: John Wiley &
Sons, Inc.
Flanagan, D. (2011). JavaScript The Definitive Guide. Sebastopol, California: O´Reilly.
Gasston, P. (2015). The Book of CSS3 a Developer´s Guide to the Future of Web Design. San
Francisco, California: No Starch Press.
Gauchat, J. D. (2017). El Gran Libro de HTML5, CSS3 y JavaScript 3ra Edición. Barcelona,
España: Marcombo, S.A.
Gerti, K., Birgit, P., Siegfried, R., & Werner, R. (2003). Web Engineering The Discipline of
Systematic Development of Web Applications. Heidelberg, Germany: John Wiley & Sons
Ltd.
Goodman, D. (2001). JavaScript Bible 4th Edition. New York, NY: Hungry Minds, Inc.
Grant, K. (2018). CSS in Depth. Shelter Island, NY: Manning Publications Co.
Gustafson, J. M. (2013). HTML5 Web Application Development By Example Beginner´s Guide.

Birmingham, UK: Pack Publishing Ltd.
Haverbeke, M. (2018). Eloquent JavaScript 3rd Edition. San Francisco, California: No Starch
Press.
Hayder, H. (2007). Object-Oriented Programming with PHP5. Birmingham, UK: Packt
Publishing Ltd.
John, L., & Margaret, L. Y. (2010). The Internet for Dummies 12th Edition. Indianapolis,
Indiana: Wiley Publishing Inc.
Kennedy, A., & Leon, I. (2011). Pro CSS for High Traffic Websites. New York, NY: Apress.
Krutz, R. L., & Vines, R. D. (2010). Cloud Security: A Comprehensive Guide to Secure Cloud
Computing. Indianapolis, Indiana: Wiley Publishing Inc.
Levine, J. R., & Young, M. L. (2010). The Internet for Dummies 12th Edition. Indianapolis,
Indiana: Wiley Publishing Inc.
Marks, E. A., & Lozano, R. R. (2010). Executive´s Guide to Cloud Computing. Hoboken, New
Jersey: Wiley & Sons Inc.
Marrs, T. (2017). JSON at Work Practical Data Integration for the Web. Sebastopol, California:
O´Reilly Media Inc.
Mather, T., Kumaraswamy, S., & Latif, S. (2009). Cloud Security and Privacy. Sebastopol,
California: O´Reilly Media Inc.
Meier, J. D., Homer, A., Hill, D., Taylor, J., Bansode, P., Wall, L., . . . Bogawat, A. (2008). Web
Applications Architecture Guide patterns & practices. Palo Alto, California: Microsoft
Corporation.
Meyer, E. A. (2018). CSS Pocket Reference. Sebastopol, California: O´Reilly Media Inc.
Mora, S. L. (2002). Programación de Aplicaciones Web: Historia, Principios Básicos y Clientes
Web. San Vicente, Alicante: Club Universitario.
Nixon, R. (2014). Learning PHP,, JavaScript, CSS & HTML5, Third Edition. Sebastopol.
California: O´Reilly Media Inc.
n, J. (2010). JavaScript A Beginner´s Guide. New York, NY: McGraw Hill.
Powell, T. A. (2010). HTML & CSS: The Complete Reference, Fifth Edition. New York:
McGraw Hill.
Rauschmayer, A. (2014). Speaking JavaScript. Sebastopol, California: O´Reilly Media Inc.
Rios, J. R., Ordónez, M. P., Segarra, M. J., & Zerda, F. G. (2017). Estado del arte: Metodologías
de Desarrollo en Aplicaciones Web. 3C Tecnología, 6(3), 54-71.
Rischpater, R. (2015). JavaScript JSON Cookbook. Birmingham, UK: Pack Publishing.

Robbins, J. N. (2012). Learning Web Design Fourth Edition. Sebastopol, California: O´Reilly
Media Inc.
Rumbaugh, J., Jacobson, I., & Booch, G. (2000). El Lenguaje Unificado de Modelado Manual de
Referencia. Madrid, España: Pearson Educación S.A.
Samuel, D., Aidas, B., & Arun, R. (2016). Django: Web Development with Python. Birmingham,
UK: Packt Publishing Ltd.
Schafer, S. M. (2010). HTML. XHTML, and CSS Fifth Edition. Indianapolis, IN: Wiley
Publishing Inc.
Seyed, M., Tahaghoghi, S., & Williams, H. (2007). Learning MySQL. Sebastopol, California:
O´Reilly.
Shklar, L., & Rosen, R. (2003). Web Application Architecture Principles, Protocols and
Practices. Sussex, England: John Wiley & Sons Ltd.
Suh, W. (2005). Web Engineering Principles and Techniques. Hershey, PA: Idea Group
Publishing.
Valenzuela, J. S. (2018). Python Aplicaciones Prácticas. Madrid, España: Ra-Ma.
Vaswani, V. (2007). PHP Programming Solutions. New York, NY: McGraw Hill.
Vaswani, V. (2009). Fundamentos de PHP. Cd. México, México: Mc Graw Hill.
Vaswani, V. (2009). PHP A Beginner´s Guide. New York, NY: McGraw Hill .
Velte, A. T., Velte, T. J., & Elsenpeter, R. (2010). Cloud Computing: A Practical Approach. Mc
Graw Hill.
Verou, L. (2015). CSS Secrets. Sebastopol, California: O´Reilly Media Inc.
Wempen, F. (2011). HTML5 Step by Step. Sebastopol, California: O´Reilly Media, Inc.
Willard, W. (2009). HTML A Beginner´s Guide Fourth Edition . New York, NY: Mc Graw Hill.
Yaskevich, A. (2017, diciembre 11). ScienceSoft. Retrieved from
https://www.scnsoft.com/blog/web-application-architecture

61T ProgramacionWeb Apuntes

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

61T ProgramacionWeb Apuntes

Cargado por

Copyright:

Formatos disponibles

PROGRAMACIÓN WEB 1

Unidad 1. Introducción A Las Aplicaciones Web.

1.1 Evolución De Las Aplicaciones Web.

En la historia humana, los medios de comunicación han evolucionado continuamente de

una forma progresiva. La humanidad se ha caracterizado por transmitir el conocimiento entre

generaciones. Esta es una característica que nos ha permitido el avance de la humanidad. Se

mencionan a continuación algunos acontecimientos importantes en la comunicación (Mora,

mensaje telegrafiado. Año 1858 se realiza el primer intento de tender un cable de

Año 1917 se realiza la primera llamada de teléfono transcontinental. Año 1927 se

permite comunicación escrita, sonora y de vídeo.

desarrollaron estudios sobre la comunicación entre computadoras, las redes distribuidas y la

conmutación de paquetes, estos centros fueron el MIT (Massachusetts Institute of Technology),

el RAND (Research and Development) y el NPL (National Physical Laboratory).

El origen de Internet se sitúa en plena Guerra Fría. En 1957, la URSS (Unión de

investigación computacional de ARPA. En 1966 inició el programa de comunicaciones y dentro

objetivo de explorar la distribución y el uso compartido de recursos informáticos y las

comunicaciones basadas en conmutación de paquetes principalmente para facilitar la

comunicación entre los científicos.

De igual forma la Fuerza Aérea de Estados Unidos encargó a la RAND el estudio de

sistemas de comunicaciones digitales basados en sistemas distribuidos. El objetivo fue

desarrollar una red de comunicaciones militares contra ataques nucleares.

los sesenta en el desarrollo de paquetes y conmutación de paquetes; este es un método de agrupar

transmiten aun cuando la velocidad sea lenta.

El 29 de octubre de 1969 Leonar Kleinrock y su equipo enviaron desde su laboratorio en

base de lo que hoy conocemos como Internet.

de comunicación entre las computadoras de la web, es el encargado de transferir páginas web y

otros recursos. 3) URL (Uniform Resource Locator) es un medio de localización o

direccionamiento de los distintos recursos en Internet (Mora, 2002).

diferentes que se almacenaban en microfichas. Este es el precursor de hipertexto. En el año 1965

estructuras de archivo necesarios en el procesamiento de datos comerciales y científicos.

estudiantes agregar datos, conectar textos y navegar.

En el año 1978 Andrew Lippman del MIT (Instituto de Tecnología de Massachusetts)

desarrolla el sistema Aspen Movie Map, el primer sistema hipermedia en funcionamiento en

videodisco. En el año 1980 Tim Berners-Lee escribe el programa “Enquire-Within-Upon-

En el año 1990 Tim Berners-Lee inicia el desarrollo de un editor y navegador gráfico

hipertexto para el sistema operativo NeXTStep, de la computadora NeXT. Elige WorldWideWeb

en Unix. Desarrollado por el National Center for Supercomputing Applications. Este se

considera el segundo navegador.

En el año 1994 se forma la empresa Netscape Communications Corporation y lanza

1.2 Arquitectura De Las Aplicaciones Web.

La arquitectura de la aplicación web es un patrón de interacción entre los componentes de

la aplicación web. La forma en que se planifica esta interacción determina la resistencia, el

rendimiento y la seguridad de una aplicación web.

Figura 1.1 Todo en un servidor. Fuente (Mora, 2002).

Servidor de datos separado. A partir de la arquitectura anterior, se separa la lógica de

re direccionan automáticamente al nuevo servidor y la aplicación web sigue ejecutándose. Sin

sistema también lo hará.

Figura 1. 2. Servidor de datos separado. Fuente (Mora, 2002).

Servidor de datos separado, con servicio de aplicaciones. A partir de la arquitectura

1.4). La arquitectura que se emplea es JSP (Java Server Pages).

de aplicaciones se separan en tres servidores específicos (figura 1.5). La tecnología empleada es

JSP (Java Server Pages).

Figura 1.5. Todo separado. Fuente (Mora, 2002).

El objetivo de separar los distintos servicios de lógica de negocio, lógica de datos y

obtener un mayor rendimiento. Al separar las distintas funcionalidades en distintos servidores,

separados que no están conectados directamente a internet y se aumenta en nivel de seguridad, ya

que no es tan fácil acceder a ellos.

servicios es la única opción disponible. Un ejemplo de estos es en los sistemas heredados, en

través de un servidor que ofrezca un servicio de HTTP y se comunique internamente con el

Aplicación web HTML heredada. De acuerdo con la arquitectura de la aplicación web

vez más (Yaskevich, 2017).

Figura 1.6. Aplicación web HTML heredada. Fuente (Yaskevich, 2017).

Aplicación web de widgets. En este tipo, la lógica de construcción de la página web se