WEB DESIGN

Laurymar De Jess Cruz, M.S.

Diseadora de Pgina de Internet
Centro de Tecnologas de Informacin, UPR Arecibo

Trminos importantes relacionados a

las Pginas de Internet

Web Page

A document on the World Wide Web.

Every Web page is identified by a unique
URL (Uniform Resource Locator).

Web Site

A collection of related pages. A site (location) on

the World Wide Web. Each Web site contains a
home page, which is the first document users see
when they enter the site. This page is like a table
of contents to other documents stored at the site.
The site might also contain additional documents
and files. Each site is owned and managed by an
individual, company or organization.

World Wide Web

A system of Internet servers that support

specially formatted documents. The documents
are formatted in a markup language called HTML
(HyperText Markup Language) that supports links
to other documents, as well as graphics, audio,
and video files. This means you can jump from
one document to another simply by clicking on
hot spots. Not all Internet servers are part of the
World Wide Web.
World Wide Web is not synonymous with the
Internet.

Web Server

A computer that delivers (serves up) Web pages. Every

Web server has an IP address and possibly a domain name.
For example, if you enter the URL
http://www.pcwebopedia.com/index.html in your browser,
this sends a request to the server whose domain name is
pcwebopedia.com. The server then fetches the page
named index.html and sends it to your browser. Any
computer can be turned into a Web server by installing
server software and connecting the machine to the
Internet. There are many Web server software applications,
including public domain software fromApache, and
commercial packages from Microsoft, Netscape and others.

Most Common Web Servers:

IIS - Short for Internet Information Server, Microsoft's
Web Server.
Apache -a public-domain open source Web server

URL

Abbreviation of Uniform Resource Locator, the

global address of documents and other resources
on the World Wide Web. The first part of the
address indicates what protocol to use, and the
second part specifies the IP address or the
domain name where the resource is located.
For example, the two URLs below point to two
different files at the domain pcwebopedia.com.
The first specifies an executable file that should
be fetched using the FTP protocol; the second
specifies a Web page that should be fetched
using the HTTP protocol:
ftp://www.pcwebopedia.com/stuff.exe

HTTP

Short for HyperText Transfer Protocol, the

underlying protocol used by the World Wide Web.
HTTP defines how messages are formatted and
transmitted, and what actions Web servers and
browsers should take in response to various
commands. For example, when you enter a URL
in your browser, this actually sends an HTTP
command to the Web server directing it to fetch
and transmit the requested Web page.

IP address

An identifier for a computer or device on a TCP/IP

network. Networks using the TCP/IP protocol route
messages based on the IP address of the
destination. The format of an IP address is a 32-bit
numeric address written as four numbers
separated by periods. Each number can be zero to
255. For example, 1.160.10.240 could be an IP
address. Within an isolated network, you can assign
IP addresses at random as long as each one is
unique. However, connecting a private network to
the Internet requires using registered IP addresses
(called Internet addresses) to avoid duplicates.

Domain Name

A name that identifies one or more IP addresses. Domain names are

used in URLs to identify particular Web pages. For example, in the
URL http://www.pcwebopedia.com/index.html, the domain name is
pcwebopedia.com. Every domain name has a suffix that indicates
which top level domain (TLD) it belongs to. There are only a limited
number of such domains. For example:
gov - Government agencies
edu - Educational institutions
org - Organizations (nonprofit)
mil - Military
com - commercial business
net - Network organizations
ca Canada / pr Puerto Rico
Because the Internet is based on IP addresses, not domain names, every
Web server requires a Domain Name System (DNS) server to translate
domain names into IP addresses.

Domain Name System (DNS)

Short for Domain Name System (or Service or

Server), an Internet service that translates domain
names into IP addresses. Because domain names are
alphabetic, they're easier to remember. The Internet
however, is really based on IP addresses. Every time
you use a domain name, therefore, a DNS service
must translate the name into the corresponding IP
address. For example, the domain name
www.example.com might translate to 198.105.232.4.
The DNS system is, in fact, its own network. If one
DNS server doesn't know how to translate a particular
domain name, it asks another one, and so on, until
the correct IP address is returned.

Browser

Short for Web browser, a software application used to locate and display
Web pages. They are graphical browsers, which means that they can
display graphics as well as text. In addition, can present multimedia
information, including sound and video. Every browser displays web
pages slightly differently, which presents major challenges to web site
designers.
Browsers:

Internet Explorer - is a series of graphical web browsers developed by

Microsoft and included as part of the Microsoft Windows line of operating
systems starting in 1995.
Mozilla Firefox - es un navegador web multiplataforma, que est disponible
en versiones para Microsoft Windows, Mac OS X y GNU/Linux.
Safari -es un navegador web desarrollado por Apple para su sistema operativo
Mac OS X. La versin 3 estar disponible para Windows XP y Windows Vista.
Opera - sus mayores distribuciones son para Windows, Apple Macintosh y
Linux, pero se encuentra disponible tambin para una variedad de otras
plataformas, incluyendo OS/2, Solaris y FreeBSD.

HTML

Short for HyperText Markup Language, the authoring

language used to create documents on the World Wide
Web.

HTML defines the structure and layout of a Web document

by using a variety of tags and attributes. The correct
structure for an HTML document starts with
<HTML><HEAD>(enter here what document is
about)<BODY> and ends with </BODY></HTML>. All the
information you'd like to include in your Web page fits in
between the <BODY> and </BODY> tags.

There are hundreds of other tags used to format and layout

the information in a Web page. Tags are also used to
specify hypertext links. These allow Web developers to
direct users to other Web pages with only a click of the
mouse on either an image or word(s).

PHP

PHP (Hypertext Preprocessor) is a

general-purpose scripting language
originally designed for web development
to produce dynamic web pages. For this
purpose, PHP code is embedded into the
HTML source document and interpreted
by a web server with a PHP processor
module, which generates the web page
document.

Aspectos generales en la creacin de

Web Pages

Planificando

Dos preguntas importantes que deberas contestar acerca de un site:

A quin va dirigido? Quin es la audiencia?

Qu se espera que realice este site? El Objetivo de su web.

Escribe un bosquejo-pon en palabras- cmo t y tu cliente visualizan el

site. Irs aadiendo y elaborando este bosquejo a medida que avanzas y
esto te servir como referencia valiosa a travs de toda la construccin del
site. Esto te servir como la estructura bsica del site. Generalmente
hablando, cada tem principal en el bosquejo ser una pgina diferente en
el formato de tu web site.

Necesitars colectar materiales de contenido antes de comenzar. Basados

en el bosquejo creado y en todas las conversaciones con el cliente, haz
una lista de la informacin y los visuales que desees incluir en la pantalla.
Conseguirs fotos que tendrn que digitalizarse, fotos digitales, grficas y
archivos de texto. Casi siempre necesitars grficas que los clientes no
pueden suplirte-tendrs que crearlas o buscarlas; tales como los botones
de navegacin o tipografa especial para los ttulos.

En la carpeta del proyecto en tu computadora (no la carpeta para el web

site), crea una carpeta llamada source files. Dentro de esta carpeta crea
subcarpetas para los diferentes tipos de archivos fuentes o source files

Revisiones y
actualizaciones

Si los visitantes de tu site no pueden decir

inmediatamente que algo es diferente, ellos no
explorarn buscando por cualquier informacin
nueva que pueda estar ah. Muchos sites tienen
una pgina de Whats New que enlace a la
informacin ms reciente en el site. Otros sites
hacen algn diseo notable y copian los cambios
a la primera pgina tal que el visitante sepa que
el site cambi. Otra tcnica es colocar la fecha de
la ltima revisin en la primera pgina; ej.
Revisada en 17 de Marzo de 2011.

La AGILIDAD y la velocidad

Son fundamentales
La variable es el tiempo de respuesta. A este
respecto al crear la pgina web en nuestros
diseos siempre tenemos en cuenta que una
gran parte de los usuarios que acceden a
Internet puedan tener conexiones lentas.

El lmite de tiempo para que una persona mantenga

su atencin en una pgina mientras espera es de
unos 10 segundos.
El tiempo para que los usuarios sientan que un
sistema reacciona instantneamente es de una
dcima (0.1) de segundo.

Tamao de los archivos

A medida que disees pginas web, tu meta

primordial es tener un balance razonable entre el
inters visual y el tiempo de bajar la pgina (download
time). Si una pgina tiene muchas imgenes que toma
ms de 30 segundos para aparecer en la pantalla,
divdela en dos o ms pginas. Si el cliente quiere una
imagen de pantalla completa, convncelo de usar una
foto de tamao pequeo (thumbnail) que cuando se le
de clic aparezca en una pantalla separada la versin
grande de la foto. Recuerda que a pesar de que los
tamaos de los archivos sean pequeos, se requiere
una planificacin cuidadosa para prevenir pginas de
carga lenta.

