Sesión 01: Diseño y Producción de Web Dinámico Noel Buezo.

Presentación del tema: "Sesión 01: Diseño y Producción de Web Dinámico Noel Buezo."— Transcripción de la presentación:

1 Sesión 01: Diseño y Producción de Web Dinámico Noel Buezo

2 Orígenes Defense Advanced Research Projects Agency, EUA
1966 : retoma la idea de red descentralizada 1969 : 4 computadoras conectadas (ARPAnet) 1973 : 40 computadoras Diseño y Producción de Web Dinámico

3 Funciones de origen Intercambio de archivos
Red informática privada y protegida Fines militares Diseño y Producción de Web Dinámico

4 La red de redes ARPAnet se abre al público civil
1983 : MILnet, red militar 1986 : NSFnet, red científica y universitaria Diseño y Producción de Web Dinámico

5 Internet Red mundial de redes interconectadas Acceso público
Transmisión de información en paquetes Servicios de comunicación Uso fundamental del protcolo TCP/IP Diseño y Producción de Web Dinámico

6 Protocolo TCP/IP TCP : Transfer Control Protocol
Se encarga de transmitir los datos IP : Internet Protocol Especifica la dirección a donde se transmiten los datos Diseño y Producción de Web Dinámico

7 Direcciones IP La dirección de una computadora o aparato
Necesaria para comunicar con otras computadoras Se asigna manual o dinámicamente Ejemplo : Sitio de geolocalización : Diseño y Producción de Web Dinámico

8 Red local Cliente / usuario Servidor Clientes / Usuarios
Diseño y Producción de Web Dinámico

9 Red mundial Diseño y Producción de Web Dinámico

10 Tecnología Cliente-Servidor
Está conectado a Internet Ofrece servicios Internet Tiene instalado software de servidor Está en espera de consultas y demanda de servicios Pide datos a los servidores Puede enviar datos a un servidor Puede recibir datos de un servidor sin haber hecho una demanda Diseño y Producción de Web Dinámico

11 Capas del modelo TCP/IP
Capa 4 : Aplicaciones Capa 3 : Transporte Capa 2 : Conexión Capa 1 : Acceso físico Diseño y Producción de Web Dinámico

12 Capas del modelo TCP/IP
Capa 4 : Aplicaciones Describe materiales físicos necesarios para la comunicación : dial-up modem, ethernet, Wi-Fi, USB, bluetooth Capa 3 : Transporte Capa 2 : Conexión Capa 1 : Acceso físico Diseño y Producción de Web Dinámico

13 Capas del modelo TCP/IP
Capa 4 : Aplicaciones Describe protocolos necesarios para asegurar el envío de la información : IPv4, IPv6, IPSec Capa 3 : Transporte Capa 2 : Conexión Capa 1 : Acceso físico Diseño y Producción de Web Dinámico

14 Capas del modelo TCP/IP
Capa 4 : Aplicaciones Describe protocolos necesarios para asegurar la transmisión eficaz de la información : TCP, Puertos Capa 3 : Transporte Capa 2 : Conexión Capa 1 : Acceso físico Diseño y Producción de Web Dinámico

15 Capas del modelo TCP/IP
Capa 4 : Aplicaciones Describe protocolos necesarios para procesar servicios de aplicaciones : DNS, FTP, HTTP, IRC, SMTP, Telnet, BitTorrent, etc. Capa 3 : Transporte Capa 2 : Conexión Capa 1 : Acceso físico Diseño y Producción de Web Dinámico

16 Principales servicios
(1971) : envío de mensajes Telnet (1972) : acceso remoto FTP (1973) : transferencia de archivos IRC (1988) : chats HTTP (1991) : WWW Diseño y Producción de Web Dinámico

17 World Wide Web Tim Berners-Lee (Londres, 1955) Informático en el CERN
Especificación del WWW : HTTP URL HTML Diseño y Producción de Web Dinámico

18 WWW http://www.google.com/intl/en/about.html protocolo
nombre del directorio o ruta protocolo nombre del recurso o archivo (el documento o archivo que estamos consultando) nombre de dominio (el servidor a donde nos conectamos) Diseño y Producción de Web Dinámico

