Fundamentos de diseño web

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.