Uso de Herramientas para

Aplicaciones Web Cuarto semestre

Presenta:

Ma. De los Angeles González Jarquín

Docente del plantel Xalapa

Tipo de Módulo

Profesional

Unidad 1

R.A. 1.1 Determina el entorno de ejecución de las aplicaciones web,

empleando software de servidor que soportan los sitios web.

¿Qué es un servidor?

El término servidor tiene dos significados en el ámbito informático. El primero hace referencia al ordenador que pone recursos a disposición a través de una red, y el segundo se refiere al programa que funciona en dicho ordenador. En consecuencia, aparecen dos definiciones de servidor:

• Definición Servidor (hardware): un servidor basado en hardware es una máquina física integrada en una red informática en la que, además del sistema operativo, funcionan uno o varios servidores basados en software. Una denominación alternativa para un servidor basado en hardware es "host" (término inglés para "anfitrión"). En principio, todo ordenador puede usarse como "host" con el correspondiente software para servidores.

• Definición Servidor (software): un servidor basado en software es un programa que ofrece un servicio especial que otros programas denominados clientes (clients) pueden usar a nivel local o a través de una red. El tipo de servicio depende del tipo de software del servidor. La base de la comunicación es el modelo cliente-servidor y, en lo que concierne al intercambio de datos, entran en acción los protocolos de transmisión específicos del servicio.

• ¿Cómo funciona un servidor?

• La puesta a disposición de los servicios del servidor a través de una red informática se basa en el modelo cliente-servidor, concepto que hace posible distribuir las tareas entre los diferentes ordenadores y hacerlas accesibles para más de un usuario final de manera independiente. Cada servicio disponible a través de una red será ofrecido por un servidor (software) que está permanentemente en espera. Este es el único modo de asegurar que los clientes como el navegador web o los clientes de correo electrónico siempre tengan la posibilidad de acceder al servidor activamente y de usar el servicio en función de sus necesidades.

A. Definición de la arquitectura para aplicaciones web

Servidor web: la tarea principal de un servidor web es la de guardar y organizar

páginas web y entregarlas a clientes como navegadores web o crawlers. La

comunicación entre servidor (software) y cliente se basa en HTTP, es decir, en

el protocolo de transferencia de hipertexto o en HTTPS, la variante codificada.

Por regla general, se transmiten documentos HTML y los elementos

integrados en ellos, tales como imágenes, hojas de estilo o scripts.

Los servidores web más populares son el servidor HTTP Apache, los servicios

de Internet Information Server de Microsoft (ISS) o el servidor Nginx.

Servidor de aplicaciones: de manera muy concreta, es un computador

especializado cuyo software entrega servicios a otras computadoras o

personas, a los que les llega toda la información se les conoce

como clientes, por poner un ejemplo, lo que se conoce como servidor de

archivos no es más que un equipo que está en el interior de una red, esta se

dedica a almacenar archivos, por esto cualquier otra persona que use esta red

puede guardar los archivos en dicho servidor.

B. Programación lado cliente

La programación del lado del cliente tiene como principal ventaja que la

ejecución de la aplicación se delega al cliente, con lo cual se evita recargar al

servidor de trabajo. El servidor solo envía el código, y es tarea del browser

interpretarlo.

El navegador es una especie de aplicación capaz de interpretar las órdenes

recibidas en forma de código HTML fundamentalmente y convertirlas en las

páginas que son el resultado de dicha orden. Cuando damos click sobre un

enlace hipertexto, en realidad lo que pasa es que establecemos una petición

de un archivo HTML residente en el servidor (un ordenador que se encuentra

continuamente conectado a la red) el cual es enviado e interpretado por

nuestro navegador (el cliente).

Ejemplo:

HTML: es el lenguaje de marcado que usamos para estructurar y dar

significado a nuestro contenido web, por ejemplo, definiendo párrafos,

encabezados y tablas de datos, o insertando imágenes y videos en la página.

JavaScript: es un lenguaje de secuencias de comandos que te permite crear

contenido de actualización dinámica, controlar multimedia, animar imágenes y

más.

XHTML: es un lenguaje de marcado que permite editar webs.

XML: es un lenguaje de marcado que define un conjunto de reglas para la

codificación de documentos.

C. Programación lado servidor

Lenguajes de lado servidor que son aquellos lenguajes que son reconocidos,

