OO CSS
-
Upload
enrique-amodeo -
Category
Technology
-
view
1.016 -
download
0
Transcript of OO CSS
![Page 1: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/1.jpg)
@eamodeorubio
Object Oriented CSS
(o sea, CSS mantenible)
![Page 2: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/2.jpg)
@eamodeorubio
¿Qué haces tu aquí?(o quién soy y por qué me decidí a hacer esta charla)
![Page 3: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/3.jpg)
@eamodeorubio
Me presentoEnrique Amodeo
Me dedico al software En el negocio desde el año 2000 Desarrollo y arquitectura de software Consultoría y formación Javascript/AJAX/RIA desde 2006 Haciendo agilismo desde 2005 Mail: [email protected] Blog: http://eamodeorubio.wordpress.com/ Sígueme, leches: @eamodeorubio
Así parezco un to interesante
![Page 4: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/4.jpg)
@eamodeorubio
¿Qué pinta un desarrollador hablando de CSS?
● Me hice un framework AJAX/CSS
● Pero mis CSS eran un dolor
● Dolor → Aprendizaje● Redescubrir la rueda
![Page 5: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/5.jpg)
@eamodeorubio
¿Qué es CSS Orientado a Objetos?(¿ein?)
![Page 6: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/6.jpg)
@eamodeorubio
Un poco de marketing
• CSS Orientado a Objetos ← ¡Cool!• CSS Mantenible y Reutilizable ← Un poco largo• Clean CSS ← ¡Mejor!• Popularizado por Nicole Sullivan
( @stubbornella ) → Escogió el nombre cool
![Page 7: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/7.jpg)
@eamodeorubio
CSS es código
• Hay que mantenerlo → ¡Ojo a la calidad!● Extensible y reutilizable● Legible y predecible (no surprise!)
• Debe cumplir principios de diseño de código● DRY● SOLID (bueno, lo que se pueda)● Legibilidad
![Page 8: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/8.jpg)
@eamodeorubio
DRY
.left_corner { background-image:url(img/cornerleft.gif); width:9px; height:9px; float:left;}
.top_corner { background-image:url(img/cornertop.gif); width:9px; height:9px; float:left;}
Evitar duplicación de información
![Page 9: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/9.jpg)
@eamodeorubio
DRY
.left_corner { background-image:url(img/cornerleft.gif); width:9px; height:9px; float:left;}
.top_corner { background-image:url(img/cornertop.gif); width:9px; height:9px; float:left;}
Evitar duplicación de información
![Page 10: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/10.jpg)
@eamodeorubio
DRY
.corner_common { width:9px; height:9px; float:left;}
.left_corner { background-image:url(img/cornerleft.gif);}
.top_corner { background-image:url(img/cornertop.gif);}
Evitar duplicación de información
![Page 11: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/11.jpg)
@eamodeorubio
.corner_common { width:9px; height:9px; float:left;}
.left_corner { background-image:url(img/cornerleft.gif);}
.top_corner { background-image:url(img/cornertop.gif);}
DRYDespués veremos como reutilizarlo
![Page 12: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/12.jpg)
@eamodeorubio
Single Responsability
.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;}
Una única responsabilidad, un sólo motivo para cambiar
![Page 13: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/13.jpg)
@eamodeorubio
Single Responsability
.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;}
Una única responsabilidad, un sólo motivo para cambiar
¿Qué ocurre si decidimos cambiar el diseño de las
notificaciones?
![Page 14: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/14.jpg)
@eamodeorubio
Single Responsability
.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;}
Una única responsabilidad, un sólo motivo para cambiar
¿Qué ocurre si decidimos cambiar el diseño de los
textos importantes?
![Page 15: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/15.jpg)
@eamodeorubio
Single Responsability
.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;}
Una única responsabilidad, un sólo motivo para cambiar
.notification { color:blue; background-color:yellow;}
.important { font-weight:bold; text-decoration:underline;}
![Page 16: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/16.jpg)
@eamodeorubio
Legibilidad
.bd { …}
.h_levelA { …}
.h_levelB { …}
Nombres deben expresar intención de uso
.main_content_section { …}
.important_title { …}
.normal_title { …}
![Page 17: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/17.jpg)
@eamodeorubio
Legibilidad
.bd { …}
.h_levelA { …}
.h_levelB { …}
Nombres deben ser semánticos
.main_content_section { …}
.important_title { …}
.normal_title { …}
![Page 18: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/18.jpg)
@eamodeorubio
Legibilidad
.high_contrast { ...}
.main_content { ...}
.column { ...}
.contact_info { ...}
¿Y qué es eso de “nombres semánticos”?
¿Son estos nombres semánticos?
![Page 19: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/19.jpg)
@eamodeorubio
Legibilidad
• Representan conceptos del dominio del problema• Podemos tener varios problemas distintos:
● Layout● Esquema de colores● Estructura de contenidos● Tipos de contenidos
• Cada uno tiene un vocabulario diferente
![Page 20: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/20.jpg)
@eamodeorubio
Legibilidad
.high_contrast { ...}
.main_content { ...}
.column { ...}
.contact_info { ...}
Distintos problemas, distinto vocabulario
Esquema de colores
Estructura
Esquema de colores
Layout
Tipo de datos
![Page 21: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/21.jpg)
@eamodeorubio
Pero, ¿el HTML no era semántico?
• Sí, pero no lo cubre todo. • HTML4: p, strong, etc• HTML5 es bastante mejor.
● Estructura: detail, section, article, aside, nav...
● Contenido: audio, video, address
![Page 22: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/22.jpg)
@eamodeorubio
CSS para HTML5 y 4● Sustituir clases redundantes con CSS5 por selectores tipo elemento
(article, nav, …)● Usar clases sólo para hacer distinciones más finas● Usar div y span en HTML4 en combinación de clases
.articulo, article { ...}
.pie, footer { ...}
![Page 23: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/23.jpg)
@eamodeorubio
Open Closed
● HTML cerrado pero “extensible”: Cambiar el diseño sin cambiar la estructura HTML
• CSS cerrado: Cambiar la estructura HTML no debería implicar cambiar CSS
• CSS extensible: ● Estilos deben poder componerse, y aprovechar
la estructura HTML para ello● Plugins (temas, skins, ...)
Cerrado a modificación pero abierto a extensión
![Page 24: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/24.jpg)
@eamodeorubio
Open Closed
CSS y estructura HTML deben independizarse al máximo
Cerrado a modificación pero abierto a extensión
![Page 25: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/25.jpg)
@eamodeorubio
Open Closed
CSS y estructura HTML deben independizarse al máximo
Cerrado a modificación pero abierto a extensión
Independizar estlos del contenido de los del
contenedor
![Page 26: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/26.jpg)
@eamodeorubio
Open Closed
CSS y estructura HTML deben independizarse al máximo
Cerrado a modificación pero abierto a extensión
Independizar estlos del contenido de los del
contenedor
Evitar (en lo posible) selectores que acoplen a la
estructura HTML: tag, descendant, child, ...
![Page 27: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/27.jpg)
@eamodeorubio
CSS Reutlizable y Extensible(si no tienes objetos...)
![Page 28: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/28.jpg)
@eamodeorubio
Límites del CSS
• Los estilos CSS no son paramétricos• No hay “instancias” ni “objetos” ni
“interfaces”• No existe el concepto de colaboración
![Page 29: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/29.jpg)
@eamodeorubio
Límites del CSS
• Los estilos CSS no son paramétricos• No hay “instancias” ni “objetos” ni
“interfaces”• No existe el concepto de colaboración
¿Como lo hacemos para reutlizar código?
![Page 30: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/30.jpg)
@eamodeorubio
Límites del CSS
• Los estilos CSS no son paramétricos• No hay “instancias” ni “objetos” ni
“interfaces”• No existe el concepto de colaboración
¿Como lo hacemos para reutlizar código?
COMPOSIC
ION
![Page 31: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/31.jpg)
@eamodeorubio
Composición
• Varias reglas CSS pueden aplicarse sobre un mismo elemento HTML
• Las declaraciones de las reglas CSS se fusionan• Si hay conficto, la declaración de la regla con
mayor precedencia gana (override)• Similar a la herencia múltiple
![Page 32: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/32.jpg)
@eamodeorubio
Precedencia1. Media-type2. Autor e importancia:
● Usuario e !important (accesibilidad)● Autor de la página e !important (overrides in-style) ← :-/● Autor de la página● Usuario● Navegador
3. Especificidad ← Lo que nos interesa en el 80% de los casos4. Orden de aplicación ← El último gana
![Page 33: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/33.jpg)
@eamodeorubio
Especificidad
1. Estilos en línea (<div style=”color:red”>)2. Selector #id3. Clases, pseudo-clases, atributos (.importante, a:visited, a[rel=author])4. Elementos (a, div, p...) y pseudo elementos (p:first-line)
![Page 34: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/34.jpg)
@eamodeorubio
Especificidad¡ Hay que contar el número de items de cada
categoría!#id1 { ...}
.class1 .class2 { ...}
p.column { ...}
.main_content { ...}
p { ...}
![Page 35: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/35.jpg)
@eamodeorubio
Especificidad¡ Hay que contar el número de items de cada
categoría!#id1 { ...}
.class1 .class2 { ...}
p.column { ...}
.main_content { ...}
p { ...}
OV
ER
RID
ES
![Page 36: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/36.jpg)
@eamodeorubio
El último gana
<div class="skinA">
<p class="nota importante">Urgente</p>
</div>OVERRIDES
![Page 37: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/37.jpg)
@eamodeorubio
El último gana
<div class="skinA">
<p class="nota importante">Urgente</p>
</div>
OVERRIDES
![Page 38: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/38.jpg)
@eamodeorubio
¿Y eso del inheritance?
• ¡En realidad, no!• Todo elemento HTML tiene valores CSS por
defecto que dependen del browser• Pero el valor por defecto de algunos atributos
CSS se pueden heredar del padre• Podemos forzar que una propiedad se herede
con el valor “inheritance”
![Page 39: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/39.jpg)
@eamodeorubio
¿Y eso del inheritance?
<div class="skinA">
<p class="nota importante">Urgente</p>
<p class="nota">Esto es otra nota</p>
</div>
OV
ER
RID
ESD
EFA
ULT
![Page 40: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/40.jpg)
@eamodeorubio
¡ Todo junto ! → “Plugins”
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
![Page 41: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/41.jpg)
@eamodeorubio
¡ Todo junto ! → “Plugins”
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
Estilos básicos, abstractos y semánticos
![Page 42: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/42.jpg)
@eamodeorubio
¡ Todo junto ! → “Plugins”
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
Valores por defecto globales para el plugin 'cool_skin'
![Page 43: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/43.jpg)
@eamodeorubio
¡ Todo junto ! → “Plugins”
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
El plugin 'cool_skin' extiende las clases base. Sus reglas
son más específicas
![Page 44: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/44.jpg)
@eamodeorubio
Organizar reglas CSS en niveles de abstracción
Cuanto más abstracta sea una regla:
• Menor precedencia debería poseer
• Menor cantidad de declaraciones debería tener
• Su ámbito de aplicación será mayor
![Page 45: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/45.jpg)
@eamodeorubio
¿Es CSS capaz de OO?
• No, pero posee mecanismos capaces de simular la herencia simple, múltiple y mixins.
• La precedencia nos permiten simular la cadena de herencia y abstracción
• La composición nos permite simular la herencia múltiple y/o los mixins:
● Mediante “inheritance”● Usando class=”claseX claseY claseZ”● Mediante selectores no disjuntos
● A veces es necesario acoplarse algo a la estructura de HTML (plugins y contenido semántico de HTML)
![Page 46: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/46.jpg)
@eamodeorubio
Soy desarrollador, ¿y a mi qué?
• Desarrolladores y diseñadores deben cooperar● HTML → Diseñador● Contenido reglas CSS → Diseñador● Comportamiento (JavaScript) →
Desarrollador
![Page 47: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/47.jpg)
@eamodeorubio
Soy desarrollador, ¿y a mi qué?
• Desarrolladores y diseñadores deben cooperar● HTML → Diseñador● Contenido reglas CSS → Diseñador● Comportamiento (JavaScript) →
Desarrollador
¡Los selectores CSS son el contrato!
(usa jQuery o Sizzle)
![Page 48: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/48.jpg)
@eamodeorubio
Soy desarrollador, ¿y a mi qué?
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
Esto déjaselo a los diseñadores
![Page 49: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/49.jpg)
@eamodeorubio
Soy desarrollador, ¿y a mi qué?
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
En esto ponéos de acuerdo
![Page 50: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/50.jpg)
@eamodeorubio
Soy desarrollador, ¿y a mi qué?
jQuery('.email').makeEditableField();
// Not specially good code!
jQuery('.email').change(function() {
if(!isValidEmail(jQuery(this).val()))
markAsInvalid(jQuery(this), "Invalid email");
});
// Etc..
Y esto es todo tuyo
![Page 51: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/51.jpg)
@eamodeorubio
Soy desarrollador, ¿y a mi qué?
Arquitectura HMVC● Bajo acoplamiento
HTML ↔ JS● Selectores CSS
actúan como interface
● Desacoplarnos del DOM → HTML/CSS/JS
JS Frontend Application Logic
Model
Controller
Logic View
DOM View (a.k.a. Widget)
HTML(Model)
CSS(View)
JQuery (Controller)
![Page 52: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/52.jpg)
@eamodeorubio
¿Nos hacemos unos frameworks?(tenía que pasar...¿será un framework evil?)
![Page 53: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/53.jpg)
@eamodeorubio
Problemas a resolver
• X-Browser (reset)• Layout (en cooperación con HTML5)• Contenedores (en cooperación con HTML5)• Widgets reutilizables• Skins• Representar contenido de negocio de forma
consistente
![Page 54: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/54.jpg)
@eamodeorubio
Reset
• Cada browser da una regla CSS para cada elemento
• Es de baja prioridad, pero sobreescribe los valores por defecto
• Si quieres X-Browser CSS y evitar sorpresas lo mejor es anular este CSS por defecto
• http://meyerweb.com/eric/tools/css/reset/• http://developer.yahoo.com/yui/reset/
![Page 55: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/55.jpg)
@eamodeorubio
Grids960.gs, YUI, OOCSS, etc.
![Page 56: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/56.jpg)
@eamodeorubio
Grids
<div class="line">
<div class="unit size1of3">
<h3>1/3</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="unit size2of3 lastUnit">
<h3>2/3</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
From @stubornella (https://github.com/stubbornella/oocss/wiki/Grids)
![Page 57: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/57.jpg)
@eamodeorubio
Containers
• Agrupan contenido y widgets de forma homogénea
• No son relevantes para el usuario por si mismos, sino por el contenido
• Deben aceptar cualquier contenido• No interferir con su contenido• Ej. pestañas, barra lateral, “portlet”
![Page 58: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/58.jpg)
@eamodeorubio
Containers
<div class="mod">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="bd"> <p>Lorem ipsum.</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b> </div>
From @stubornella (https://github.com/stubbornella/oocss/wiki/Module)
![Page 59: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/59.jpg)
@eamodeorubio
Widgets
• Controles de usuario• Pueden ser simples o complejos• Interacción con el usuario homogénea• Foco de atención de los desarrolladores• Bien cubiertos por frameworks existentes• Ej. boton, botonera, menu, enlace, campo de
importes, etc....
![Page 60: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/60.jpg)
@eamodeorubio
Contenido• Específico de cada aplicación• Layout y aspecto visual de entidades de negocio• Relevantes para el usuario• Ej. “contacto”, “dirección”, “tweet”, etc.• Microformatos (http://microformats.org)
● hCard● hCalendar● rel-nofollow● rel-tag
![Page 61: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/61.jpg)
@eamodeorubio
Contenido<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>, <abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span><div class="country-name">USA</div>
</div>
<div class="tel"><span class="type">Work</span> +1-650-289-4040</div>
<div class="tel"><span class="type">Fax</span> +1-650-289-4041</div>
<div>Email: <span class="email">[email protected]</span></div>
</div>
![Page 62: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/62.jpg)
@eamodeorubio
Skins
• Colores, lineas, fuentes...• Totalmente independientes de la estructura• Extienden a todos los demás elementos del
framework• No afectan al layout
![Page 63: OO CSS](https://reader033.fdocuments.co/reader033/viewer/2022052400/559af88b1a28ab82458b4709/html5/thumbnails/63.jpg)
@eamodeorubio
¿Q & A?