CuadernilloTrabajo 4S-DAW

CBT San Pedro Tlaltizapán
Cuadernillo de
Trabajo
Submódulo II Desarrolla Aplicaciones Web
Profesor Juan Gerardo Moreno Florentino

Primer Grado – Segundo Semestre
Ciclo escolar 2021 – 2022 / 1
Contenido
1. Introducción a Internet.........................................................................................................................5
1.1. La World Wibe Web.......................................................................................................................6
1.1.1. Tecnología del 3WC................................................................................................................11
1.1.2. Fundamentos de la web..........................................................................................................14
1.1.2.1. ¿Qué es Internet?.................................................................................................................14
1.1.2.2. ¿Cómo funciona la web?.....................................................................................................14
1.1.2.3. Elementos básicos de una página web..............................................................................14
1.2. Arquitectura Web.........................................................................................................................18
1.2.1. Tecnologías web.....................................................................................................................21
1.2.2. Protocolo HTTP.......................................................................................................................21
1.2.2.1. Peticiones en HTTP: GET y POST.......................................................................................22
1.2.2.2. Respuestas en HTTP...........................................................................................................25
1.2.3. Lenguajes.................................................................................................................................28
Datos Generales de la Asignatura
Modulo Profesional I Desarrolla Aplicaciones Web y Móviles
 Submódulo I Desarrolla Aplicaciones Web.
Objetivo del Submódulo

Tiene como finalidad introducir al estudiante técnico bachiller en el desarrollo de aplicaciones web,
estableciendo los fundamentos teórico prácticos de software de diseño, WYSIWYG y lenguaje de
páginas dinámicas
Competencias Genéricas
Describen fundamentalmente conocimiento, habilidades, actitudes y valores indispensables en la
formación de los sujetos que se despliegan y movilizan desde distintos saberes: su dominio apunta a
una autonomía creciente de los estudiantes tanto en el ámbito del aprendizaje como en su actuación
individual y social.
 Aprende de manera autónoma
7. Aprende por iniciativa e interés propio a lo largo de la vida
Atributos:
 Identifica las actividades que le resultan de menor y mayor interés y dificultad, reconociendo y
controlando sus reacciones frente a retos y obstáculos.
 ƒ Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana.
 Trabaja de forma colaborativa
8. Participa y colabora de manera efectiva en equipos diversos.

Atributos:
 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que
cuenta dentro de distintos equipos de trabajo.
Competencias Disciplinares
Las competencias disciplinares son las nociones que expresan conocimientos, habilidades y actitudes
que consideran los mínimos necesarios de cada campo disciplinar para que los estudiantes se
desarrollen de manera eficaz en diferentes contextos y situaciones a lo largo de la vida.
Matemáticas
M1 Construye e interpreta modelos matemáticos deterministas o aleatorios mediante la aplicación de

procedimientos aritméticos, algebraicos, geométricos y variacionales, para la comprensión y análisis
de situaciones reales o formales.
M8 Interpreta tablas, gráficas, mapas, diagramas y textos con símbolos matemáticos y científicos.
Competencias Profesionales
Son las capacidades que tienen los individuos para poner en práctica sus habilidades y conocimientos.
En este caso, aquellos que se refieren al desempeño de un determinado trabajo de acuerdo a su perfil
de egreso.
Desarrollo Aplicaciones Web.
 Identifica los elementos básicos de una aplicación web

 Crea contenidos digitales
 Incorpora tecnologías web
 Administra un sitio web
Unidades de Aprendizaje
El submódulo I está integrado por una unidad de aprendizaje
 Desarrolla Aplicaciones Web estáticas y dinámicas.
Resultados de Aprendizaje
Tienen como objetivo desarrollar los conocimientos, destrezas, habilidades y competencias que
permitan al alumno fortalecer su perfil de egreso en: Conceptos Básicos de Internet, Aplicaciones y
Páginas Web, tecnologías y recursos, administración de un sitio web, aplicaciones de consumo.
 Diseña los elementos visuales de la interfaz web, utilizando herramientas de diseño gráfico
digital.
Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web
1
 Desarrolla aplicaciones web estáticas, a partir del modelado de catálogo de productos
existentes en el mercado.
 Desarrolla aplicaciones web dinámicas utilizando sistemas de gestión de contenidos,
incorporando almacenamiento persistente de los datos.

2
Introducción
La asignatura de Desarrolla Aplicaciones Web ofrece la base teórica y metodológica que permite el
análisis para la elaboración de contenido y recursos en un ambiente web, haciendo énfasis en el
manejo de tecnologías y herramientas para el diseño de contenidos y administración de páginas web.
El contenido está organizado de lo general (tipos y clasificación de tecnologías web) a lo particular

(creación y administración de sitios web) y de lo teórico (conceptos, características y protocolos) a lo
práctico (desarrollo de interfaces, formularios, galerías, catálogos, etc.).
El material de este cuadernillo está organizado por tres apartados: El primer apartado es la
Antecedentes de la tecnología Web, aquí identificarás una reseña de Internet, la calificación y diferencia
de tecnologías web, los protocolos que intervienen en la comunicación de una página web, con la
finalidad de sustentar los principios de una página web. La arquitectura que se unas en una aplicación
web. El segundo apartado Administración de un sitio web, conocerás los lenguajes con los que se
desarrollan las páginas y aplicaciones web. Aprenderás a desarrollar interfaces, formularios, galerías,
etc. Que te permita crear páginas web, aplicando los elementos básicos de los estándares web, lo que
te permitirá adquirir las bases para la construcción de aplicaciones web. En el tercer apartado Sitio
Web, analizaras una problemática que te permita desarrollar un sitio web completo, mediante el uso y
aplicación de tecnología de Web 3.0. Construirás un prototipo de un sitio web, mediante la elaboración
de un proyecto en ambiente web.

3
Antecedentes de la Web

4
Primer Introducción a las Aplicaciones Web
Objetivo
Identificarás los componentes que intervienen en el diseño de páginas web, mediante la
conceptuación y caracterización de sus elementos básicos, lenguajes y tecnologías que
intervienen, en el diseño y construcción de aplicaciones en ambientes web; con la finalidad de
sustentar los principios del diseño de aplicaciones web.
Identificar los elementos de una aplicación web
Contenidos de Referencia
Productos esperados
 Identificación de elementos de la web
 Comparación de la evolución de la web
 Identificación los elementos de una página web
 Definición de una página web y un sitio web
 Investigación de los Modelos de 2 y N capas de las aplicaciones web
 Tecnologías web
 Lenguajes
 Autoevaluación
Evaluación
 Evaluación Sumativa
 Actividades cuadernillo 5 puntos
 Evaluación Formativa
 Prácticas en el cuadernillo 4 puntos
 Evaluación diagnostica
 Autoevaluación 1 punto

5
1. Introducción a Internet
Internet, la red de redes, nace a mediados de la década de los setenta, bajo los auspicios de
DARPA, la Agencia de Proyectos Avanzados para la Defensa de Estados Unidos. DARPA inició
un programa de investigación de técnicas y tecnologías para unir diversas redes de
conmutación de paquetes, permitiendo así a los ordenadores conectados a estas redes
comunicarse entre sí de forma fácil y transparente.
De estos proyectos nació un protocolo de comunicaciones de datos, IP o Internet Protocol, que

permitía a ordenadores diversos comunicarse a través de una red, Internet, formada por la
interconexión de diversas redes.
A mediados de los ochenta la Fundación Nacional para la Ciencia norteamericana, la NSF, creó
una red, la NSFNET, que se convirtió en el backbone (el troncal) de Internet junto con otras redes
similares creadas por la NASA (NSINet) y el U.S. DoE (Department of Energy) con la ESNET. En
Europa, la mayoría de países disponían de backbones nacionales (NORDUNET, RedIRIS,
SWITCH, etc.) y de una serie de iniciativas paneuropeas (EARN y RARE). En esta época aparecen
los primeros proveedores de acceso a Internet privados que ofrecen acceso pagado a Internet.
A partir de esta época, gracias entre otras cosas a la amplia disponibilidad de

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

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

