Intro curso Dreamweaver CS6 + CSS para Diseñadores

t r e

p

g n

i t l u o s c CSS (v. 2012) n Dreamweaver CS6 + Fundamentos . o rt C e p e x b . o Marlon Ceballos -­‐ @adobexpert w d w A w http://www.xpert.co/cursos-adobe/dreamweaver.htm

Adobe Community Professional / Adobe Cer;fied Instructor

Adobe Consulting Adobe Consulting

www.xpert.co

COMMUNITY PROFESSIONAL

CERTIFIED INSTRUCTOR

Design Master - Web Master

CERTIFIED INSTRUCTOR

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w CERTIFIED INSTRUCTOR

Design Master / Web Master

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

t r e

p

g n

i t l u o s c n .

Diseño W eb o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Qué es diseño web?

t r e

• Proceso de diseñar y crear si;os web?

• Usar múl;ples tecnologías para crear contenido g para múl;pes diposi;vos n i t l • Perder el miedo al código. u o

p

s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Alterna>vas para crear si>os web

t r e

• Subcontratar • Adobe Muse g • CMS (ej: Wordpress) n i t l u o • Conver;rse en un profesional wseb.

p

c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Qué necesito aprender?

t r e

• HTML • CSS • JavaScript (librerías como jQuery) ing t l u • Arq. información, SEO, Accesibilidad, eo tc, etc... s c n . o rt • Perder el miedo al código.

C

p

e p

e x b . o d ww A HTML w CSS

www.xpert.co Adobe

Consulting

JS

CERTIFIED INSTRUCTOR

Etapas del diseño web

t r e

• Determinación de obje;vos • Definición de contenido • Organización (Arq. de información) ing t l u • Generación del proto;po o s c n .

• Creación del si;o web Co rt e p e • Tes;ng. b .x

p

o d ww A w

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

t r e

p

g n

i t l u o s c n .

Aspectos boásicos t C er p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Herramienta  visual?

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Herramienta

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Base del diseño web

t r e

p

g n

i t l u o s c n .

HTML CSS o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Estructura de un si>o web

t r e

• Colección de archivos y carpetas • Relacionados mediante links.

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Estructura de un si>o web

t r e

_imagenes

p

i t l u o s c n . o rt C e p e x b . o d ww A w

_css

_scripts

www.xpert.co Adobe

Consulting

g n

_root

index.htm

galeria.htm

nosotros.htm

CERTIFIED INSTRUCTOR

Estructura de un si>o web

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Estructura de un si>o web

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Separación • Contenido • Presentación • Funcionalidad

t r e

p

g n

i t l HTML u o s c n . o rt C e p e x b . o JS d wwCSS A w www.xpert.co

Adobe

Consulting

DB

CERTIFIED INSTRUCTOR

Recomendaciones

t r e

• No usar espacios. Usar guiones o underscores • Usa nombres cortos pero descrip;vos g • No usar caracteres especiales n i t l • Usar caracteres en minúsculas su o c n . t ode m • Usar extensión .htm o .html anera r C e p e consistente en todo e l s i;o w eb x b . o w d • Estructura consistente d e l as p áginas. w A

p w

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

t r e

p

g n

i t l u o s c n .

Tecnologías relacionadas o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

JavaScript

t r e

• Lenguaje script para agregar interac;vidad y funcionalidad a las páginas web g • Creado el 1995 por Netscape. n

p

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Ajax

t r e

• Asynchronous JavaScript And XML • Técnica de desarrollo web para g crear aplicaciones interac;vas o n i t l RIA (Rich Internet Applica;ons) u o s c n .

• Con Ajax es posible realizar o t r C e cambios sobre las páginas s in p e x b . necesidad de recargarlas. o w

p

d w A w

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Spry

t r e

• Librería de JavaScript desarrollada por Adobe que permite usar de forma rápida y fácil g n i t funcionalidades de Ajax l u o s • Su desarrollo se detuvo. n t.c

p

o r C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

jQuery

t r e

• Librería de JavaScript que permite usar de forma rápida y fácil funcionalidades de Ajax.

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

jQuery mobile

t r e

• Una versión de jQuery op;mizada para Smartphones y Tablets con soporte para touch.

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

t r e

p

g n

i t l u o s c n .

HTML y XHTML o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

HTML

t r e

• HyperText Markup Languaje • Desarrollado en los 90‘s g • Poco esté;co en sus inicios (solo texto) n i t l • Necesidad de estandarización su o c n . t o la r • Se crea HTML 4 para mejorar p resentación.

C

p

e p

e x b . o d ww A w

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

XHTML

t r e

• eXtensible HyperText Markup Languaje • Basado en XML g • Es un HTML con reglas estrictas n i t l u • Tags con significado lógico o s c n . o rt • Mejor consistencia entre d isposi;vos C e p e • Strict / Transi;onal b / Frameset. .x

p

o d ww A w

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Versiones

t r e

• HTML 4.01: desde 1999 • XHTML 1.0: basado en HTML 4.01 g • XHTML 1.1: estricto y sin caracterís;cas d e n i t l presentación u o s c n . t versiones • XHTML 2.0: sin compa;bilidad on o cr C e p anteriores e x b . o w 2.0 pero con • HTML5: Similar d a XHTML w A wversiones anteriores. compa;bilidad con

