Post on 05-Jul-2015
description
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?
Sitio WebPágina WebAplicación Web?
¿Motivación?
Antes
Después
Sitio Web
HTML CSS Javascript
Sitio Web
HTMLHTML CSS Javascript
HTML
¿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
HTMLHTML CSS Javascript
¿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
HTMLHTML CSS Javascript
¿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...
Para saber que...
HTML5
HTML5
¿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