6
En estos momentos disponer de una dirección de correo electrónico, de acceso a la web, etc.,
ha dejado de ser una novedad para convertirse en algo normal en muchos países del mundo.
Por eso las empresas, instituciones, administraciones y demás están migrando rápidamente
todos sus servicios, aplicaciones, tiendas, etc., a un entorno web que permita a sus clientes y
usuarios acceder a todo ello por Internet. A pesar del ligero descenso experimentado en el ritmo
de crecimiento, Internet está destinado a convertirse en una suerte de servicio universal de
comunicaciones, permitiendo una comunicación universal.
Actividad Nº 1 A-I Relación de antecedentes de la Internet Valor 1 Punto
Relaciona las columnas, de acuerdo a los elementos que correspondan, según la información tratada
anteriormente
 Utiliza diferentes colores para relacionar los conceptos
1.1.La World Wibe Web

La WWW (World Wide Web) o, de forma más coloquial, la web, se ha convertido, junto con el correo
electrónico, en el principal caballo de batalla de Internet. Ésta ha dejado de ser una inmensa “biblioteca”
7
de páginas estáticas para convertirse en un servicio que permite acceder a multitud de prestaciones y
funciones, así como a infinidad de servicios, programas, tiendas, etc.
En 1989, mientras trabajaba en el CERN (Centro Europeo de Investigación Nuclear), Tim Berners-
Lee empezó a diseñar un sistema para hacer accesible fácilmente la información del CERN.
Dicho sistema empleaba el hipertexto para estructurar una red de enlaces entre los
documentos. Una vez obtenida la aprobación para continuar el proyecto, nació el primer
navegador web, llamado WorldWideWeb (sin espacios).
En 1992 el sistema ya se había extendido fuera del CERN. El número de servidores “estables”
había aumentado, alcanzando la sorprendente cifra de veintiséis. A partir de este punto, el
crecimiento es espectacular. En 1993 la web ya era merecedora de un espacio en el New York
Times. Éste es el año del lanzamiento de Mosaic, un navegador para X-Window/Unís que con el
tiempo se convertiría en Netscape y que fue un factor clave de popularización de la web. En
1994 se fundó el WWW Consortium, que se convertiría en el motor de desarrollo de los
estándares predominantes en la web (http://www.w3c.org). A partir de ese momento, el
crecimiento ya fue constante, convirtiéndose hacia finales de los noventa en el servicio insignia
de Internet y dando lugar al crecimiento imparable de los servicios en línea que estamos
experimentado actualmente.
El W3C, para cumplir su misión, ha establecido estos tres objetivos a largo plazo para crear una
sola World Wide Web.
 Web para todos: El valor social que aporta la Web, es que ésta hace posible la
comunicación humana, el comercio y las oportunidades para compartir conocimiento. Y
la W3C pretende hacer que estos beneficios estén disponibles para todo el mundo,
independientemente del hardware, software, infraestructura de red, idioma, cultura,
localización geográfica, o habilidad física o mental.
 Web desde cualquier sitio: La cantidad de dispositivos diferentes para acceder a la Web
ha crecido exponencialmente. Actualmente, los teléfonos móviles, teléfonos inteligentes,
PDAs, sistemas de televisión interactiva, sistemas de respuesta de voz, puntos de
información e incluso algunos pequeños electrodomésticos pueden acceder a la Web.
La misión de la Iniciativa de Web Móvil del W3C, iniciada en 2005, es hacer el acceso a la

8
Web desde cualquier dispositivo algo tan sencillo, fácil y práctico como lo es desde un
dispositivo de sobremesa.
 Base de conocimiento: La Web no es solamente un inmenso libro donde la gente puede
buscar, navegar y ver información. Es también una extensa base de datos, diseñada
cuidadosamente, que puede permitir a los ordenadores hacer un trabajo más útil. Al
desarrollar una Web cuyo contenido sea procesable tanto por humanos como por
máquinas, el W3C espera que sea más fácil resolver ciertos problemas que, de otra
forma, serían demasiado tediosos y complicados.
 Confianza: Para que la Web sea un medio realmente útil en las relaciones sociales, los
usuarios deben poder confiar en terceros que hayan ganado su confianza. Mientras la
tecnología no pueda garantizar la confianza, debería al menos permitir relaciones
seguras con terceras partes en las que se confíe, ya sean personas, organizaciones o
servicios. Uno de los objetivos a largo plazo del W3C es promover tecnologías que hagan
posible un entorno más colaborativo, una Web donde la responsabilidad, la seguridad, la
confianza, y la confidencialidad sean posibles, y en la que las personas participen de
acuerdo con sus requisitos y preferencias de privacidad.
1.1.1. Elementos básicos de un sitio Web y sus partes

Los componentes de una página web son: imágenes, texto, audio, video, animaciones y otros
contenidos multimedia interactuando con usuarios de Internet.
El diseño Web puede ser fascinante, crear sitios Web atractivos y profesionales es el sueño de
millones de diseñadores de todo el mundo que utilizan las tecnologías de Internet.
Un sitio Web debe ser sobre todo accesible, intuitivo y agradable. La organización inicial es muy
importante para poder utilizar eficazmente las herramientas y tomar decisiones oportunas.
Vamos a iniciar con la concepción del diseño Web, a explicar las estrategias de diseño y a cómo
organizar las ideas.
El comprender el proyecto desde esta etapa, permite un ahorro significativo de recursos en el

momento de la implementación.
Las páginas Web
Posiblemente el término página Web sea el más utilizado en Internet, precisamente porque
cuando navega por la red lo hace en busca de páginas electrónicas.
Las páginas Web son el soporte de la información en la Web.
Los componentes de una página web son: imágenes, textos y otros contenidos multimedia. Las
secciones internas se encuentran enlazadas de manera que el usuario puede navegar de una
9
página a otra utilizando hipervínculos, un concepto de interactividad surgido con el fenómeno
Internet.
Los Sitios Web
Un sitio Web es una localización en la Web que contiene varias páginas Web organizadas
jerárquicamente.
Cada sitio tiene una página de inicio que corresponde a la página principal, llamada en inglés
Home Page.
Es la primera página que se visualiza cuando se accede a un sitio tecleando el nombre del
dominio en la barra del navegador.
Un sitio tiene generalmente más de una página Web y su objetivo principal es ofrecer la
información que necesitan los usuarios y proporcionársela de manera que puedan asignarla
fácilmente.
Elementos que componen una página Web
Las principales características que constituyen una página en Internet son:
 El texto es el elemento más significativo de cualquier sitio Web porque los usuarios
navegan por la Web fundamentalmente en busca de información expresada en
hipertexto.
 Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página,
y por lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial
para ofrecer información visual del contenido y mostrar un diseño atractivo y personal.
 Espacio web para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en
un servidor.
 Dominio El nombre de dominio es la primera parte de una dirección Web que identifica al
servidor que almacena y sirve su sitio.
 Hipervínculos Por sí misma, una página Web no puede hacer mucho. La magia de verdad
comienza cuando relaciona varias páginas mediante enlaces.
 Video Mientras Internet es cada vez más asequible, confiable y veloz, los programas de
edición de video se hacen más cercanos a los usuarios. Ahora es más fácil realizar un
video desde una cámara digital o un teléfono móvil con cámara incorporada y que
termine subiendo a la Web para ponerlo al alcance de todos.
 Animaciones. Es una imagen animada, fácil de crear y sobre todo que ocupa poca
memoria. Tiene diferentes usos, desde la creación de dibujos animados hasta el
despliegue de dibujos interactivos
 Sonidos Un elemento cada vez más importante. La comercialización de nuevos
dispositivos digitales móviles como el iPhone ha potencializado este elemento. Además
de incorporar sonido en la página Web puede descargar de ellas archivos de audio para

10
sus dispositivos móviles. El formato MP3 es el más conocido y más usado por su
calidad y nivel de compresión
El diseño Web
La Web se ha convertido en el medio de comunicación más importante del mundo gracias a su

facilidad para ofrecer información con una rapidez nunca antes alcanzada por ningún otro
medio. Esta información puede ser consumida por cualquiera que tenga una conexión a Internet
desde cualquier parte del mundo.
El desarrollo Web es una mezcla de tecnología, contenidos, arquitectura del sitio, diseño e
interactividad. El éxito de un sitio depende de la forma en que se combinan estos cinco factores
que determinan en gran medida la rapidez con que se genera y ofrece la información, y por
supuesto el éxito de un sitio.
Antes de analizar estos factores independientemente, debe considerar que ellos deben
garantizar que el sitio sea fácil de mantener, flexible para cambiar de tamaño y realizar
actualizaciones y atractivo visualmente para los usuarios, interesante para su audiencia,
práctico para realizar descargas rápidas y búsquedas efectivas; también sólidos técnicamente,
sin vínculos rotos, ni comportamientos inadecuados.
En el contenido Web influyen la presentación, los conceptos de diseño y algunas estrategias

comunes del trabajo en Internet.
Los elementos visuales como el color, el diseño de tipografía y las imágenes, conforman la
personalidad de un sitio y generan un impacto emocional que determina que el sitio sea
atractivo.
Aunque el objetivo final de todo diseñador sea transmitir un mensaje a una audiencia
determinada, ser un buen diseñador gráfico no significa necesariamente ser un buen diseñador
para la Web. Cualquiera independientemente de su nivel artístico, puede conseguir un diseño
funcional con buena apariencia.
Un poco de experiencia y conocimiento de algunos principios básicos de diseño más cierto

grado de inspiración, originalidad y buen gusto harán que tenga parte de la batalla ganada.
Observe los detalles de su entorno, la naturaleza el arte y sobre todo el trabajo de otros
creadores que hay en la Web. Parece muy elemental, pero muchos olvidan las principales
fuentes más asequibles de enriquecimiento estético.

11
1.1.2. Tecnología del 3WC

Para conseguir el objetivo de una Web única, las especificaciones para los formatos y
protocolos Web han ser compatibles unas con otras y a su vez permitir que (cualquier)
hardware y software, utilizado para acceder a la Web, funcione conjuntamente. El W3C diseña y
promueve formatos y protocolos abiertos (no-propietarios) e interoperables para evitar la
fragmentación del mercado que tuvo lugar en el pasado.
Desde 1994, el W3C ha publicado más de noventa estándares Web, con el nombre de
"Recomendaciones del W3C". Una Recomendación del W3C es lo mismo que un estándar Web,
sólo que una especificación desarrollada por el W3C es estable, contribuye a fomentar la
interoperabilidad en la Web, y ha sido revisada por los Miembros del W3C, que favorecerán su
adopción por parte de la industria. La página de traducciones del W3C enumera los informes
técnicos que han sido traducidos a otros idiomas y explica cómo colaborar con el W3C como
traductor voluntario.

12
En la ilustración se pueden comparar dos momentos muy distintos de la Web. Por una parte, en
el lado izquierdo, la Web inicial, sencilla y básica; y, por otra, a la derecha, la actual Pila
Tecnológica del W3C, compleja y compuesta por diferentes subgrupos. Ambos gráficos están
definidos mediante un modelo de dos capas: la arquitectura Web (denominada "inicial" a la
izquierda, y "Web única" a la derecha) se levanta sobre la arquitectura de Internet.
En el pasado, la arquitectura Web se basaba exclusivamente en URL y HTTP, que, a su vez,

giraban en torno al HTML. Sin embargo, en la actualidad, la capa Web de la derecha, muestra las
numerosas áreas de interés y tecnologías elaboradas en el W3C, mediante una serie de capas,
cada una construida en base a la anterior y todas englobadas dentro de la "Web única". De abajo
a arriba, estas capas contienen:
 URI/IRI, HTTP
 Principios de la Arquitectura Web
 XML Infosets; Gráficos RDF(S)
 XML, Espacio de Nombres, Esquemas, XQuery/XPath, XSLT, DOM, XML Base, XPointer,
RDF/XML, SPARQL
En lo alto de estas capas hay seis cuadros que se corresponden a las principales Actividades
del W3C: Aplicaciones Web, Web Móvil, Voz, Servicios Web, Web Semántica y Privacidad.
 En el cuadro de Aplicaciones Web encontramos: XHTML, SVG, CDF, SMIL, XForms, CSS y
WCID.
 En el cuadro de Web Móvil están XHTML Básico, SVG Móvil, SMIL Móvil, XForms Básico,
CSS Móvil y MWI BP.
 En el cuadro de Voz podemos diferenciar: VoiceXML, SRGS, SSML, CCXML y EMMA

13
 En el cuadro de Servicios Web están SOAP, MTOM, WSDL, WS-CDL y WS-A.
 El cuadro de Web Semántica contiene OWL, SKOS, SW BP y RIF.
 Por último, en el cuadro de Privacidad vemos P3P, APPEL, Encriptación XML, Firma XML
y XKMS.
Una franja naranja, que representa una coordinación horizontal en el W3C, une estas seis áreas.
En ella se puede leer la frase: Accesibilidad Web, Internacionalización, Independencia de
Dispositivo, Acceso Móvil y Control de Calidad.
Tarea A-I N.º 1 Evolución de la Web.

Utilizando el navegador de Google Académico realiza una investigación sobre la evolución
que ha tenido la web. Una vez realizada la investigación organiza la información en un
cuadro comparativo.
Recuerda que los temas del cuadro comparativo que debes considerar son:
 Web 1.0
 Web 2.0
 Web Semántica
Para realizar tu cuadro comparativo puedes utilizar plataformas digitales, o medios

convencionales, Una vez concluido tu cuadro utiliza el espacio destinado en la siguiente
hoja del cuadernillo para que pegues tu mapa conceptual.
Una vez terminada tu actividad, toma la evidencia fotográfica y entrégala por cualquier
medio de comunicación y en el apartado correspondiente que tu profesor establecido en tu
clase. Para que se te registre la calificación correspondiente.

14

15
1.1.3. Fundamentos de la web
Para entender los fundamentos de desarrollo web hay que conocer los diferentes protagonistas
que interactúan entre sí en el terreno online, entidades que facilitan que lo que conocemos por
“la web”, uno de los variados mecanismos y servicios de Internet, se haga posible.
1.1.3.1. ¿Qué es Internet?

Internet es un sistema descentralizado de redes de ordenadores conectados, distribuidos en todo
el mundo, que está disponible para ofrecer servicios de comunicación por medio de datos.
Como ya viste anteriormente su origen está basado un sistema computacional cuyo objetivo era
facilitar la colaboración científica en investigaciones de carácter militar, era el año 1969 y el
nombre del invento de llamaba Arpanet.
El objetivo que se perseguía era evitar que las comunicaciones se cortaran por cualquier ataque
enemigo, así que para conectar los ordenadores entre sí previnieron la posibilidad de utilizar
diferentes rutas, favoreciendo que al fallar alguna se conservara la comunicación.
Además, existían diferentes redes que se conectaban entre sí, por lo que se acuño el concepto
de red de redes. Esta propiedad aún se conserva a día de hoya pesar de los numerosos avances
tecnológicos que han contribuido a su evolución.
Internet hoy es una gran infraestructura física de comunicaciones que soporta un grandísimo
conjunto de servicios, a la que nos conectamos habitualmente para interactuar con la infinita
variedad de contenidos que existen. Para ello utilizamos diferentes dispositivos y software con
diferentes lenguajes y protocolos.
1.1.3.2. ¿Cómo funciona la web?

La web es un sistema de distribución y recuperación de documentos basados en hipertexto que
nació en un laboratorio de física nuclear a finales de los años 80. Se trata de un servicio que nos
permite navegar a través de las numerosísimas páginas web que están alojadas en servidores
de todo el planeta.
Encontramos lo que nos interesa gracias a buscadores que realizan un seguimiento de los
enlaces gracias al protocolo “HTTP” y el lenguaje de marcado de hipertexto “html” que se
encarga de componer las páginas en los navegadores.
El hecho de poner una dirección en nuestro navegador es comparable al de marcar un número

de teléfono, nuestro ordenador como cliente que realiza llamada se pone en contacto con el
servidor que está vinculado con esa dirección recibiendo la solicitud, este servidor la atiende
enviándonos un lenguaje o código que nuestro navegador presenta después de interpretarlo.
Este proceso tan aparentemente sencillo y con el que estamos tan familiarizados implica una
gran complejidad en su funcionamiento y la intervención de muchos actuadores.

16
1.1.3.3. Elementos básicos de una página web
Los componentes de una página web son: imágenes, texto, audio, video, animaciones y otros
contenidos multimedia interactuando con usuarios de Internet. Las secciones internas se
encuentran enlazadas de manera que el usuario puede navegar de una página a otra utilizando
hipervínculos, un concepto de interactividad surgido con el fenómeno Internet.
 El texto es el elemento más significativo de cualquier sitio Web porque los usuarios
navegan por la Web fundamentalmente en busca de información expresada en
hipertexto.
 Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página,
y por lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial
para ofrecer información visual del contenido y mostrar un diseño atractivo y personal.
 Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un servidor.
 El nombre de dominio es la primera parte de una dirección Web que identifica al servidor
que almacena y sirve su sitio. Y al cual podemos acceder a el mediante una dirección
única.
 Por sí misma, una página Web no puede hacer mucho. La magia de verdad comienza
cuando relaciona varias páginas mediante enlaces.
 Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición
de video se hacen más cercanos a los usuarios.
 Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con
cámara incorporada y que termine subiendo a la Web para ponerlo al alcance de todos.
 Una imagen animada, fácil de crear y sobre todo que ocupa poca memoria. Tiene
diferentes usos, desde la creación de dibujos animados hasta el despliegue de dibujos
interactivos.
 Además de incorporar sonido en la página Web puede descargar de ellas archivos de
audio para sus dispositivos móviles. El formato MP3 es el más conocido y más usado
por su calidad y nivel de compresión.
 Banner: Una imagen fija o animada utilizada generalmente para publicidad.
 Marcos: También llamados frames, son una especie de recuadro independiente en el que
puede cargar una página Web.
 Formulario: Zona para introducir datos o comentarios. Una plantilla o página con
espacios vacíos para llenarse con alguna finalidad.
Actividad Nº 2 A-I Elementos de una página web Valor 1 Punto
En la siguiente imagen identifica los elementos de una página web, según la información tratada
anteriormente.
 Coloca el numero donde corresponda según el elemento mostrado en la imagen.

17
Tarea A-I N.º 2 Definición de una Pagina Web y Sitio web. Valor 1 punto
Utilizando el navegador de Google Académico realiza una investigación sobre la diferencia

que existe entre una página web, un sitio web y un servidor web. Una vez realizada la
investigación organiza la información en una infografía.
Recuerda que los temas de la infografía que debes considerar son:

 Definición de una Página Web
 Definición de un Sitio Web
 Definición de un Servidor Web
Para realizar tu infografía puedes utilizar herramientas o medios convencionales, como

hojas, recortes, colores, etc. Utiliza el espacio destinado en la siguiente hoja del cuadernillo
para que realices tu infografía.
18

19

20
1.2.Arquitectura Web
Una aplicación web es proporcionada por un servidor web y utilizada por usuarios que se
conectan desde cualquier punto vía clientes web (browsers o navegadores). La arquitectura de
un Sitio Web tiene tres componentes principales:
 Un servidor Web
 Una conexión de red
 Uno o más clientes
El servidor Web distribuye páginas de información formateada a los clientes que las solicitan.
Los requerimientos son hechos a través de una conexión de red, y para ello se usa el protocolo
HTTP. Una vez que se solicita esta petición mediante el protocolo HTTP y la recibe el servidor
Web, éste localiza la página Web en su sistema de archivos y la envía de vuelta al navegador
que la solicitó.
Las aplicaciones web están basadas en el Modelo Cliente/Servidor que gestionan servidores
web, y que utilizan como interfaz páginas web. Las páginas web son el componente principal de
una aplicación o sitio web. Los browsers piden páginas (almacenadas o creadas
dinámicamente) con información a los servidores web. En algunos ambientes de desarrollo de
aplicaciones web, las páginas contienen código HTML y scripts dinámicos, que son ejecutados
por el servidor antes de entregar la página.
Una vez que se entrega una página, la conexión entre el browser y el servidor web se rompe, es
decir que la lógica del negocio en el servidor solamente se activa por la ejecución de los scripts
de las páginas solicitadas por el browser (en el servidor, no en el cliente). Cuando el browser
ejecuta un script en el cliente, éste no tiene acceso directo a los recursos del servidor. Hay otros
componentes que no son scripts, como los applets (una aplicación especial que se ejecuta
dentro de un navegador) o los componentes ActiveX. Los scripts del cliente son por lo general
código JavaScript o VBSscript, mezclados con código HTML.
La colección de páginas es en una buena parte dinámicas (ASP, PHP, etc.), y están agrupadas
lógicamente para dar un servicio al usuario. El acceso a las páginas está agrupado también en
el tiempo (sesión). Los componentes de una aplicación Web son:
1. Lógica de negocio.

21
 Parte más importante de la aplicación.
 Define los procesos que involucran a la aplicación.
 Conjunto de operaciones requeridas para proveer el servicio.
2. Administración de los datos.
 Manipulación de BD y archivos.
3. Interfaz
 Los usuarios acceden a través de navegadores, móviles, PDAs, etc.

 Funcionalidad accesible a través del navegador.
 Limitada y dirigida por la aplicación.
Las aplicaciones web se modelan mediante lo que se conoce como modelo de capas, Una capa
representa un elemento que procesa o trata información. Los tipos son:
 Modelo de dos capas: La información atraviesa dos capas entre la interfaz y la

administración de los datos.
 Modelo de n-capas: La información atraviesa varias capas, el más habitual es el modelo
de tres capas.
Tarea A-I N.º 3 Modelo de 2 y N Capas. Valor 1 punto
Utilizando el navegador de Google Académico realiza una investigación sobre los modelos
de 2 y N capas de una aplicación web. Una vez realizada la investigación organiza la
información en el espacio de la siguiente página.
Recuerda que tu investigación debe contener:

 Características del modelo
 Infografía (imagen u esquema) que ejemplifique al modelo.
Una vez concluida tu investigación utiliza el espacio destinado en la siguiente hoja del
cuadernillo.

22

23

24
1.2.1. Tecnologías web
El éxito espectacular de la web se basa en dos puntales fundamentales:
 el protocolo HTTP
 el lenguaje HTML.
Uno permite una implementación simple y sencilla de un sistema de comunicaciones que nos
permite enviar cualquier tipo de ficheros de una forma fácil, simplificando el funcionamiento del
servidor y permitiendo que servidores poco potentes atiendan miles de peticiones y reduzcan
los costes de despliegue. El otro nos proporciona un mecanismo de composición de páginas
enlazadas simple y fácil, altamente eficiente y de uso muy simple.
1.2.2. Protocolo HTTP

El protocolo HTTP (hypertext tranfer protocol) es el protocolo base de la WWW. Se trata de un
protocolo simple, orientado a conexión y sin estado. La razón de que esté orientado a conexión
es que emplea para su funcionamiento un protocolo de comunicaciones (TCP, transport control
protocol) de modo conectado, un protocolo que establece un canal de comunicaciones de
extremo a extremo (entre el cliente y el servidor) por el que pasa el flujo de bytes que
constituyen los datos que hay que transferir, en contraposición a los protocolos de datagrama o
no orientados a conexión que dividen los datos en pequeños paquetes (datagramas) y los
envían, pudiendo llegar por vías diferentes del servidor al cliente. El protocolo no mantiene
estado, es decir, cada transferencia de datos es una conexión independiente de la anterior, sin
relación alguna entre ellas, hasta el punto de que para transferir una página web tenemos que
enviar el código HTML del texto, así como las imágenes que la componen, pues en la
especificación inicial de HTTP, la 1.0, se abrían y usaban tantas conexiones como componentes
tenía la página, transfiriéndose por cada conexión un componente (el texto de la página o cada
una de las imágenes).
Existe una variante de HTTP llamada HTTPS (S por secure) que utiliza el protocolo de seguridad
SSL (secure socket layer) para cifrar y autenticar el tráfico entre cliente y servidor, siendo ésta
muy usada por los servidores web de comercio electrónico, así como por aquellos que
contienen información personal o confidencial. De manera esquemática, el funcionamiento de
HTTP es el siguiente:
 El cliente establece una conexión TCP hacia el servidor, hacia el puerto

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

25
El protocolo define además cómo codificar el paso de parámetros entre páginas, el tunelizar las
conexiones (para sistemas de firewall), define la existencia de servidores intermedios de cache,
etc.
Las directivas de petición de información que define HTTP 1.1 (la versión considerada estable y
al uso) son:
 GET Petición de recurso.

 POST Petición de recurso pasando parámetros.
 HEAD Petición de datos sobre recurso.
 PUT Creación o envío de recurso.
 DELETE Eliminación de recurso.
 TRACE Devuelve al origen la petición tal como se ha recibido en el receptor, para depurar
errores.
 OPTIONS Sirve para comprobar las capacidades del servidor.
 CONNECT Reservado para uso en servidores intermedios capaces de funcionar como
túneles.
Detallaremos a continuación algunos de estos comandos, ya que su comprensión es

fundamental para el desarrollo de aplicaciones web. Cabe destacar que todos los recursos que
sean servidos mediante HTTP deberán ser referenciados mediante una URL (universal resource
locators).
1.2.2.1. Peticiones en HTTP: GET y POST

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

26
Podemos ver que está formada por:
1. Línea de petición: contiene el recurso solicitado.

2. Cabecera de petición: contiene información adicional sobre el cliente.
3. Cuerpo de petición: en las peticiones de tipo POST, y otras, contiene información
adicional.
 Línea de petición
La línea de petición está formada por los siguientes elementos:
a) Método: nombre del método de HTTP llamado (GET, POST, etc.).

