d

1. Paginas web
Alejandro Santana Bellón
4º ESO B

2. Definición
• Una página web, página electrónica o cyber página,1
2 es un documento o información electrónica capaz de
contener texto, sonido, vídeo, programas, enlaces,
imágenes, y muchas otras cosas, adaptada para la
llamada World Wide Web y que puede ser accedida
mediante un navegador. Esta información se encuentra
generalmente en formato HTML o XHTML, y puede
proporcionar navegación (acceso) a otras páginas web
mediante enlaces de hipertexto. Las páginas web
frecuentemente también incluyen otros recursos como
ser hojas de estilo en
cascada, guiones (scripts), imágenes digitales, entre
otros.

3. Historia
• En un principio las páginas web eran sólo texto, pero a medida que
ha evolucionado la tecnología, tanto los ordenadores como las
redes de telecomunicaciones, se ha generado nuevas formas de
desarrollar la web.
La inclusión de imágenes fue la evolución más significativa, pero
también debemos mencionar el video y la animación, o los espacios
3D, lo que aporta valores estilísticos, de diseño y de interactividad
jamás imaginados antes.
• El diseño de páginas web se ha desarrollado a medida que ha
evolucionado Internet. En 1992 sólo había alrededor de 50 sitios
web. Las últimas estadísticas nos confirmaban que actualmente
rondan los 8.000 millones de sitios web, a los que diariamente se
les suma a raíz de 4400 por día.

4. PROGRAMAS DE
DISEÑO LIBRES

5. Editor HTML: Adobe
Dreamweaver
• Sé lo que estás pensando: Adobe Dreamweaver es una
herramienta bastante compleja con demasiadas opciones y
posibilidades como para ser aprovechada por un usuario amateur.
Pues bien, tienes razón… en parte. Sin embargo, ello no es
impedimento para que también searealmente intuitiva, bastante
fácil de utilizar y para que tenga el valor añadido (debido a su
popularidad) de contar con una enorme cantidad de tutoriales en
Internet.
• Así, este programa te ayudará a crear el esqueleto de tu sitio, es
decir, la arquitectura que sostendrá el resto del contenido. Además,
sus diferentes modos de edición te permitirán aprender a incluir
tus primeras etiquetas HTML, familiarizarte con las diferentes líneas
de código y comprender los fundamentos básicos de la
construcción de la web.

7. Plantillas web: Artisteer
• Por supuesto, una vez hayas consolidado el esqueleto y el mapa de
navegación, llegará el momento de decorarlo. Alternativas hay
muchas y generalmente los diseñadores web eligen crear todos los
elementos gráficos y multimedia de forma manual y completamente
desde cero. Sin embargo, también existe un camino fácil:
las plantillas prediseñadas.
• Básicamente, estas plantillas cuentan con módulos y espacios
predeterminados que puedes añadir rápidamente a tu sitio sin tener
que preocuparte por configurar todo el aspecto gráfico. En este
sentido, uno de los mejores programas para la creación de plantillas
de una forma intuitiva es Artisteer.
• Ello se debe a que cuenta con numerosos elementos
prediseñados que podrás seleccionar y combinar a tu gusto para
conformar la apariencia final de tu sitio. Al terminar, solo tendrás
que exportar tu trabajo y utilizarlo en tu web.

9. Editor de imágenes web: Adobe
Fireworks
• No hay dudas que Internet se ha convertido en un medio
básicamente visual, por lo que el tratamiento de imágenes es
crucial para el trabajo de cualquier diseñador. Por ello necesitarás
una herramienta lo suficientemente potente y completa como para
trabajar sobre todas tus imágenes y prepararlas para la Web. En
contra de lo que estarás pensando, la opción ideal no es Adobe
Photoshop.
• El programa perfecto para esta clase de cuestiones, sin embargo,
síes una aplicación de Adobe:Fireworks. Para todos aquellos que
aun se siguen preguntando por qué forma parte de la Creative
Suite, la razón es que este programa permite editar imágenes de
una forma muy sencilla y exportarlas directamente para ser
utilizadas en la web.

11. Diseño de logos: Logo Cre8or
• Uno de los elementos esenciales a la hora de
construir un sitio web es el logotipo, necesario
para identificarlo. Este componente es uno de
los desafíos más importantes para el diseñador
web, ya que debe transmitir todo lo que
representa la compañía, el producto, el artista o
la marca. En este sentido, lo más indicado sería
crearlo partiendo desde cero, sin embargo, si
estás dando tus primeros pasos en el
apasionante mundo del diseño, Logo
Cre8or puede que te sea de ayuda.

13. CLIENTE FTP: FILEZILLA
• Por último, tu sitio deberá estar alojado en un servidor FTP para
que los usuarios de Internet puedan encontrarlo. De esta forma,
deberás situar en esta ubicación todos los contenidos que hayas
diseñado y configurado con la ayuda de las herramientas
anteriormente citadas. Para ello existe lo que se conoce
como clientes FTP.
• Entre la inmensa variedad de posibilidades que es posible
encontrar en el mercado, Filezilla es uno de los más fiables y
seguros. Con solo rellenar un par de campos, podrás arrastrar y
soltar los contenidos que hayas creado para tu página y hacer que
estén disponibles en la Red. Además, este programa cuenta con
múltiples ventajas, como el hecho de contar con una interfaz
traducida al español

15. Programas de diseño de pago

16. BlueGriffon
• Bluegriffon es otro editor WYSIWYG gratuito y
basado en el motor de firefox, pero con la
mayoría de componentes adicionales de pago,
como por ejemplo el manual de usuario. Esta es
una de las mayores trabas ya que no se dispone
de documentación gratuita para el manejo del
programa. Incluso para ver el programa a
pantalla completa, necesitaremos la extensión
“FullScreen view/Edit”, también de pago.

