DISEÑO WEB ISESIÓ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.comSkype: mente.interactiva

Celular: 6671-620299

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.

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.

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,

¿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 Facebook Clase Diseño WEB UCB

DISEÑO WEB 1Objetivo 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…)

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

EVALUACIÓN PARCIALTemas ValorExamen Parcial 40%

Prácticas 30%

Participación y Tareas 20%

Ejercicio Integrador 10%

EVALUACIÓN FINAL

Temas ValorExamenes Parciales 30%Prácticas 15%Participación y Tareas 15%Trabajo Final 40%

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.

COSAS QUE HAY QUE SABERCADA 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).

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

TIM BERNERS-LEE

Hola, soy Tim Berners Lee… ¿qué quién soy? Ah. Solo inventé la Internet.

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

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

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

INTERNET PARA MORTALESCLIENTE Y SERVIDOR.

SERVIDORSITIO WEBCLIENTE

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.

CÓMO SE ENCUENTRA UNA PÁGINARespuesta 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.

URLURL=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ónhttp://www.mipagina.com/archivo.jpgftp://pagina.com/archivo.html

DOMINIOS, IP’SUna 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?

HTTPAcró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.

HTMLHYPERTEXT 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>

BROWSERSUn browser o navegador, es un programa para ver páginas Web.

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

NEXUS (1993)

MOSAIC (1993)

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

INTERNET EXPLORER 1.0 (1995)

INTERNET EXPLORER 4.0 (1997)

OPERA 5 (2000)

INTERNET EXPLORER 6.0 (2001)

BROWSERS MODERNOS

BROWSERS

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

TAREA 1INVESTIGAR 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