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