p

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

t r e

p

g n

i t l u o s c n .

Conceptos doe HrTML t C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Tags (e>quetas)

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Contenido

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Elemento

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Container  (contenedor)

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Tags sin contenido

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

DOCTYPE

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Namespace

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Estructura

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Tipos de tags

t r e

• Block level:

– Pueden contener otros elementos – Ej: párrafos, encabezados, tablas, div

p

g n

i t l • Inline level: u o s c n . e una línea de texto – Suelen encontrarse dentro do t r C e – Ej: I, B, imágenes, span. p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Tipos de marcado

t r e

• Font markup

– Presentación – Consistencia entre navegadores g n i tlectores de l – Generalmente no son idenDficados por u o s pantalla (problema de accesibilidad) c n . t o r XHTML 1.0 – Obsoletos en HTML 4.01 yC e p e u uso. .x – No se recomienda sb

p

o d ww A w

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Tipos de marcado

t r e

• Ejemplos Font markup

– B:bold – BIG: mayor tamaño g n i t l – I: itálica u o s c – S: “tachado” n . o rt – SMALL: menor tamaño C e p e xS) b . ( igual q ue – STRIKE: “tachado” o w d wonospace (block level) fuente m – TT: teleDpo, A w – U: subrayado

p

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Tipos de marcado

t r e

• Phrase markup

– Significado – Posible inconsistencia entre navegadores g n i t de – Son idenDficados correctamente por llectores u o s pantalla (recomendados por accesibilidad) c n . t o r sDlos Ce SS. – Se pueden redefinir con eC

p

p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Tipos de marcado

t r e

• Ejemplos Phrase markup

– EM: énfasis (generalmente itálica) – STRONG: fuerza, resaltado (generalmente bg old) n i t l – Q: cita (comillas) u o s c – CODE: código (fuente monospace) n . o rt C e – ABBR: abreviaciones (hyperlink) p e x b .

– ACRONYM: acrónimo ( hyperlink) o w d w – DFN: Definición A (itálica).

p w

www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Encabezados

t r e

• Agregan estructura al contenido de una página • Uso recomendado para SEO g • Su presentación es modificada con CSS m ediante n i t l Tag selectors u o s c n .

• h1, h2, h3, h4, h5, h6. o rt

p

C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

t r e

p

g n

i t l u o s c n .

Conceptos ode C SS t C er p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

CSS

t r e

• Cascade Style Sheets • Lenguaje de hojas de es;los desarrollado para g controlar la presentación de un documento c on n i t l lenguaje de marcado. u

p

o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

CSS

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

CSS

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

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

t r e

p

CSS main.css

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

g n

CERTIFIED INSTRUCTOR

Regla CSS

t r e

• Colección de atributos de formato que se pueden aplicar a un elemento de una página web. g

p

n i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Ubicación de es>los

t r e

• Archivo externo .css (recomendado) • Incrustar el es;lo en la página web

p

– Sobre-­‐escribe el anterior

g n

i t l • Inline (poco recomendado) su o c n .

– Sobre-­‐escribe los anteriores.o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Selectores

t r e

• Element selectors (Tag selectors):

– Permite modificar los elementos basados en un tag (p, H1, ul, etc) g n i – Se aplican de forma automáDca. lt

p

u o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Selectores

t r e

• Class selectors:

– Similar a esDlos de párrafo o caracter de programas de diseño g n i – Se pueden usar las veces que sean necesarias t l u o s – Se puede usar cualquier nombre c n . t o r manual.

– Deben aplicarse de forma C e

p

p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Selectores

t r e

• ID selectors

– Se pueden usar una sola vez en una página web – Suelen representar áreas de contenido g n i lt en conflicto.

– Sobre escribe los Class selectors si están

p

u o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Selectores

t r e

• Descended selectors:

– Dentro de Dreamweaver son llamados Compound selectors g n i – Son selectores más específicos. lt

p

u o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Modelo de caja

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Modelo de caja

t r e

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Modelo de caja

t r e

• Elementos box-­‐level – div – h1, h2, h3, h4, h5, h6 – p – ul, ol, li, dl, dt, dd.

p

g n

i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Posicionamiento

t r e

• Propiedad posi>on

– staDc: valor por defecto – relaDve: relaDvo a su posición actual g n i t l – absolute: relaDvo a su contedor no estáDco u o s – fixed: relaDvo a la ventana del nnavegador. .c

p

o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Posicionamiento

t r e

• Propiedades float

– Extrae el elemento del “document flow” – Desplaza el elemento hasta el borde de su g n i contenedor. lt

p

u o s c n . o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

Posicionamiento

t r e

• Recomendaciones para elementos con propiedad float

p

– Definir propiedad width g n i t l – Definir propiedad clear u o s o flotan.

– Ubicarlos antes de los elementos n que .nc

o rt C e p e x b . o d ww A w www.xpert.co

Adobe

Consulting

CERTIFIED INSTRUCTOR

t r e

p

g n

i t l u o s c n .

Gracias! o rt C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR

Esta presentación (y otras)

t r e

p

g n

i t l u o s c n . o rt www.xper.co/presenta C e p e x b . o d ww A w www.xpert.co Adobe

Consulting

CERTIFIED INSTRUCTOR