ejecutados e interpretados por el propio servidor y que se envían al cliente en un

formato comprensible para él. Son especialmente útiles en trabajos que se tiene

que acceder a información centralizada, situada en una base de datos situada en

el servidor, y cuando por razones de seguridad los cálculos no se pueden realizar

en la computadora del usuario.

Es importante destacar que los lenguajes de programación del lado del servidor

son necesarios porque para hacer la mayoría de las aplicaciones web se debe

tener acceso a muchos recursos externos a la computadora principalmente

bases de datos alojadas en servidores de internet. Un caso claro es un banco: no

tiene ningún sentido que el cliente tenga acceso a toda la base de datos, solo a

la información que le conviene.

Protocolos Web

Cuando navegamos a través de internet nuestro navegador está intercambiando

datos con las diferentes páginas web que visitamos. En ocasiones son datos que

se comparten de forma automática, como nuestra dirección IP o nuestro

historial de búsquedas, pero otras veces es información que damos de forma

consciente como la tarjeta de crédito en una tienda online.

Los protocolos de seguridad de red son un tipo de protocolo de red que

garantiza la seguridad y la integridad de los datos en tránsito a través de una

conexión de red como Internet. Están diseñados principalmente para evitar que

usuarios, aplicaciones, servicios o dispositivos no autorizados accedan a los

datos de la red. Esto se aplica a prácticamente todos los tipos de datos,

independientemente del medio de red utilizado. Por ejemplo:

http: (Protocolo de transferencia de hipertexto) se basa en www (World Wide

Web) que transmite mensajes por la red. Por ejemplo, cuando un usuario ingresa

al navegador y ingresa en la URL una búsqueda, la URL transmite los mensajes

por HTTP al servidor web que el usuario solicitó. Luego, el servidor web

responde y entrega los resultados de los criterios de búsqueda que había

solicitado.

https: (HyperText Transfer Protocol Secure, Protocolo de transferencia de

hipertexto) es un protocolo de comunicación de Internet que protege la

integridad y la confidencialidad de los datos de los usuarios entre sus

ordenadores y el sitio web.

Instalación y configuración del servidor de aplicaciones

1. Elección del servidor

2. Elección del sistema operativo

3. Elegir el programa servidor

4. Elegir la conexión idónea a internet

5. Abrir los puertos del router

6. Obtener un dominio

7. Tener IP (puede ser fija o dinámica)

8. Configurar el firewall

Ejemplos de lenguajes de programación para web

1. Java

2. JavaScript

3. Php

4. C++

D. Establecimiento del entorno para el desarrollo de un sitio web

Herramientas para el desarrollo

Son una asociación de aplicaciones web que facilitan la comunicación, el diseño,

el usuario y la colaboración el el WWW (World Wide Web), además permite a los

usuarios interactuar y colaborar con la creación de contenidos.

Planificación del trabajo

Son el objetivo, la arquitectura, el diseño y la usabilidad del sitio.

Elementos gráficos y multimedia

Las secciones internas de una página web se encuentran lazadas 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.

R. A. 1.2 Desarrolla páginas web, utilizando el lenguaje para el desarrollo de sitios web

A. Elaboración de página estáticas mediante el lenguaje XHTML

XHTML es una adaptación de HTML, por lo que mantiene casi todas sus

etiquetas y características, pero añade alguna restricciones y elementos propios

de XML. Ejemplos de código en HTML para:

Formatos: <p>Este es un párrafo con <a>un enlace</a></p>

Hipervínculos: <a href=”http://www.tutorialhtml.com/”>Tutoriales HTML</a>

Imágenes y elementos multimedia:

<img alt=”imagen html de ejemplo” src=”/assets_tutorials/img/image.jpg” />

Listas: <h4 aling=”center>Objetivos</h4>

<ol> <li>Terminar el bachillerato</li> <li>Estudiar la universidad</li> <li>Buscar un buen trabajo<li/>

Tablas: <table border=”1”>

<tr> <td> Fila 1 Celda 1</td> <td> Fila 1 Celda 2</td> </tr> <tr> <td> Fila 2 Celda 1</td> <td> Fila 2 Celda 2</td> </tr> </table>

Formularios: <form method=”post” action=”process.php”> Nombre: <input type=”text” size=”10” maxlength=”40” name=”nombre”></br> Contraseña: <input type=”password” size=”10” maxlength=”10” name=”contraseña”></br> </form>

