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

[email protected]

mailto:[email protected]

mailto:[email protected]



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



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



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)



Demo



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



Navegadores Web

Entre los navegadores Web másconocidos en la actualidad tenemos lossiguientes:

Internet ExplorerMozilla Firefox

Google Chrome

Opera

Safari

http://images.google.com.pe/imgres?imgurl=http://www.business-garden.com/img/google-chrome-navigateur-web.jpg&imgrefurl=http://blackand.wordpress.com/&usg=__wbukmbFDc_JkewovZHq7NR0slb4=&h=371&w=396&sz=16&hl=es&start=16&tbnid=gghY_VaCuys2XM:&tbnh=116&tbnw=124&prev=/images%3Fq%3Dgoogle%2Bchrome%26gbv%3D2%26hl%3Des%26sa%3DG

http://images.google.com.pe/imgres?imgurl=http://www.actualidadiaria.com/wp-content/uploads/2009/04/opera.png&imgrefurl=http://www.actualidadiaria.com/tag/google/&usg=__myfojO3UsDhRNYHYBaZQiKKw1DM=&h=350&w=417&sz=131&hl=es&start=1&tbnid=IAw4spAhZSPsvM:&tbnh=105&tbnw=125&prev=/images%3Fq%3Dopera%26gbv%3D2%26hl%3Des

http://images.google.com.pe/imgres?imgurl=http://www.vinagreasesino.com/wp-content/uploads/2009/03/mozilla-firefox.jpg&imgrefurl=http://www.vinagreasesino.com/articulos/mozilla-firefox-seguridad-y-velocidad-aseguradas.php&usg=__DZMQwsnSnnupTky5Barna09f7qM=&h=356&w=369&sz=36&hl=es&start=1&tbnid=kSn1vPuszotQsM:&tbnh=118&tbnw=122&prev=/images%3Fq%3Dmozilla%2Bfirefox%26gbv%3D2%26hl%3Des

http://images.google.com.pe/imgres?imgurl=http://www.fayerwayer.com/archivo/2006/08/safari_512x512.jpg&imgrefurl=http://www.taringa.net/posts/downloads/943869/Colecci%25C3%25B3n-de-aplicaciones.html&usg=__f09XSwgL_fUA-Tta8f3y1PUVSBg=&h=501&w=450&sz=41&hl=es&start=2&tbnid=1cPiRkhgM6pNTM:&tbnh=130&tbnw=117&prev=/images%3Fq%3Dsafari%26gbv%3D2%26hl%3Des

http://images.google.com.pe/imgres?imgurl=http://www.actualidadiaria.com/wp-content/uploads/2009/03/internet-explorer-8.jpg&imgrefurl=http://www.actualidadiaria.com/tag/safari/&usg=__cksd7stpxB16X44dMauLdh1BSfA=&h=400&w=600&sz=16&hl=es&start=2&tbnid=FVP7QJfTyJqwWM:&tbnh=90&tbnw=135&prev=/images%3Fq%3Dinternet%2Bexplorer%26gbv%3D2%26hl%3Des




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




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



Evolución de Sitios Web



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.)




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




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



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




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




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)



Evolución de Sitios Web: Páginas

Estáticas



Evolución de Sitios Web: Páginas

Dinámicas



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




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




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



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)



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




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.




Capa de servicios de datos

–Almacenar datos

–Recibir datos

–Mantenimiento de los datos

– Integridad de los datos

Ejemplo:



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.



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



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)




Lenguajes del Lado del Servidor

Entre los servidores Web más usadosen Internet tenemos:

–Apache

– Internet Information Server (IIS) deMicrosoft




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





Amplia documentaciónLibre, de código abierto

Permite técnicas de ProgramaciónOrientada a Objetos

Gran demanda laboral





Evolución de PHP

H i d D ll W b





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





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





H i d D ll W b





Demo: Video

H i t d D ll W b




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




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




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




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

http://www.hotscripts.com/

http://php.resourceindex.com/

http://sitescripts.com/PHP/

http://sitescripts.com/PHP/

http://php.resourceindex.com/

http://www.hotscripts.com/





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





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

http://www.elance.com/

http://www.mercadoprofesional.com/

http://www.trabajofreelance.com/

http://www.mercadoprofesional.com/

http://www.elance.com/

Tecnologías de Desarrollo Web

Documents

Transcript of Tecnologías de Desarrollo Web