17. Adobe Dreamweaver
• Sin duda el rey de los programas para la
creación de webs. Funciona tanto en Windows
como en MAC y también es un editor
WYSIWYG. No necesitas saber programación
html para hacer páginas web con Dreamweaver,
pero si es aconsejable para sacar el máximo
rendimiento del programa. Recordemos que es
un programa de pago, y vale la pena pagar por
él si te dedicas al diseño web. Existen un
montón de tutoriales en la red sobre el manejo
de este software, sobre todo en youtube.Su
precio es de 530 €.

18. PicMonkey
• PicMonkey es un a aplicación web que a
estas alturas todo el mundo conoce. Es
superintuitiva, y muchas blogueras las
utilizan para crear sus carteles y diseños
de una forma súper rápida. Según pasa
el tiempo, la van mejorando más y más, y
añadiendo nuevos recursos gratuitos (y
también de pago).

19. WebSite X5 Evolution 9
• Destaca por su sencillez de uso, permite
crear páginas web de aspecto profesional
gracias a su gran cantidad de diseños y
funciones sin necesidad de tener
conocimientos previos. Además incluye
alojamiento. Su precio es de unos 70€.

20. WebEasy Professional 8
• Este software cuenta con una interfaz WYSIWYG, y
permite además la edición de HTML . Ofrece más de
600 plantillas para personalizar tus diseños. WebEasy
Professional es una de las aplicaciones de diseño web
más funcionales y fáciles de usar en el mercado. Si
estás buscando un programa simple pero eficaz que no
requiere horas de aprendizaje de diseño gráfico y
HTML, WebEasy Professional 9 es tu programa ideal,
también es apto para usuarios más avanzados gracias a
la opción de edición de HTML y la gran cantidad de
funciones que ofrece. Cuesta cerca de 50 €.

21. • Magix cuenta con una gran una reputación para
la creación de productos multimedia y
relacionados con Internet y este software no es
una excepción. Aunque presenta algunos
problemas de usabilidad, Web Designer es una
excelente aplicación muy adecuada para
usuarios intermedios y avanzados que buscan
una aplicación de diseño eficaz y versátil, con
una gran colección de plantillas, permite añadir
gráficos, cambiar colores y componentes en
cualquier lugar del sitio. Su precio es de 99 €.
MAGIX Web Designer MX

22. Web to date 6
• Aunque cuenta con un diseño algo
obsoleto es un programa realmente
completo con cantidad de funciones para
crear tu página web profesional en pocos
minutos sin necesidad de conocimientos
previos. Su precio es de 99 €.

23. ESTRUCTURA DE UNA PÁGINA
WEB

24. • La estructura básica de una página web es la siguiente:
• <html>
<head></head>
<body>
</body>
</html>
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>.
Todo lo que esté en medio será la página web. Dentro de <html></html> se
encuentran 2 partes diferenciadas.
• La primera <head></head> es la cabecera de la página. Aquí irán cierta
información que no es directamente el contenido de la página. Aquí se pone el
título de la página, los metadatos, estilos, código javascript (todo esto se
estudiará en capítulos venideros). La primera que se suele estudiar es
<title></title>, que indica el título de la página (lo que el navegador pone en la
parte superior izquierda).
• La segunda parte es <body></body>. Aquí va propiamente el contenido de la
página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo
de la página anterior, el siguiente código
• <html>
<head>
<title>Esto es el t&iacute;tulo de la p&aacute;gina.</title>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto it&aacute;lica.</i><br>
</body>
</html>generará el siguiente resultado (abre la página en otra ventana, dale al
botón derecho => ver código fuente, y verás así el código HTML de la página)

25. COMO COMERCIALIZAR
UNA PAGINA WEB

26. Todo es válido a la hora de
publicitar
• Es común hoy en día, entre otros factores de marketing, la inclusión
de la página Web y la dirección de correo electrónico en objetos tan
variados que van desde la almohadilla para deslizar el “mouse” hasta
tazas u otros objetos para regalos empresariales, como lapiceras o
calendarios para escritorio, sin olvidar, por supuesto, las clásicas
tarjetas personales o de la Empresa a la que el portador representa.
• Este tipo de publicidad suele no fallar cuando el potencial cliente
necesita saber o recordar datos del eventual “vendedor”.
• Tampoco se debe despreciar la publicidad “boca a boca”, al hacerle
conocer a un posible cliente los datos informáticos del que ofrece sus
productos y desea publicitarlos.
• Hasta puede publicitarse mediante un cierto tipo de lanzamiento de
prensa.
• Si alguien tiene que hacer conocer un nuevo producto o servicio, es
una muy buena idea hacer una especie de “lanzamiento” para los
medios especializados a través de la página Web de la Empresa, y
mediante una simple comunicación también vía e-mail inducirlos a
visitar dicha página y así enterarse y comenzar a publicitar el material
que se desea introducir en el mercado.
• La Web llegará a miles de personas en pocos minutos, y la publicidad
que se logre podrá no ser igualada por ningún otro medio publicitario.

27. Publicitar productos y/o servicios
por la Web
• Es una forma cada vez más difundida y económica de
incrementar las ventas y llegar a miles de personas en
un muy corto tiempo.
• La mayoría de las visitas a la Web son el resultado de
una búsqueda específica de algo (bien, servicio,
información, etcétera), que se necesita en determinado
momento. Es por eso que quien desea comercializar
algo vía Internet puede hacerlo de una manera cada vez
más sencilla y, prácticamente, sin costo alguno.
• Ningún negocio, no importa lo que venda, está abierto al
público 24 hs. al día durante los siete días de la semana
y a lo largo de los trescientos sesenta y cinco días del
año