La belleza (también) está en el interior
Interfaces Web robustas por fuera y por dentro
Miguel López GonzálezC.E.O.
Symbia IT: www.symbiait.comBlog: www.augurarte.com
www.codecamp.es | La belleza también está en el interior · Miguel López
Agenda…
• Sobre la belleza en la Web
• Belleza interior y belleza exterior. Criterios.
• Interfaces Web de calidad:
– Código semántico: Diseño sin tablas.
– XHTML Válido
– JavaScript no intrusivo.
– Validación de estándares antes de producción.
www.codecamp.es | La belleza también está en el interior · Miguel López
¿Qué es la belleza?
(CC) cuppini
www.codecamp.es
La belleza es inherente a la naturaleza, al ser
humano y a su entorno
www.codecamp.es | La belleza también está en el interior · Miguel López
propiedad de las cosas que hace
amarlas, infundiendo en
nosotros deleiteespiritual
www.codecamp.es | La belleza también está en el interior · Miguel López
¿qué es la belleza? Identificando sus factores
demo 1Algunas referencias diseño Web
www.codecamp.es | La belleza también está en el interior · Miguel López
Por fuera y por dentro
(CC) Danielo Cavalli
www.codecamp.es | La belleza también está en el interior · Miguel López
En la naturaleza
(estética –
fachada)
(CC) naama
www.codecamp.es | La belleza también está en el interior · Miguel López
En la naturaleza
(interior –
estructura)
(CC) audreyjm529
www.codecamp.es | La belleza también está en el interior · Miguel López
En las personas
(estética –
fachada)
Fuente: www. wallpapers99.com
www.codecamp.es | La belleza también está en el interior · Miguel LópezFuente: swami.blogspace.fr
En las personas
(interior –
carisma)
www.codecamp.es | La belleza también está en el interior · Miguel López
¿Cómo medimos, determinamos,
evaluamos…la
elleza
www.codecamp.es | La belleza también está en el interior · Miguel López
filosofía griegaSaber egipcio
Proporciones, cánones…
Gestalt…
www.codecamp.es | La belleza también está en el interior · Miguel López
En la Web…
estándaresW3C
www.codecamp.es | La belleza también está en el interior · Miguel López
(X)HTMLCSS,
JavaScriptXML…
www.codecamp.es | La belleza también está en el interior · Miguel López
¡Bonito!, todo me parece bonito…
demo 2¿diseños bonitos por dentro?
www.codecamp.es | La belleza también está en el interior · Miguel López
Generación drag& drop
www.codecamp.es | La belleza también está en el interior · Miguel López
183 tablas
www.codecamp.es | La belleza también está en el interior · Miguel López
45 < br>
www.codecamp.es | La belleza también está en el interior · Miguel López
318 < img>
www.codecamp.es | La belleza también está en el interior · Miguel López
60 < font>
www.codecamp.es | La belleza también está en el interior · Miguel López
(X)HTML
www.codecamp.es | La belleza también está en el interior · Miguel López
Los bits de información en la Web
• Los documentos HTML o páginas Web:
– Estructura XHTML
– Presentación CSS
– Comportamiento JavaScript
www.codecamp.es | La belleza también está en el interior · Miguel López
Uso semántico de (X)HTML
demo 3HTML Semántico ¡aquí y ahora!
www.codecamp.es | La belleza también está en el interior · Miguel López
Los números mágicos…
< t a b l e > 1 8 3 1< br> 4 5 14 *< img> 3 1 8 15< font> 6 0 0Filesize 1 3 3 Kb 18 Kb
www.codecamp.es | La belleza también está en el interior · Miguel López
La presentación… con CSS válido
demo 4CSS 2.1 y CSS 3.0 ¡Válidos!
www.codecamp.es | La belleza también está en el interior · Miguel López
JavaScript
www.codecamp.es | La belleza también está en el interior · Miguel López
Mitos y realidades
• JavaScript no supone una falta de accesibilidad ni un error de usabilidad que dificulta el uso de la Web.
• Siempre que se use de forma adecuada. ¿qué es un uso adecuado de JavaScript?
www.codecamp.es | La belleza también está en el interior · Miguel López
El comportamiento: función
• Los comportamientos (behaviours) o características dinámicas (movimiento, respuesta a acciones de los usuarios…) siguen un patrón decorator en un documento Web
• Enriquecen la experiencia de los usuarios sin mermar la estructura ni los contenidos que son el objeto de la Web.
www.codecamp.es | La belleza también está en el interior · Miguel López
Un mejor uso de JavaScript
• JavaScript no intrusivo (= uso semántico de eventos en XHTML).
• Separar el código y las llamadas
• Uso de manejadores de eventos vinculados al DOM y a la captura de eventos de los elementos (X)HTML
www.codecamp.es | La belleza también está en el interior · Miguel López
Diseño dinámico pero ¡estándar!
demo 5JavaScript no intrusivo (Unobtrusive Javascript)
www.codecamp.es | La belleza también está en el interior · Miguel López
Amigas, amigos… ya
terminamos…
www.codecamp.es | La belleza también está en el interior · Miguel López
Belleza Exterior…
Función: DCU&
Tendencias
www.codecamp.es | La belleza también está en el interior · Miguel López
Belleza Interior
(X)HTML VálidoCSS Válido
Uso correcto de JavaScript
¿Preguntas ?
Recuerda que en www.codecamp.es podrás encontrar todo el material de las sesiones del CodeCamp
Miguel López GonzálezC.E.O.
Symbia IT: www.symbiait.comBlog: www.augurarte.com