Your SlideShare is downloading. ×
Radiografía de un Sitio Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Radiografía de un Sitio Web

585
views

Published on

Charla para FLISOL 2010 junto a Alter Lagos …

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
585
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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