Marcos: <html> <head></head> <frameset cols=”30%,*”> <frameset src=”menú.html”> <frameset src=”content.html”> <frameset/>

<html/>

B. Uso de las hojas de estilo en cascada

CSS es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado (por ejemplo, HTML).

Así, a los elementos de la página web creados con HTML se les dará la apariencia que se desee utilizando CSS: colores, espacios entre elementos, tipos de letra, separando de esta forma la estructura de la presentación.

Esta separación entre la estructura y la presentación es muy importante, ya que permite que sólo cambiando los CSS se modifique completamente el aspecto de una página web. Esto posibilita, entre otras cosas, que los usuarios puedan usar hojas de estilo personalizadas

Existen tres formas bastante conocidas de emplear CSS para maquetar una página HTML y son las siguientes:

1) Aplicar CSS en línea HTML mediante atributos. 2) Incrustar el código CSS en una etiqueta <style> dentro del documento

HTML. 3) Crear un documento CSS externo.

Ejemplo de la opción 1):

El atributo STYLE es la mejor opción para colocar estilos, dentro de su valor irán

las propiedades y sus respectivos valores CSS.

<p style=”color: red;”> este es un párrafo </p>

C. Aplicación de efectos a páginas

web

Las animaciones son una manera de

convertir en dinámica una página web.

De esta manera podemos jugar con los

efectos visuales y captar la atención del

usuario hacia aquello que nos interesa

que vea.

Se tiene que tener en cuenta que las animaciones tienen que ayudar

a dinamizar la web y hacerla más atractiva, pero no tienen que distraer al

usuario del objetivo principal de la página web, sea cual sea.

1.- Con tus propias palabras, describe la función de un servidor.

2.- ¿En que se basas la comunicación entre servidor y cliente en un servidor web?

3..- ¿Cuáles son los lenguajes de programación lado cliente?

4.- ¿Cuál es la diferencia entre los protocolos web http y https?

5.- Describe con tus propias palabras los elementos necesarios para establecer el entorno de desarrollo de un sitio web

6.- ¿Cuáles son las etiquetas y las sintaxis para definir una lista ordenada en XHTML?

7.- ¿Qué son y para qué sirven las hojas de estilo en cascada (CSS)

Unidad 2

Desarrollo de aplicaciones Web.

R. A. 2.1

Selecciona la plataforma de desarrollo para aplicaciones web, de acuerdo

con la capacidad y funcionalidad diseñada para el sitio Web.

A. Determinación del software de desarrollo.

El HTML puede considerarse el lenguaje nativo de Internet, pero no es el único que

podemos encontrar hoy en día. Cada vez existe un mayor número de lenguajes de

programación, tanto para web como para móviles, que nos permiten ampliar las

posibilidades de desarrollo de una manera más sencilla.

Los diferentes lenguajes utilizados son Python, JavaScript, PHP y Ruby.

A la hora de seleccionar con qué lenguaje trabajar, es importante conocer las

diferencias y singularidades de cada uno de ellos, sus ventajas e inconvenientes,

en función de la plataforma para la que estemos desarrollando nuestro

proyecto. Además, también conviene familiarizarse con el concepto framework,

cada vez más extendido, y que hace referencia al conjunto de buenas prácticas,

módulos y librerías de cada lenguaje para abordar proyectos y necesidades

concretas.

Un servidor de aplicaciones es una máquina remota, en este caso alojada en el SCI,

y sobre la que al conectarme puedo ejecutar aplicaciones sin necesidad de tenerlas

instaladas en mi propio equipo.

Es útil cuando los recursos de mi ordenador no sean lo suficientemente potentes

como para poder instalarla de forma local o cuando tengo un sistema operativo

distinto e incompatible con el software que necesito.

Requerimientos.

Análisis: especifica que es lo que la aplicación debe hacer.

Diseño: Establece como alcanzar el objetivo.

El análisis de requerimientos comienza conociendo el problema o la idea principal,

tarea que define el alcance y la naturaleza de la idea o necesidad a cubrir. Seguido

de la indagación por medio de entrevistas y, finalmente, la documentación de todo

lo recopilado que será el entregable de este trabajo. El objetivo de realizar la

indagación de los requerimientos es proporcionar a todas las partes un

entendimiento escrito del problema. El cual se logra por medio de varios

