HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de...

66
HTML, CSS ISIS 3710

Transcript of HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de...

Page 1: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML, CSSISIS 3710

Page 2: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML: Hyper Text Markup Language

HTML es el lenguaje de etiquetas usado en Internet para construir páginas web

HTML fue introducido en la primer versión de WWW (Timothy Berners-Lee, CERN)

Page 3: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML: Hyper Text Markup Language

<!DOCTYPE*html*PUBLIC*"4//W3C//DTD*XHTML*1.0*Transitional//EN"*"http://www.w3.org/TR/xhtml1/DTD/xhtml14transitional.dtd">

<html><head>

<title>My*Home*Page

</title></head><body>

<h1>My*Home*Page*</h1>*<p>

Welcome*to*my*home*page</p>

</body></html>

Page 4: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML: Hyper Text Markup Language

<!DOCTYPE*html*PUBLIC*"4//W3C//DTD*XHTML*1.0*Transitional//EN"*"http://www.w3.org/TR/xhtml1/DTD/xhtml14transitional.dtd">

<html><head>

<title>My*Home*Page

</title></head><body>

<h1>My*Home*Page*</h1>*<p>

Welcome*to*my*home*page</p>

</body></html>

Lenguaje/ Tipo de documento

Etiqueta (Tag)

Page 5: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML: Hyper Text Markup Language

<HTML><head>

<title>Hola Mundo</title></head><body4bgcolor=“#000000”4>

<font4color=‘#ffffff’4><H1>Hola Mundo</H1>

</font><hr>Contradicci&oacute;n:4Ejemplo de4entidad

</body></HTML>

Page 6: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML: Hyper Text Markup Language

<HTML><head>

<title>Hola Mundo</title></head><body4bgcolor=“#000000”4>

<font4color=‘#ffffff’4><H1>Hola Mundo</H1>

</font><hr>Contradicci&oacute;n:4Ejemplo de4entidad

</body></HTML>

Atributos visuales

Page 7: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML: Hyper Text Markup Language

HTML y las páginas WEB ha evolucionado desde su introducción en 1991

Las especificaciones han sido mantenidas por el IETF de W3C Consortium. Recientemente por la WHATWG

La version más reciente es HTML5

Page 8: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML: Hyper Text Markup Language

Versión Año Estándares

HTML (draft) 1991-1994

HTML 2.0 1995 IETF RFC 1866

HTML 3.2 1996

HTML 4.0 1997

HTML 4.01 1999 ISO/IEC 15445:2000

XHTML 1.0 2000

XHTML 1.1 2001

HTML 5 2014 Estándar de IETD + WHATWG

Page 9: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML: Hyper Text Markup Language HTML 5

<!DOCTYPE html>

HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/

html4/strict.dtd">

HTML 4.01 Transitional (deprecated elements like FONT) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN” "http://

www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset (transitional + frameset)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://

www.w3.org/TR/html4/frameset.dtd">

Page 10: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML: Hyper Text Markup Language

XHTML 1.0 Strict<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Page 11: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

Websites: HTMLs enlazados por hiper vínculos

http://www.warnerbros.com/archive/spacejam/movie/jam.htm

Page 12: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

Websites: HTMLs enlazados por hiper vínculos

http://www.warnerbros.com/archive/spacejam/movie/jam.htm

Page 13: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

http://skavenger.byethost8.com/homerswebpage/

El infierno de los GIFs animados

Page 14: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

http://skavenger.byethost8.com/homerswebpage/

El infierno de los GIFs animados

Page 15: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

http://www.nrg.be/archived/

FLASH: multimedia a través de plugins

Page 16: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

http://www.nrg.be/archived/

FLASH: multimedia a través de plugins

Page 17: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

http://24hoursofhappy.com/

HTML5: multimedia sin el uso de plugins

Page 18: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

HTML5: multimedia sin el uso de plugins

http://tridiv.com/

Page 19: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

HTML5: multimedia sin el uso de plugins

http://tridiv.com/

Page 20: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

HTML5: multimedia sin el uso de plugins

https://codepen.io/guttentag/full/tonFl/

Page 21: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

HTML5: multimedia sin el uso de plugins

https://codepen.io/guttentag/full/tonFl/

Page 22: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

https://codepen.io/dudleystorey/full/knqyK/

HTML5: multimedia sin el uso de plugins

Page 23: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

https://codepen.io/dudleystorey/full/knqyK/

HTML5: multimedia sin el uso de plugins

Page 24: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Evolución de HTML

https://codepen.io/dudleystorey/full/knqyK/

HTML5: multimedia sin el uso de plugins

Page 25: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML 3.2

Layout basado en tablas

<table>

</table>

<td colspan=“3”3></td>

<td></td> <td></td> <td></td>

<td colspan=“3”3></td>

<table>3</table>

Page 26: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML 4.01

Layout basado en divs

Page 27: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML 5

Tags con mas semántica

Page 28: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML 5

Ya el objetivo no es (solo) mostrar hiper-textos;

el objetivo es permitir la creación de experiencias e interfaces de usuario

La WHATWG trabajó en HTML5 para la creación de aplicaciones Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos

