Diseño Web I - PowerPoint Presentation

Slide1

Diseño Web I

SESIÓN 1

ISI JÉBER MARTÍNEZSlide2

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-620299Slide3

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

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

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 198

8

Cine de todos tipos (fantas

ía, ciencia ficción, Pixar, Slide6

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

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…)Slide8

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

Evaluación parcial

Temas

Valor

Examen Parcial

40

%

Prácticas

30

%

Participación y Tareas

20

%

Ejercicio Integrador

10%Slide10

Evaluación final

Temas

Valor

Examenes

Parciales

30%

Prácticas

15%

Participación y Tareas

15%

Trabajo Final

40

%Slide11

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.Slide12
Slide13
Slide14

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

¿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

U

nidos como una forma de mantener comunicación en caso de una Guerra Nuclear (Guerra Fría).Slide16

TIM BERNERS-LEE

Hola, soy Tim

Berners

Lee… ¿qué quién soy? Ah. Solo inventé la Internet.Slide17

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

T

im

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

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

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

INTERNET PARA MORTALES

CLIENTE Y SERVIDOR.

SERVIDOR

SITIO WEB

CLIENTESlide21

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 “

H

osting

” 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.Slide22

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

G

oogle.Slide23

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 Slide24

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?Slide25

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

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

>

Slide27
Slide28

BROWSERS

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

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

Nexus (1993)Slide31

Mosaic (1993)Slide32

Lynx (1993) y Firefox renderizando

la misma páginaSlide33

Internet Explorer 1.0 (1995)Slide34

Internet Explorer 4.0 (1997)Slide35

Opera 5 (2000)Slide36

Internet Explorer 6.0 (2001)Slide37

BROWSERS MODERNOSSlide38

BROWSERSSlide39

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

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