IFC154–3: Desarrollo de aplicaciones con tecnologías web
Unidad 1: Fundamentos de la Web
Centro de Formación Stylo/ Formador :José Antonio Cano Certificado de Profesionalidad. Desarrollo de Aplicaciones con Tecnologías web Ajofrín/ Marzo/Julio 2014
Antes de comenzar Antes de comenzar debes tener instalado por lo menos lo siguiente:
•
Los más nuevos navegadores que puedas instalar. Si acaso no los tienes ya, descárgalos desde las páginas de Chrome, Firefox, Internet Explorer, Opera , Safari, Maxthon.
•
Un editor de texto decente. Las opciones gratuitas razonables son Notepad++ para Windows, Bluefish para Linux o Windows o [ Sublime Text 2] para Windows, linux y mac.
http://www.cdlibre.org/
¿Por dónde empezar a aprender? ¿Por dónde debo empezar, Majestad? Empieza por el principio –dijo el rey solemnemente– y continúa hasta llegar al final. Entonces, detente. «Alicia en el País de las Maravillas, Lewis Caroll»
1. Breve historia de internet 2. Cómo Funciona Internet 3. El modelo de los estándares web (HTML, CSS y Javascript) 4. Colocando el contenido en la www
Hasta que llegó la web….
Breve historia de Internet y de los estรกndares web 1. 1957-1989 El origen del Internet 2. 1989-1993 La creaciรณn de la World Wide Web 3. 1994 -2000 La guerra de los navegadores 4. 1994- 2003 La llegada de los estรกndares web 5. 2003- ...: La nueva generaciรณn de los estรกndares web
1957-1989 El origen del Internet ● 1957: EL "SPUTNIK" Y LA CREACIÓN DE ARPA ● 1960: IDEA DE RED ● 1962-1969: ORDENADORES EN RED (ARPANET) Y COMMUTACIÓN DE PAQUETES ● 1974: PROTOCOLO DE CONTROL DE TRANSMISIÓN (TCP) ● 1977-1982: ADOPCIÓN DEL PROTOCOLO TCP-IP
1989-1993 La creación de la World Wide Web ● 1989-1993 GOPHER (EL INTENTO DE LA WEB CON DERECHOS DE LICENCIA) ● 1989-1993 CREACIÓN Y LIBERACIÓN DEL CÓDIGO FUENTE DE WWW ● 1993: MOSAIC, EL PRIMER NAVEGADOR ● 1994: MULTIPLICACION DE NAVEGADORES (OPERA)
6 Agosto de 1991: Propuesta formal de WWW ● Unir hipertexto con internet ● http: Protocolo de transferencia de hipertexto (comunicación entre servidor y cliente) ● URL (identificadores únicos globales) Cada recurso en un servidor tiene un dirección inequívoca ● Acceso a IP con DNS (Sistema de nombres de dominio) ● HTML (define la estructura y contenido de un documento) ● Acceso a internet mediante navegador (software que permite acceder e interpretar los recursos web)
Hipertexto no es sólo la web
El hipertexto (concepto desarrollado hasta finales de los 60) es una herramienta de software con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos . ● La forma más habitual de hipertexto en informática es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos . Si el usuario selecciona un hipervínculo, el programa muestra el documento enlazado. ● Otra forma de hipertexto son los denominados indicadores entre dos de estos y un pantalla. El primer indicador permite que lo escrito pueda moverse de arriba hacia abajo en la pantalla..
Protocolo de transferencia de hipertexto HTTP define la sintaxis y la sem谩ntica que utilizan los elementos de software de la arquitectura web (clientes, servidores, proxies) para comunicarse. Es un protocolo orientado a transacciones y sigue el esquema petici贸nrespuesta entre un cliente y un servidor.
url Los localizadores uniformes de recursos fueron una innovación en la historia de la Internet. Fueron usadas por primera vez por Tim Berners-Lee en 1991, para permitir a los autores de documentos establecer hiperenlaces en la World Wide Web. Desde 1994, en los estándares de la Internet, el concepto de URL ha sido incorporado dentro del más general de URI (Uniform Resource Identifier, en español identificador uniforme de recurso), pero el término URL aún se utiliza ampliamente.
url (protocolos de red) Un URL se clasifica por su esquema, que generalmente indica el protocolo de red que se usa para recuperar, a través de la red, la información del recurso identificado. Un URL comienza con el nombre de su esquema, seguido por dos puntos, seguido por una parte específica del esquema'.
• • • • • • • •
http - recursos HTTP https - HTTP sobre SSL ftp - File Transfer Protocol mailto - direcciones de correo electrónico file - recusos disponibles en el sistema local, o en una red local news - grupos de noticias Usenet ( newsgroup) telnet - el protocolo telnet data - el esquema para insertar pequeños trozos de contenido en los documentos Data: URL
DNS Domain Name System o DNS (en español: sistema de nombres de dominio) es un sistema de nomenclatura jerárquica para computadoras, servicios o cualquier recurso conectado a Internet o a una red privada. Este sistema asocia información variada con nombres de dominios asignado a cada uno de los participantes. Su función más importante, es traducir (resolver) nombres inteligibles para las personas en identificadores binarios asociados con los equipos conectados a la red, esto con el propósito de poder localizar y direccionar estos equipos mundialmente. Por ejemplo, si la dirección IP del sitio FTP de prox.es es 200.64.128.4, la mayoría de la gente llega a este equipo especificando ftp.prox.mx y no la dirección IP. Además de ser más fácil de recordar, el nombre es más fiable. La dirección numérica podría cambiar por muchas razones, sin que tenga que cambiar el nombre.
Agente de usuario: browser La comunicación entre el servidor web y el navegador se realiza mediante el protocolo HTTP, aunque la mayoría de los browser soportan otros protocolos como FTP, Gopher, y HTTPS La función principal del navegador es descargar documentos HTML y mostrarlos en pantalla. En la actualidad, no solamente descargan este tipo de documentos sino que muestran con el documento sus imágenes, sonidos e incluso vídeos streaming en diferentes formatos y protocolos. Algunos de los navegadores web más populares se incluyen en lo que se denomina una Suite. Estas Suite disponen de varios programas integrados para leer noticias de Usenet y correo electrónico mediante los protocolos NNTP, IMAP y POP. Otro agente de usuario sería un spider. Una araña web es un programa que inspecciona las páginas del World Wide Web de forma metódica y automatizada. Uno de los usos más frecuentes que se les da consiste en crear una copia de todas las páginas web visitadas para su procesado posterior por un motor de búsqueda que indexa las páginas proporcionando un sistema de búsquedas rápido. Las arañas web suelen ser robots (el tipo más usado de éstos). copiar una web es fácil. Probar con http://es.wikipedia.org/wiki/HTTrack http://www.httrack.com/
1994 -2000 La guerra de los navegadores ● 1994 NETSCAPE ● 1995 INTERNET EXPLORER ● 1995-1998 GUERRA DE LOS NAVEGADORES El término se refiere a la lucha entre Microsoft, con su navegador Internet Explorer, y Netscape, con Netscape Navigator, por la dominación del mercado de navegadores web (particularmente en la plataforma Windows) durante y hasta finales de los años 1990, ya que en esa época ninguna otra compañía ofrecía una competencia considerable en el mercado. (Opera miraba
1994- 2003 La llegada de los estándares web ● 1994 La formación de la W3C ● 1998 El proyecto de los estándares web: Los desarrolladores se rebelan ● 2000-2003 La llegada de los estándares web
W3C En 1994, en paralelo a esta "guerra" Tim Berners-Lee, el creador de la web, fundó la World Wide Web Consortium (W3C) en el Instituto Tecnológico de Massachusetts, con el apoyo de CERN, DARPA y la Comisión Europea. La visión de la W3C era estandarizar los protocolos y las tecnologías usadas para construir la web de manera que el contenido estuviese disponible para la mayor población del mundo posible. Durante los siguientes años, la W3C publicó varias especificaciones (llamadas recomendaciones) incluyendo HTML 4.01, el formato para PNG images, y Cascading Style Sheets (CSS) versiones 1 y 2.
el proyectos de los estandares web WaSP Web Standards Project (WaSP) En 1998, el mercado de los navegadores fue dominado por Internet Explorer 4 y Netscape Navigator 4. Una versión beta de Internet Explorer 5 fue liberada entonces y implementó HTML dinámico patentado (DHTML), lo que significaba que los desarrolladores web profesionales necesitaban saber hasta cinco maneras diferentes de escribir JavaScript. En consecuencia, un grupo de desarrolladores web profesionales y diseñadores se unieron. Este grupo se llamaban a ellos mismos the Web Standards Project (WaSP). La idea era que al llamar a sus creaciones "documentos estándares de la W3C" en lugar de las recomendaciones, podrían ser capaces de convencer a Microsoft y Netscape de apoyarlos.
La Web Standards Project es una coalición de base que luchan por las normas que garanticen un acceso sencillo y asequible a las tecnologías web para todos.
La llegada de los estándares web (Xhtml+css) En el 2000, Microsoft lanzó Internet Explorer 5 Edición Macintosh. Esto fue un hito muy importante, siendo el navegador instalado por defecto con el sistema operativo de la época, teniendo un razonable nivel de apoyo a las recomendaciones de la W3C. Junto con un soporte decente de CSS y HTML en Opera, contribuyó a un movimiento positivo, donde los desarrolladores web y diseñadores finalmente se sintieron cómodos diseñando sitios usando los estándares web, ya que sabían que funcionarían en múltiples navegadores.
Desde entonces, el uso de estándares web se han convertido en norma; en la comunidad de desarrollo web profesional: sitios web limpios, accesibles, semánticos y sitios webs con estándares compatibles.
2003- ...: La nueva generación de los estándares web. La web del siglo XXI ● Html y Xhtml ● 2004 Creación de la WHATWG. Estandarización de aplicaciones web ● 2007- HTML 5 ● 2000- 2006 CSS ● 2006 -CSS3
El Grupo de Trabajo de Tecnología de Aplicaciones de Hipertexto Web (WHATWG) es una comunidad de personas interesadas en la evolución de HTML y otras tecnologías relacionadas. El WHATWG fue fundada por miembros de Apple , la Fundación Mozilla y Opera en 2004
HTML Y XHTML Cuando HTML 4 fue casi terminado, la W3C decidió (en un taller realizado en 1998) que en términos de lenguaje de marcado, el futuro de la web era XML con XHTML, no HTML Entonces la W3C trazó una línea bajo HTML 4.01 y en lugar de concentrarse en las especificaciones de XHTML 1.0, finalizó cerca del 2000. XHTML 1.0 es lo mismo que HTML 4.01, excepto que usa sintaxis y reglas de marcado estrictas de XML . XHTML 2.0 le sucedería pronto, añadiendo una gran cantidad de nuevas características de gran alcance y con este estándar aspiraban a ser la próxima revolución en la web. Pero XHTML no llega o no llegará… (suponía ruptura con lo anterior)
WHATWG. Estandarización de aplicaciones web:
El objetivo de la WHATWG, fue escribir una mejor especificación que podría manejar la creación de aplicaciones web, sin romper la compatibilidad con lo anterior. El resultado fue la Especificación de aplicaciones web 1.0, que documentó interoperabilidad de los navegadores existentes, así como Apis y las nuevas reglas del análisis del DOM.->HTML 5
API (Interfaz de programación de Aplicaciones) conjunto de funciones y procedimientos (o métodos, en la programación orientada a objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción
El Document Object Model o DOM ( 'Modelo en Objetos para la Representación de Documentos') es esencialmente una interfaz de programación de aplicacione (API) que proporciona un conjunto estándar de objetos para representar documentos HTML y XML
HTML 5 HTML5 es algo realmente bueno para los diseñadores y dersarrolladores web ● Las nuevas características del marcado funcionan de la misma manera que los anteriores (aunque la semántica y otros elementos han cambiado, y las nuevas APIs están basadas en los mismos lenguajes que los desarrolladores han estado programando durante años (JavaScript/DOM). ● Agrega nuevas características poderosas que antes sólo estaban disponibles en la web usando Flash, JavaScript complejo o hacks. Validación de formularios y vídeo son los ejemplos principales. ● Es más adecuado para escribir aplicaciones dinámicas que las versiones anteriores de HTML (HTML fue originalmente diseñado para crear documentos estáticos). ● Tienen un algoritmo de análisis claramente definido para que todos los navegadores que implementaran HTML5 crearan el mismo DOM desde el mismo marcado.
HTML 5
CSS La evolución de CSS no es tan larga y controversial como la de HTML, pero es interesante y vale la pena mencionarlo. La especificación de CSS2 estaba cerca de completarse alrededor de 1999/2000, aunque era un lenguaje poderoso con muchas características, su creador sabía que CSS tenía limitaciones. Había un número de estilos que CSS no podía hacer. Y los desarrolladores tenían que utilizar hacks, JavaScript o plugins para lograr esos estilos. Esto incluye cosas como animación, layout o estructuras dinámicas y usar letras personalizadas en las páginas.
CSS 3
En este momento CSS3 tiene cerca de 40 módulos en diversas fases de ejecución.
Para superar CSS2, se empezó a trabajar en CSS3 en el 2000. Los escritores de la especificación decidieron una estructura modular, con diferentes piezas con funcionalidad distinta separadas en pequeñas partes manejables. Esto hizo que CSS fuera más fácil, para que los escritores lo escribieran, los navegadores lo implementaran así como también los diseñadores y desarrolladores aprendieran CSS. Muchas más características fueron agregadas desde la primera versión de la especificación en el 2000, y no comenzamos a ver soporte de muchas de las características en los navegadores hasta el 2006.
videos html 5, html y xml
Actividad: Prueba los diferentes navegadores en html 5 con http://html5test.com/
Recursos â—? Historia de la Web interactiva
Actividad Cuestiones para debate: 1. ¿En qué año es lanzado al público la www por primera vez? 2. ¿Quién es Tim Berners-Lee y cuáles son sus principales protagonismos en la web? 3. ¿Cuál fue el nombre del primer navegador gráfico más popular en la web? 4. ¿En qué consistió la guerra de los navegadores y qué consecuencias tuvo para el diseño y desarrollo web? 5. ¿Qué es una red P2P (peer-to-peer) ? 6. ¿Qué es la commutación por paquetes? 7. ¿En qué año y quién inventó el email ? 8. En qué año se creó el primer chat
¿Cómo funciona internet? 1. ¿Cómo se comunican los ordenadores a través de Internet? a.
Disección de un ciclo de petición / respuesta
2. Tipos de contenido a. b. c. d.
Texto sin formato Estándares Web Lenguajes del lado del servidor Formatos que requieren otras aplicaciones o plugins
3. Sitios web estáticos vs sitios web dinámicos
¿Cómo se comunican los ordenadores a través de Internet?
La familia de protocolos de Internet es un conjunto de protocolos de red en los que se basa Internet y que permiten la transmisión de datos entre computadoras. En ocasiones se le denomina conjunto de protocolos TCP/IP, en referencia a los dos protocolos más importantes que la componen: Protocolo de Control de Transmisión (TCP) y Protocolo de Internet (IP), que fueron dos de los primeros en definirse, y que son los más utilizados de la familia. Existen tantos protocolos en este conjunto que llegan a ser más de 100 diferentes,HTTP para páginas web, FTP , para transmisión de archivos, POP
Petición - Respuesta al servidor 1. Escritura de la url en la barra de direcciones + intro 2. servidor DNS y respuesta del servidor 3. Éxito o fracaso (error 404) Nota:Siempre accedemos a archivos reales,sino lo hacemos (al escribir una petición) es porque se ha configurado el servidor para que nos muestre un recurso por defecto
Disecci贸n de un ciclo de petici贸n / respuesta
Modelo cliente servidor
Tipos de contenido 1. Textos sin formato (nos lo muestra tal y como es) 2. EstĂĄndares web a. html b. css c. javascript 3. Lenguajes del servidor (php, jsp, asp) 4. Formatos que requieren otras aplicaciones o plugin a. Archivos que no se reconocen (word, psd) b. archivos que pueden reconocer (flash, java) si instalamos plugins NOTA: Algunos navegadores vienen con algunos plugins preinstalados, por lo que podemos no ser conscientes de que el contenido se visualiza a travĂŠs de un plugin y no de forma nativa en el navegador.
Sitios webs estáticos vs sitios webs dinámicos
1. Estático: Misma información para cualquier visitante, independientemente de su comportamiento del cliente 2. Puede mostrar datos diferentes dependiendo del momento o del comportamiento del cliente (procesados en el servidor) 3. Los sitios dinámicos necesitan software especial instalado en el servidor 4. El cliente no necesita software especial en el servidor con los archivos dinámicos pues su respuesta es en html 5. Hay muchos lenguajes y entornos para lenguajes dinámicos del servidor pero básicamente hacen lo mismo (Php, Asp, ColdFusion, Ruby on Rails…)
Ejemplo de Sitios dinรกmicos: CMS
El modelo de los estándares web (HTML, CSS y Javascript)
● ● ● ● ●
¿Por qué separar? HTML, El Marcado, la base de cada página Validación, ¿qué es eso? CSS - vamos a añadir un poco de estilo Javascript - la adición de comportamiento a los elementos web ● Una página de ejemplo ● La realidad del trabajo en la web
Por qué separar 1. Eficiencia del código 2. Facilidad de mantenimiento 3. Accesibilidad 4. Compatibilidad de dispositivos 5. Motores de búsqueda 6. Es sólo una buena práctica
Colocando el contenido en la red 1. Los nombres de dominio 2. Los alojamientos o hosting 3. Subir archivos al servidor web 4. Trabajando en local o en remoto 5. Estructura del sitio
Subir archivos al servidor web
IFC154–3: Desarrollo de aplicaciones con tecnologías web
Fin Unidad 1
Centro de Formación Stylo/ Formador :José Antonio Cano Certificado de Profesionalidad. Desarrollo de Aplicaciones con Tecnologías web Ajofrín/ Marzo/Julio 2014