Web

<!
DOCTYPE html PUBLIC -//W3C//

DTD XHTML 1.0 Strict//EN http://
www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd>
<html xmlns=http://www.
w3.org/1999/xhtml xml:lang=es
lang=es>
<head prole=http://gmpg.org/
xfn/11>
<meta http-equiv=Content-
Type content=text/html;
charset=UTF-8 />
<link rel=stylesheet type=text/
css media=all href=http://inedi.
es/wp-content/themes/inedi/css/
reset+grid.css />
<link rel=stylesheet type=text/
css media=all href=http://inedi.
es/wp-content/themes/inedi/css/
style.css />
<style type=text/css>
ul.tipos li { padding-bottom:5px;
list-style:disc; list-style-
position:inside;}
h5 {padding: 3px 0px;}
a:hover { color: #f07882;}
</style>
<link rel=shortcut icon
href=http://inedi.es/wp-content/
Web
ESTRUCTURAR LA WEB
- Qu informacin va a tener la web
- Jerarquizar la informacin segn las
necesidades
- Crear un ndice
- Simplicarlo y exiblilizarlo (opcin a
noticias o diferentes clasicaciones)
- Crear un mapa web con los enlaces a crear
Web Por dnde empiezo?
ESTRUCTURAR LA WEB
- Estructurar y construir de forma ordenada
(no estructuras labernticas).
- 2 clicks, excelente; 3, bueno; 4, mejor me voy
a tomar algo; 5, NO SE VE NADA!
- En el inicio debe aparecer toda la
informacin prioritaria.
- Considerar diferentes niveles de lectura y
puntos de mxima visibilidad. Solo lo muy
importante se destaca, el resto se diluye.
Web Por dnde empiezo?
BUSCAR VENTAJAS Y DESVENTAJAS
- Cmo presentan la informacin
- Qu es lo importante (noticias relevantes)
- Qu errores cometen (y porqu)
- Qu mejoras se pueden hacer
- Compararnos con la mejor opcin
Web Analizar la competencia
APRENDER DE OTRAS WEBS
- bestwebgallery.com
- thecssawards.com
- thebestdesigns.com
- 101bestwebsites.com
- www.best-of-web.net
- www.behance.net/?eld=102
- la competencia, entre otros
Web Ver diseos web
BASADO EN LA INFORMACIN A MOSTRAR
- Considera la resolucin de pantalla
(800600, 1024768 o mayores). Si no
tienes en cuenta resoluciones de navegador
inferiores puedes estar dejando de lado a un
porcentaje de usuarios nada despreciable.
- Utiliza el espacio disponible, pero se exible:
El uso de un tamao relativo (uido) en
determinadas secciones del diseo de tu
pginas web (por ejemplo en la zona principal
del contenido), de modo que se expanda y
contraiga para adaptarse a la ventana del
navegador, lo hace ms usable, mejorando la
experiencia del usuario.
Web Crear el layout
- Usa el color para denir los espacios.
- si diseas una pgina con anchos jos, centra
la web en la pantalla del navegador y mejora
as su presentacin.
- Alinea las imgenes / prrafos: resulta mucho
ms agradable verlas centradas con respecto
al texto.
- Proporcin de los grcos y texto en una
pgina. Hay que buscar un equilibrio en
cantidad.
Web Crear el layout
- Ancho del texto: cuntas palabras se
muestran como promedio en una lnea de
texto. La mayora de personas pueden leer
cmodamente alrededor de 7 a 11 palabras
en una lnea. No es recomendable centrar el
texto.
- Cuida la alineacin de cada parte de tu sitio.
La alineacin proporciona el marco estructural
de un diseo web. La alineacin puede afectar
a la experiencia del navegante en tu web y
a la efectividad de la misma en lograr sus
objetivos.
Web Crear el layout
ancho: 950px
margen: 30px
m
a
r
g
e
n
:

c
e
n
t
r
a
d
o
men
margen: 30px
destacado
margen: 30px
destacado1 destacado2 destacado3 destacado4
alto: 630px
Web Crear el layout
1. Considerar al cliente, la competencia y la compaa.
2. Buscar la diferenciacin.
3. Lograr la compatibilidad mensaje / imagen.
4. Evitar la saturacin.
Excesivo movimiento distrae.
Qu vendes? informacin o imgenes?.
Menos es ms.
5. Tomar una decisin racional.
Tipografa.
Imgenes.
Posicin.
6. Sentir una decisin emocional.
7. Usar la ltima tecnologa (HTML, CSS, JAVASCRIPT, JQUERY, PHP).
8. Recopilar toda la informacin necesaria.
Web Disear la web
body {
font-size: 12px; }
h1 {
font-size: 2em;
border:solid #000000 1px; }
h2 {
font-size: 1.5em;
#dos {
font-size: .8em; }
.uno {
background-color:yellow; }
table, th, td {
table {
width: 100%; }
th {
width: 70%; }
td {
width: 30%; }
.dos {
width: 40%; }
.tres {
width: 60%; }
<body>
<table class=uno> <tr> <th>
<h1>Titular 1</h1>
<p>Rem eum dolenim aug iam, quam zzrilit
iustrud tin venim nosto comm oless.</p>
</th> <td>
<h2>Titular 2</h2>
<p id=dos>Un prrafo de texto. Nnon secte
magnis exer sim vull utpat utet ad dolore tio od
do odol ore diam ipit nim ve.</p>
</td> </tr> </table>
<br/><br/>
<table> <tr> <th class=dos>
<h1>Titular 1</h1>
<p>Rem eum dolenim aug iam, quam zzrilit
iustrud tin venim nosto comm ole.</p>
</th> <td class=tres>
<h2>Titular 2</h2>
<p id=dos>Un prrafo de texto. Nnon secte
magnis exer sim vull utpat utet ad dolore tio od
do odol ore diam ipit nim ven.</p>
</td> </tr> </table>
</body>
Web Disear la web
Web Hot Spots
* Dark Orange represents the hottest area of a
webpage.
* Orange shows the areas next in importance for
visitors.
* Yellow identies areas of moderate interest.
* White shows areas with little or no activity.
* Grey are the neutral areas.
Web Googles heatmap (anuncios)
- Medidas en pixeles
- Ancho es importante
- Colores RGB
- Efectos y calidad
de imagen a 72 ppp
Web Recomendaciones (Illustrator y Photoshop)
- Nmeros enteros
- Visualizacin al 100%
- Capas para cada seccin
- Crear un layout genrico
- Considerar que la
informacin probablemente
ocupe ms espacio que el
asignado (textos)
- Denir mismos tamaos
para fotos
- Herramienta sector:
permite seccionar nuestro
layout en pedazos que
luego se pueden salvar como
imgenes separadas
- Panel transformar:
siempre nmeros enteros,
sirve para ver medidas exactas
- Guardar para web:
optimiza las imgenes para su
funcionamiento en internet:
ajusta la calidad
no incluye informacin no necesaria
no hace un preview de la imagen
- jpeg:
millones de colores
control de la calidad de la imagen
imagen no transparente
- gif:
256 colores
control de la paleta de colores
imagen transparente
baja calidad en degradados
- png-24:
millones de colores
calidad de la imagen no controlable
imagen transparente
no compatible con IExplorer
- png-8:
paleta de color menor
imagen transparente
compatible con IExplorer

Web

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web

Enviado por

Direitos autorais:

Formatos disponíveis

<!

DOCTYPE html PUBLIC -//W3C//

Você também pode gostar