b) Identificador de recurso: URL (uniform resource locator) del recurso solicitado.
c) Versión de protocolo: versión del protocolo solicitada para la
respuesta.
 Cabecera de petición
Contiene información adicional que puede ayudar al servidor (o a los servidores intermedios, los
proxies y caches) a procesar adecuadamente la petición.
La información se proporciona en forma de Identificador: el valor De estos identificadores, los

más conocidos e importantes son:
a) Host: nombre del servidor solicitado.

b) User-Agent: nombre del navegador o programa usado para acceder al recurso.
c) Accept: algunos formatos de texto e imagen aceptados por el cliente.
d) Accept-Language: idiomas soportados (preferidos) por el cliente, útil para personalizar la
respuesta automáticamente.
Parámetros de petición
Una petición HTTP puede también contener parámetros, como respuesta, por ejemplo, a un
formulario de registro, a una selección de producto en una tienda electrónica, etc. Estos
parámetros pueden pasarse de dos formas:
- Como parte de la cadena de petición, codificados como parte de la URL.

- Como datos extra a la petición.

27
Para codificar los parámetros como parte de la URL, éstos se añaden a la URL detrás del
nombre del recurso,
 separados de éste por un carácter ?

 Los diferentes parámetros se separan entre sí por el carácter &
 Los espacios se sustituyen por +
 Los caracteres especiales (los mencionados antes de &, + y ?, así como los caracteres
no imprimibles, etc.) se representan con %xx, donde xx representa al código ASCII en
hexadecimal del carácter.
Por ejemplo:
que en la petición HTTP quedaría:
Para pasar los parámetros como datos extra de la petición, éstos se envían al servidor como
cuerpo de mensaje en la petición.
Por ejemplo, la petición anterior quedaría:

28
Cabe destacar que para pasar los parámetros como cuerpo de la petición, ésta debe realizarse
como POST y no como GET, aunque una petición POST también puede llevar parámetros en la
línea de petición. Los parámetros pasados como cuerpo de la petición están codificados, al
igual que en el ejemplo anterior, como URL, o pueden usar una codificación derivada del formato
MIME (multipurpose internet mail extensions), en lo que se conoce como codificación multi
parte. La petición anterior en formato multi parte sería:
1.2.2.2. Respuestas en HTTP

Las respuestas en HTTP son muy similares a las peticiones. Una respuesta estándar a una
petición de una página sería similar a lo siguiente:
En ella podemos observar que la primera línea nos responde con la versión del protocolo
empleada para enviarnos la página, seguida de un código de retorno y una frase de retorno. El
código de retorno puede adoptar uno de los siguientes valores:
– 1xx Petición recibida, continúa en proceso.

– 2xx Correcta. Petición procesada correctamente.
– 3xx Redirección. La petición debe repetirse o redirigirse.
– 4xx Error de cliente. No se puede procesar la petición porque ésta es incorrecta,
no existe, etc.

29
– 5xx Error de servidor. El servidor ha fallado intentando procesar la petición, que a
priori es correcta.
La frase de retorno dependerá de la implementación, pero sólo sirve como aclaratorio del
código de retorno.
Después del estatus aparece una serie de campos de control, con el mismo formato que en las
cabeceras de la petición que nos informan del contenido (fecha de creación, longitud, versión
del servidor, etc.). A continuación, viene el contenido solicitado.
Tarea A-I N.º 4 Métodos GET y POST en HTTP. Valor 1 punto
Utilizando el navegador de Google realiza una investigación sobre el esquema GET y POST
con el protocolo HTTP. Una vez realizada la investigación organiza la información en un
diagrama que muestre el funcionamiento ambos métodos de manera grafica
Recuerda que tu diagrama debe contener:

 Características del método
 Elementos que interactúan