Page 29: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Fuentes para estilos

Reglas CSS (externas o internas)

Declaración en línea

Atributos visuales (HTML)

Page 30: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML + CSS

HTML: Elementos y distribución CSS: atributos visuales

Page 31: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML + CSS

<h1>From Garden to Plate</h1><p>A <i>potager</i> is a French term for

an ornamental vegetable or kitchengarden...</p>

<h2>What to Plant</h2><p>Plants are chosen as much for their

functionality as for their color andform...</p>

Page 32: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML + CSS

Page 33: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML + CSS

body {font-family: Arial, Verdana, sans-serif;}

h1, h2 {color: #ee3e80;}

p {color: #665544;}

Page 34: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

HTML + CSS

Page 35: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Fuentes para estilos

<html><head><title>Using External CSS</title><link href="css/styles.css"

type="text/css"rel="stylesheet">

</head><body><h1>Potatoes</h1><p>There are dozens of...</p>

</body></html>

Page 36: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Fuentes para estilos

<html><head><title>Using External CSS</title><link href="css/styles.css"

type="text/css"rel="stylesheet">

</head><body><h1>Potatoes</h1><p>There are dozens of...</p>

</body></html>

Page 37: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Fuentes para estilos

<html><head><title>Using External CSS</title><link href="css/styles.css"

type="text/css"rel="stylesheet">

</head><body><h1>Potatoes</h1><p>There are dozens of...</p></body></html>

Page 38: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Fuentes para estilos

<head><title>Using Internal CSS</title><style type="text/css">

body {font-family: arial;background-color: #rgb(185,179,175);}h1 {color: rgb(255,255,255);}

</style></head>

Page 39: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Reglas y selectores

Page 40: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Reglas y selectores

Regla CSS

Page 41: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Reglas y selectores

Selector

Propiedad

Value

Page 42: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Selectores

Selector por nombre (tag)

Selector por id

Selector por clase

Combinado

Ejemplos tomados de http://www.w3schools.com/css/css_syntax.asp

Page 43: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Selectores

Ejemplos tomados de http://www.w3schools.com/css/css_syntax.asp

Page 44: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Modelo de cajas

PaddingBorderMargin

Texto/ImágenesTransparente

Transparente

Contenido

Page 45: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Modelo de cajas

Cuál es es ancho final del div ?

Page 46: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Modelo de cajas

Cuál es es ancho final del div ?

32010 10 550 0

350

Page 47: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: La propiedad display

- Los elementos visuales HTML en el árbol render son un área rectangular

- El flujo del layout depende de la propiedad display que se puede controlar con CSS

Page 48: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: La propiedad display

block

block

block

- Cada elemento tiene su propio rectángulo (bloque)

- Los bloques se organizan de forma vertical

Page 49: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: La propiedad display

inline

- Los elementos de tipo inline se organizan horizontalmente dentro de un bloque contenedor

- El alto del bloque es el mismo del elemento inline mas alto - Los elementos se organizan en mas de una fila cuando el

ancho no es suficiente

inline inline

Page 50: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: La propiedad display

Page 51: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: La propiedad display

Page 52: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: La propiedad display

Page 53: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: La propiedad display

Bloques Tipo inline

<div> <h1> - <h6> <p> <form> <header> <footer> <section>

<span> <a> <img> <li>

Page 54: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: La propiedad position

Absoluto - El elemento se excluye del flujo normal

- La posición es absoluta, pero relativa al contenedor

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

Page 55: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Fijo - El elemento se excluye del flujo normal

- La posición es absoluta, pero relativa al viewport

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

CSS: La propiedad position

Page 56: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Relativo - La posición es relativa a su posición normal, es decir los atributos de posición, mueven el elemento usando como referencia la posición normal

CSS: La propiedad position

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative

Page 57: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

CSS: La propiedad position

Page 58: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Plantillas

http://www.w3schools.com/css/css_rwd_templates.asp

Page 59: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Frameworks

http://getbootstrap.com/

Page 60: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Frameworks

http://foundation.zurb.com/

Page 61: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Herramientas para validación

http://validator.w3.org/

Page 62: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Herramientas para validación

http://validator.w3.org/

Page 63: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Problemas con navegadores

La existencia de multiples estándares y multiples proveedores de navegadores

ha generado problemas de compatibilidad

HTML 3.2 surgió para evitar versiones propietarias de HTML

Recientemente, El WHATWG ha trabajado con los diferentes proveedores para mantener un comportamiento

consistente en HTML5

Page 64: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Problemas con navegadores

Page 65: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Pruebas de compatibilidad

Page 66: HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

Pruebas de compatibilidad

Ghostlab: BrowserStack: SuaceLabs: CrossBrowserTesting: MogoTest: Litmus: TestingBot: Spoon:

BrowserShots: Browsera: IE Net Renderer:

http://vanamco.com/ghostlab/ http://www.browserstack.com/ https://saucelabs.com/home http://crossbrowsertesting.com/ http://mogotest.com/ http://litmus.com/page-tests http://testingbot.com/ http://spoon.net/browsers/

http://browsershots.org/ http://www.browsera.com/ http://netrenderer.com/