Diseño Web con HTML y CSS.pdf

7/21/2019 Diseo Web con HTML y CSS.pdf

1/196


2/196

CONCTESE CON LOS MEJORESLIBROS DE COMPUTACIN

>>INTERNET / HOME>>352 PGINAS>>ISBN 978-987-1773-18-3

>>INTERNET / HOME>>352 PGINAS>>ISBN 978-987-1347-96-4

>>DESARROLLO>>320 PGINAS>>ISBN 978-987-1773-79-4

>>PHP / INTERNET>>368 PGINAS>>ISBN 978-987-663-039-9

> INTERNET> 352 PGIN> SBN 78-

INTERNET>> 352 PGIN>> SBN 978-

> DESARROL> 320 PGIN> ISBN 978-

> PHP / INTE>> 368 PGIN>> ISBN 978-

GUA PRCTICAPARA LA CREACINDE BLOGSPROFESIONALES

CREACIN,EXPANSIN YMONETIZACIN DEBLOGS ATRACTIVOS

ENTIENDAEL CAMBIO,APROVECHE SUPOTENCIAL

APRENDA A CREARSITIOS DINMICOSCON EL LENGUAJEMS ROBUSTO

MS INFORMACIN / CONTCTENOS
mailto:[email protected]://usershop.redusers.com/


3/196

Diseo Web con

HTML&CSS

Creacin de sitios atractivosy profesionales


4/196

TTULO:Diseo web con HTML y CSS

COLECCIN:Desde Cero

FORMATO:15 x 19 cm

PGINAS:192

Diseo web con HTML y CSS / coordinado por Gustavo Carballeiro. -1a ed. - Buenos Aires : Fox Andina; Dalaga, 2012.

v. 26, 192 p. ; 19x15 cm. - (Desde cero)

ISBN 978-987-1857-66-1

1. Informtica. I. Carballeiro, Gustavo, coord.

CDD 005.3

Copyright MMXII. Es una publicacin de Fox Andina en coedicin con DALAGA S.A.

Hecho el depsito que marca la ley 11.723. Todos los derechos reservados. Esta pu-

blicacin no puede ser reproducida ni en todo ni en parte, por ningn medio actual o

futuro sin el permiso previo y por escrito de Fox Andina S.A. Su infraccin est penada por

las leyes 11.723 y 25.446. La editorial no asume responsabilidad alguna por cualquier

consecuencia derivada de la fabricacin, funcionamiento y/o utilizacin de los servicios y

productos que se describen y/o analizan. Todas las marcas mencionadas en este libro son

propiedad exclusiva de sus respectivos dueos. Impreso en Argentina. Libro de edicin

argentina. Primera impresin realizada en Sevagraf, Costa Rica 5226, Grand Bourg,

Malvinas Argentinas, Pcia. de Buenos Aires en VIII, de MMXII.

ISBN 978-987-1857-66-1


5/196

Prlo

Prlogo

al contenido

A medida que Internet creci, los usuarios se fueron

convirtiendo en expertos navegantes que comenza-

ron a demandar cada vez una mayor cantidad de so-

luciones basadas en la Web.

Estos requerimientos de los internautas generaron

oportunidades de trabajo que fueron aprovechadas,

en un comienzo, solo por profesionales con estu-

dios relacionados con la programacin. Sin embar-

go, cuando la apariencia de los sitios cobr casi tan-

ta importancia como su funcionalidad, esos tcnicos

se quedaron sin respuestas para dar a los clientes, y

entonces recurrieron a los diseadores grcos.

Las herramientas de desarrollo y de diseo crecieron

hasta permitir la creacin de sitios con amplias fun-

cionalidades, y con aspecto sobresaliente y llamativo

para los navegantes.

En este nuevo mundo, podremos crecer profesion

mente sin realizar ms inversin que la de nuest

capital intelectual. Para eso, deberemos adquirir l

conocimientos tcnicos que se convertirn en un n

gocio rentable cuando les sumemos una cuota

nuestra propia creatividad y buenas ideas.

A pesar de esta evolucin, sin dudas, la base en to

diseo web hace referencia al conocimiento y man

jo de HTML. En este sentido, esta obra permite a

quirir todos esos conocimientos, ya que propone

aprendizaje guiado a travs de los distintos conce

tos y prcticas que debemos manejar para convert

nos en expertos en HTML.

Comencemos, entonces, el fascinante recorrido h

cia el xito en el desarrollo de sitios profesionale

suerte en el camino.


6/196

El libro de un vistazo

Esta obra rene todos los conocimientos tericos y prcticos necesarios para apoyar la tarea de creacin de si-

tios web. Revisaremos en profundidad el uso y el potencial de HTML y CSS, aprendiendo su manejo en diver-

sas situaciones prcticas.

CAPTULO 1PRIMEROS PASOS

Aqu repasaremos las caractersticas principales del

diseo web, conoceremos su historia y evolucin, as

como tambin, la estructura bsica de un sitio y al-

gunos consejos que debemos tener en cuenta para

que nuestras creaciones sean exitosas.

CAPTULO 2DEL DISEO AL HTML

Este captulo nos acompaar a travs de la imple-

mentacin de la estructura HTML que necesitamos

para plasmar una idea de diseo. Conoceremos las

herramientas que intervienen en este proceso y crea-

remos nuestro primer documento HTML.

CAPTULO 3ESTRUCTURA DEL SITIO

Esta seccin nos introducir en los conceptos bsi-

cos y avanzados relacionados con la estructura de

un sitio web. Revisaremos las tendencias en diseo

web, incorporaremos bordes y armaremos la estruc-

tura de un sitio.

CAPTULO 4TEXTOS

En esta etapa profundizaremos en los conceptos re-

lacionados con la incorporacin de textos en la es-

tructura de un sitio web. Aprenderemos a crear t-

tulos, y nos familiarizaremos con los prrafos y el

marcado bsico. Tambin daremos los primeros pa-

sos en la aplicacin de estilos CSS.

CAPTULO 5IMAGENEl uso de imgenes es fundamental para lograr que

un sitio web sea atractivo. En este captulo conocere-

mos los detalles necesarios para trabajar con las pro-

piedades de imagen, realizar mapas de imgenes y

optimizarlas para usar en la Web.

Preliminares

4


7/196

CAPTULO 7

LISTASEn este captulo podremos conocer y aprender a ulizar las listas, veremos ejemplos de uso y aprend

remos a generarlas. Conoceremos el procedimien

adecuado para personalizar listas con CSS y crear

mos mens de navegacin.

CAPTULO 8FORMULARIOSLos formularios son importantes para establec

contacto con nuestros visitantes. Por eso, en este c

ptulo conoceremos los detalles en torno a su cre

cin y uso. Adems, nos dedicaremos a crear un fo

mulario completo utilizando el lenguaje PHP.

CAPTULO 6

ENLACESLos enlaces sern analizados en detalle a lo largo deeste captulo. Conoceremos su denicin y clasica-

cin, as como tambin aprenderemos a crear enla-

ces dentro de la herramienta que usamos para dise-

ar el sitio web.

El libro de un vista


8/196

6

Prlogo al contenido 003

El libro de un vistazo 004Introduccin 010

CAPTULO 1PRIMEROS PASOS 011

El diseador web 012

Las herramientas de trabajo 012

Las habilidades del diseador 013

Tareas del diseador 013

Evolucin del diseo web 014

Un recorrido por la

historia del diseo web 014

Primeros pasos 015

Creacin del Word Wide

Web Consortium (W3C) 016

Iconos, botones y banners 016

La irrupcin de Flash 018

El diseo web actual 018

Tipologa de los sitios web 020

Sitios dinmicos 020

Aplicaciones web 021

Intercambio y alojamiento

de archivos 022

Sitios estticos 022

Tecnologas de los sitios web 023Lenguajes de ejecucin

del lado del usuario 023

Almacenamiento de datos 025

Lenguajes de ejecucin

del lado del servidor 025

Aplicacin de estas tecnologas 026

La estructura de las pginas 026

La forma de navegacin 026

Qu es la estructura? 028

Encabezado o header 028

Contenido 031

Barra lateral o sidebar 032

Pie de pgina o footer 032

Multiple choice 034

CAPTULO 2DEL DISEO AL HTML 035

Herramientas para desarrollar HTML 36

Herramientas para generar

cdigo HTML y CSS 36

Notepad++ 36

TopStyle Pro 37

Por qu Dreamweaver? 38

Adobe Dreamweaver CS5 38

El rea de trabajo 39

Nuevas caractersticas 40

Prestar atencin al cdigo 41

Qu es HTML? 41

XHTML 42

Diferencias entre HTML y XHTML 43

Benecios de XHTML 43

Estructura bsica de una pgina 44

El head 44El body 45

Etiquetas y atributos: denicin 46

Denir las etiquetas 46

Los atributos 46

Elementos HTML 47

Un repaso por los principales elementos 47

Contenido del libro

Preliminares


9/196

Clasicacin de elementos 47

Tipos de elementos 48

Primer documento HTML

en Dreamweaver 49Atributos 53

Los cuatro grupos de atributos 53

Los atributos ms frecuentes: bsicos 53

Los atributos de idioma 54

Los atributos dinmicos 54

Los atributos de seleccin 55

Primeras etiquetas HTML 56

Multiple choice 60

CAPTULO 3ESTRUCTURA DEL SITIO 061

Tendencias en el diseo de fondos 062

Relacin del fondo con los elementos 064

Propiedades y aplicacin de fondos 066

Background-color 066

Background-image 066

Background-repeat 067

Background-attachment 068

Background-position 069

El background de un sitio 069

Bordes (CSS) 073

Ancho de bordes 073

Color de los bordes 074Estilo de los bordes 075

Tableless 077

Por qu dejamos de lado las tablas? 077

Tableless 078

Posicionamiento de elementos 079

Posicionamiento normal o esttico 080

Contenido del lib

Posicionamiento relativo 081

Posicionamiento absoluto 082

Posicionamiento jo 083

Posicionamiento otante 083

Comportamiento de las cajas otantes 084

Clearx 085

Multiple choice 086

CAPTULO 4TEXTOS 087

Texto: prrafos y ttulos 088