La composicin ha de ser
ESTTICA y FUNCIONAL

En el siguiente ejemplo las dos columnas dicen lo mismo. En

cambio el texto de la columna a la izquierda no est pensado para
leerse en pantalla ya que el visitante se ha de esforzar ms. En la
creacin de pginas web esto lo tenemos muy en cuenta.
Empresa S.L. en su
constante bsqueda
de la rentabilidad ha
facturado en el ao
2010 327 Mil Euros,
alcanzando de esta
forma una rentabilidad
del 7% gracias a sus
beneficios antes de
impuestos de 23.000
euros. La plantilla de
la empresa que est
altamente motivada
es de 42 empleados.

Empresa S.L.
Facturacin 327.000
:
Beneficios:

23.000

Rentabilida
d:

7%

Empleados: 42
Ao 2010

Interface y navegacin

El aspecto particular del diseo de

interface que cmo diseadores web nos
debe preocupar ms es el diseo de
navegacin, o la forma en que las
personas se mueven alrededor de tus
pginas. El interface y la navegacin son
generalmente elementos inseparables.
Si alguien dice La interface es
grandiosa, probablemente quiere decir
que el site es fcil de navegar.

Interface y navegacin
One-size surfing
Crear tu site tal que la pgina completa sea
visible en pantalla. Que no haya que dar
scrolling ni horizontal ni vertical. Denominador
comn 1024 x 768. Nos referimos principalmente
a la pantalla inicial (home page). Todas las otras
pantallas deben tener una apariencia ntida,
compacta y consistente pero obviamente muchas
de estas pginas tendrn ms informacin donde
habr que hacer scroll.

Interface y navegacin
Diseo de Navegacin
Si tu puedes encontrar con facilidad la forma de moverte a travs del site
y encontrar la forma de regresar a la pgina inicial o home page en
cualquier momento desde cualquier pgina, la navegacin est bien
diseada.
Por otra parte, si el web site que visites es vago en su presentacin y en
organizacin de contenido y te pierdes en el site, la navegacin est
pobremente diseada.
El foco del buen diseo de navegacin es la organizacin, no las grficas.
A pesar de que las grficas pueden aadir valor esttico a la navegacin,
tu meta principal es hacerle fcil a los visitantes el encontrar la forma de
navegar de y hacia cualquier parte del site que disees.
Algunos sites utilizan simples enlaces de textos mientras otros usan
iconos grficos (con palabras o ilustraciones). Tu consideracin principal
es asegurar que navegar el site sea fcil y se pueda disfrutar. Con
cualquier estilo que escojas, claro y simple deben ser tus metas.

Interface y navegacin
Estilos de navegacin
Hay muchos estilos de navegacin: botones de
navegacin, barras de navegacin (usualmente un grupo
de iconos), simples enlaces de texto, grficas animadas,
image map y ms.
El sistema primario de navegacin que contiene las
principales secciones de tu web site debe mantenerse
junto, ya sea en el tope de la pgina, en el final de la
pgina o a uno de los lados de la misma.
Si tienes una pgina larga, que hace scroll, es til
colocar el sistema de navegacin a ambos extremos (tope,
final) de la pgina. Tambin se utilizan versiones grficas
en el tope de la pgina y una versin de todo texto al final.

Interface y navegacin

Repeticin
La repeticin y consistencia de los elementos de
navegacin de una pgina a otra son importantes. Si un
visitante ve el mismo sistema de navegacin en cada
pgina, esto le aade un nivel de familiaridad y
orientacin.Los visitantes se molestarn si tienen que
buscar los botones en cada pgina o si los enlaces tienen
diferentes palabras, tcnicas o iconos.

Dnde estas?
Un buen sistema de navegacin le da al visitante una clave
visual de cul pgina est actualmente. Esto se puede
hacer simplemente quitando el enlace del texto del enlace
correspondiente a la pgina actual, o si usas grficas
puedes opacar al icono para esa pgina y quitar el enlace.
Algunas personas hacen lo opuesto; el icono para la pgina
actual es el nico que no est opaco. Tambin puedes