SlideShare una empresa de Scribd logo
La belleza (también) está en el interior Interfaces Web robustas por fuera y por dentro Miguel LópezGonzález C.E.O. Symbia IT: www.symbiait.com Blog: www.augurarte.com
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.
¿Qué es la belleza? (CC)  cuppini
La belleza es inherente a la naturaleza, al ser humano y a su entorno
propiedadde las cosas que hace amarlas, infundiendo en nosotros deleite espiritual
¿qué es la belleza? Identificando sus factores demo 1Algunas referencias diseño Web
Por fuera y por dentro (CC)  DanieloCavalli
En la naturaleza (estética – fachada) (CC)  naama
En la naturaleza (interior – estructura) (CC)  audreyjm529
En las personas (estética – fachada) Fuente:  www. wallpapers99.com
En las personas (interior – carisma) Fuente:  swami.blogspace.fr
¿Cómo medimos, determinamos, evaluamos… la elleza? b
filosofía griega Saber egipcio Proporciones, cánones… Gestalt …
En la Web… estándares W3C
(X)HTML CSS, JavaScript XML…
¡Bonito!, todo me parece bonito… demo 2¿diseños bonitos por dentro?
Generación drag & drop
183 tablas
45 < br >
318 < img >
60 < font >
(X)HTML
Los bits de información en la Web Los documentos HTML o páginas Web: Estructura  XHTML  Presentación  CSS  Comportamiento  JavaScript
Uso semántico de (X)HTML demo 3HTML Semántico ¡aquí y ahora!
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 		  	0 Filesize		1 3 3  Kb 		18 Kb
CSS
La presentación… con CSS válido demo 4CSS 2.1 y CSS 3.0 ¡Válidos!
JavaScript
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?
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.
Cómo funciona JavaScript Elemento (X)HTML + acción del usuario    Lanzamiento de un evento del documento (X)HTML (= comportamiento)
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
Diseño dinámico pero ¡estándar! demo 5JavaScript no intrusivo (UnobtrusiveJavascript)
Amigas, amigos… ya terminamos…
Belleza Exterior… Función: DCU & Tendencias
Belleza Interior (X)HTML Válido CSS Válido Uso correcto de JavaScript

Más contenido relacionado

Similar a La belleza también está en el interior

Primer presentacion
Primer presentacion Primer presentacion
Primer presentacion
m3mm0
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño webciwmx
 
DiseñO Para Web App
DiseñO Para Web AppDiseñO Para Web App
DiseñO Para Web App
uneve
 
Arquitectura De La Informacion
Arquitectura De La InformacionArquitectura De La Informacion
Arquitectura De La Informacion
Existaya.com
 
Conversion Web Madrid Tecnologia 2010
Conversion Web Madrid Tecnologia 2010Conversion Web Madrid Tecnologia 2010
Conversion Web Madrid Tecnologia 2010
Pedro Jesús González
 
Conversion web
Conversion webConversion web
Conversion web
Domestika
 
Introduccion a las tecnologias Tecnologías Web en sus diferentes fases
Introduccion a las tecnologias Tecnologías Web en sus diferentes fasesIntroduccion a las tecnologias Tecnologías Web en sus diferentes fases
Introduccion a las tecnologias Tecnologías Web en sus diferentes fases
DemsshillCoutino
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
rodmazzo
 
Web semántica y visiones de la web 3.0
Web semántica y visiones de la web 3.0 Web semántica y visiones de la web 3.0
Web semántica y visiones de la web 3.0 Miguel R. Artacho
 
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario - 2015
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario - 2015Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario - 2015
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario - 2015
Gabriel Porras
 
Preparados, listos, Ajax!
Preparados, listos, Ajax!Preparados, listos, Ajax!
Preparados, listos, Ajax!
Virginia Aguirre
 
El mundo de los sitios web
El mundo de los sitios webEl mundo de los sitios web
El mundo de los sitios web
rodmazzo
 
Presencia web pyme
Presencia web pymePresencia web pyme
Presencia web pyme
Domestika
 
HTML5 Warm up!
HTML5 Warm up!HTML5 Warm up!
HTML5 Warm up!
Kike Quintano
 
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
Microsoft Argentina y Uruguay [Official Space]
 
JCCAMUS
JCCAMUSJCCAMUS
JCCAMUS
guestfe4661
 