Estructuracin del texto 088

Prrafos 088

Ttulos 089

Espacios en blanco y saltos de lnea 090

Espacios 091

Marcado bsico

y caracteres especiales 092

Etiqueta 092


10/196

Optimizacin de imgenes

para la Web 111

JPG vs. GIF 111

Propiedades de las imgenesen CSS 112

Propiedades CSS 112

CSS sprites 114

Qu son los sprites de imgenes? 114

Cmo se utilizan

los sprites de imgenes? 115

Ventajas de esta tcnica 115

Mapa de imgenes 117

Multiple choice 120

CAPTULO 6ENLACES 121

Enlaces o hipertextos 122

Origen del concepto de hipertexto 122

Enlaces bsicos 123

Enlaces relativos y absolutos 125

Enlaces en Dreamweaver 127

Unidades de medida 131

Unidades relativas 131

Porcentajes 133

Unidades absolutas 134

Recomendaciones 135

Propiedades de tamao 135Ancho (width) 135

Alto (height) 135

Layout lquidos 137

Enlaces bsicos y avanzados 138

Propiedades en los estados del enlace 139

Multiple choice 140

Etiqueta 092

Etiquetas y 093

Etiquetas 094

Codicacin de caracteres 095

CSS (Cascading Style Sheets) 097

Cmo aplicar CSS a nuestras pginas? 098

Sintaxis de atributos

y propiedades en CSS 100

Selectores 100

Selector universal 100

Selector de tipo o etiqueta 101

Selector descendente 102

Selector de clase 102

Selector de ID 103

Multiple choice 104

CAPTULO 5IMAGEN 105

Imgenes en HTML 106

Atributos obligatorios

de la etiqueta 106

Atributos opcionales 107

Tipos de imgenes 109

GIF 109

JPG 110

PNG 110

8

Preliminares


11/196

CAPTULO 7LISTAS 141

Listas: denicin 142Tres motivos para utilizar listas 143

Listas ordenadas y no ordenadas 144

Listas ordenadas 145

Listas no ordenadas 146

Listas anidadas 147

Dnde utilizamos listas? 148

Listas estndar 148

Listas con imgenes 148

Listas en men de navegacin 151

Personalizar listas 152

Creacin de mens de navegacin 155

Creacin de un men

de navegacin vertical 156

Creacin de un men

de navegacin horizontal 157

Crear un men de navegacin 158

Multiple choice 164

CAPTULO 8FORMULARIOS 165

Formularios 166

Captcha 168

Composicin de un formulario 168XForm 169

El cliente y el servidor 169

Elementos de los formularios 169

Etiqueta input 171

Texto oculto 172

Etiqueta radio o botn radio 172

Checkbox o caja

de seleccin o validacin 173

Botn Submit o

de envo de formulario 174

Botn Reset o

de borrado de formulario 174

Botn File o de archivos adjuntos 174

Campo hidden o datos ocultos 174

Botn Image 175

Type Button o botn comn 175

Etiqueta para texto largo 175

Lista de opciones 176

Bloques de elementos 177

Etiquetas Fieldset y Legend 177

Etiqueta label 178

Introduccin a PHP 178

Lenguajes de servidor 179

Lenguajes de cliente 179

Proceso de ejecucin en PHP 179

Variables 181

Variables denidas 181

Estructuras de control 182

Includes 182

Vectores 183

Funciones 183

Variables entre pginas 184

Concatenar 185

Multiple choice 186

SERVICIOSAL LECTOR 187

ndice temtico 18

Catlogo 19

Contenido del lib


12/196

10

Preliminares

10

Como sabemos, la era digital gener nuevas y fas-

cinantes oportunidades de trabajo. Esta obra es la

puerta de acceso a una de las reas que ms posibi-

lidades y satisfacciones brindan en el mbito web: el

desarrollo de sitios. En este libro, los mejores conse-

jos y contenidos son expuestos al lector, junto a los

fundamentos de este arte y, al mismo tiempo, todos

los secretos para que triunfemos ante cualquier de-

safo que nos toque encarar, convirtindonos en ex-

celentes profesionales de la Web.

A travs de cada uno de sus captulos, podremos co-

nocer y dominar HTML, as como tambin las princi-

pales tecnologas relacionadas. En sus pginas en-

contraremos un recorrido por todos los elementos

tericos fundamentales en esta profesin y veremos

la forma de llevar estos conceptos a la prctica ayu-

dados por detalladas explicaciones paso a paso.

Sin dudas, este aprendizaje sentar bases slidas, y

nos llevar a disear y desarrollar sitios web profe-

sionales que resalten nuestro trabajo.

Los contenidos expuestos en esta obra estn dirig

dos a todos aquellos que quieran desarrollar sitio

incluso a quienes no cuentan con educacin form

previa en la materia.

Por un lado, los desarrolladores web aumentarn

oferta de servicios, y se convertirn en profesion

les con conocimientos avanzados de HTML. Por ot

parte, los estudiantes de Diseo Grco sern tr

bajadores mucho ms completos cuando nalic

sus estudios, ya que lograrn implementar sitios c

buen diseo, alta funcionalidad y cdigos optimiz

dos. Finalmente, los acionados a la Web tendrn

posibilidad de participar en ella de forma activa m

diante la creacin de sus propios sitios, y sern cap

ces de disearlos tambin para terceros, con lo cu

transformarn el objeto de su devocin en una tar

rentable y productiva.

En suma, el material que tienen delante de usted

es una obra imperdible para todo tipo de usuario

quedan en buenas manos.

Introduccin a

Diseo web con HTML y CSS


13/196

Captulo 1

Aqu analizaremos los primeros pasospara iniciarnos en el desarrollo de sitiosweb utilizando HTML.

Primeros pasos


14/196

12

1. Primeros pasos

El diseador web

Actualmente, es imposible referirse a un solo tipo de

perl de diseador web, y mucho menos, a un solo

tipo de persona. La creacin de sitios web se ha con-

vertido en una disciplina en la que se plantean pro-

yectos que requieren de una conjuncin de conoci-

mientos tcnicos(como lenguajes de programacin

y servidores, entre otros), conceptuales(usabilidad y

accesibilidad, entre otros) y tambin estticos(como

percepcin y legibilidad).

Atrs qued la poca en la que para realizar un sitio

web completo alcanzaba con tener un mnimo co-

nocimiento de HTML y del tratamiento de imgenes.

Ahora es importante que un diseador sepa cmo

planicar un sitio web y que tenga presentes los as-

pectos tcnicos de diagramacin y de estructura al

momento de ponerse a disear.

LAS HERRAMIENTAS DE TRABAJOPara realizar su trabajo, un profesional del diseo yel desarrollo de sitios web necesita contar con herra-

mientas de software, que debe utilizar con criterio

para sacar el mximo provecho de ellas, adems de

conocer los fundamentos de su tarea.

Debe ser un usuario intermedio de PC o Mac, utili-

zar los navegadores web y el correo electrnico, y es-

tar al tanto de la existencia y el funcionamiento de

las redes sociales.

Si bien existen muchas herramientas de diseo en el

mercado, lo cierto es que hay un estndar bien de-

nido de lo que se usa. Basta con echar una mirada

a las solicitudes de trabajo que aparecen en los me-

dios para saber qu es lo que se pretende hoy en da

de un diseador web.

Un diseador web tiene que saber HTML y CSS, y

tiene que trabajar con Dreamweaver para armar

los sitios en forma correcta. Debe utilizar las herra-

mientas principales de diseo, como Photoshop,

Illustrator y Fireworks, que permiten trabajar en

forma profesional y con la mejor calidad. Adems,

resultan importantes los conocimientos de diseo y

animacin con Flash, as como tambin la programa-

cin en ActionScript 3.

FIGURA 1.La suite de programas ms famosos

para disear sitios, Adobe CS5, est disponible

para Windows y para Mac OSX.


15/196

LAS HABILIDADES DEL DISEADORAunque es posible decir que un buen diseador web

es aquel que sabe utilizar las herramientas con las

que desarrolla sus proyectos, este es solo un aspecto

tcnico que no resulta fundamental para tener xi-

to. La buena fortuna de un diseador web depen-

de, en gran medida, de sus conocimientos estticos

y conceptuales.

Tambin tiene que estar inmerso en el mundo virtual

de Internet, y conocer las ltimas tendencias y tec-

nologas aunque no las aplique por s mismo, ya que

as podr comunicarse para solicitar su implementa-

cin e interactuar con otros profesionales.

Como vemos, la tarea ms difcil de un buen dise-

ador web no radica en aprender a utilizar una apli-

cacin, sino en saber utilizarla con criterio y estar al

tanto de todo lo que inuye en su medio de traba-

jo, como la aparicin de nuevas tcnicas de diseo,

cambios en las tendencias y en los estilos, o nuevos

dispositivos y utilidades que simpliquen su trabajo.

En este sentido, debe saber utilizar los program

ms conocidos de diseo pero, sobre todo, saber d

terminar en qu momento conviene aplicar una

otra herramienta segn lo que requieran los proye

tos web en los que est involucrado.

TAREAS DEL DISEADORPara denir de forma ms clara el perl del dise

dor web, podemos realizar una divisin de sus tare

sobre la base de las diferentes etapas en las que

podra ver involucrado dentro de la realizacin de

proyecto web.

Si pensamos en la concepcin del diseo de un

tio, es inevitable que sea capaz de realizar un res

meno briefde trabajo en donde pueda determin

El xito de un diseadorweb depende de sus

conocimientos tcnicos,estticos y conceptuales.

FIGURA 2.Es muy

importante que visitemos

sitios donde encontremos

informacin sobre las ltimas

tendencias y novedades.

El diseador w


16/196

14

1. Primeros pasos

las necesidades estticas y tcnicas del proyecto, y

segn esto, comenzar a disear. En este momento,

ser preciso que disponga de herramientas para con-

feccionar el diseo. Si el sitio es HTML, puede traba-

jar con una aplicacin como Photoshop, Illustrator o

Fireworks, que ya mencionamos. En cambio, si el si-

tio es en Flash, deber determinar la mejor forma de

crear un diseo optimizado, utilizar las herramientas

