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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Principales servicios E-mail (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

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

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

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

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

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

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. 2007 : Firefox 3 Diseño y Producción de Web Dinámico

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

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

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

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

Introducción al Web Dinámico

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

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]

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

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

Gestión de proyectos para la Clase

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

¿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

¿Cuánto cuesta un proyecto comercial? Diseño gráfico: 2 - 5 mil Lempiras Diseño de la interacción: 2 - 5 mil Lempiras Redacción de contenido orientado Web: variable Tratamiento de medios: 2 - 100 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 : 10- 100 $ mensuales

Diseño gráfico orientado Web

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

Ejemplos de diseños Web

www.photoarts.com/ftp/jimmy_owenns/

www.jimmyowenns.com/