Radiografía de un Sitio Web

Ricardo AlfaroDiseñador Web

Alter LagosIngeniero de Software

RADIOGRAFÍADE UN SITIO WEBPresente y Futuro

FLISOL 2010, Santiago Chile

Sitio WebPágina WebAplicación Web?

Hoy en día...¡Todos son lo mismo!

Sitio WebPágina WebAplicación Web?

¿Motivación?

Después

Sitio Web

HTML CSS Javascript

Sitio Web

HTMLHTML CSS Javascript

¿Cómo Funciona?

HTML > CONTENIDO

<html><etiqueta>Contenido</etiqueta></html>

Un ejemplo...

Y para que me sirve esto?

¡Entender un poco más! ¡Poner en Práctica!

¡Aprender!

HyperText Markup LanguageLenguaje HTML

Es un lenguaje que interpreta el navegador web Contener solamente la información semántica. Está basado en etiquetas de "etiquetas" usando tags < > Su estructura base se divide en dos partes <head> y <body> Para crear HTML se puede usar cualquier editor de texto.

Sitio Web


¿Cómo Funciona?

CSS > APARIENCIA

selector { propiedad: valor }selector { propiedad1: valor1; propiedad2: valor2 }

AspectoPosición

Un ejemplo menos abstracto...

CSS Zen Gardenhttp://csszengarden.com/

Cascading Style SheetsCSS (Hojas de Estilos)

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

Sitio Web


¿Cómo Funciona?

JAVASCRIPT > FUNCIONALIDAD

var numero = 2function(parametro) {operacion}metodo (valor)

Un ejemplo?

Un ejemplo... JQuery

Lenguaje de ScriptingJavascript

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

Y para que me sirve esto?

Para saber que...

¿Que hay de nuevo?

HyperText Markup Language [versión 5]HTML5

Establece nuevos elementos de los sitios web modernos Importancia del significado semántico Incorporar nativamente audio y video Aún no se encuentra soportado por todos los navegadores

Radiografía de un Sitio Web

Technology

Transcript of Radiografía de un Sitio Web