productos del trabajo: casos de uso, diagramas de flujo y de características,

modelos de requerimientos o especificaciones, entre otros.

B. Selección del servidor de aplicaciones

Los servidores de aplicaciones actúan como

intermediarios entre las peticiones de los usuarios

de una página web y los servidores de bases de

datos y de transacciones, sitúandose en la segunda

capa de una arquitectura de red trinivel. De esta

forma se consigue aumentar las funcionalidades

ofrecidas en un sitio de Internet sin necesidad de

actualizar los programas cliente utilizados por los

usuarios.

Para elegir el servidor de aplicaciones a utilizar se deben tener en cuenta múltiples factores, que podemos clasificar en las siguientes categorías:

• Seguridad

• Escalabilidad y fiabilidad

• Soporte de las transacciones

• Presentación de páginas web

Servidores de Base de Datos. Son los que se utilizan

para la ejecución de gestores de BD y que varios

usuarios hagan operaciones sobre ellas al mismo

tiempo, situado en un lugar diferente; se puede

acceder a las BD por terminales o equipos con un

programa llamado cliente que permita el acceso a

ellas.

El servidor MySQL fue desarrollado originalmente

para manejar grandes bases de datos mucho más

rápido que las soluciones existentes y ha estado

siendo usado exitosamente en ambientes de

producción sumamente exigentes por varios años.

Aunque se encuentra en desarrollo constante, el

servidor MySQL ofrece hoy un conjunto rico y útil de

funciones. Su conectividad, velocidad, y seguridad

hacen de MySQL un servidor bastante apropiado

para acceder a bases de datos en Internet.

Servidor local “Virtual host” Es un servidor que reside en una red local al equipo de referencia. El servidor web local puede estar instalado en cualquiera de los equipos que forman parte de una red local. Se instala por medio de un programa para permitirnos probar y navegar la página web que vayamos a crear desde nuestro equipo.

HTTP:

Es el protocolo que permite que los navegadores y servidores web se comuniquen adecuadamente. Este es utilizado por navegadores web para solicitar archivos HTML de parte de los servidores remotos. Así, los usuarios podrán interactuar con dichos archivos mediante la visualización de las páginas web que cuentan con imágenes, música, vídeos, texto, etc.

El protocolo HTTP tiene como base a TCP, el cual implementa un modelo de comunicación cliente-servidor.

El protocolo HTTP tiene como base a TCP, el cual implementa un modelo de comunicación cliente-servidor. Existen tres tipos de mensajes que HTTP utiliza:

• HTTP GET

• HTTP POST

• HTTP HEAD

No debemos olvidar el protocolo HTTPS, el cual nos proporciona seguridad punto a punto (entre el cliente y el servidor web). El protocolo HTTPS utiliza el protocolo TLS (Transport Layer Security) que también utiliza TCP por encima.

2

Una cookie es un fragmento de información que un

navegador web almacena en el disco duro del

visitante a una página web. La información se

almacena a petición del servidor web, ya sea

directamente desde la propia página web con

JavaScript o desde el servidor web mediante las

cabeceras HTTP, que pueden ser generadas desde

un lenguaje de web scripting como PHP.

La información almacenada en una cookie puede ser recuperada por el

servidor web en posteriores visitas a la misma página web

Creando cookies

Al recibir una solicitud HTTP, un servidor puede enviar un encabezado Set-

Cookie con la respuesta. La cookie generalmente es almacenada por el

navegador, y luego la cookie se envía con solicitudes hechas al mismo

servidor dentro de un encabezado HTTP Cookie. Se puede especificar una

fecha de vencimiento o duración, después de lo cual ya no se envía la

cookie. Además, se pueden establecer restricciones a un dominio y ruta

específicos, lo que limita el lugar donde se envía la cookie.

El encabezado de respuesta HTTP Set-Cookie envía las cookies del

servidor al agente de usuario. Una cookie simple se establece así:

Set-Cookie: <nombre-cookie>=<valor-cookie>

R. A. 2.2 Desarrolla aplicaciones web, mediante el uso de componentes de la

plataforma de desarrollo

A. Uso del lenguaje de programación para el desarrollo web

B. Verificación del funcionamiento y funcionalidad de la

aplicación

La planificación de la verificación debe definir el propósito, los

métodos, las frecuencias y las responsabilidades de las

actividades de verificación. Los resultados de la planificación

