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