Para realizar tus diagramas puedes utilizar medios convencionales como hojas, recortes,
colores. Utiliza el espacio destinado en la siguiente hoja del cuadernillo para que realices tu
diagrama.

30

31
1.2.3. Lenguajes
En la actualidad, existe una gran cantidad de lenguajes de programación enfocados al desarrollo
web. En sus orígenes, estos lenguajes tenían un formato estático. Sin embargo, con el paso de
los años y la evolución a la hora de crear páginas web han evolucionado en lenguajes
dinámicos. Estos nuevos avances permiten al usuario interaccionar más con la página y mejorar
la experiencia en la navegación, con lo que ya no es un mero tablón que muestra información.
Como hemos dicho, existen muchos lenguajes. Para conocer un poco mejor qué tipos de
lenguaje de programación web existen, es necesario hacer un recopilatorio de los más utilizados
y explicar sus ventajas e inconvenientes, en comparación a los demás.
Lenguaje JavaScript
Se utiliza principalmente del lado del cliente aunque se puede utilizar del lado del servidor.
Actualmente y gracias a tecnologías como AJAX es utilizado para enviar y recibir información
del servidor.
Como principales ventajas, tenemos que destacar que es un lenguaje de scripting seguro y
fiable, cuyos scripts tienen capacidades limitadas, debido a la seguridad.
Como desventajas, podríamos mencionar que el código debe descargarse por completo y es
visible por cualquier usuario.
Lenguaje PHP
Es un lenguaje enfocado en la creación de webs dinámicas. Sus scripts son interpretados por el
servidor y genera código HTML. Requiere Apache o IIS con librerías de PHP. Hereda su sintaxis
de C, Java y Perl.
Como principales ventajas, hemos de decir que es un lenguaje fácil de aprender y muy rápido.
Soporta la orientación a objetos y utiliza un lenguaje multiplataforma. Además, puede
conectarse con una gran cantidad de base de datos: MySQL, PostgreSQL, Oracle, MS SQL
Server… No necesita que se definan los tipos de variables. Uno de sus aspectos más llamativos
es que está diseñado con el fin de ser un lenguaje muy seguro para escribir CGI, más que Perl o
C.
Es el lenguaje base que utilizan la mayoría de CMS o gestores de contenidos más extendidos
como WordPress, PrestaShop, ¡Drupal o Joomla!
Lenguaje Python
Considerado por muchos el lenguaje más limpio a la hora de programar. El código, al igual que
JavaScript, es interpretado y no compilado.

