Uso de Herramientas para Aplicaciones Web
Transcript of Uso de Herramientas para Aplicaciones Web
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