DISEÑO WEB I SESIÓN 1 ISI JÉBER MARTÍNEZ. ALGUNOS DATOS… Ing. Jéber Gerardo Martínez Ríos. Carrera: Ingeniero en Sistemas de Información (ITESM 2002)

Presentación del tema: "DISEÑO WEB I SESIÓN 1 ISI JÉBER MARTÍNEZ. ALGUNOS DATOS… Ing. Jéber Gerardo Martínez Ríos. Carrera: Ingeniero en Sistemas de Información (ITESM 2002)"— Transcripción de la presentación:

1 DISEÑO WEB I SESIÓN 1 ISI JÉBER MARTÍNEZ

2 ALGUNOS DATOS… Ing. Jéber Gerardo Martínez Ríos. Carrera: Ingeniero en Sistemas de Información (ITESM 2002) Email:correo@menteinteractiva.comcorreo@menteinteractiva.com Skype: mente.interactiva Celular:6671-620299

3 ALGUNOS DATOS… Ing. Jéber Gerardo Martínez Ríos. Experiencia: Desarrollando Web desde que existe la Web “como la conocemos” (1996). 13 años como líder de proyectos Web, desarrollando y diseñando aplicaciones para la Web. 10 años como propietario de Mente Interactiva, empresa que desarrolla soluciones para la Web, aplicaciones Multimedia, apps Móviles. 9 años capacitando en empresas y universidades en temas de la Web.

4 ALGUNOS DATOS… Ing. Jéber Gerardo Martínez Ríos. Proyecto Personal Actual: Mente Interactiva Estudios Centro de soluciones para Web, multimedia, posproducción de video, efectos visuales y de sonido, y jingles corporativos. Escuela Semillero para Profesionales de Artes Digitales.

