Principios básicos de diseño de páginas web. ¿Qué son los dominios? ¿Como escoger un “hosting”? Impacto de la web 2.0 en el diseño de páginas Web.

1. Diseño de Páginas de Web
Dra. Aury M. Curbelo
acurbelo@gmail.com

2. Objetivos
Discutir:
Principios básicos de diseño de páginas web
web.
¿Qué son los dominios?
¿Como escoger un “hosting”?
Impacto de la web 2.0 en el diseño de páginas Web.

4. ¿Cúantas páginas de Web hay en el Mundo?
http://searchenginewatch.com/showPage.html?page=2156481
1 billion

5. Pandia
http://www.pandia.com/searchworld/2000-39-oclc-size.html
The Web contains 7 million
sites
Researchers at the Online Computer Library Center (OCLC)claim that the Web now
contains Some 7 million unique sites, a 50 percent increase compared to 1999's 4.7
q p p
million.

6. ¿Qué necesito para empezar una página de Web?
Acceso a la Internet Software para fotografía
Web-Host para guardar las páginas
Varios Web browser
Software para crear las páginas
FTP software

7. Pasos para la
creación de una
p g
página de W eb

8. Establezca un Propósito
propósito y mensaje central Cree una jerarquía lógica
N haga las páginas muy
No h l á
cargadas.
Utilice el balance

9. Guías para el diseño
Primer paso en el diseño
p
Poseer un dominio es esencial
http://www.acurbelo.org/blogs
http://www acurbelo org/blogs

10. Ejemplos de dominios
www.acurbelo.org- Aury M. Curbelo
http://de.gobierno.pr/deportal/inicio/inicio.aspx -
D
Departamento d Ed
de Educación De Puerto Rico
ió D P Ri

11. ¿Qué es un dominio?
Un dominio de Internet es un nombre de un servidor de
I t t f ilit
Internet que facilita recordar de forma más sencilla la
d d f á ill l
dirección IP de un servidor de Internet.
Todos los servidores y páginas de Internet tienen una
dirección numérica que se conoce como dirección IP
(Protocolo de Internet), por ejemplo 69.93.247.103

12. ¿Qué es un dominio? (cont.)
Los dominios fueron creados para evitar el que
tuviéramos que recordar l d
é d las direcciones numéricas de
é d
las páginas y servidores web.
De f
D forma que cuando escribimos en i t
d ibi internet el
t l
dominio acurbelo.org el servidor de DNS (Servidor de
Nombres de Dominio) del proveedor de web hosting
del dominio acurbelo.org nos proporciona la dirección
IP http://69.93.247.103/ y nuestro navegador se va
p g
directamente a esa dirección numérica.

13. ¿Cómo registro un dominio?
La mejor opción es registrar el dominio con un proveedor
de servicios de hospedaje ya que además del registro de
dominio le
d i i l puede dar posteriormente un espacio para
d d i i
alojar su página y se encarga de todos los aspectos
técnicos por usted.

14. Lugares para registrar un dominio
http://www.thezerohosting.com/
http://www.domain.com/
htt // d i /
http://www.register.com/retail/index.rcmx
**http://www.godaddy.com/gdshop/default.asp?location=www%2
http://www.godaddy.com/gdshop/default.asp?location www%2
Egoogle%2Ecom%2Fsearch
http://www.aplus.net/ ***

16. Partes de un dominio
Los dominios están formados por dos partes:
a. El nombre
El nombre d l d i i es el que contiene generalmente
b del dominio l i l
la razón social, marca o nombre de la página. Por
ejemplo en www.acurbelo.org, el nombre del dominio
es “acurbelo”
acurbelo
b. La extensión
La extensión identifica el tipo de dominio que es . Por
ejemplo en acurbelo.org, la extensión es “.org”

17. ¿Mayúsculas o minúsculas?
Los dominios no son sensibles a mayúsculas o minúsculas,
es decir, a pesar de que escribamos en mayúsculas o
minúsculas el dominio la computadora únicamente
interpreta las letras, de forma que podemos acceder una
p g
página escribiéndolo de cualquier manera.
q