32
Algo curioso en este lenguaje es que permite a los programadores elegir un estilo de
programación concreto (objetos, estructurado, funcional…), debido a que es un lenguaje de
programación multiplataforma.
Como ventajas de Python, destacamos que es libre y de fuente abierta, de propósito general.
Cuenta con muchas funciones y librerías y es multiplataforma y fácil de programar. Por otro
lado, su principal desventaja es que, al ser un lenguaje interpretado, es bastante lento.
Lenguaje Ruby
Como el anterior, es un lenguaje interpretado y está orientado a objetos. Hereda su sintaxis de

Phyton y Perl. El lenguaje puede cargar librerías de extensiones dinámicamente si el sistema
operativo lo permite. Además, es un lenguaje portátil.
Otra ventaja que ofrece es que cualquiera puede encontrar en su página web gran cantidad de
información y tutoriales.
El desarrollo web es una tarea que requiere mucho tiempo, por lo que elegir un lenguaje para tu
hosting con el que sentirse cómodo es crucial.
Actividad Nº 3 A-I Anatomía de una URL Valor 1 Punto
En la siguiente imagen identifica los elementos que contiene la URL de una página web, según la
información tratada anteriormente.
Coloca en el número el elemento que corresponda:

 Protocolo
 Subdominio / Dominio / nivel de dominio
 Rutas / Carpetas / recursos
 Paginas

33
Auto evaluación del resultado de aprendizaje 1 Punto
 Identificar los elementos de una aplicación web
Reflexiona tu desempeño para el logro de los aprendizajes, contestando cada uno de los
siguientes aspectos con honestidad y marcándolos según tu resultado de aprendizaje.
 Logrado domino el aspecto en su totalidad

 En Proceso me falta dominio o no logro comprenderlo
 Por desarrollar no sé de qué se trata o desconozco a que se refiere
Por
Logrado En proceso
desarrollar
Aspecto Conceptual
Identifico con claridad la diferencia entre página y sitio web.
Distingo con claridad los elementos de una pagina web.
Clasifico e identifico con facilidad el tipo de tecnologías y
lenguajes de desarrollo web.
Conozco los métodos de comunicación de las páginas web
Entiendo con claridad cada uno de los niveles de la
arquitectura de una aplicación web
Conozco la anatomía de la URL de una pagina web
Aspecto Procedimental
Leo las instrucciones y el contenido de cada actividad para
comprender que se realiza.
Utilizo medios digitales para desarrollar mis actividades
favoreciendo mi perfil técnico profesional
Busco información en la internet usando herramientas y
técnicas propuestas por mi profesor, para facilitar mi
actividad,
Se utilizar los diferentes medios que me permitan desarrollar
un conocimiento autónomo para complementar mis
actividades.
34
Aspecto actitudinal
Organizo mis tiempos para realizar mis actividades
Participo cuando tengo dudas, para poder entender lo que se
va a realizar en cada actividad.
Pongo creatividad, empeño y dedicación a las actividades que
realizo
Atiendo las indicaciones y participo con una constante
comunicación con el profesor en las diferentes plataformas y
medios.
Entrego en tiempo y forma mis actividades como me las
solicita el profesor

35
Segundo Apartado Desarrollo Web
Desarrollo Web

36
Objetivo
Utilizaras herramientas y plataformas para el diseño de páginas web, mediante la aplicación de
lenguajes y tecnologías que intervienen, en el diseño y construcción de aplicaciones en
ambientes web; con la finalidad de desarrollar el diseño de aplicaciones web.
Diseña una aplicación web
Contenidos de Referencia
Definición de Servidor Web
Servidor Web Clasificación e instalación de un servidor web
Google Sites
Definición de un Sitio Web
DESARROLLO WEB Sitio Web Configuración de un Sitio Web
Sitio Web en Google Sites
Definición del proyecto web
Proyecto Web Configuracion del sitio para proyecto web
Diseño de interfaces y modulos del proyecto web
Productos esperados
 Definición, características y clasificación de Servidores web
 Evolución de los Servidores Web
 Configuración y requerimientos de un Sitio web
 Proyecto web
 Autoevaluación
Evaluación
 Evaluación Sumativa
 Actividades cuadernillo 5 puntos
 Evaluación Formativa
 Prácticas en el cuadernillo 4 puntos
 Evaluación diagnostica
 Autoevaluación 1 punto

37
2. Servidor Web
Los servidores web sirven para almacenar contenidos de Internet y facilitar su disponibilidad de
forma constante y segura. Cuando visitas una página web desde tu navegador, es en realidad un
servidor web el que envía los componentes individuales de dicha página directamente a tu
ordenador. Esto quiere decir que para que una página web sea accesible en cualquier momento,
el servidor web debe estar permanentemente online.
Toda página accesible en Internet necesita un servidor especial para sus contenidos web. A
menudo, las grandes empresas y organizaciones cuentan con un servidor web propio para
disponer sus contenidos en Intranet e Internet. Sin embargo, la mayoría de administradores
recurren a los centros de datos de proveedores de alojamiento web para sus proyectos.
Independientemente de si tienes un servidor web propio o de si alquilas uno externo, siempre
necesitarás un software para gestionar los datos de tu página y mantenerla actualizada. En este
sentido, tienes la posibilidad de elegir entre varias soluciones de software para servidores web
diseñadas para diferentes aplicaciones y sistemas operativos.
Los servidores web (también conocidos como servidores HTTP) son un tipo de servidores
utilizados para la distribución (entrega) de contenido web en redes internas o en Internet
(“servidor” hace referencia al verbo “servir”). Como parte de una red de ordenadores, un servidor
web transfiere documentos a los llamados clientes (del inglés clients), por ejemplo, una página
web a un explorador.
En general, la pregunta “qué es un servidor web” puede referirse a dos cosas: al software del
servidor (es decir, al programa en sí) y al equipo en el que el software del servidor web se está
ejecutando. Cuando se trata de este último, se habla del host (un host puede alojar múltiples
soluciones de software para servidores web). A continuación, nos referiremos explícitamente a
alguno de estos significados, ya sea al software de servidor web/software servidor HTTP (o
programa) o al host.
Tarea A-II N.º 1 Evolución de los servidores web. Valor 1 punto
Utilizando el navegador de Google Académico realiza una investigación sobre la evolución

de los servidores web, Una vez realizada la investigación organiza la información en una
línea del tiempo.
Recuerda que los temas de la línea del tiempo que debes considerar son:
 Servidor Web
 Características
 Temporalidad
 Representación gráfica
38
Para realizar tu línea del tiempo puedes utilizar herramientas o medios convencionales,
como hojas, recortes, colores, O plataformas digitales. Utiliza el espacio destinado en la
siguiente hoja del cuadernillo para que realices tu línea del tiempo.

39

