MAD 2010-2011 · Diseño web

MAD 2010-2011 · Diseño web
1. Estándares HTML + CSS
Estándares
W3C - WWW Consortium - www.w3c.org
XHTML 1.0
CSS 2
.html
.css
contenido + estructura
apariencia
En fase de desarrollo: HTML 5 y CSS3
Accesibilidad
Accesibilidad
Accesibilidad
LEY 11/2007, de 22 de junio, de acceso electrónico de los ciudadanos a los
Servicios Públicos.
“La publicación en las sedes electrónicas de informaciones, servicios y
transacciones respetará los principios de accesibilidad y usabilidad de acuerdo
con las normas establecidas al respecto, estándares abiertos y, en su caso,
aquellos otros que sean de uso generalizado por los ciudadanos.”
Ejemplo:
http://www.intercat.cat
Referencias:
http://www.sidar.org
http://www.tawdis.net
2. Especificidades
Sistema aditivo
RGB
Sistema hexadecimal
Valor
Ejemplo valores
Sistema hexadecimal
R
0-255
255
FF
G
0-255
153
99
B
0-255
51
33
#FF9933
Sistema hexadecimal
#FF0000
#FF9933
#FFFFFF
#00FF00
#669900
#6B6B6B
#0000FF
#0099FF
#000000
Medidas
Absolutas
Relativas
px (pixel)
% (porcentaje)
em (medida fuente actual)
Tipografía: Windows
Sistema
Aharoni Bold
Andalus
Angsana New
AngsanaUPC
Arial
Arial Black
Browallia New
Comic Sans MS
Cordia New
CordiaUPC
Courier New
David
David Bold
David Transparent
DilleniaUPC
Estrangelo Edessa
EucrosiaUPC
Fixed Miriam Transparent
Franklin Gothic Medium
FrankRuehl
FreesiaUPC
Gautami
Georgia
Impact
IrisUPC
JasmineUPC
KodchiangUPC
Latha
Levenim MT
Levenim MT Bold
LilyUPC
Lucida Console
Lucida Sans Unicode
Mangal
Marlett
Microsoft Sans Serif
Miriam
Miriam Fixed
Miriam Transparent
MV Boli
Narkisim
Palatino Linotype
Raavi
Rod
Shruti
Simplified Arabic
Sylfaen
Symbol
Tahoma
Times New Roman
Traditional Arabic
Trebuchet MS
Tunga
Verdana
Webdings
Wingdings
SimHei
FangSong_GB2312
DFKai-SB
KaiTi_GB2312
MS Gothic
MS Mincho
Gulim
Mingliu
Simsun
Batang
Tipografía: Windows Vista
Tipografía: Windows 7
http://www.microsoft.com/typography/fonts/product.aspx?PID=161
Tipografía: Mac Os
AmericanTypewriter.dfont
Andale Mono
Apple Chancery.dfont
Apple Symbols.ttf
Arial
Arial Black
Arial Narrow
Arial Rounded Bold
Baskerville.dfont
BigCaslon.dfont
Brush Script
Chalkboard.ttf
ChalkboardBold.ttf
Cochin.dfont
Comic Sans MS
Copperplate.dfont
Courier New
Didot.dfont
Futura.dfont
Georgia
GillSans.dfont
HelveticaNeue.dfont
Herculanum.dfont
Hoefler Text.dfont
Impact
Kai.dfont (Simplified Chinese)
MarkerFelt.dfont
Optima.dfont
Papyrus.dfont
Skia.dfont
Times New Roman
Trebuchet MS
Verdana
Webdings
Zapfino.dfont
http://support.apple.com/kb/HT1538
Tipografía: Core Fonts
Tipografía: CSS
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
Tipografía: CSS 3
@font-face {
font-family: 'Cantarell Regular';
src: url('fonts/Cantarell-Regular.eot');
src: local('fonts/Cantarell Regular'), local('fonts/CantarellRegular'), url('fonts/Cantarell-Regular.woff') format('woff'),
url('fonts/Cantarell-Regular.ttf') format('truetype'), url('fonts/
Cantarell-Regular.svg#Cantarell-Regular') format('svg');
}
font-family: "Cantarell Regular", Arial, Helvetica, sans-serif;
Antialias
Texto en imagen (bitmap)
Texto en flash (sIFR)
Formatos de imagen
JPG
GIF
PNG
Imágenes mucho color
Fotografías
Compresión con pérdida
Color indexado (256: pocos y planos)
Logotipos, iconos, tipografía...
Transparencia. Animación.
8 bits: similar a GIF
24/32 bits: similar a JPG
Transparencia. Sin pérdida.
Estadísticas: resolución de pantalla
1024x768
1280x1024
1280x800
1440x900
1680x1050
1920x1200
1366x768
1920x1080
1152x864
1600x1200
1280x768
800x600
20%
18.2 %
17.3 %
10.5 %
10.0 %
4.6 %
3.6 %
2.3 %
2.1 %
1.4 %
1.2 %
1%
datos: enero de 2010
http://www.w3schools.com/browsers/browsers_stats.asp
resolución de pantalla
480 x 320 px
1024 x 600 px
320 x 240 px
1024 x 768 px
Navegación
Global
Navegación
Global
Local
Navegación
Global
Local
Contextual
Navegación
Global
Breadcrumbs
Local
Contextual
Navegación
Global
Breadcrumbs
Local
Contextual
Relacionada
Estándares
Logo
(link a home)
Estándares
Logo
(link a home)
tagline
Estándares
Logo
(link a home)
tagline
buscador / idiomas / register - login