HojadeVida
HojadeVidaHojadeVida
HojadeVida
Kike Rodriguez
 
Reactivos diseño web
Reactivos diseño webReactivos diseño web
Reactivos diseño web
paoloarevaloortiz
 
Parcial I de Multimedia - Semestre 201322
Parcial I de Multimedia - Semestre 201322Parcial I de Multimedia - Semestre 201322
Parcial I de Multimedia - Semestre 201322Viviana Trujillo
 

Similar a La belleza también está en el interior (20)

Primer presentacion
Primer presentacion Primer presentacion
Primer presentacion
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
DiseñO Para Web App
DiseñO Para Web AppDiseñO Para Web App
DiseñO Para Web App
 
Arquitectura De La Informacion
Arquitectura De La InformacionArquitectura De La Informacion
Arquitectura De La Informacion
 
Conversion Web Madrid Tecnologia 2010
Conversion Web Madrid Tecnologia 2010Conversion Web Madrid Tecnologia 2010
Conversion Web Madrid Tecnologia 2010
 
Conversion web
Conversion webConversion web
Conversion web
 
Introduccion a las tecnologias Tecnologías Web en sus diferentes fases
Introduccion a las tecnologias Tecnologías Web en sus diferentes fasesIntroduccion a las tecnologias Tecnologías Web en sus diferentes fases
Introduccion a las tecnologias Tecnologías Web en sus diferentes fases
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web semántica y visiones de la web 3.0
Web semántica y visiones de la web 3.0 Web semántica y visiones de la web 3.0
Web semántica y visiones de la web 3.0
 
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario - 2015
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario - 2015Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario - 2015
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario - 2015
 
Preparados, listos, Ajax!
Preparados, listos, Ajax!Preparados, listos, Ajax!
Preparados, listos, Ajax!
 
El mundo de los sitios web
El mundo de los sitios webEl mundo de los sitios web
El mundo de los sitios web
 
Seo Y Web2.0
Seo Y Web2.0Seo Y Web2.0
Seo Y Web2.0
 
Presencia web pyme
Presencia web pymePresencia web pyme
Presencia web pyme
 
HTML5 Warm up!
HTML5 Warm up!HTML5 Warm up!
HTML5 Warm up!
 
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
(25.03) RUN 09 - Sesiones Desarrollo - SI 2.0
 
JCCAMUS
JCCAMUSJCCAMUS
JCCAMUS
 
HojadeVida
HojadeVidaHojadeVida
HojadeVida
 
Reactivos diseño web
Reactivos diseño webReactivos diseño web
Reactivos diseño web
 
Parcial I de Multimedia - Semestre 201322
Parcial I de Multimedia - Semestre 201322Parcial I de Multimedia - Semestre 201322
Parcial I de Multimedia - Semestre 201322
 

Último

TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
thomasdcroz38
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
sofiahuarancabellido
 
Todo sobre Minirobotica. Revista Saber Electronica
Todo sobre  Minirobotica. Revista Saber ElectronicaTodo sobre  Minirobotica. Revista Saber Electronica
Todo sobre Minirobotica. Revista Saber Electronica
Carlos Carlosnoemi
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
julio05042006
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
AlejandraCasallas7
 
TEMA 2-CARPAS SOLARES PARA PRODUCCION DE HORTALIZAS.ppt
TEMA 2-CARPAS SOLARES PARA PRODUCCION DE HORTALIZAS.pptTEMA 2-CARPAS SOLARES PARA PRODUCCION DE HORTALIZAS.ppt
TEMA 2-CARPAS SOLARES PARA PRODUCCION DE HORTALIZAS.ppt
SandroNava1
 
Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
cristianrb0324
 
Desarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdfDesarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdf
samuelvideos
 
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB  S2. PARA VSATMANUAL DEL DECODIFICADOR DVB  S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
Ing. Julio Iván Mera Casas
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
coloradxmaria
 
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial ValenciaCatalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
AMADO SALVADOR
 
modelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptxmodelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptx
evelinglilibethpeafi
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
cofferub
 
Presentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The CleanPresentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The Clean
juanchogame18
 
Informació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdfInformació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdf
Festibity
 
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdfDesarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
AlejandraCasallas7
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
ValeriaAyala48
 
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdfEstructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
IsabellaRubio6
 
actividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañerosactividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañeros
aljitagallego
 
Actividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdfActividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdf
NajwaNimri1
 