grcas del programa y conocer su lenguaje de pro-

gramacin, ActionScript.

Para las etapas posteriores al diseo de los sitios, es

necesario que sepa maquetar en HTML y utilizar CSS,

y para estas tareas, Dreamweaver resulta una herra-

mienta esencial.

Por ltimo, es importante que tenga conocimien-

tos sobre la forma de alojar un sitio en un servidor,

ya sea por medio de Dreamweaver o mediante un

programa especial para FTP(File Transfer Protocol),

como, por ejemplo, FileZilla.

Un diseador necesita contar con muchos conoci-

mientos para poder crear un sitio de calidad. En esta

obra, veremos todas esas herramientas e, incluso,

obtendremos los mejores consejos que nos brinda la

experiencia de los expertos que investigaron y escri-

bieron sobre este tema.

Evolucin

del diseo web

Como usuarios de Internet, navegamos decenas

de sitios por da con el objetivo de revisar nuestro

correo, informarnos, compartir imgenes, comprar

productos, contar lo que estamos haciendo o, sim-

plemente, divertirnos. Hemos aprendido a utilizar

estos sitios casi sin darnos cuenta, haciendo uso

de interfaces que, en general, podemos entender y

dominar sin grandes dosis de esfuerzo o atencin.

Los elementos que hoy componen una pgina web

y su diseo han evolucionado a travs del tiempo.

En sus comienzos, surgieron gracias al uso de me-

tforas basadas en el cine, la televisin, los libros o

las galeras de arte, del mismo modo en que ante-

riormente los sistemas operativos tomaron la met-

fora del escritorio. El uso de estos recursos ayud

a los usuarios a familiarizarse con las funcionalida-

des de estos productos interactivos y marc el ini-

cio de una disciplina que, tiempo ms tarde, se con-

vertira en un trabajo interdisciplinario, frentico y

lleno de inventiva.

UN RECORRIDO POR LAHISTORIA DEL DISEO WEBEl diseo web comenz a dar sus primeros pasos en

la dcada del 90, y hoy, a casi 20 aos de su na-cimiento, podemos decir que es una disciplina que

ha tenido un crecimiento agitado, colmado de cam-

bios, posibilidades, bsquedas e innovaciones. Esta

metamorfosis fue la respuesta al ritmo vertiginoso

de las necesidades y las tendencias que fueron mos-

trando los usuarios de Internet y a la evolucin de


17/196

los factores tecnolgicos que atraves el medio web,

entre los que podemos mencionar los siguientes:

Avances en la velocidad y el tipo de conexin a

Internet.

Evolucin del hardware: monitores, tarjetas de vi-

deo y procesadores, entre otros componentes.

Crecimiento del software, principalmente, el que

entrega para su uso libre.

Estandarizacin de los lenguajes segn las normas

W3C (World Wide Web).

Masicacin en el uso de los buscadores.

Aparicin de herramientas y aplicaciones web que

ayudan a mejorar los procesos, los tiempos y la cali-

dad de produccin.

A partir de ahora, delinearemos los diferentes pero-

dos del diseo web y analizaremos algunos ejemplos

caractersticos de cada uno.

PRIMEROS PASOSEn 1991, Tim Berners-Lee public la primera pgi-na web. Su contenido estaba conformado nicamen-

te por textoe hipervnculosque hacan posible la

navegacin entre pginas. Esta era una pequea

ferencia sobre qu era la World Wide Weby qu

poda hacer en ella, y en menos de un ao, recib

dos millones de visitas.

FIGURA 3.La evolucin del hardware incide

en el avance de otras tecnologas. Un monito

monocromo no nos permite disfrutar de

imgenes, por ejemplo.

FIGURA 4.La primera pgina web, publicada en

1991 por Tim Berners-Lee, estaba compuesta sol

por texto e hipervnculos.

En esta primera etapa, el foco estaba puesto en

tarea de enviar o recibir datos. Las pginas solan s

hechas por programadores, y se caracterizaban p

tener una interfaz lineal y limitada. Su diseo esta

generalmente diagramado a una sola columna y

se observaba el uso de cuadrculas que ayudaran

organizar la informacin.

Evolucin del diseo w


18/196

16

1. Primeros pasos

El acceso a Internet se efectuaba, principalmente, a

travs de conexiones dial-up, con una velocidad de

navegacin muy lenta, factor limitante del peso que

podan tener los archivos. Por eso, las pginas de esa

poca contenan muy pocas imgenes, en general,

dispuestas en orden consecutivo.

CREACIN DEL WORD WIDEWEB CONSORTIUM (W3C)En 1994, el fsico ingls Tim Berners-Lee fund el

consorcio W3C, organismo destinado a establecer

reglas y pautas que ayudaran a unicar criterios y a

denir el futuro del diseo web.

En 1995 se public el estndar 2.0 de HTML

(HyperText Markup Language), que a pesar de

su nombre, es el primer estndar ocial de ese

lenguaje. Las primeras versiones de HTML solo per-

mitan dar a un texto el formato de encabezado, de

prrafo y de hipervnculo (mediante etiquetasbsi-

cas). En las versiones posteriores, se incorpor el uso

de imgenes y de tablas, y de la mano de estos avan-

ces, fueron apareciendo varios navegadores web.

ICONOS, BOTONES Y BANNERSEl perodo en el cual aparecieron estos elementos co-

menz alrededor del ao 1996, momento en el que

sucedieron varias cosas simultneamente; veamos:

Desarrollo de nuevos recursos grcos: ico-

nos que reemplazan palabras, banners que con-

forman cabeceras, botones con volumen que in-

vitan a la interactividad y fondos que invaden las

pginas. En el afn de experimentar y aprovechar

los nuevos recursos, los desarrolladores web, co-

nocidos en esa poca como webmasters, empe-

zaron a incluirlos de manera excesiva en sus di-

seos, lo que dio origen a pginas recargadas.

HTML

HTML (HyperText Markup Language) es el lenguaje bsico con el que se escribe la mayora de las

pginas web actuales. Est compuesto por etiquetas delimitadas por parntesis angulares (),

que se encargan de describir la estructura y el contenido.

FIGURA 5.Logo del W3C (www.w3c.org), que an hoy

es de gran importancia para el diseo web.

El diseo web seconvirti en un trabajo

interdisciplinario, frenticoy lleno de inventiva.
http://www.w3c.org/http://www.w3c.org/http://www.w3c.org/


19/196

Para ordenar la informacin, comenz a implemen-

tarse el uso de tablas, uno de los elementos ms po-

lmicos de HTML. Con este elemento, la diagrama-

cin de las pginas se enriqueci sobre las bases del

diseo editorial (libros y revistas) e hizo uso de m

tiples columnas. Aparecieron las primeras aplicac

nes web basadas en el uso de tablas para la creaci

de pginas, lo que foment la adopcin de la tcni

por parte de los diseadores. Si bien algunos des

rrolladores la siguen utilizando, se trata de una t

nica obsoleta y nada recomendable, concebida orig

nalmente para mostrar informacin tabular.

Esta tambin fue la era del spacer.gif, una im

gen transparente e invisible conformada por un px

cuadrado. Su uso gan popularidad rpidamente

permitir forzar y controlar los espacios vacos dent

de una tabla, necesarios para separar los contenido

En el terreno del hardware, se avanz en trmin

de resolucin y denicin del color, tanto en los m

nitores como en las tarjetas grcas. Esto trajo i

portantes mejoras en la calidad del diseo web.

Comenz a vislumbrarse lo que posteriormente

conocera como guerra de los navegadores, c

FIGURA 6.Pgina principal del buscador AltaVista,

lanzado en 1995. Fue el primero que permiti rea-

lizar bsquedas de texto sobre una base de datos.

Gracias a la denicin de estndares HTML, se die-

ron los primeros pasos hacia la escritura de cdigo

semntico, compuesto por etiquetas bien estructura-

das que describen el contenido.

CSS

Aunque lo conoceremos y utilizaremos ms adelante en esta obra, vale aclarar que CSS es el

lenguaje de hojas de estilo en cascada creado para controlar el aspecto visual de los documen-

tos HTML. Es la mejor forma de separar los contenidos y su presentacin.



20/196

18

1. Primeros pasos

las primeras diferencias en la adaptacin de los es-

tndares por parte de los dos principales browsers:

Internet Explorer y Netscape Navigator.

A nales de 1996, W3C public la primera reco-

mendacin ocial de CSS (Cascading Style Sheets),

conocida como CSS nivel 1, cuya adopcin formal se

produjo ms adelante.

LA IRRUPCIN DE FLASHUnos aos ms tarde, una aplicacin surgida con el

nombre FutureSplash Animator(hoy Adobe Flash)

gan popularidad entre los desarrolladores. Este

software, que naci con una interfaz sencilla com-

puesta por una lnea de tiempoy herramientas muy

bsicas, progres hasta convertirse en una aplica-

cin que permiti controlar el diseo y animar p-

ginas web sin las limitaciones del cdigo HTML de

la poca.

La versatilidad de Flashpermiti crear pginas do-

tadas de animacin e interactividad, gracias a la

edicin de fotogramasy a la manipulacin de ob-

jetos por separado. Hay quienes opinan que esta he-

rramienta contribuy a la evolucin del diseo web,

aunque muchos desarrolladores tambin sostienen

que su uso desmedido no hizo ms que degenerarlo.

En 1998 se public la segunda recomendacin o-

cial de CSS, conocida como CSS nivel 2. La versin

de CSS que utilizan los navegadores actuales es

CSS 2.1, una revisin de CSS 2 que an se est ela-

borando. La siguiente recomendacin de CSS, de-

nominada CSS nivel 3, contina en desarrollo des-

de 1998, y hasta el momento solo se han publicado

borradores.

EL DISEO WEB ACTUALA partir de la aparicin de nuevos navegadores, de

las mejoras en los existentes, de la evolucin en la

velocidad de las conexiones y del desarrollo de nue-

vos dispositivos de navegacin (celulares, PDA y con-

solas de juegos, entre otros), surgi una nueva gene-

racin de desarrolladores que deben tener en cuenta

FIGURA 7.Interfazde FutureSplash Animator