19 WWW Diseño y Producción de Web Dinámico

20 WWW Diseño y Producción de Web Dinámico

21 Navegadores Web Software dedicado a servicios Internet
Interpreta el lenguaje HTML Soporta recursos de diferente tipo: texto, imágenes, audio, video, animaciones y ejecutables Diseño y Producción de Web Dinámico

22 Navegadores Web 1993 : Mosaic, primer navegador popular con soporte para imágenes 1995 : Netscape 1.0 1997 : Internet Explorer 4.0 1999 : Mozilla 2003 : Safari Nov : Firefox 3 Diseño y Producción de Web Dinámico

23 Motores de visualización
Netscape y Firefox : Gecko IE Win : Trident IE Mac : Tasman Safari y Konqueror : KHTML Diseño y Producción de Web Dinámico

24 W3C World Wide Web Consortium Creado en 1994 por T. Berners-Lee
Organización internacional Crear y mantener estándares para el Web Un estándar es una recomendación W3C Miembros : universidades, gobierno, empresas (IBM, MS, Apple, Adobe, Sun...) Diseño y Producción de Web Dinámico

25 Publicación Web Editores Notepad, Dreamweaver, FrontPage Software FTP
Filezilla, Fetch, Navegadores-editores Amaya Diseño y Producción de Web Dinámico

26 Otras tecnologías Web CSS : hojas de estilo
JavaScript : control de GUI PHP, ASP, CGI : Web dinámico Java, ActiveX : programas ejecutbles Flash : multimedia e interacción XML y derivados : Web semántico AJAX, WSDL, SOAP : e-business, Web Services Diseño y Producción de Web Dinámico

27 Introducción al Web Dinámico

28 ¿Qué es el Web Dinámico? Un conjunto de tecnologías: HTML CSS
JavaScript DOM [Document Object Model] Base de datos. Mashup AJAX(jQuery) API’s (Google Map)

29 Web Dinámico != Páginas dinámicas
Son creadas a la demanda por los usuarios la información está guardada en una base de Datos. Usos: Clientes mail e-learning e-business Motores de búsqueda Net art content management systems [CMS]

30 Conocimientos a adquirir
Nociones de servidores Web Nociones de bases de datos Lenguaje MySQL Lenguaje PHP Webservices API’s de Google Mashup’s Frameworks para Desarrollo Rápido de Aplicaciones

31 El Web actual y futuro Web 2.0 AJAX Multimedia para el Web
Servicios Web Web Semántico

32 Gestión de proyectos para la Clase

33 ¿Qué considerar en un proyecto?
Diseño gráfico Diseño de la interacción Redacción de contenido orientado Web Tratamiento de medios(imagenes y multimedia) Diseño y Maquetación con XHTML, Plantillas XHTML Desarrollo Web Publicación de servicios Web en Internet, en servidores reales.

34 ¿Cómo presentar un proyecto?
Carpeta de proyecto: Bocetos de diseño gráfico Bocetos de diseño de interacción(mapa de sitio) Desarrollo Web Realización de documentos HTML/PHP Certificación y Validación de Documentos HTML y Hojas de Estilo Publicación en Internet Implementación de módulo de seguridad y mejores prácticas

35 ¿Cuánto cuesta un proyecto comercial?
Diseño gráfico: mil Lempiras Diseño de la interacción: mil Lempiras Redacción de contenido orientado Web: variable Tratamiento de medios: mil Lempiras Diseño e Interacción: incluído en el paquete Lenguaje del Web: incluído en el paquete Desarrollo Web: 5mil a 40mil Lempiras Servidores : $ mensuales

36 Diseño gráfico orientado Web

37 Aspectos a considerar Lenguaje del Web relación diseño + funcionalidad
connotación ideológica Ergonomía de la interacción [Interacción Humano-Computadora] lectura en pantalla selección de colores tamaño y superficie de botones iconografía y simbología

38 Ejemplos de diseños Web

39

40

41

42

43

44

45

46

47