40
2.1.La tecnología detrás de los servidores web
Principalmente, el software de un servidor HTTP es el encargado de proporcionar los datos para
la visualización del contenido web. Para ello, el programa se comunica con un cliente web (por
lo general, un navegador o un crawler de los motores de búsqueda).
Para abrir una página web, el usuario solo tiene que escribir el URL correspondiente en la barra
de direcciones de su navegador web. El navegador envía una solicitud al servidor web, quien
responde, por ejemplo, entregando una página HTML. Esta puede estar alojada como un
documento estático en el host o ser generada de forma dinámica, lo que significa que el
servidor web tiene que ejecutar un código de programa (p. ej., Java o PHP) antes de tramitar su
respuesta. El navegador interpreta la respuesta, lo que suele generar automáticamente más
solicitudes al servidor a propósito de, por ejemplo, imágenes integradas o archivos CSS.
El protocolo utilizado para la transmisión es HTTP (o su variante cifrada HTTPS), que se basa, a
su vez, en los protocolos de red IP y TCP (y muy rara vez en UDP). Un servidor web puede
entregar los contenidos simultáneamente a varios ordenadores o navegadores web. La cantidad
de solicitudes (requests) y la velocidad con la que pueden ser procesadas depende, entre otras
cosas, del hardware y la carga (número de solicitudes) del host. Sin embargo, la complejidad del
contenido también juega un papel importante: los contenidos web dinámicos necesitan más
recursos que los contenidos estáticos.
La selección del equipo adecuado para el servidor y la decisión de si este debe ser dedicado,
virtual o en la nube, se debe hacer pensando siempre en evitar sobrecargas en el servidor.
Recuerda que, aunque hayas encontrado un servidor web que se adapta perfectamente a las
necesidades de tu proyecto, siempre se corre el riesgo de que se presenten fallos en él como
consecuencia de imprecisiones técnicas o cortes de energía en el centro de datos del host.
Aunque no es muy frecuente, durante un período de inactividad de este tipo (downtime), la web
no estará disponible a menos que se ejecute en un dispositivo con una conexión a una Content
Delivery Network, algo no muy usual en el caso de webs pequeñas.
2.2.Funcionamiento de un Servidor Web

Antes de comenzar a analizar y responder esta pregunta, primero tenemos que hacernos otra
pregunta que nos llevará a descubrir cómo funciona un servidor web: ¿Como está formada una
petición web?
Una petición está formada por la URL del recurso y el tipo de petición (GET/POST/etc) a su vez
en el header de la petición se puede indicar la versión del protocolo HTTP a usar, que contenido
acepta, que algoritmo compresión admite, seguridad SSL, además se pueden incluir datos de
autentificación como usuario, passwords, tokens de autenticación o el formato en que se envían
los datos entre muchas otras cosas.
Cuando se realiza una solicitud sin importar el tipo, esta consta de 4 pasos:
Resolución DNS
41
Cuando hacemos una abrimos una página web nosotros escribimos la dirección, como por
ejemplo google.com, sin embargo, para poder llegar a google.com se necesita saber la IP de
Google, que no es otra cosa que una dirección numérica única que identifica de forma única al
servidor.
Para poder obtener la IP se hace una consulta a un servidor DNS, esto el usuario no lo ve porque
sucede internamente en nuestro sistema.
Solicitud de parte del navegador
Una vez que nuestro sistema operativo resolvió la consulta DNS y sabe cómo encontró el
servidor, nuestro sistema operativo a través del protocolo TCP/IP negocia una comunicación
con el servidor remoto que aloja la página que queremos ver.
Una vez establecida la comunicación, luego mediante el protocolo HTTPS y usando una petición
tipo de petición GET se solicita la URL en cuestión.
En la solicitud tal como dijimos anteriormente viaja un header que contiene diferentes datos
para establecer una comunicación, por ejemplo el contenido que acepta, por ejemplo si
queremos abrir la página pero no queremos que se nos carguen las imágenes solo el html esto
se especifica en el header. esto es útil para sistemas robot que recorren la web indexando
páginas y donde las imágenes son irrelevantes.
El servidor web procesa la solicitud
En este paso el servidor web debe determinar primero a que sitio corresponde la petición (ya
que en un mismo servidor pueden alojar varios dominios) y lo hace a través del header recibido
observando la URL que se solicitó.
Una vez que sabe de qué dominio se trata puede levantar la configuración personalizada del
sitio como puede ser la versión de PHP a utilizar y levantar las reglas del archivo htaccess en
caso de Apache o LiteSpeed o sus equivalentes en otros tipos de servidores web.
Un sitio puede no tener reglas definidas sin embargo en caso de tenerlas estas modifican el
comportamiento del servidor y la forma de responder a las peticiones.
Gracias al archivo .htaccess puedes crear URL amigables para ayudar al SEO o simplemente
hacer las URL más sencillas, se pueden establecer políticas de seguridad, permisos de acceso o
denegación a archivos, filtrados de IP, modificar las cabeceras de respuesta u otros valores de
configuración, las opciones son sumamente diversas
A su vez en este punto el servidor debe determinar que se está solicitando, por ejemplo si se
trata de una imagen o un archivo HTML el servidor lo leerá del disco SSD y lo enviará al cliente,
en cambio si se trata de una página .php o .asp el servidor primero ejecutará el código de dicho
script para obtener el contenido que devolverá, que puede ser HTML, un JSON, texto o incluso
42
una imagen o un archivo, a esto es lo que se llama contenido dinámico debido a que no existe
en el servidor como tal sino que es generado en el momento para ser mostrado.
El servidor responde la solicitud
Una vez que el servidor obtuvo el contenido o datos devolverá una cabecera de respuesta donde
por ejemplo especifica el tipo de datos devuelto, en ella indicará si es HTML, un JSON, una
imagen o archivo de audio, entre otros, esto facilita al navegador saber que tiene que hacer con
ese fichero y cómo debe tratarlo posteriormente.
Cada respuesta del servidor va acompañado de un número de identificación que indica que
ocurrió, por ejemplo si en una petición GET obtenemos el código 200 quiere decir que esta todo
correcto y sin errores.
Si por el contrario nos responde con un error 500 será un error interno del servidor, si vemos un
error 403 es porque no tenemos acceso a donde queremos entrar, y si recibimos un error 404 es
porque la URL no se encontró.
Hay códigos de respuesta que abarcan diferentes situaciones, puedes ver un listado de códigos
aquí, son vitales para poder interpretar cómo funciona un servidor en determinadas peticiones
que le enviamos.
Tarea A-II N.º 2 Funcionamiento de un Servidor Web. Valor 1 punto
Utilizando el navegador de Google realiza una investigación sobre el funcionamiento de un

servidor web. Una vez realizada la investigación organiza la información en un diagrama
que muestre el funcionamiento del servidor web
Recuerda que tu diagrama debe contener:

 Elementos que interactúan
 Protocolos
 Recursos
Para realizar tus diagramas puedes utilizar medios convencionales como hojas, recortes,
colores. Utiliza el espacio destinado en la siguiente hoja del cuadernillo para que realices tu
diagrama.

43

44

45
2.3.Sitio Web
Un sitio web es un conjunto de archivos electrónicos y páginas web referentes a un tema en
particular, incluyendo una página inicial de bienvenida generalmente denominada home page, a
los cuales se puede acceder a través de un nombre de dominio y dirección en Internet
específicos. El World Wide Web, o simplemente Web como se le llama comúnmente, está
integrado por sitios web y éstos a su vez por páginas web. La gente suele confundir estos
términos, pero un sitio web es en realidad un conjunto de páginas web. A manera de ejemplo, la
Secretaría de Turismo en México cuenta con un sitio web que se puede visitar a través de la
siguiente dirección http://www.gob.mx/sectur/ y cada tema (vínculo) que se puede consultar
dentro de este sitio representa una página web.
Los sitios web son empleados por las instituciones públicas y privadas, organizaciones e
individuos para comunicarse con el mundo entero. En el caso particular de las empresas, este
mensaje tiene que ver con la oferta de sus bienes y servicios a través de Internet, y en general
para eficientar sus funciones de mercadotecnia.
El sitio web no necesariamente debe localizarse en el sistema de cómputo de su negocio. Los

