Download - Tecnologías de Desarrollo Web
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 1/44
Tecnologías de Desarrollo Web
Sitios y Aplicaciones Web
Ing. Ernesto S. Ríos Sandoval
Analista – Programador de Sistemas
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 2/44
Agenda
Introducción
Navegadores Web
Arquitectura Cliente / Servidor
Evolución de los Sitios WebSitios Web y Aplicaciones Web
Configuración Web
Web y Cliente / ServidorHerramientas de Desarrollo Web
Perspectivas Laborales
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 3/44
Introducción
Internet es una gran red decomputadoras conectados medianteel protocolo TCP/IP (Transfer ControlProtocol/Internet Protocol)
WWW es un servicio de Internet queda acceso a un conjunto deinformación distribuida por toda la
red, mediante documentos dehipertexto
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 4/44
Introducción
De esta forma surgió el formatoHTML (HiperText Markup Language)que permite crear documentos detexto formateado (tamaño de letra,
estilos, etc.) con hiperenlacesCada documento HTML tieneasociada una dirección URL
(Localizador Uniforme de Recursos)al que se accede mediante elprotocolo HTTP (Protocolo de
Transporte de HiperTexto)
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 5/44
Demo
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 6/44
Navegadores Web
Una vez conectado a Internet se debe
tener un programa capaz de acceder apáginas Web. El programa que se usapara leer los documentos de hipertexto
se llama “navegador”, “browser”, “visualizador” o “cliente”.
Cuando seguimos un enlace (link)decimos que estamos “navegando”
El diseño de páginas Web debeconsiderar la posibilidad de serinterpretadas por todos los
navegadores
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 7/44
Navegadores Web
Entre los navegadores Web másconocidos en la actualidad tenemos lossiguientes:
Internet ExplorerMozilla Firefox
Google Chrome
Opera
Safari
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 8/44
Arquitectura Cliente / Servidor
Esta arquitectura consiste básicamenteen que un programa, el clienteinformático, realiza peticiones a otroprograma, el servidor, que le da
respuestaEn esta arquitectura la capacidad deproceso está repartida entre los
clientes y los servidoresLos accesos, recursos y la integridadde los datos son controlados por el
servidor
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 9/44
Arquitectura Cliente / Servidor
Los tipos específicos de servidores incluyen
los servidores Web, los servidores dearchivos, los servidores de correo, etc.
Mientras que sus propósitos varían algo, la
arquitectura básica sigue siendo igual
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 10/44
Arquitectura Cliente / Servidor
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 11/44
Evolución de Sitios Web
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 12/44
Evolución de Sitios Web: Siglo Pasado
El protocolo HTTP es utilizado para que
el cliente/navegador solicite recursos alservidor (documentos HTML, imágenes,etc.)
Los documentos HTML permiten alusuario mostrar información eintroducir datos en formularios
Originalmente en HTML se mezclabanetiquetas de estructura (título, párrafo,etc.) con etiquetas de presentación
(negrita, color, etc.)
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 13/44
Evolución de Sitios Web: Siglo Pasado
Los recursos pueden ser estáticos,
almacenados en archivos en el servidor,o dinámicos
Los dinámicos son creadas en el
servidor mediante programas auxiliaresque se comunican con el servidor Webmediante CGI (Common GatewayInterface)
Cuando el servidor HTTP invoca alprograma auxiliar le pasa informaciónmediante argumentos del programa o
variables de entorno
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 14/44
Evolución de Sitios Web: Siglo Pasado
El programa auxiliar devuelve los datos
al servidor HTTP mediante su salidaestándar
Un sitio Web suele contener datos
“estáticos”, marcados con formatoHTML por el diseñador del sitio Web
Añadir más datos a un sitio Web suele
implicar escribir más páginas HTML
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 15/44
Evolución de Sitios Web: La Actualidad
Tecnologías en el lado del cliente
–CSS (Cascading Style Sheets): En eldocumento HTML se diferencia entreestructura y presentación, que es definidaen las hojas de estilo CSS
–DOM (Document Object Model): representación de la estructura de lapágina Web, manipulableprogramáticamente mediante JavaScript
– JavaScript: lenguaje de scriptingejecutado en el navegador, utilizado paramanipular (consultar/modificar) la páginaXHTML a través del DOM
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 16/44
Evolución de Sitios Web: La Actualidad
Tecnologías en el lado del cliente
–AJAX: Nombre dado a XHTML + DOM +JavaScript + XML + XMLHttpRequest
–XML, RSS, etc.: Formatos para el
intercambio de datos entre AplicacionesWeb
–XHTML: Reformulación de HTML 4.01mediante XML
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 17/44
Evolución de Sitios Web: La Actualidad
Tecnologías en el lado del servidor
–Servidores de Aplicaciones: tecnologíasen el lado del servidor para la generaciónde recursos HTML que sirven al cliente
–Bases de Datos: Utilizada para almacenarlos datos de la aplicación.
Los diseñadores de sitios Web sepreocupan de que el marcado HTML de
sus datos esté separado del estilo,colocando las indicaciones sobre estiloaparte del marcado HTML, en hojasCSS (Cascading Style Sheets)
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 18/44
Evolución de Sitios Web: Páginas
Estáticas
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 19/44
Evolución de Sitios Web: Páginas
Dinámicas
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 20/44
Sitios Web y Aplicaciones Web
Una aplicación Web es una aplicación
de software que se ejecuta en unservidor Web y a la cual acceden losusuarios mediante Internet o unaIntranet, mediante un navegador
Una Aplicación Web contiene datos,pero estos están separados del modoen que serán presentados al usuario
(usando HTML y CSS).Desarrollar una Aplicación Web no es lomismo que escribir páginas HTML para
un sitio Web
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 21/44
Sitios Web y Aplicaciones Web
Las páginas HTML de una Aplicación
Web suelen ser generadasautomáticamente a partir de los datos
Con unas plantillas y la lógica del
negocio necesaria para generar páginasHTML, éstas se generanautomáticamente dependiendo de lo
que pida el usuario, a partir deparámetros que aparecen en la URLpedida
Ejemplo: Los resultados de búsquedas
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 22/44
Sitios Web y Aplicaciones Web
Un sitio Web suele contener datos
“estáticos”, marcados con formatoHTML por el diseñador del sitio Web
Los diseñadores de sitios Web se
preocupan de que el marcado HTML desus datos esté separado del estilo,colocando las indicaciones sobre estilo
aparte del marcado HTML, en hojasCSS (Cascading Style Sheets)
Añadir más datos a un sitio Web suele
implicar escribir más páginas HTML
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 23/44
Configuración Web
Para estar en Internet se requiere cubrir los
siguientes puntos:– Tener un dominio
– Tener o contratar un hospedaje Web (Hosting)
– Un sitio Web o una Aplicación Web
Un servidor Web es un programa que sirvepara atender y responder a las diferentespeticiones de los navegadores,
proporcionando los recursos que solicitenusando el protocolo HTTP o el protocoloHTTPS (la versión cifrada y autenticada)
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 24/44
Web y Cliente Servidor
Internet se basa en el modelo Cliente /
ServidorNúmero de capas: cantidad de capasque atraviesa la información desde la
capa de datos hasta la de presentaciónCada capa suele ejecutar en un sistemadiferente o en espacios de proceso
diferentes dentro de la misma máquina
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 25/44
Web y Cliente Servidor
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 26/44
Web y Cliente Servidor
Capa de servicios de presentación:
–Recoger información del usuario
–Enviar esta información a capa de trabajo
–Recoger resultados de capa de trabajo
–Presentar los resultados al usuario
Capa de servicios de trabajo
–Recibir información de capa de información
– Interactuar con los servicios de datos pararealizar la lógica de negocio de laaplicación
–Enviar resultados a capa de presentación.
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 27/44
Web y Cliente Servidor
Capa de servicios de datos
–Almacenar datos
–Recibir datos
–Mantenimiento de los datos
– Integridad de los datos
Ejemplo:
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 28/44
Web y Cliente Servidor: EjemploUna vez que el usuario se encuentra
conectado a la Internet, para obtener lapágina Web en la pantalla de su computadorse efectúan transparentemente las siguientestareas:– El cliente solicita al navegador la página Web
requerida.– Se establece la una conexión entre el navegador y
el servidor para satisfacer el requerimiento.– El navegador solicita el objeto.– El Servidor Web busca la página en sus discos o
accede al servidor de base de datos si es el caso– El servidor envía la página al navegador, siendo
este que interpreta el código HTML.– Se cierra la conexión establecida en el segundo
paso.
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 29/44
Herramientas de Desarrollo Web
Lenguajes del lado del servidor
Instalación del servidor local
Descubriendo el potencial de PHP
Automatización de código PHPRecursos PHP
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 30/44
Herramientas de Desarrollo Web:
Lenguajes del Lado del Servidor
Son lenguajes que son interpretadospor un servidor Web
Entre los mas difundidos en la
actualidad tenemos:–PHP (Hypertext Preprocessor)
–ASP / ASP .NET (Active Server Pages)
– Java, con sus tecnologías Java Servlets yJava Server Pages (JSP)
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 31/44
Herramientas de Desarrollo Web:
Lenguajes del Lado del Servidor
Entre los servidores Web más usadosen Internet tenemos:
–Apache
– Internet Information Server (IIS) deMicrosoft
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 32/44
Herramientas de Desarrollo Web:
Descubriendo el Potencial de PHP
Diseñado para InternetEs un lenguaje multiplataforma: Tienela capacidad de ser ejecutado en la
mayoría de los sistemas operativosFácil de aprender: Usualmente se usanmenos líneas de código para undeterminado propósito
Conexión con múltiples bases de datos:Trabaja con la mayoría de bases dedatos, en especial trabaja mejor con
MySQL
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 33/44
Herramientas de Desarrollo Web:
Descubriendo el Potencial de PHP
Amplia documentaciónLibre, de código abierto
Permite técnicas de ProgramaciónOrientada a Objetos
Gran demanda laboral
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 34/44
Herramientas de Desarrollo Web:
Descubriendo el Potencial de PHP
Evolución de PHP
H i d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 35/44
Herramientas de Desarrollo Web:
Descubriendo el Potencial de PHP
El código PHP puede ser incrustadodentro del código HTML
Se ejecuta en un servidor Web tomando
el código PHP como entrada y creandopáginas Web como salida
H i d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 36/44
Herramientas de Desarrollo Web:
Descubriendo el Potencial de PHP
El código PHP se ejecuta en el servidor,nunca en el cliente
A diferencia, por ejemplo del código
JavaScript que se ejecuta siempre en elcliente nunca en el servidor
H i d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 37/44
Herramientas de Desarrollo Web:
Descubriendo el Potencial de PHP
H i d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 38/44
Herramientas de Desarrollo Web:
Descubriendo el Potencial de PHP
Demo: Video
H i t d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 39/44
Herramientas de Desarrollo Web:
Instalación del Servidor Local
¿Qué necesitamos para aprender aprogramar PHP?
– Instalar un servidor local: Transformar
nuestra computadora en un servidor Weblocal
–Para hacer prácticas de PHP
–PHP necesita de un software que interpretecorrectamente el lenguaje
–Solución para Windows: AppServhttp://www.appservnetwork.com
H i t d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 40/44
Herramientas de Desarrollo Web:
Automatización de Código PHP
¿Qué tienen en común muchosproyectos de desarrollo Web?
–Consultas a bases de datos
Mostrar datos según criteriosPaginación
Páginas Maestro / Detalle
Borrar datos
Modificar datos
Accesos con password
H i t d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 41/44
Herramientas de Desarrollo Web:
Automatización de Código PHP
¿Sabías que existen herramientas quepueden ahorrarnos hasta el 80% dedesarrollo del código?
Incluso en algunos casos el 100%Ventajas:–Desarrollar proyectos en menos tiempo
–Menos dolores de cabeza con el código–Más proyectos
Solución: Adobe Dreamweaver
H i t d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 42/44
Herramientas de Desarrollo Web:
Recursos PHP
Scripts–http://www.hotscripts.com
–http://php.resourceindex.com
–http://sitescripts.com/PHP/ –http.//www.desarrolloweb.com/directorio/p
rogramacion/php/scripts_en_php/
H i t d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 43/44
Herramientas de Desarrollo Web:
Perspectivas Laborales
Gran demandaEs fácil encontrar trabajo si se sabecómo
Oportunidades laborales:–Trabajar en una empresa del sector
–Montar un negocio propio y trabajar como
FreeLance
H i t d D ll W b
5/15/2018 Tecnolog as de Desarrollo Web - slidepdf.com
http://slidepdf.com/reader/full/tecnologias-de-desarrollo-web-55ab4ebc890bb 44/44
Herramientas de Desarrollo Web:
Perspectivas Laborales
Ventajas de ser Freelance (Libre)– Las oportunidades de trabajo se multiplican
–Puedes trabajar desde cualquier parte del
mundo–Tú decides tu propio ritmo de trabajo y
horario
Webs de teletrabajo:–http://www.elance.com
–http://www.mercadoprofesional.com