la belleza también está en el interior
TRANSCRIPT
![Page 1: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/1.jpg)
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
![Page 2: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/2.jpg)
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.
![Page 3: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/3.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
¿Qué es la belleza?
(CC) cuppini
![Page 4: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/4.jpg)
www.codecamp.es
La belleza es inherente a la naturaleza, al ser
humano y a su entorno
![Page 5: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/5.jpg)
![Page 6: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/6.jpg)
![Page 7: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/7.jpg)
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
![Page 8: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/8.jpg)
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
![Page 9: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/9.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
Por fuera y por dentro
(CC) Danielo Cavalli
![Page 10: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/10.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
En la naturaleza
(estética –
fachada)
(CC) naama
![Page 11: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/11.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
En la naturaleza
(interior –
estructura)
(CC) audreyjm529
![Page 12: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/12.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
En las personas
(estética –
fachada)
Fuente: www. wallpapers99.com
![Page 13: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/13.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel LópezFuente: swami.blogspace.fr
En las personas
(interior –
carisma)
![Page 14: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/14.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
¿Cómo medimos, determinamos,
evaluamos…la
elleza
![Page 15: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/15.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
filosofía griegaSaber egipcio
Proporciones, cánones…
Gestalt…
![Page 16: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/16.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
En la Web…
estándaresW3C
![Page 17: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/17.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
(X)HTMLCSS,
JavaScriptXML…
![Page 18: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/18.jpg)
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?
![Page 19: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/19.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
Generación drag& drop
![Page 20: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/20.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
183 tablas
![Page 21: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/21.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
45 < br>
![Page 22: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/22.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
318 < img>
![Page 23: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/23.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
60 < font>
![Page 25: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/25.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
(X)HTML
![Page 26: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/26.jpg)
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
![Page 27: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/27.jpg)
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!
![Page 28: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/28.jpg)
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
![Page 30: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/30.jpg)
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!
![Page 31: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/31.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
JavaScript
![Page 32: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/32.jpg)
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?
![Page 33: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/33.jpg)
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.
![Page 34: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/34.jpg)
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
![Page 35: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/35.jpg)
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)
![Page 36: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/36.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
Amigas, amigos… ya
terminamos…
![Page 37: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/37.jpg)
www.codecamp.es | La belleza también está en el interior · Miguel López
Belleza Exterior…
Función: DCU&
Tendencias
![Page 38: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/38.jpg)
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
![Page 39: La belleza también está en el interior](https://reader035.vdocuments.site/reader035/viewer/2022062514/55a32d4c1a28ab34178b4640/html5/thumbnails/39.jpg)
¿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