18. Cantidad de letras
Todos los dominios de Internet deben
tener un nombre de al menos 3 letras
(por ejemplo “abc com”) y pueden
abc.com )
tener un máximo de 63 letras sin
contar la extensión del dominio.

19. Caracteres permitidos en los dominios
Los dominios de Internet pueden tener los siguientes
caracteres:
a. Letras de la A a la Z (con la excepción de la Ñ)
b.
b Números del 1 al 0
c. Guión medio “-“
Cualquier otro carácter como espacios en blanco
blanco,
acentos, signos de puntuación, paréntesis, guión bajo “_”,
etc. no pueden ser parte de un dominio.
Además los nombres de dominios no pueden comenzar
con un guión medio “-“.

20. Guías para el diseño (cont.)
No provea muchas alternativas de navegación
7-10 máximo
7 10
Utilice gráficas que suban rápido
Utilice texto y fotografía
Escoge un buen “Web host”

21. Escogiendo al “Web Host”
Web Host
Que provea servicio técnico 24/7
Espacio disponible: 100MB por lo general almacena
1000 páginas.
20 MB es suficiente
Duración del contrato
Número ilimitado de visitas
Correo electrónico
Downtime
Downtime- un buen host debe tener 99.5% de uptime
y 0.5% para downtime

22. Escogiendo al “Web Host” (cont.)
Costo
CGI Bin se usa para formas correos y mucho más
Bin- formas,
Ejemplos:
http://www.htmlgoodies.com/
http://www.domaindirect.com/
**http://www.teachersdomain.org/
http://www.dotster.com/

23. Herramientas Populares para diseño
Adobe GoLive-
http://www.adobe.com/products/golive/main.html
h // d b / d / l / h l
Dreamweaver-
http://www.macromedia.com/software/dreamweaver/
htt // di / ft /d /
FrontPage- http://www.microsoft.com/frontpage/
Trellix Site Builder-
T lli Si B ild
http://www.earthlink.net/software/free/trellix/

24. Tres tipos de Webpage
Homepage-Página principal
Intermedias-Páginas que van despúes del homepage
Páginas de Contenido
Homepage
Intermedias
Páginas de Contenido

25. Fórmula de Tres C (3)
Consistencia
Color
http://www.visibone.com/colorlab/
http://www.lynda.com/hex.html
p y
http://hotwired.lycos.com/webmonkey/reference/color_codes/
http://www.returnofdesign.com/colors/
Contenido

26. Color
¿Hexadecimales?

27. Tamaño de la Página
640 x 480=307,200 pixeles
800 x 600= 480,000 pixeles
480 000
1024 x 768= 786,342 pixeles
http://www.wpdfd.com/wpdtame.htm

28. Tamaño de la Página (cont.)
http://www.webstyleguide.com/page/dimensions.html
http://www.webdesignpractices.com/pagewidthlength.html
htt // bd i ti / idthl th ht l
http://www.decloak.com/Products/Dreamweaver/NestedTe
mplates/Support/WebPage_Size.aspx
p pp g p
http://www.webdesign.org/web/web-design-basics/website-
usability/the-web-page-width-dilemma.2641.html

29. Organización de la página

30. Otras
alternativas

31. Window Live Spaces
http://spaces.live.com/

32. Google Page Creator
www.pages.google.com
http://acurbelo.googlepages.com/home

33. http://www.weebly.com/
http://www weebly com/

34. http://www.jimdo.com/

35. http://www.webnode.com/en/

36. http://www.doodlekit.com/home
p

37. http://www.sampa.com/
p p

38. http://udutu.com/
htt // d t /

39. Otras…
Tanto:
Microsoft Word
f
Microsoft PowerPoint
Microsoft Publisher
Tienen una opción de Save Page As… que te permite
g
grabar una página normal en una página de Web.
p g p g

40. Actividad: Diseñar una página Web usando
Weebly
Objetivo:
Diseñar una página web
web.
Integrar el video digital en la página.
Instrucciones:
Ir a http://www.weebly.com/
Leer:
http://www.weebly.com/support/
http://www.maestrosdelweb.com/editorial/weebly-el-mas-simple-de-
los-editores-web-online/

41. Preguntas
Dra. Aury M. Curbelo
acurbelo@gmail.com
b l @ il
http://www.acurbelo.org/blogs