5 ALGUNOS DATOS… Ing. Jéber Gerardo Martínez Ríos. Hobbies: Arte Digital – Autoaprendizaje continuo Ejecución y composición musical – Guitarra Eléctrica Videojuegos - Gamer desde 1988 Cine de todos tipos (fantasía, ciencia ficción, Pixar,

6 ¿CUÁL SERÁ LA MECÁNICA? Método de Aprendizaje: Clase presencial Tareas en casa Prácticas en clase Autoaprendizaje Participación en el blog www.menteinteractiva.com/schoolwww.menteinteractiva.com/school Participación en Facebook Clase Diseño WEB UCB

7 DISEÑO WEB 1 Objetivo General: Aprender a diseñar para la Web. Lograr la capacitación base para trabajar en el sector de Internet. Actividades Específicas: Conceptos de informática básico en Web Tratamiento de imagen e interfaces en la Web Usabilidad en la Web Sintaxis y manejo de HTML5, CSS2, CSS3, Javascript Maquetación Web Manejo de Herramientas de edición Adobe Dreamweaver CS6, Photoshop CS6 y Edge. Diseño Web (Tendencias, herramientas, blogging, contenidos, arquitectura…)

8 ¿POR QUÉ APRENDER A DISEÑAR PARA LA WEB? El diseñador gráfico del siglo XXI es un profesional versátil capaz de adaptarse a cualquiera de los formatos de los nuevos entornos digitales: ya no basta sólo con saber diseñar un cartel publicitario, sino que se requieren competencias en el diseño y programación web, la creación de gráficos vectoriales, la maquetación de páginas web o la creación de infografías avanzadas. Tan sólo aquellos diseñadores que sean capaces de adaptarse a los continuos cambios de la realidad digital podrán triunfar en el nuevo marco laboral.

9 EVALUACIÓN PARCIAL TemasValor Examen Parcial40% Prácticas30% Participación y Tareas20% Ejercicio Integrador10%

10 EVALUACIÓN FINAL TemasValor Examenes Parciales30% Prácticas15% Participación y Tareas15% Trabajo Final40%

11 REGLAS DEL ‘JUEGO’ Asistencia Puntual (la clase empieza a los 5 minutos de la hora). Hacer el smartphone a un lado. …obviamente, APAGAR EL CELULAR, O BIEN, MANTENERLO EN VIBRADOR. Abstenerse de Facebookitis o Twittercitis. No se permite filmar en clase, bajo ninguna circunstancia. No gritar ni alzar la voz.  Respeto  Participar, participar y participar.

12

13

14 COSAS QUE HAY QUE SABER CADA 60 SEGUNDOS… Un dominio.com es registrado Se publican 98,000 tweets Se actualizan 695,000 status de Facebook. Hay 510,040 comentarios en muros de Facebook. Se hacen 694,445 búsquedas en Google. Se crean 60 nuevos Blogs. Se publican 600 videos nuevos en YouTube. Se preguntan 100 cosas en Yahoo (y se contestan 60).

15 ¿QUÉ ES INTERNET? La Web (Internet) es una red de computadoras interconectadas hablándose una a otra. Idea originada en el Departamento de Defensa de Estados Unidos como una forma de mantener comunicación en caso de una Guerra Nuclear (Guerra Fría).

16 TIM BERNERS-LEE Hola, soy Tim Berners Lee… ¿qué quién soy? Ah. Solo inventé la Internet.

17 WWW La Web también conocida como WWW (la World Wide Web) es un sistema de distribución de información basado en hipertexto. Creada en 1989 por el inglés Tim Berners-Lee en CERN, Suiza. Sir Tim Berners-Lee es considerado “el padre de la web” por inventar HTML. Computadora NeXT, conocida como “El Cubo” creada por la compañía de Steve Jobs.

18 ¿QUÉ ES UNA PÁGINA WEB? Es una colección de archivos escritos comúnmente en HTML ubicados en un punto de la Web en un servidor. A su vez puede contener otros archivos como imágenes, videos u otros que soporte Internet.

19 ¿QUÉ ES UNA PÁGINA WEB? Es una colección de archivos escritos comúnmente en HTML ubicados en un punto de la Web en un servidor. A su vez puede contener otros archivos como imágenes, videos u otros que soporte Internet.

20 INTERNET PARA MORTALES CLIENTE Y SERVIDOR. SERVIDOR SITIO WEB CLIENTE

21 OOOOK, SERVIDOR ENTONCES ES… Donde están alojados todos los archivos de una web. Cuando queremos tener nuestra página en la web normalmente es lo que se le conoce como “Hosting” o “Web hosting”. Un “servidor” sirve para servir páginas o sitios web. Cuando un “browser” solicita una página el servidor atiende la petición y la manda.

22 CÓMO SE ENCUENTRA UNA PÁGINA Respuesta corta: tecleando la “URL” o la dirección de la web. WWW.LAPAGINAQUEQUIERO.COM Otra opción es buscando en “motores de búsqueda” como Google.

23 URL URL=UNIFORM RESOURCE LOCATOR: Es una manera fundamental de especificar qué queremos ver en la Web. El formato de una URL es: protocol://nombre del host/otra información http://www.mipagina.com/archivo.jpg ftp://pagina.com/archivo.html

24 DOMINIOS, IP’S Una IP es una dirección que consta de 4 sets de números que van del 0 al 256 para identificar una computadora, ej: 132.220.2.24 Un dominio es una palabra con terminación.com (aunque también hay otras) manera amigable para identificar una IP o dirección de Web. ¿qué otras terminaciones conoces?

25 HTTP Acrónimo de Hypertext Transfer Protocol: el lenguaje de los sitios Web. https es Hypertext Transfer Protocol SECURED. Significa que el Sitio Web tiene una capa especial de encripción para esconder información personal o contraseñas. Ej: Bancos o sitios de email.

26 HTML HYPERTEXT MARKUP LANGUAGE o Lenguaje de Marcado de Hipertexto. Es el lenguaje en el que escribiremos páginas Web. HTML usa comandos llamados etiquetas HTML que lucen de la siguiente manera:

27

28 BROWSERS Un browser o navegador, es un programa para ver páginas Web.

29 BROWSERS Todo inició con Nexus en 1991. En 1993, Mosaic era popular. También figuraba Lynx. En 1994, apareció Netscape Navigator. En 1995 aparece Internet Explorer 1. En 1998 surge Mozilla. En el 2001, se creó uno de los peores navegadores de la historia: Internet Explorer 6.

30 NEXUS (1993)

31 MOSAIC (1993)

32 LYNX (1993) Y FIREFOX RENDERIZANDO LA MISMA PÁGINA

33 INTERNET EXPLORER 1.0 (1995)

34 INTERNET EXPLORER 4.0 (1997)

35 OPERA 5 (2000)

36 INTERNET EXPLORER 6.0 (2001)

37 BROWSERS MODERNOS

38 BROWSERS

39 W3C Es la World Wide Web Consortium, organización no lucrativa fundada por TBL y conformada por empresas involucradas en la Web. Ellos establecen las reglas del juego en el diseño Web. Los estándares y guías para hacer la Web un mejor lugar.

40 TAREA 1 INVESTIGAR LOS SIGUIENTES TÉRMINOS, Y ESCRIBIRLOS A MANO CON SUS PALABRAS: QUÉ ES HTML5 QUÉ ES CSS QUÉ ES JAVASCRIPT QUÉ ES JQUERY QUÉ SON LAS WEB SAFE FONTS QUÉ ES UN BLOG DEFINE CLOUD COMPUTING DARSE DE ALTA EN EL GRUPO DE FACEBOOK