Fundamentos de diseño web

Fundamentos de diseño web www.xpert.co/cursos-adobe/diseno-web.htm

Marlon Ceballos -­‐ @adobexpert

Adobe Community Professional / Adobe Cer;fied Instructor

CERTIFIED INSTRUCTOR

Adobe Consulting Adobe Consulting

www.xpert.co

C E R TDesign I F I E D Master I N S T R -UWeb C T OMaster R

Design Master / Web Master

Advertencia!

Charla extremadamente básica, mírala bajo tu riesgo! www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

CERTIFIED INSTRUCTOR

Design Master / Web Master

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Adobe

Consulting

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es un siBo web?

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es un siBo web • Colección de archivos y carpetas • Los archivos se relacionan mediante hyperlinks.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Estructura de un siBo web • Separación de: – Contenido – Presentación – Funcionalidad.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Editores de código

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Herramientas

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

HTML

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es HTML? • • • •

Hypertext Markup Language Basado en SGML No es un lenguaje de programación Fácil de aprender.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es HTML?

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Historia • • • • • •

HTML 2.0 (1995) HTML 3.0 (1996) HTML 3.2 (1997) HTML 4.0 (1999) XHTML (2000) HTML5 (2007)

Proposed RecommendaBon (SepBembre 16 2014) www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tags & Containers

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tags & Containers

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

CSS

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es CSS • Cascading Style Sheets (Hojas de es;lo en cascada) • Las hojas de es;lo describen la presentación de lenguajes como HTML, XHTML y SVG, entre otros.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

HTML y CSS

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es CSS

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es CSS

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es CSS

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

EsBlos externos CSS

HTML

HTML

HTML

www.xpert.co Adobe

Consulting

HTML

HTML

CERTIFIED INSTRUCTOR

Design Master / Web Master

EsBlos  externos CSS desktop.css

CSS tablet.css

CSS mobile.css

HTML

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Sintaxis  CSS p {font-family: Arial; color: #F00}

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Sintaxis CSS p {font-family: Arial; color: #F00} Selector Declaración

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Sintaxis  CSS p {font-family: Arial; color: #F00} Propiedad Valor

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Box  model Margin Padding

Contenido Border

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Hoja de esBlo (stylesheet) • Colección es;los que pueden ser usados en una o varias páginas de un si;o web.

main.css www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

JavaScript

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es JS • Define el comportamiento o interac;vidad.

HTML

CSS

www.xpert.co Adobe

Consulting

JS

CERTIFIED INSTRUCTOR

Design Master / Web Master

CaracterísBcas • Lenguaje script • Limitado (intencionalmente) • Funciona dentro de una aplicación • Client-­‐side.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Dónde escribir JS? • Inline • Archivo separado: <script src= “script.js” type=”text/javascript”> </script> <script src= “script.js”> </script> (en HTML5).

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

jQuery

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

jQuery • Librería Open Source de JavaScript que permite crear fácilmente efectos e interac;vidad en nuestras páginas web • Librería: colección de funciones.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

CaracterísBcas • Consistente entre diferentes navegadores • Facilita el trabajo con grupos de elementos • Múl;ples operaciones en una línea de código (statement chaining) • Ex;ende el conocimiento de CSS.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Uso • Manipular contenido • Agregar efectos • Animación.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Escribir el código

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

JavaScript vs jQuery • Seleccionar todos los <p>: – JS: document.getElementsByTagName(“p”); – jQuery: $(“p”);

• Seleccionar todos los elementos con #list1: – JS: document.getElementById(“list1”); – jQuery: $(“#list1”);

• Seleccionar todos los ul con .b: – jQuery: $(“ul .b”); www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Selectores Función Selector Acción Parámetros jQuery (“p”) .css (“color”,”blue”); $ (“p”) .css (“color”,”blue”); !

$(“p”).css(“color”, “ blue”);

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Otras herramientas de animación

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

JavaScript vs jQuery • CSS • Adobe Edge Animate.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Frameworks

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Frameworks • Un framework web es un paquete conformado por una estructura de archivos con código estructurado (HTML, CSS, JS, etc.) los cuales sirven como base de inicio de la creación de un si;o web • El obje;vo es proveer una estructura común para que los diseñadores/desarrolladores reusen código en vez de hacer trabajo desde cero.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Ejemplos • Twiqer Bootstrap • Founda;on Framework • Gumby Framework.

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Esta presentación (y otras)

www.xper.co/presenta

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master

Gracias

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Design Master / Web Master