deben estar en un formato adecuado para su registro.

Verificación: Es un conjunto de actividades que aseguran que el

software implementa correctamente una función específica, esto

implica comprobar que el software corresponde con lo

especificado.

La validación de datos garantiza la corrección de datos y precisión

de todos los valores de datos de la aplicación

El objetivo de estos pasos es asegurar que el sistema satisface las

expectativas y procura demostrar que el software hace lo que se

espera.

Maquetación

En esta etapa se organiza todos los elementos de la futura página

web, se estructura de manera gráfica los contenidos escritos,

imágenes, video, títulos, enlaces, menús, botones, formularios, y

todo aquel elemento que haya sido considerado en la lista de

requerimientos del proyecto.

Estrictamente el proceso de maquetar, sólo se refiere al acto de

estructurar la página web, distribuir y organizar los elementos y

los espacios de la página. Sin embargo, este proceso se mejora

cuando la maquetación se convierte en una pre-visualización del

sitio web, es decir, además de estructurar y organizar los

elementos, también se elige una paleta de colores, y se diseña ya

sea en papel o en algún editor gráfico la visión final del sitio web.

ELEMENTOS

3

4

Unidad 3 Integración de bases de datos a las aplicaciones web. R. A. 3.1 Selecciona y aplica el software y recursos técnicos necesarios, para la integración de bases de datos a aplicaciones web

A. Selección del sistema gestor de bases de datos

p

B. Configuración del entorno de trabajo de la base de datos en el servidor

PHP: (acrónimo recursivo de PHP:

Hypertext Preprocessor) es un

lenguaje de código abierto muy popular

especialmente adecuado para el

desarrollo web y que puede ser

incrustado en HTML.

“Todo proyecto a iniciar con base de

datos en WEB debe almacenarse en la

carpeta www.”

MVC

Modelo - Vista - Controlador

– Modelo: Se estructura la base de datos

– Vista: Se estructura el SITIO WEB (html) – index.html

(formularios de acceso a la base de datos).

– Controlador: Se realiza conexión de la Base de Datos

5

TIEMPO

________

R. A. 3.2 Programa la interface de la aplicación web con las bases de datos, para el manejo dinámico de información.

A. Visualización de datos mediante páginas dinámicas web

Un sitio web dinámico contiene información que cambia, dependiendo del

espectador, la hora del día, la zona horaria, el idioma nativo del espectador y

otros factores.

En comparación con los sitios web estáticos, que son puramente informativos,

un sitio web dinámico es más funcional. Permite a los usuarios interactuar con

la información que aparece en la página.

Algunos sitios web ofrecen contenido personalizado al minuto, desde los

últimos puntajes deportivos hasta actualizaciones de sus amigos en las redes

sociales. Otros tienen información que permanece constante sin importar quién

está viendo el sitio y cuándo se detienen. Los sitios que cambian con el tiempo

generalmente se conocen como sitios dinámicos, mientras que los sitios que no

cambian son estáticos.

Los sitios de periódicos, las páginas de inicio de las redes sociales y los juegos

en el navegador cuentan con contenido cambiante, mostrando diferentes

textos, imágenes y videos dependiendo de quién esté visitando y cuándo.

Los sitios web dinámicos incluyen:

• Sitios de comercio electrónico

• Blogs

• Calendarios o sitios de tareas

• Cualquier sitio con información

Los sitios web dinámicos incluyen:

• Sitios de comercio electrónico

• Blogs

• Calendarios o sitios de tareas • Cualquier sitio con información que debe actualizarse regularmente

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.

B. Elaboración de formularios dinámicos mediante páginas web.

Al crear un formulario en HTML, debemos ser conscientes de un detalle

ineludible: los usuarios se equivocan al rellenar un formulario. Los motivos

pueden ser diversos, el caso es que debemos estar preparados y

anticiparnos a estos errores, para intentar que los datos lleguen

correctamente a su destino y evitar cualquier tipo de revisión posterior.

Para evitar estos casos se recurre a un proceso automático llamado

validación.

6

6

7

Conociendo valores, preferencias y personalidad

¿Qué es para ti la

amistad?

Contesta la pregunta en la

parte inferior de esta hoja

Refuerza tu opinión con un

dibujo de lo que representa

para ti la amistad.

Docentes:

Ma. De los Angeles González Jarquín

2

4