archivos y documentos que integran el sitio web pueden ubicarse en un equipo en otra localidad,
inclusive en otro país. El único requisito es que el equipo en el que se almacenen los
documentos esté conectado a la red mundial de Internet. Este equipo de cómputo o Servidor
Web, como se le denomina técnicamente, puede contener más de un sitio Web y atender
concurrentemente a los visitantes de cada uno de los diferentes sitios.
Al igual que los edificios, oficinas y casas, los Sitios Web requieren de una dirección particular
para que los usuarios puedan acceder a la información contenida en ellos. Estas direcciones, o
URLs (por sus siglas en inglés Uniform Resource Locator), aparecen cotidianamente en todos
los medios de comunicación como son prensa escrita, radio, televisión, revistas, publicaciones
técnicas y en el propio Internet a través de los motores de búsqueda (por su denominación en
inglés search engines). Los nombres de estos sitios Web (dominios) obedecen a un sistema
mundial de nomenclatura y están regidos por el ICANN (Internet Corporation for Assigned
Names and Numbers).
Los Sitios Web pueden ser de diversos géneros, destacando los sitios de negocios, servicio,
comercio electrónico en línea, imagen corporativa, entretenimiento, redes sociales y sitios
informativos.
Tarea A-II N.º 2 Elementos y herramientas para el diseño Web. Valor 1 punto
Utilizando el navegador de Google Académico realiza una investigación sobre las

herramientas y tecnologías necesarias para desarrollar un proyecto web, Una
vez realizada la investigación organiza la información en una infografía.

46
 Herramientas
 Tecnologías
 Elementos
Para realizar tu infografía puedes utilizar herramientas o medios convencionales, como

hojas, recortes, colores, etc. Utiliza el espacio destinado en la siguiente hoja del cuadernillo
para que realices tu infografía.

47

48
2.4.Google Sites
Google Sites es una aplicación en línea gratuita ofrecida por la empresa estadounidense Google
como parte de la suite de productividad de G Suite. Es una herramienta para la creación de
páginas web. Esta aplicación permite crear un sitio web o una intranet de una forma tan sencilla
como editar un sitio web. Con Google Sites los usuarios pueden reunir en un único lugar y de
una forma rápida información variada, incluidos vídeos, calendarios, presentaciones, archivos
adjuntos y texto.
El objetivo de Google Sites es que cualquier persona pueda crear un sitio permitiendo compartir
información con facilidad para verla o compartirla con un grupo de personas reducido de
colaboradores o con toda su organización, o con todo el mundo. Por lo que es muy útil en la
creación de intranets, páginas de empleados, proyectos, etc. orientado al equipo en el que
múltiples personas puedan colaborar y compartir archivos.
2.4.1. Características de Google Sites:

 No requiere programación como el HTML o CSS. Aunque se puede editar directamente
parte del código, la integración de contenidos no requiere contar con estos
conocimientos.
 Disponer con plantillas disponibles y fácil creación de plantillas.
 Fácil manejo de archivos adjuntos a través de Google Drive.
 Fácil integración de contenido multimedia (vídeos, documentos, hojas de cálculo y
presentaciones del ambiente Google Docs, Google Fotos y herramientas de iGoogle).
 Búsqueda con la tecnología Google en el contenido de Google Sites.
 Mapeo de nombres de dominio personalizado: los propietarios de cuentas personales de
Google y de cuentas de Google Apps for Business pueden asignar su sitio de Google a
un nombre de dominio personalizado. Uno debe poseer el dominio y tener acceso para
cambiar los registros CNAME.
 Permisos y roles administrativos en varias capas y accesibilidad: hay tres niveles de
permisos dentro de Google Sites: propietario, editor y visor. Los propietarios tienen
permisos completos para modificar el diseño y el contenido de todo el sitio de Google,
mientras que los editores no pueden cambiar el diseño del sitio. Los espectadores sólo
pueden ver el sitio y no están autorizados a realizar cambios en el texto o de otra
manera.
Google Sites es una aplicación online que permite crear un sitio web de grupo de una forma
sencilla. Con Google Sites los usuarios pueden reunir en un único lugar y de una forma rápida
información variada, incluir vídeos, calendarios, presentaciones, archivos adjuntos y texto.
Además, es posible compartirla con facilidad para verla y editarla con un grupo reducido, con
toda la comunidad universitaria o con todo el mundo.

49
Tarea A-I N.º 2 Configurar Sitio Web en Google Sites. Valor 1 punto
Utilizando el navegador de Google Académico realiza una investigación sobre la

configuración de un Sitio en Google Sites para desarrollar un proyecto web, Una vez
realizada la investigación organiza la información en una infografía.

 Configuración del Sitio
Para realizar tu infografía puedes utilizar herramientas o medios

convencionales, como hojas, recortes, colores, etc. Utiliza el espacio destinado en la
siguiente hoja del cuadernillo para que realices tu infografía.

50

51

CuadernilloTrabajo 4S-DAW

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CuadernilloTrabajo 4S-DAW

Cargado por

Copyright:

Formatos disponibles

CBT San Pedro Tlaltizapán

Profesor Juan Gerardo Moreno Florentino

 Submódulo I Desarrolla Aplicaciones Web.

Objetivo del Submódulo

 Aprende de manera autónoma

7. Aprende por iniciativa e interés propio a lo largo de la vida

 Trabaja de forma colaborativa

8. Participa y colabora de manera efectiva en equipos diversos.

M1 Construye e interpreta modelos matemáticos deterministas o aleatorios mediante la aplicación de

Desarrollo Aplicaciones Web.

 Identifica los elementos básicos de una aplicación web

 Desarrolla Aplicaciones Web estáticas y dinámicas.

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

El contenido está organizado de lo general (tipos y clasificación de tecnologías web) a lo particular

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

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

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

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

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

Actividad Nº 1 A-I Relación de antecedentes de la Internet Valor 1 Punto

 Utiliza diferentes colores para relacionar los conceptos

1.1.La World Wibe Web

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

1.1.1. Elementos básicos de un sitio Web y sus partes

El comprender el proyecto desde esta etapa, permite un ahorro significativo de recursos en el

Las páginas Web

Las páginas Web son el soporte de la información en la Web.

Los Sitios Web

Elementos que componen una página Web

Las principales características que constituyen una página en Internet son:

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

La Web se ha convertido en el medio de comunicación más importante del mundo gracias a su

En el contenido Web influyen la presentación, los conceptos de diseño y algunas estrategias

Un poco de experiencia y conocimiento de algunos principios básicos de diseño más cierto

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

1.1.2. Tecnología del 3WC

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

En el pasado, la arquitectura Web se basaba exclusivamente en URL y HTTP, que, a su vez,

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

Tarea A-I N.º 1 Evolución de la Web.

Para realizar tu cuadro comparativo puedes utilizar plataformas digitales, o medios

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

1.1.3.1. ¿Qué es Internet?

1.1.3.2. ¿Cómo funciona la web?

El hecho de poner una dirección en nuestro navegador es comparable al de marcar un número

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

Actividad Nº 2 A-I Elementos de una página web Valor 1 Punto

 Coloca el numero donde corresponda según el elemento mostrado en la imagen.

Utilizando el navegador de Google Académico realiza una investigación sobre la diferencia

Recuerda que los temas de la infografía que debes considerar son:

Para realizar tu infografía puedes utilizar herramientas o medios convencionales, como

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web

2. Administración de los datos.

 Los usuarios acceden a través de navegadores, móviles, PDAs, etc.

 Modelo de dos capas: La información atraviesa dos capas entre la interfaz y la

Tarea A-I N.º 3 Modelo de 2 y N Capas. Valor 1 punto

Recuerda que tu investigación debe contener:

Cuadernillo de Trabajo Submódulo I Desarrolla Aplicaciones Web