(el precursor de Flash),

utilizado para crear

animaciones sencillas

basadas en el uso de

vectores.


21/196

tanto las restricciones como las mltiples posibilida-

des existentes a la hora de crear sitios.

La necesidad de reproducir los contenidos en los

nuevos dispositivos y los avances constantes en los

estndares web produjeron un nuevo impulso de si-

tios basados en XHTML (HTML y XML) combina-

do con CSSpara separar cada vez ms el diseodel

contenido.

Por otro lado, la adopcin de JavaScript(un lengua-

je de programacin sencillo capaz de crear conteni-

dos interactivos) para la creacin de transicionesre-

leg el uso de Flash a sitios de animacin cada vez

ms especcos o al uso puntual de la tecnologa enelementos como reproductores de video o banners.

A lo largo de los aos, los webmasters fueron reem-

plazados por equipos interdisciplinarios de trabajo

compuestos por programadores, arquitectos de la in-

formacin, maquetadores y diseadores web. Todos

ellos construyen sitios basndose en las mejor

prcticas, que tambin evolucionan continuament

La colaboracin uida entre pares, el acceso a tecn

logas web de cdigo abierto (gestores de conte

dos), la disponibilidad de recursos grcos en lne

y la incorporacin de herramientas de testeo y

desarrollo modicaron el trabajo del diseador we

y elevaron a un nivel muy superior la calidad de l

productos nales.

FIGURA 8.Pgina principal

de uno de los sitios realizado

en Flash ms populares de l

poca: EYE4U.

En la actualidad, vemos

que el trabajo realizadopor el diseador webalcanz un nivel muyelevado y mejor la calidade los productos nales.



22/196

20

1. Primeros pasos

Tipologa

de los sitios web

Producto del avance tecnolgico y del creciente n-

mero de personas que acceden a Internet, aparecie-

ron variadas herramientas y servicios que es posible

utilizar online. Gracias a esto, muchos aspectos de

nuestra vida cotidiana se ven directamente inuen-

ciados por la proliferacin de los sistemas web, como

nuestros hbitos de compra, de pago de servicios o

de comunicacin, entre otros.

Para ofrecer estas utilidades, existen diversos tipos

de sitios, que conoceremos a continuacin.

SITIOS DINMICOSAunque podramos pensar que un sitio dinmico es

aquel que tiene animaciones o que es veloz en algn

aspecto, este concepto se reere al sitio en el que, al

hacer clic para acceder a una pgina, esta se arma

segn nuestro pedido. En los sitios estticos, en cam-

bio, las pginas estn armadas, esperando que al-

guien acceda a ellas.

El armado a pedidoes realizado por dos partes: el

motor de armado y la informacin con la que este

genera la pgina. El motor de armadoest creado

con un lenguaje de programacin, y la informacin

suele provenir de una base de datos. Las principales

ventajas de un sitio dinmico son la facilidad de ac-

tualizacin y carga de datos.

Encontramos sitios dinmicos en los casos que men-

cionamos a continuacin:

Foros: plataformas donde los usuarios escriben

consultas, comentarios y respuestas que son alma-

cenados en la base de datos.

Blogs y microblogs: sistemas que nos permiten

tener un espacio personal, a partir de una planti-

lla prediseada, en el que podemos compartir y co-

mentar informacin como msica (www.myspa-

ce.com), videos (www.youtube.com), imgenes

WORDPRESS

Dentro del listado de blogs y microblogs que analizamos, WordPress merece una mencin ex-

tra, ya que ofrece, en forma gratuita, los archivos fuente que conforman el blog para descargar,

instalar y personalizarlos completamente, y as utilizar el blog en cualquier dominio y hosting.
http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.youtube.com/http://www.youtube.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.youtube.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/


23/196

(www.fotolog.com y www.ickr.com), textos y