Último (20)

TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
 
Todo sobre Minirobotica. Revista Saber Electronica
Todo sobre  Minirobotica. Revista Saber ElectronicaTodo sobre  Minirobotica. Revista Saber Electronica
Todo sobre Minirobotica. Revista Saber Electronica
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
 
TEMA 2-CARPAS SOLARES PARA PRODUCCION DE HORTALIZAS.ppt
TEMA 2-CARPAS SOLARES PARA PRODUCCION DE HORTALIZAS.pptTEMA 2-CARPAS SOLARES PARA PRODUCCION DE HORTALIZAS.ppt
TEMA 2-CARPAS SOLARES PARA PRODUCCION DE HORTALIZAS.ppt
 
Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
 
Desarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdfDesarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdf
 
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB  S2. PARA VSATMANUAL DEL DECODIFICADOR DVB  S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
 
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial ValenciaCatalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
 
modelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptxmodelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptx
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
 
Presentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The CleanPresentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The Clean
 
Informació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdfInformació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdf
 
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdfDesarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
 
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdfEstructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
 
actividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañerosactividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañeros
 
Actividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdfActividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdf
 

La belleza también está en el interior

Notas del editor

  1. En el más amplio sentido de la palabra, belleza, ¿qué significa? ¿cuándo consideramos que algo es “bello”? Probablemente ni nos lo hemos planteado, pero sin embargo, somos capaces de decir, de inmediato, en milisegundos, nada más ver algo, podemos emitir una opinión del tipo me gusta, me disgusta, me deja indiferente…
  2. Definición de belleza según la Real Academia de la Lengua Española, que además añade…“Esta propiedad existe en la naturaleza y en las obras literarias y artísticas. “
  3. La belleza es una propiedad de nuestro entorno, de la naturaleza que nos rodea, y que percibimos de forma exterior por la vista (generalmente) conformándonos una idea, un pensamiento o un “deleite espiritual” (RAE) que nos hace sentir bien o, podríamos decir, que no nos deja indiferente.
  4. Stefanía Fernández, de 18 años, se ha convertido en la sexta venezolana en conquistar el título de Miss Universo en la ceremonia que se celebró el 23 de agosto de 2009 en el complejo hotelero Atlantis de Paradise Island (en Nassau, en las Bahamas).Referencia: http://www.elpais.com/articulo/gente/venezolana/Stefania/Fernandez/Miss/Universo/2009/elpepugen/20090824elpepuage_1/Tes
  5. La Madre Teresa de Calcuta ha sido conocida en todo el mundo por su bondad, su sacrificio, su carisma… ayudando a los más necesitados en India. Todas sus cualidades hacen de la Madre Teresa una persona bella por dentro y esa belleza se manifiesta externamente en sus actos, belleza exterior también.
  6. Gestalt, “la forma”, teoría alemana que establece un conjunto de principios aplicables a todas las cosas, que definen o identifican el proceso cognitivo que realiza el cerebro humano a la hora de representar, captar y procesar las imágenes que percibimos (unión, continuidad, completitud, cercanía…).
  7. Si tenemos, pongamos por ejemplo un site con 1M visitantes/mes, de un fichero de 133 Kb  130Mb caudal x 12 = 1560 Mb/añoSi tenemos, pongamos por ejemplo un site con 1M visitantes/mes, de un fichero de 18 Kb  17,5Mb caudal x 12 = 210 Mb/año
  8. AJAX ha traído de nuevo al escenario el concepto de secuencias de comandos (scripting) de cliente como forma de enriquecer la experiencia de los usuarios aproximando el comportamiento de las aplicaciones Web al de las aplicaciones tradicionales de escritorio, con tiempos de respuesta más que aceptables e interacciones visuales muy atractivas que favorecen el feedback de los usuarios. Pero como en el resto de lenguajes de Internet, un mal uso de este lenguaje de secuencia de comandos puede dar al traste con una buena aplicación, si no se usa de forma semántica.
  9. Diseño Centrado en los Usuarios:- Roles o funciones que intervienen en el sistema (dominio del problema) Tareas que deben realizar los usuarios desde sus roles (objetivos de la aplicación) Forma habitual/mejorada de realizar dichas tareas.Tendencias: No inventar la rueda. Usar avances, tecnologías (buenas prácticas) Revisar lo que gusta y lo que no gusta (clientes).