Your SlideShare is downloading. ×
0
<ul>Ricardo Alfaro Diseñador Web </ul><ul>Alter Lagos Ingeniero de Software </ul><ul>RADIOGRAFÍA DE UN SITIO WEB </ul><ul>...
<ul>Sitio  Web Página  Web Aplicación  Web </ul><ul>? </ul>
 
 
 
 
 
<ul>Hoy en día... ¡Todos son lo mismo! </ul>
<ul>Sitio  Web Página  Web Aplicación  Web </ul><ul>? </ul>
<ul>Sitio  Web Página  Web Aplicación  Web </ul><ul>? </ul>
<ul>¿ Motivación ? </ul>
<ul>Antes </ul>
<ul>Después </ul>
<ul>Sitio  Web </ul>
<ul>Sitio  Web </ul>
<ul>HTML </ul>
¿ Cómo Funciona ?
<html> <etiqueta>Contenido</etiqueta> </html> <ul>HTML >  CONTENIDO </ul>
Un ejemplo ...
<ul>Y para que me sirve esto? </ul>
¡ Entender un poco más ! ¡ Poner en Práctica ! ¡ Aprender !
<ul>HyperText Markup Language </ul><ul>Lenguaje HTML </ul><ul><li>Es un lenguaje que interpreta el navegador web
Contener solamente la  información  semántica. </li></ul><ul><li>Está basado en etiquetas de  &quot;etiquetas&quot;  usand...
Para crear HTML se puede usar  cualquier editor de texto. </li></ul>
<ul>Sitio  Web </ul>
¿ Cómo Funciona ?
selector { propiedad: valor } selector { propiedad1: valor1; propiedad2: valor2 } <ul>CSS >  APARIENCIA </ul>
 
 
 
 
 
<ul>Aspecto <li>Posición </li></ul>
Un ejemplo menos abstracto ...
<ul><li>CSS Zen Garden
http://csszengarden.com/ </li></ul>
 
 
 
 
 
<ul>Cascading Style Sheets </ul><ul>CSS  ( Hojas de Estilos) </ul><ul><li>Controlar la apariencia  de un sitio web
Generar estilos visuales  (tipografía, color y forma)
Determinar la  posición  de los elementos del sitio web
Para generarlo se puede usar  cualquier editor de texto </li></ul>
<ul>Sitio  Web </ul>
 
 
 
¿ Cómo Funciona ?
var numero = 2 function(parametro) {operacion} metodo (valor) <ul>JAVASCRIPT >  FUNCIONALIDAD </ul>
Un ejemplo ?
Un ejemplo ...  JQuery
<ul>Lenguaje de Scripting </ul><ul>Javascript </ul><ul><li>Tiene control sobre el  DOM  y permite su manipulación
Se basa en  variables, funciones y métodos .
Mejoras de Interfaz y Web Dinámica
Existen  una infinidad de librerías </li></ul>
Upcoming SlideShare
Loading in...5
×

Radiografía de un Sitio Web

596

Published on

Charla para FLISOL 2010 junto a Alter Lagos
acerca de la Web de hoy con HTML4 y el futuro con HTML5

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
596
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Radiografía de un Sitio Web"

  1. 1. <ul>Ricardo Alfaro Diseñador Web </ul><ul>Alter Lagos Ingeniero de Software </ul><ul>RADIOGRAFÍA DE UN SITIO WEB </ul><ul>Presente y Futuro </ul><ul>FLISOL 2010, Santiago Chile </ul>
  2. 2. <ul>Sitio Web Página Web Aplicación Web </ul><ul>? </ul>
  3. 8. <ul>Hoy en día... ¡Todos son lo mismo! </ul>
  4. 9. <ul>Sitio Web Página Web Aplicación Web </ul><ul>? </ul>
  5. 10. <ul>Sitio Web Página Web Aplicación Web </ul><ul>? </ul>
  6. 11. <ul>¿ Motivación ? </ul>
  7. 12. <ul>Antes </ul>
  8. 13. <ul>Después </ul>
  9. 14. <ul>Sitio Web </ul>
  10. 15. <ul>Sitio Web </ul>
  11. 16. <ul>HTML </ul>
  12. 17. ¿ Cómo Funciona ?
  13. 18. <html> <etiqueta>Contenido</etiqueta> </html> <ul>HTML > CONTENIDO </ul>
  14. 19. Un ejemplo ...
  15. 20. <ul>Y para que me sirve esto? </ul>
  16. 21. ¡ Entender un poco más ! ¡ Poner en Práctica ! ¡ Aprender !
  17. 22. <ul>HyperText Markup Language </ul><ul>Lenguaje HTML </ul><ul><li>Es un lenguaje que interpreta el navegador web
  18. 23. Contener solamente la información semántica. </li></ul><ul><li>Está basado en etiquetas de &quot;etiquetas&quot; usando tags < > </li></ul><ul><li>Su estructura base se divide en dos partes <head> y <body>
  19. 24. Para crear HTML se puede usar cualquier editor de texto. </li></ul>
  20. 25. <ul>Sitio Web </ul>
  21. 26. ¿ Cómo Funciona ?
  22. 27. selector { propiedad: valor } selector { propiedad1: valor1; propiedad2: valor2 } <ul>CSS > APARIENCIA </ul>
  23. 33. <ul>Aspecto <li>Posición </li></ul>
  24. 34. Un ejemplo menos abstracto ...
  25. 35. <ul><li>CSS Zen Garden
  26. 36. http://csszengarden.com/ </li></ul>
  27. 42. <ul>Cascading Style Sheets </ul><ul>CSS ( Hojas de Estilos) </ul><ul><li>Controlar la apariencia de un sitio web
  28. 43. Generar estilos visuales (tipografía, color y forma)
  29. 44. Determinar la posición de los elementos del sitio web
  30. 45. Para generarlo se puede usar cualquier editor de texto </li></ul>
  31. 46. <ul>Sitio Web </ul>
  32. 50. ¿ Cómo Funciona ?
  33. 51. var numero = 2 function(parametro) {operacion} metodo (valor) <ul>JAVASCRIPT > FUNCIONALIDAD </ul>
  34. 52. Un ejemplo ?
  35. 53. Un ejemplo ... JQuery
  36. 54. <ul>Lenguaje de Scripting </ul><ul>Javascript </ul><ul><li>Tiene control sobre el DOM y permite su manipulación
  37. 55. Se basa en variables, funciones y métodos .
  38. 56. Mejoras de Interfaz y Web Dinámica
  39. 57. Existen una infinidad de librerías </li></ul>
  40. 58. <ul>Y para que me sirve esto? </ul>
  41. 59. Para saber que...
  42. 60. Para saber que...
  43. 62. <ul>HTML 5 </ul>
  44. 63. <ul>HTML 5 </ul>
  45. 64. ¿ Que hay de nuevo ?
  46. 65. <ul>HyperText Markup Language [versión 5] </ul><ul>HTML5 </ul><ul><li>Establece nuevos elementos de los sitios web modernos
  47. 66. Importancia del significado semántico
  48. 67. Incorporar nativamente audio y video
  49. 68. Aún no se encuentra soportado por todos los navegadores </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×