1 / 40

Diseño Web I

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) Email: correo@menteinteractiva.com Skype : mente.interactiva Celular: 6671-620299. Algunos datos….

ginny
Download Presentation

Diseño Web I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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.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, desarrollandoy 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/school • Participación en FacebookClase 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

  10. Evaluación final

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

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

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

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

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

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

  18. INTERNET PARA MORTALES • CLIENTE Y SERVIDOR. SITIO WEB CLIENTE SERVIDOR

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

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

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

  22. 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?

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

  24. 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: • <body></body> • <a href="www.google.com"></a> • <title></title>

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

  26. BROWSERS • Todo inició con Nexusen 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.

  27. Nexus (1993)

  28. Mosaic (1993)

  29. Lynx (1993) y Firefox renderizando la misma página

  30. Internet Explorer 1.0 (1995)

  31. Internet Explorer 4.0 (1997)

  32. Opera 5 (2000)

  33. Internet Explorer 6.0 (2001)

  34. BROWSERS MODERNOS

  35. BROWSERS

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

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

More Related