multimedia (www.blogspot.com y http://word-

press.com), y textos reducidos (http://twitter.com).

Wikis: plataformas de creacin de contenidos en

forma participativa, como la enciclopedia http://wi-

kipedia.org o http://commons.wikimedia.org, un

repositorio de archivos de uso gratuito.

Portales de noticias: sitios con contenidos gene-

rados, comnmente, por peridicos de edicin im-

presa. En este caso, los usuarios no pueden encar-

garse de editar los contenidos, pero s podrn dejar

comentarios en algunas noticias.

E-commerce: sitios como www.ticketek.com y

www.amazon.comofrecen entradas a espectculos

o productos como libros y pelculas en sus pginas,

donde el usuario puede elegir, entre otros detalles, la

cantidad y el tipo de artculo, la forma de envo y la

de pago, que suele ser mediante tarjeta de crdito.

Redes sociales: plataformas en las que podemos

generar un perl con datos personales, interese

profesin y educacin. A partir de l, es posible co

tactarnos con personas que tengan intereses simi

res o nuestra misma profesin, por ejemplo. Tambi

permiten agregar lbumes de fotos, videos, links

comentarios, estos ltimos, tanto en el perl prop

como en el de los contactos.

APLICACIONES WEBMuchos sitios ofrecen aplicaciones onlineen fo

ma gratuita, entre las que encontramos editores

texto, de sonido y de imgenes; planillas de clc

lo y agenda. La ltima tendencia es que las aplic

ciones no estn instaladas en nuestras comput

doras sino disponibles como un servicio online.

ejemplo ms referencial es Gmail.com, que ofre

muchos de estos servicios y, adems, permite pe

sonalizar colores, logos, fondos y la disposicin

las interfaces.

Tipologa de los sitios w
http://www.fotolog.comywww.flickr.com/http://www.fotolog.comywww.flickr.com/http://www.fotolog.comywww.flickr.com/http://www.fotolog.comywww.flickr.com/http://www.fotolog.comywww.flickr.com/http://word-press.com/http://word-press.com/http://word-press.com/http://word-press.com/http://word-press.com/http://word-press.com/http://word-press.com/http://twitter.com/http://twitter.com/http://wi-kipedia.org/http://wi-kipedia.org/http://wi-kipedia.org/http://wi-kipedia.org/http://commons.wikimedia.org/http://commons.wikimedia.org/http://wi-kipedia.org/http://www.ticketek.com/http://www.ticketek.com/http://www.amazon.com/http://www.amazon.com/http://www.amazon.com/http://www.ticketek.com/http://commons.wikimedia.org/http://wi-kipedia.org/http://wi-kipedia.org/http://wi-kipedia.org/http://twitter.com/http://word-press.com/http://word-press.com/http://word-press.com/http://www.blogspot.comy/http://www.fotolog.comywww.flickr.com/


24/196

22

1. Primeros pasos

INTERCAMBIO Y ALOJAMIENTODE ARCHIVOSLa calidad de las imgenes, los videos y el audio dis-

ponibles en las computadoras ha aumentado, lo que

provoca cambios en el modo de distribuir y trans-

ferir estos archivos, cada vez ms pesados. Sitios

como www.rapidshare.com, www.dropbox.com

o www.yousendit.com nos permiten almacenar y

enviar archivos de gran tamao.

SITIOS ESTTICOSSon sitios donde los usuarios no pueden crear ni edi-

tar los contenidos. Los casos ms comunes de este

tipo son los siguientes:

Sitios experimentales: en estos casos se busca

generar nuevas experiencias de navegacin para el

usuario, al producir interacciones no convencionales

(http://dontclick.it), recorridos 3D (www.vatican.

va/various/cappelle/sistina_vr/index.html) o na-

vegacin mediante la cmara web (www.davidlind-

seywade.com/#/portfolio/portfolio/19).

Newsletters y yers: son minisitios publicitarios

que estn alojados en un servidor y son enviados

por e-mail con el n de promover algn producto

o servicio.

FIGURA 9.En este portfolio de fotografas, podemos ir navegando de una imagen a otra interactuando con

la cmara web conectada a nuestra computadora.

Los avances de latecnologa generan

nuevos modos detransmitir archivos ynovedosos serviciospara los usuarios.
http://www.rapidshare.com/http://www.rapidshare.com/http://www.dropbox.com/http://www.dropbox.com/http://www.yousendit.com/http://www.yousendit.com/http://dontclick.it/http://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://dontclick.it/http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://dontclick.it/http://www.yousendit.com/http://www.dropbox.com/http://www.rapidshare.com/


25/196

Tecnologas

de los sitios web

Es habitual que a diario naveguemos por diversos

sitios para revisar nuestro correo electrnico, leer

las noticias, o hacer alguna compra o pago virtual.

A simple vista, todos los sitios que encontramos pa-

recieran estar hechos de la misma manera, aunque

si hacemos un anlisis en detalle, descubriremos

que en ellos intervienen diversas tecnologas que se

combinan de diferentes modos para lograr las fun-

cionalidades y prestaciones que brindan al usuario.

Conozcamos las principales.

LENGUAJES DE EJECUCINDEL LADO DEL USUARIOEn estos sitios, cuando el usuario accede a una p

gina, los archivos que la componen son descarg

dose interpretadosdirectamente por el navegad

(Firefox o Internet Explorer). Pueden estar cread

con las siguientes tecnologas:

HTML y XHTML: la mayora de los sitios por los q

navegamos se crean con estos lenguajes. Estas p

ginas se componen por una estructura de etiquet

que tienen signicados semnticos (ttulos impo

tantes, prrafos o imgenes) para que los buscad

res (como Google o Bing, por ejemplo) vinculen

HTML vs. XHTML

Aunque lo veremos en detalle ms adelante, la diferencia entre HTML y XHTML radica, funda-

mentalmente, en que el ltimo requiere una sintaxis ms estricta en comparacin con el prime-

ro, en el que pueden omitirse las etiquetas de cierre, por ejemplo, sin que esto provoque fallas.

FIGURA 1O.Aqu se ve el cdigo con el que est conformada parte de una pgina, con etiquetas que indica

ttulos principales, prrafos, links e imgenes.

Tecnologas de los sitios w


26/196

24

1. Primeros pasos

determinado texto existente en la pgina al signi-

cado semntico que le da la etiqueta que lo contiene.

JavaScript/AJAX: es un lenguaje de programacin

usado para generar interfaces de usuario mejora-

das, con ms interactividad. Las sentencias y fun-

ciones de este cdigo pueden estar en el mismo

archivo HTML o en un archivo externo.

AJAX es una tcnica que se usa vinculando

JavaScript a XML. JavaScript requiere la informa-

cin alojada en el servidor en formato XML para

generar cambios o agregar ms funcionalidades en

la pgina, sin interferir con su visualizacin ni

comportamiento.

Flash y ActionScript: Flash se asom al mundo de

Internet como un programa destinado a generar

vistosas animaciones vectoriales que se podran in-

corporar en las pginas. En su evolucin, desarro-

ll un potente leguaje de programacin que, hoy en

da, permite crear sitios y aplicaciones web dinmi-

cas, con conectividad hacia otros lenguajes y pla-

taformas. Tambin brinda la posibilidad de generar

entornos con gran interactividad e impacto visual,

adems de manejar audio y video.

FIGURA 11.Gmail permite adjuntar un archivo, ver la progresin de la carga y escribir en el cuerpo del co-

rreo al mismo tiempo que se produce un autoguardado del mensaje en borradores. Todo facilitado por AJAX.

FIGURA 12.Este sitio

de alto impacto visual

permite tener interactividad

tanto con el mouse como

con el teclado.


27/196

ALMACENAMIENTO DE DATOSCuando se genera un sitio dinmico, es necesario

contar con un repositorio de informacin. Para esto,

disponemos de algunas alternativas que menciona-

mos a continuacin:

XML(Extensible Markup Language): es un lenguaje

de sintaxis similar a HTML, pero no tiene etiquetas

predenidas con signicados particulares, sino que

estas son establecidas por el usuario de acuerdo con

la informacin que necesite almacenar. Suele usarse

vinculado a Flash y ActionScript.

Bases de datos: una base de datos es un conjun-

to de datos pertenecientes a un mismo contexto

y almacenados sistemticamente para su poste-

rior uso. En el entorno web, las bases ms utiliza-

das son SQL (SQL Server pertenece a Microsoft) y

MySQL (Open Source). Se las usa para almacenar

los datos que componen un sitio web, tales como

textos e imgenes, entre otros. Suelen utilizarse

vinculadas a ASP y PHP.

LENGUAJES DE EJECUCINDEL LADO DEL SERVIDORSon lenguajes que ejecuta el servidor para crear u

pgina cuando el usuario accede a un sitio. Es d

cir, buscan la informacin en una base de datos

tomndola como referencia, generan archivos HTM

que sern nalmente visualizados por el usuar

Conozcamos las alternativas ms difundidas:

PHP: es un lenguaje de programacin al que pu

den agregarse diversas libreras para otorgarle fu

cionalidades y usarse sin costo alguno. Es compa

ble con la mayora de los servidores web y sistem

operativos, aunque suele implementarse en entorn

Linux y con bases de datos MySQL, lo cual evita p

completo los costos de licencias.

ASP: es un lenguaje de programacin cre

do por Microsoft, que se ejecuta solo en servid

res Windows. Su funcionamiento es igual al de PH

pero se utiliza, en general, vinculado a bases de d

tos SQL. La desventaja que presenta es que no

FIGURA 13.Wikipedia es unentorno colaborativo creado

en PHP, donde los usuarios

crean la informacin, que es

almacenada en base de datos y,

luego, mostrada ante el

requerimiento de cada persona.

Tecnologas de los sitios w


28/196

26

1. Primeros pasos

gratuito y que debe implementarse en un entorno

100% Windows, que tambin tiene un costo.

APLICACIN DE ESTAS TECNOLOGASUn caso en el que podemos ver muchas de estas

tecnologas vinculadas es YouTube. En l se utili-

za un reproductor con funciones especiales de vi-

deo, creado en Flash, y en la interfaz de la pgina

se pueden postear nuevos videos, crear perles y de-

jar comentarios.

Por su parte, en los sitios experimentales que ge-

neran nuevas situaciones de interaccin y de expe-

riencia con el usuario, al mismo tiempo que buscan

un gran impacto visual sin limitaciones en cuanto

al diseo, tanto la interfaz como las situaciones in-

teractivas son creadas en Flash y ActionScript de

forma esttica. Claro que Flash tambin puede leer

lenguajes de marcado y bases de datos para gene-

rar sitios dinmicos.

La estructura

de las pginas

Es hora de comenzar a presentar los aspectos rela-

cionados con los elementos que conforman una in-

terfaz, la manera en la que estos se estructuran, y

los criterios que debemos seguir para realizar una

pgina atractiva y funcional.

Cada sitio web tiene un objetivo comunicacional

y, debido a eso, todos sus aspectos visuales y la ar-

ticulacin de sus elementos deben garantizar que se

cumpla ese objetivo.

Es necesario que el internauta comprenda el obje-

tivo del sitio en pocos segundos. El tiempo es tira-

no, y el navegante est expuesto a una innumera-

ble cantidad de sitios, una avalancha de informacin

que hace imprescindibles la claridad del mensaje y la

buena legibilidad.

LA FORMA DE NAVEGACINA la hora de disear un sitio, tenemos la libertad de

elegir qu forma de navegacin utilizaremos, pero

debemos hacerlo con criterio y adecundonos a cada

caso en particular. Veamos, a continuacin, algunos

YOUTUBE

En YouTube podemos ver que el reproductor de video y sus controles estn creados con Flash y

ActionScript. El resto del entorno visual es HTML, pero tanto la informacin de los videos relacio-

nados como los comentarios dejados por los usuarios estn almacenados en una base de datos,

lo que indica que se trata de un sitio creado con PHP o ASP.

Si hacemos un anlisisen detalle, descubriremosque en un sitio intervienendiversas tecnologas.


29/196

sitios que proponen formas novedosas de navega-

cin, con intervenciones poco comunes por parte de

los usuarios.

Navegacin sin clics: www.dontclick.it propo-

ne una navegacin sin clics, haciendo la eleccin

de lo que deseamos con solo aguardar unos se-

gundos sobre el elemento al que queremos acceder.

Navegacin vertical: todo el contenido se pre-

senta en una sola pgina, que se mueve hacia arri-

ba o hacia abajo segn las opciones que vaya-

mos eligiendo. Podemos ver ejemplos en www.

volll.com, www.kitfolio.com y www.pojeta.cz.

Navegacin original: en http://doorstepdairy.

comencontramos que la navegacin se realiza me-

diante el movimiento de un elemento, en este caso, un

pequeo camin que debe arrastrarse con el mouse.

Si imaginamos una interfaz de navegacin con movi-

miento vertical para un sitio con muchas secciones y

que ofrezca varios productos, el largo necesario para

la pgina sera excesivo. Si nos moviramos del lti-

mo producto al comienzo, la sensacin al ver pasar

palabras, imgenes y colores a gran velocidad quizs

resultara desagradable. Esto nos demuestra que no

todos los recursos disponibles son aplicables a cual-

quier sitio, y si a pesar de eso los utilizamos, tal vez

el usuario no tenga una buena percepcin de nues-

tra propuesta.

FIGURA 14.Todo el contenido del sitio est ubica

en una sola pgina muy larga, que se muestra po

partes en la ventana del navegador.

La estructura de las pgin
http://www.dontclick.it/http://www.dontclick.it/http://www.volll.com/http://www.volll.com/http://www.volll.com/http://www.kitfolio.com/http://www.kitfolio.com/http://www.pojeta.cz/http://www.pojeta.cz/http://doorstepdairy/http://doorstepdairy/http://www.pojeta.cz/http://www.kitfolio.com/http://www.volll.com/http://www.volll.com/http://www.dontclick.it/


30/196

28

1. Primeros pasos

QU ES LA ESTRUCTURA?Nadie espera encontrar un men en el medio de un

prrafo, ni tampoco un buscador o un logo en el pie

de la pgina. Aunque sea de forma inconsciente, to-

dos esperamos que los elementos estn dispuestos

de cierta manera, donde los buscamos en primer lu-

gar cuando accedemos al sitio.

Un usuario tiene la capacidad de predecir el sitio,

buscando de forma rpida lo que le interesa. Luego

de reconocer la disposicin de los elementos en la

pgina de inicio, los seguir buscando en el mis-

mo lugar dentro de las diferentes secciones. Poreso, necesitamos mantener estndares de estruc-

tura para darle una coherencia visual a la distri-

bucin del contenido en todas las pginas. Por su-

puesto que tambin podremos tomarnos pequeas

libertades de diseo para darle un ritmo especial a

la navegacin.

ENCABEZADO O HEADEREl headeres uno de los aspectos principales que en-

contramos en un sitio web, ya que es lo primero que

vemos. Ocupa todo el ancho superior del sitio y es

uno de los elementos que se mantienen casi sin nin-

guna variacin dentro de todas las pginas. Veamos,

a continuacin, los elementos que pueden estar pre-

sentes dentro del header de un site:

FIGURA 15.En este sitio

aparecen diversas

opciones a medida que

arrastramos el pequeo

camin con el mouse.


31/196

Logo: dentro del header se sita el logotipo, es de-

cir, la identidad grca, el sello distintivo de una em-

presa. Como es fundamental diferenciarse, el logo

ocupa un lugar protagnico en el extremo superior

izquierdo. Esto no es casual: est comprobado me-

diante estudios que este es el primer lugar donde los

usuarios dirigen su mirada.

Adems de ser un elemento grco importante, al

logo se le otorga una funcionalidad extra: posee un

enlace al inicio del sitio, convirtindose en un ata-

jo para que el usuario pueda volver a la pgina

principal.

Men: en el header tambin encontramos la bar

de navegacin, que contiene los enlaces para acc

der a las diferentes secciones del sitio. Los eleme

tos del men deben estar expuestos de modo sen

llo, intuitivo y bien visible para que el usuario ten

acceso rpido a la informacin y siempre encuent

lo que busca.

Cuando un sitio tiene pocos enlaces, todos pued

estar en el men principal. En cambio, en uno m

complejo (de ms de seis o siete pginas), aparece

men principalpara navegar por las secciones m

importantes y, luego, submenspara moverse de

tro de cada una. Estos submens deben manten

coherencia temtica y lgica en su agrupacin. P

FIGURA 16.Cada vez

son ms los sitios con

diseos de vanguardia que le

otorgan un papel

protagnico al header.

Todos los elementos ylos aspectos visuales de un

sitio deben garantizar quese cumpla la comunicacin



32/196


33/196

mirada por su movimiento e interactividad, mostran-

do un mensaje de forma simple, rpida y ecaz. Para

hacerlo, se valen de iconos, colores e informacin

bien jerarquizada, con un diseo simple y atractivo.

Buscadores internos:en sitios grandes, estos bu

cadores suelen ubicarse arriba a la derecha o en l

sidebars. Sirven para encontrar de forma rpida al

puntual. Esto quiere decir que no se accede a la

formacin a partir de la navegacin, sino que se i

gresa una palabra exacta o aproximada a lo que

desea encontrar y se presiona el botnusc rBuscaro

milar para obtener los resultados.

CONTENIDOComo mencionamos, est comprobado que el rec

rrido visual que realiza el visitante comienza por

extremo superior izquierdo (donde es usual que e

contremos el logo) y luego se ja en el centro de

pgina, donde est el contenido principal.

Aunque la organizacin vara entre diseos, verem

denominadores comunes para jerarquizar los dif

rentes tipos de informacin. El uso de destacad

es un gran punto de tensin, as como tambin l

FIGURA 18.Modernos, prcticos y muy utilizados,

los sliders dan dinamismo y transmiten mensajes

claros de una manera efectiva.

UN BUEN DISEADOR

Aunque es posible decir que un buen diseador web es aquel que sabe utilizar las herramien-Aunque es posible decir que un buen diseador web es aquel que sabe utilizar las herramien-

tas con las que desarrolla sus proyectos este es solo un aspecto tcnico que no resulta funda-tas con las que desarrolla sus proyectos, este es solo un aspecto tcnico que no resulta funda-

mental para tener xito. La buena fortuna de un diseador web depende de sus conocimientos.mental para tener xito. La buena fortuna de un diseador web depende de sus conocimientos.



34/196

32

1. Primeros pasos

ttulos, que son resaltados mediante el uso de fon-

dos, bullets, iconos, u otros elementos, para luego

continuar por la lectura de prrafos o de informa-

cin secundaria.

BARRA LATERAL O SIDEBAREste elemento grco sirve para organizar conte-

nidos importantes del sitio. Se puede ubicar a la

derecha del cuerpo principal, a la izquierda o en

ambos lados. Contiene enlaces externos e internos,

informacin adicional organizada por categoras y,

actualmente, se utiliza tambin para incluir publici-

dades (banners, links, etctera).

PIE DE PGINA O FOOTERAs como los headers han dado un salto de lo tradi-

cional a lo vanguardista, los footers tambin siguie-

ron esos pasos. Pasaron de contener informacin

como polticas de privacidad de uso y derechos de

autor, a ser contenedores de elementos relevantes,

como enlaces, mapas de sitios (para ayudar a la in-

dexacin en Google), informacin y formularios de

contacto, y los infaltables links a las redes sociales,

que nos invitan a unirnos, compartir, ver perles y

hasta visualizar los ltimos posts de Twitter.

Todos los elementos mencionados determinan lo

que llamamos una interfaz web. Los contenidos, la

forma de navegacin, los elementos de identica-

cin y las acciones que podemos generar dentro deun sitio son parte de su interfaz.

Al crear una interfaz, es importante que, para trans-

mitir un mensaje claro, rpido y de forma sencilla,

respetemos ciertas convenciones de estructura e in-

novemos desde el diseo y las tecnologas.

FIGURA 19.Los sidebars son infaltables en las re-

des sociales y en los blogs, donde su rol es clara-

mente organizativo, debido a la gran cantidad de in-

formacin que se necesita comunicar.


35/196

FIGURA 20.Actualmente, los

footers son algo ms que un

buen cierre para el sitio.

Su uso y actualizacin marca

tendencia.

CONOCIMIENTOS

Como vemos, un diseador necesita contar con muchos conocimientos para poder crear un si-

tio de calidad. En esta obra, veremos todas esas herramientas e, incluso, obtendremos los me-

jores consejos que nos brindarn la experiencia que necesitamos.

La tarea ms difcil de un buen diseador web no

radica en aprender a utilizar una aplicacin, sino

en saber utilizarla con criterio y estar al tanto de

todo lo que inuye en su medio de trabajo, como la

aparicin de nuevas tcnicas de diseo, cambios en

las tendencias y en los estilos, o nuevos dispositi-

vos y utilidades que simpliquen su tarea. Debe sa-

ber utilizar los programas ms conocidos de diseo

y determinar en qu momento conviene uno u otro.



36/196

34

1. Primeros pasos

Multiple choice

Qu conocimientos debe manejar un dise-ador web?

a-Estticos.

b-Estticos, conceptuales y tcnicos.

c-Estticos, conceptuales y de diagramacin.

d-Conceptuales y tcnicos.

Qu signica W3C?

a-Word Wide Web Consortium.

b-Word Wide Web.

c-Consortium Web.

d-Word Wide Consortium.

Qu es el spacer.gif?

a-Una imagen transparente con forma redonda.

b-Una imagen de color negro.

c-Una imagen con forma redonda.

d-Una imagen transparente e invisible.

Qu caracteriza a un sitio dinmico?a-Qu su contenido se actualiza cada cierto

tiempo.

b-Que posee videos.

c-Al acceder a una pgina, esta se arma segn

nuestro pedido.

d-Que contiene animaciones.

Qu es un sitio esttico?

a-Donde los usuarios no pueden crear ni editar

contenidos.

b-Donde los contenidos no se actualizan en for-

ma constante.

c- Sitios que no poseen animaciones.

d-Sitios que solo poseen texto.

Qu espacio utiliza el header de un sitio?

a-Utiliza todo el ancho superior del sitio.

b-Usa el ancho inferior del sitio.

c-Hace uso de la zona central del sitio.

d-Utiliza la columna lateral izquierda del sitio.

1 4

25

3

6

Respuestas:1-b,2-a,3-d,4-c,5-a,6-a


37/196

Captulo 2

En este captulo conoceremos de qu formapodemos plasmar un diseo de sitio webutilizando el lenguaje HTML.

Del diseo al HTML


38/196

2. Del diseo al HTML

36

el cdigo de forma diferente. Si nos aseguramos de

que nuestro sitio sea compatible con los siete na-

vegadores mencionados, el 96% de los usuarios de

Internet podr ver sin problemas el trabajo que es-

tamos desarrollando.

HERRAMIENTAS PARA GENERARCDIGO HTML Y CSSLa aplicacin ms potente del mercado para gene-

rar cdigo HTML es Adobe Dreamweaver CS5, que

comenzaremos a estudiar en las prximas pginas.

Sin embargo, adems de ella, existen otras que po-

demos utilizar para redactar y generar cdigo CSS y

HTML para nuestros sitios.

Si bien es cierto que cualquier editor de texto pla-

no, como el Bloc de notas de Windows, es su-

ficiente para redactar cdigo HTML y CSS, nos

convendr recurrir a programas diseados espe-

cialmente para tal fin, ya que en ellos tendremos

ayudas visuales (como el uso de distintos colo-

res para el texto) que nos orientarn en la tarea y

simplificarn el trabajo.

NOTEPAD++Notepad++ (http://notepad-plus-plus.org) es

una aplicacin que bien podramos denir como

una versin muy mejorada del editor de texto o

el Bloc de notas incluido en todos los sistemas

Windows. Si no estamos acostumbrados a redac-tar cdigo de programacin web a ciegas, no ser

conveniente utilizarlo, ya que su principal desven-

taja es que no cuenta con un preview incorporado.

De todas maneras, desde un simple atajo de tecla-

do, podemos visualizar el HTML en los navegadores

de Internet que tengamos instalados.

Herramientas para

desarrollar HTML

El proceso de crear pginas se denomina, en la jer-

ga, maquetacin, y da como resultado tener nues-

tro diseo convertido en un sitio navegable. Luego,

en caso de que el proyecto lo requiera, faltar la adi-

cin de cdigo JavaScript, AJAX, ASP o PHP para ha-

cer que las pginas dinmicas obtengan contenido

de las bases de datos.

Un problema que suele presentarse al desarrollar

HTML es lograr que el diseo sea visualizado de

igual forma en la mayora de los navegadores de

Internet. Este inconveniente se debe, principalmen-

te, a que algunos fabricantes no han incorporado en

sus productos los estndares que determinan la es-

tructura de la Web. En consecuencia, tendremos que

aplicar parchesen el cdigo CSS y HTML para que

la maqueta sea compatible con los navegadores ms

frecuentes: Internet Explorer 6, 7 y 8; Mozilla Firefox

3.5 y 3.6; Chrome 5.0 y Safari 4.0. Esta prctica se

denomina cross-browsing.

Es importante distinguir entre las distintas versio-

nes de cada navegador, ya que cada uno interpreta

La maquetacin serexitosa si el cdigorespeta los estndaresCSS de la W3C sin alterarel diseo original
http://notepad-plus-plus.org/http://notepad-plus-plus.org/http://notepad-plus-plus.org/


39/196

pesados (por ejemplo, logs de acceso a servidore

sin perder estabilidad.

TOPSTYLE PROTopStyle Pro (www.topstyle4.com) es uno de l

mejores editores de cdigo CSS y, en general, es r

comendable utilizarlo como complemento del e

tor de HTML principal que empleemos para trabaj

Entre sus principales ventajas podemos menciona

Entre los principales puntos a favor de esta aplica-

cin encontramos los siguientes:

Es gratuita.

Sintaxis coloreada.

Numeracin de lnea.

Muy liviana, consume pocos recursos del sistema.

Cdigo autocompletableen diferentes lenguajes.

Es posible abrir y gestionar archivos de texto

FIGURA 1.Interfaz de Notepad++,

donde vemos como ejemplo el

cdigo de una pgina escrita en PH

FIGURA 2.rea de trabajo de

TopStyle Pro. El panel CSS Palett

Editor, ubicado a la izquierda,

muestra los colores utilizados en

nuestra hoja de estilos y cuntas

veces aparece cada uno.

Herramientas para desarrollar HM
http://www.topstyle4.com/http://www.topstyle4.com/http://www.topstyle4.com/


40/196


41/196

EL REA DE TRABAJOCuando abrimos un documento (o creamos uno nu

vo, como veremos ms adelante), por defecto ap

rece la pantalla dividida en dos zonas principale

CdigoCdigoy DiseoDiseo.

Como su nombre lo indica, en el rea denomina

CdigoCdigo, la cual se ubica en la parte superior, ver

mos el cdigo HTMLque corresponde a la pgin

Aqu tambin podremos escribir cualquier otro c

digo de programacin web que necesitemos (com

ASP, PHP, JavaScript, etctera). Por su parte, en

seccin DiseoDiseo, que se encuentra en la parte inf

rior, se muestra la previsualizacin (preview) del c

digo interpretado.

El resto de la pantalla se compone de la siguien

manera: en la parte superior encontraremos el me

y la barra de herramientas; en la derecha, la barra

ventanas; y en la parte inferior, la barra de propied

des HTML y CSS. Veremos estas secciones en deta

en las prximas pginas, donde nos encargarem

de conocer las partes ms importantes que presen

la interfaz del programa.

Luego de iniciar Dreamweaver por primera vez, es

recomendable denir la distribucin del espacio de

trabajo. Esto determinar la ubicacin de los distin-

tos mens y opciones dentro de la aplicacin, y es

una seleccin que quedar registrada para las prxi-

mas veces que lo usemos. Para hacerlo, nos dirigi-

mos al menVentana/Diseo del espacio de

Ventana/Diseo del espacio de

trabajotrabajo.

La distribucin llamada ClsicoClsico es sumamente

exible e intuitiva, y resulta familiar para quienes

vienen trabajando con versiones anteriores de este

programa. Sin embargo, cada usuario elegir la que

le resulte ms adecuada.

FIGURA 4.La primera

vez que ejecutamos

Dreamweaver, debemos

denir si ser el editor

predeterminado para los tip

de archivo que soporta.

Adobe Dreamweaver C


42/196


43/196

utilizan para indicarle al navegador el uso de alg

nos smbolos o palabras especiales.

Qu es HTML?Toda pgina web est conformada por un cdigo e

tructurado, denominado HTML (HyperText Mark

Language). Bsicamente, este cuenta con una se

de instrucciones para indicarle al navegador que e

temos utilizando la manera en que la pgina de

ser visualizada y representada.

Una de las caractersticas de este lenguaje es su simplicidad, dado que para crear un documento HTM

lo nico que necesitamos es un editor de texto com

WordPad o el Bloc de notas de Windows. Con e

tas dos sencillas herramientas, es posible estruct

rar una pgina web por medio de la inclusin de

etiquetas(tags) propias del lenguaje. Estas indic

PRESTAR ATENCIN AL CDIGOAunque podemos trabajar exclusivamente en la vis-

ta DiseoDiseo, es conveniente utilizar la pantalla dividi-

da de Dreamweaver. De esta forma, a medida que

hagamos el diseo de una pgina, tambin veremos

el cdigo que se va generando. En etapas de apren-

dizaje, esto nos ayudar a familiarizarnos con la sin-

taxis HTML y a relacionar cada uno de los elementos

que insertemos con sus etiquetas y atributos HTML

(veremos estos temas sobre el nal de la clase). Ms

adelante, cuando tengamos ms conocimientos, ver

el cdigo nos permitir cuidar que este cumpla con

los estndares denidos por la W3C (www.w3.org).

Si bien este es un tema que veremos en detalle en

la prxima clase, cabe adelantar que, al trabajar con

la interfaz dividida, encontraremos que algunas pa-

labras comienzan con el signo & (ampersand).

Tendremos que familiarizarnos con estos caracte-

res para poder leer HTML con naturalidad, ya que se

FIGURA 6.Luego de seleccionar u

estilo, buscamos la propiedad que

queremos modicar y elegimos e

nuevo valor que deseemos darle.

Qu es HTM
http://www.w3.org/http://www.w3.org/http://www.w3.org/


44/196


42

los de dispositivos porttiles, como PDAs y telfonos

celulares, entre otros.

Gracias a XHTML, el mismo documento es til para

todos los soportes; es decir, no es necesario desarro-

llar un documento para navegadores web y otro di-

ferente para contenido mvil, por ejemplo.

Adems, los elementos correspondientes al diseo

(como colores, tipos de fuente o fondos, entre otros)

se representan en hojas de estilo en cascada (CSS)

por separado; de esta forma, podemos tener un c-

digo mucho ms limpio y de menor tamao, el cual

puede ser seguido con ms facilidad.

el comienzo y el nal de los elementos que integran

el documento, desde las caractersticas de los textos

hasta los elementos multimedia, como imgenes, vi-

deos y sonidos.

Aunque HTML es un lenguaje, no lo es de programa-

cin, sino que es un lenguaje de marcado. Se trata

de un sistema de etiquetas que indica al navegador,

por ejemplo, cundo subrayar un ttulo, cmo de-

nir el color del texto o dnde insertar una imagen. Si

el navegador detectara algn error en el cdigo que

debe representar, mostrara el documento tal como

lo hubiera interpretado.

XHTMLLa sigla proviene de EXtensible Hypertext Markup

Language, y es un lenguaje que cuenta con un eti-

quetado ms estricto que HTML, con lo cual permite

una correcta interpretacin del contenido del docu-

mento. Posee una mayor exibilidad, ya que logra ser

representado por todos los navegadores, incluyendo

HTML es un lenguaje demarcado con etiquetas que

le indican al navegador loque debe mostrar

FIGURA 7.

El cdigo XHTML tiene unamenor cantidad de errores

de compatibilidad y una

mayor integracin con las

diferentes plataformas

de visualizacin

de contenidos web.


45/196


46/196


47/196

EL BODYEl elemento body, cuya apertura es y su c

rre , se introduce luego del cierre de la e

queta . Le indica al navegador los eleme

tos que debe incluir, as como tambin la manera

hacerlo, es decir, su organizacin en el espacio de

pgina web. Luego del tag de cierre del contenid

aparece la etiqueta , que corresponde al

nal de la pgina.

En este ejemplo, observamos la denicin del tipo de

documento en la etiqueta DOCTYPEDOCTYPE. Aunque no es

obligatoria y puede ser omitida, debemos saber que

su falta puede dar lugar a imperfecciones en la inter-

pretacin por parte del navegador. A continuacin, la

pgina est contenida entre las etiquetas y

como apertura y cierre de su cdigo fuente.

Luego, aparece la apertura del encabezado a travs

de la etiqueta y el ttulo que ser visualiza-

do en la barra de ttulo del navegador, denido entre

las etiquetas y . Le siguen la des-

cripcin del sitio y las palabras clave que determinan

su temtica, y despus, los enlaces a las referencias:

por un lado, a las hojas de estilo (CSS), y por el otro,

a una funcin JavaScript.

< DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Ttulo de la Pgina WebTtulo de la Pgina Web

ETIQUETAS Y POSICIONAMIENTO

Es muy importante denir correctamente las meta etiquetas DESCRIPTIONy KEYWORDSjunto con

el ttulo de la pgina web. Estos tres factores son considerados indispensables para la adecuada

categorizacin de los buscadores y, por lo tanto, fundamentales para el posicionamiento en ellos.

El elemento body seintroduce luego del cierrede la etiqueta

Estructura bsica de una pgi
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%E2%80%9Dhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%E2%80%9Dhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%E2%80%9D


48/196


46

en el cdigo fuente. Son introducidos en las etique-

tas con el objeto de otorgar algunas caractersticas

puntuales, como el alto, el ancho, un borde, etctera.

Un atributo puede denir desde valores numricos,

como la altura de un determinado bloque, hasta co-

lores y estilos de letra.

Todo atributo contiene un valor, que debe estar en-

cerrado entre comillas.

Por ejemplo:

Aqu el enlace

Siempre debemos recordar que las etiquetas deben

llevar una apertura y un cierre, porque as lograre-

mos informar cul es el contenido que debe ser re-

presentado a travs de las declaraciones que hace-

mos en ellas.

Cuando declaramos por completo la etiqueta, po-

demos observar, entonces, cuatro interventores: la

etiqueta propiamente dicha, los atributos, los va-

lores de los atributos y el contenido en cuestin,

como en el siguiente ejemplo:

Contenido

Etiquetas y atributos:

denicin

El HTML est integrado por elementos que, en con-

junto, forman la base de su estructura. De esta ma-

nera, cuando denimos una etiqueta, estamos indi-

cando que, en funcin de ella, se represente algo,

que puede ser visible al usuario o no.

DEFINIR LAS ETIQUETASPara denir una etiqueta, debemos realizar una

apertura y un cierre. Entre ambos, tendremos el

contenido que se adaptar a las condiciones que

ella disponga. Por ejemplo, para subrayar un texto,

utilizaramos la siguiente lnea de cdigo:

Texto SubrayadoTexto Subrayado

Existen 93 etiquetas estndar que tienen una re-

presentacin especca, lo que nos facilita la rea-

lizacin de un documento si las utilizamos como

herramientas para introducir la informacin que de-

seamos mostrar.

LOS ATRIBUTOSLos atributos son directivas que nos permiten de-

nir valores para cada una de las etiquetas agregadas

ETIQUETAS OBSOLETAS

Aunque podemos utilizar cualquiera de las etiquetas disponibles en HTML, en este caso reco-

mendamos no emplear algunas en particular, ya que se consideran obsoletas. Entre ellas, pode-

mos mencionar applet, basefont, center, dir, font, isindex, menu, s, strike, u.


49/196


50/196


51/196

Primer documento

HTML en

Dreamweaver

En este apartado, realizaremos, a travs de

paso a paso detallado, un nuevo documento

HTML utilizando Dreamweaver como aplicacin.

Adobe Dreamweaver brinda la posibilidad de cre

documentos en una gran variedad de formatos,

mismo tiempo que permite abrir todo tipo de a

chivos basados en texto; como ejemplo podem

mencionar ASP, PHP, JavaScript y hojas de est

en cascada (CSS), aunque no hayan sido cread

utilizando este programa. Adems, tengamos

cuenta que podemos abrir y editar archivos de c

digo fuente Visual Basic, Java y C#. De esta form

se ampla el rango de accin y las opciones de es

aplicacin, haciendo mucho ms eciente las tare

efectuadas por el desarrollador.

Figura 11.Los elementos permiten ver fcilmente-

las partes del cdigo y mejoran la posterior visuali-

zacin en los navegadores.

Primer documento HTML en Dreamweav


52/196


50

Para crear un documento HTML,

puede hacer clic en la opcin HTMLHTML

que aparece en la

seccin Crear nuevoCrear nuevo, del

cuadro de bienvenida del

programa. Otra alternativa, si ya

tiene el programa

abierto, es dirigirse al men

Archivo/NuevoArchivo/Nuevo.

Desde el cuadro que se

presenta, puede escoger entre

una gran cantidad de formatos y,

al crear un documento nuevo,

optar por alguno de los diseos

de pgina predenidos o tomar

un documento basado en una

plantilla existente. En este caso,

dentro de la pestaa Pgina enPgina en

blancoblanco, elija HTMLHTMLen elrecuadro Tipo de pginaTipo de pgina. En

la seccin DiseoDiseoseleccione

NingunoNingunoy presione CrearCrear.

PASO A PASO /1Crear un documento HTML


53/196


54/196


55/196


56/196


54

LOS ATRIBUTOS DINMICOSEncontramos dentro de este grupo muchos atribu-

tos, debido a que son los encargados de exhibir los

efectos y las animaciones de las pginas que in-

cluyen lenguaje JavaScript. Veamos, a continuacin,

cules son estos atributos:

OnclickOnclick:establece la accin que se va a realizar

cuando se haga un clic sobre el elemento.

Cabe aclarar que los atributos idid y classclass pueden

contener letras, nmeros y guiones medios y bajos

como valor, pero no pueden empezar con nmeros.

Como recomendacin, no se deberan utilizar letras

como la , ya que podran no funcionar en algunos

navegadores.

LOS ATRIBUTOS DE IDIOMASon utilizados para denir y adaptar los elementos

insertados en el documento a un idioma especco.

Se los emplea en pginas que muestran su contenido

en varios idiomas o en aquellas que quieren especi-

car en qu idioma est su documento. En este grupo

encontramos los siguientes tres atributos:

LangLang:indica el idioma del elemento.

Xml:LangXml:Lang: indica el idioma del elemento, aunque

en este caso tiene ms prioridad que el atributo ante-

rior; es decir, prevalece este atributo por sobre LangLang.

DirDir: indica la direccin del texto. Se lo utiliza al

trabajar con idiomas que no se escriben de izquier-

da a derecha.

i18n

lang dir

xml:lang

Figura 12.A este grupo de

atributos tambin se lodenomina i18n, que es la

abreviatura de la palabra

internacionalizacin, utilizando

el nmero de letras que tiene

el trmino entre la i inicial

y la n nal.


57/196

LOS ATRIBUTOS DE SELECCINEl foco aparece durante la interaccin del visitan

en el sitio. Estos atributos nos permiten asignar a

ciones que se realizarn en cada caso. Cuando n

referimos a detectar o perder el foco, estamos h

blando de que el usuario ha seleccionado o ha d

seleccionado el elemento. Por ejemplo, si tenem

un formulario web, diramos que cuando el usu

rio est escribiendo en uno de sus campos, este e

mento tiene el foco. Cuando contina hacia ot

campo, el elemento anterior ha perdido el foco,

que lo tiene el elemento actual que est usand

Veamos cules son los atributos de foco:

AccessKeyAccessKey:establece una tecla de acceso rpi

a un determinado elemento.

TabIndexTabIndex: establece el orden de tabulaci

del documento; su valor est entre 0 y 32.76

OnFocusOnFocus:se ejecuta la accin cuando se detec

OndblclickOndblclick: establece la accin que se realiza

cuando se hace un doble clic sobre el elemento.

OnmousedownOnmousedown:se ejecuta la accin cuando se de-

tecta el botn del mouse presionado.

OnmouseupOnmouseup: se ejecuta la accin cuando se detec-

ta que el botn fue soltado.

OnmouseoverOnmouseover:establece la accin cuando se de-

tecta que el cursor se sita sobre el elemento.

OnmousemoveOnmousemove:establece la accin cuando se de-

tecta que el cursor se encuentra en movimiento so-

bre el elemento.

OnmouseoutOnmouseout:se ejecuta la accin cuando el cur-

sor abandona el elemento.

OnkeypressOnkeypress:se ejecuta la accin cuando se pre-

siona una tecla del teclado.

OnkeydownOnkeydown: se ejecuta la accin cuando se detec-

ta que est pulsada la tecla del teclado.

OnkeyupOnkeyup: se ejecuta la accin cuando la tecla del

teclado fue soltada.

El grupo de atributos de eventos solo es utilizado

cuando el documento HTML incorpora el lenguaje

JavaScript, ya que a travs de ellos, es posible lo-

grar que el sitio web responda ante la interaccin

del usuario. Por ejemplo, podemos verlos en accin

y descubrir su potencial al visitar sitios en los que se

emplean mens de navegacin JavaScript, los cuales

despliegan su lista de elementos cuando nos situa-

mos sobre cada uno de los botones.

FIGURA 13.Los atributos de eventos son muy im

portantes para las aplicaciones web actuales. En

www.cisco.com podemos verlos en accin.

Junto a JavaScript, losatributos de evento ayudana dar interaccin a losdocumentos HTML

Atribut
http://www.cisco.com/http://www.cisco.com/


58/196


59/196


60/196


58

4

Dentro de la etiqueta bodybody,

presione la tecla

y comience a escribir la

primera etiqueta, que puede

ser cualquiera de las

existentes. En este caso,

ser .

Las etiquetas llevan una

apertura y un cierre, lo que

signica que, cuando abra

una etiqueta, debe

cerrarla. Para cerrar ,

escriba .

Este cierre debe aparecer

al nal del contenido

de la etiqueta; es decir,

el contenido tiene queir entre la apertura y el cierre.

3

PASO A PASO /2(Cont.)


61/196


62/196


63/196

Captulo 3

Aqu veremos las partes que componen laestructura de un sitio web, su descripcin ylos elementos que contienen.

Estructura del sitio


64/196


65/196

Ilustraciones: los fondos creados a partir de ilu

traciones suelen tener un toque de personalidad

originalidad. Sin embargo, esta tcnica en gen

ral transmite un espritu algo infantil, que no siem

pre resulta apropiado. Como sabemos, las ilustr

ciones pueden aplicarse como patrones y tambi

como imgenes de fondo y, a diferencia de las f

tografas, estn compuestas por pocos colores, p

lo que pueden ser optimizadas con formato GIFGIF

PNGPNG, de peso reducido.

Fotografas: si encontramos una fotografa apro-

piada, podemos lograr un ambiente muy realista al

utilizarla como fondo. Habitualmente, la foto utili-

zada recibe un importante retoque y se aplica de

manera ja a travs de la propiedad background-background-

attachmentattachment. Los contenidos quedarn por encima

de ella y, al hacer scroll, se deslizarn independien-

temente del fondo. Recordemos que no es aconseja-

ble aplicar una fotografa a modo de patrn, porque

su repeticin genera saltos visuales.

FIGURA 2.El uso de

texturas enriquece el

lenguaje grco,

transmitiendo diferentes

conceptos o ideas. En

www.gomammoth.co.uk

encontramos un ejemplo

de uso de textura.

FIGURA 3.Las fotografas

crean un entorno realista,

difcil de lograr mediante

otras tcnicas. Encontramos

un gran ejemplo en

www.alexarts.ru/en.

Tendencias en el diseo de fond
http://www.gomammoth.co.uk/http://www.gomammoth.co.uk/http://www.alexarts.ru/enhttp://www.alexarts.ru/enhttp://www.alexarts.ru/enhttp://www.gomammoth.co.uk/


66/196


67/196

para el cabezal y un color pleno u otra imagen com

fondo para el cuerpo. As se logra un corte visual e

tre ambos sectores.

general, el trabajo de implementacin del fondo se

realiza con mayor cuidado, dado que el riesgo de

que los elementos queden desfasados es ms noto-

rio que en la implementacin de fondos ubicados en

diferentes planos.

Fondos compuestos por varios fondos:aqu se

aprovecha el fondo para separar los contenidos. De

esta manera, se utiliza, por ejemplo, una ilustracin

FIGURA 5.

Enwww.pixelimagedubai.com

vemos un sitio cuyo fondo

acta como marco de los

contenidos principales.

FIGURA 6.The Blizzards

(www.theblizzards.ie)

presenta un fondo que se

integra a los contenidos

principales, lo que disminuy

el nivel de profundidad.

En los fondos compuestosse aprovecha el fondo para

separar los contenidos

Tendencias en el diseo de fond
http://www.pixelimagedubai.com/http://www.pixelimagedubai.com/http://www.pixelimagedubai.com/http://www.theblizzards.ie/http://www.theblizzards.ie/http://www.theblizzards.ie/http://www.pixelimagedubai.com/


68/196


69/196


70/196

3. Estructura del sitio

68

BACKGROUND-ATTACHMENTEsta propiedad no es muy utilizada. Su efecto es

mantener ja la imagen de fondo de un elemento

mientras el contenido se desplaza por delante de ella

cuando nos movemos con el scroll.

en el eje X y, luego, un color pleno. Esto es comn

en sitios que son muy largos, ya que es posible usar

una imagen vistosa o un gradiente y luego, si el con-

tenido es muy extenso, solo se visualizar el color

de fondo.

FIGURA 8.Arriba, podemos ver una imagen

repitindose en ambos ejes del contenedor.

A la derecha, solo se repite en el eje X.

FIGURA 9.Enwww.anthonynolan.org,la imagen

del degrad se repite en la

parte

Diseño Web con HTML y CSS.pdf

Documents

Transcript of Diseño Web con HTML y CSS.pdf