Diseño Y Programacion De Paginas Web

385 Pages·6.297 MB·Spanish

by  Pedroza Pareja Miguel

Diseño y Programación de Páginas Web

Autor: DesarrolloWeb
Editor: Miguel Ángel Pedregosa Pareja

Índice
Capitulo 1
Publicar en Internet
Tratamos los temas más básicos que necesitas saber para publicar una página web,
como los materiales necesarios, el lenguaje HTML, editores, elegir alojamiento, subir
páginas a los servidores y mucho más.
Pág. 4
Capitulo 2
Introducción al diseño web

Primeros pasos para aquellas personas que deseen crear su propia página web, desde el
punto de vista del diseñador. Motivación a seguir, programas a utilizar, etc.
Pág. 12
Capitulo 3
Manual de HTML

HTML es el lenguaje utilizado como base para crear las páginas web. Con este manual
puedes aprender a utilizarlo con toda su potencia.
Pág. 15

Capitulo 4
Ayudas técnicas

Las ayudas técnicas son pequeños reportajes de interés general muy útiles para conocer
rápidamente diversos temas de interés.
Pág. 75

Capitulo 5
Introducción a la promoción de webs

Una vez hemos construido una página web tenemos que hacer que esta sea conocida
por todos los medios que estén a nuestro alcance, para atraer visitas a ella y, cuando
menos, sentirnos orgullosos de que esta sea popular en la Red. Para conseguir esto
tenemos que promocionarla adecuadamente, de manera que su dirección figure en el
mayor número de sitios.
Pág. 115

Capitulo 6
La imagen en Internet

Explica cómo debemos crear la imagen en Internet de las empresas, productos o
servicios que deseamos vender. No vale clonar lo anterior; hace falta conjugar
estrategia, contenido, diseño y tecnología.
i
Pág. 146

Capitulo 7
Páginas dinámicas

Introducción al concepto de páginas dinámicas, lenguajes de lado cliente y servidor y
otra serie de nociones básicas para lanzarse a la aventura de la programación en ASP o
PHP. Este manual sirve de introducción a otros más avanzados.
Pág. 150

Capitulo 8
Introducción a los lenguajes del web

Vamos a estudiar de manera global el mundo de la programación de páginas web. Para
ello empezaremos estudiando rápidamente algunos conceptos básicos, que seguramente
muchos ya sabremos, como el marco donde la web se desarrolla, qué es una página web,
cómo se construye una página y el lenguaje HTML. Además veremos qué es una página
estática y dinámica distinguiendo entre páginas dinámicas de cliente y servidor.
Pág. 155

Capitulo 9
Programación en ASP

Principios básicos para la programación en ASP, el lenguaje del lado del servidor
creado por Microsoft . Manual asequible para no programadores que sienta los
fundamentos básicos de este lenguaje. Continuación lógica del manual de páginas
dinámicas.
Pág. 169
Capitulo 10
Programación en PHP

Principios básicos para la programación en PHP, el popular lenguaje del lado del
servidor. Manual asequible para no programadores que sienta los fundamentos básicos
de este lenguaje. Continuación lógica del manual de páginas dinámicas.
Pág. 187

Capitulo 11
Programación en JavaScript

Descubre el lenguaje dinámico de lado cliente por excelencia. Aprende a crear páginas
webs con vida propia con nuestro manual de Javascript.
Pág. 224

ii
Capitulo 12
Programación en Javascript II

En este manual explicamos todos los recursos con los que cuenta un programador de
Javascript para crear todo tipo de efectos y aplicaciones.
Pág. 258

Capitulo 13
Tutorial de Visual Basic Script

Manual del lenguaje de scripting de Microsoft para páginas web con el que podrás
aprender a realizar efectos para el Internet Explorer.
Explora las características del HTML Dinámico con el lenguaje del navegador más
habitual.
Pág. 304

Capitulo 14
CSS, hojas de estilos

Manual completo y práctico sobre hojas de estilo en cascada (CSS). Aprende a utilizar
esta tecnología que te ayudará a crear páginas más atractivas y precisas. El curso
contiene la descrición, uso, sintaxis, y lista de atributos para crear estilos.
Pág. 320

Capitulo 15
Introducción a XML

Una breve intruducción al mundo XML que explica qué es este lenguaje y sus
tecnologías relacionadas.
Pág. 337

Capitulo 16
Tutorial de SQL
Aprende a utilizar el estándar utilizado para la consulta de bases de datos. Seleccionar,
crear, modificar y borrar registros. Todo lo que necesitas para la creación de tus páginas
dinámicas.
Pág. 342

Apéndice I
Qué es cada tecnología
Este apendice trata en cada uno de sus capítulos de introducir cada una de las
tecnologías utilizadas en el desarrollo de páginas web.
Pág. 352
iii
Apéndice II
Frontpage 2000 para principiantes

Un análisis en profundidad de Frontpage y la respuesta a las preguntas más habituales
planteadas por los usuarios novatos de este programa.
Pág. 373

Apendice III
Instalación de IIS en Windows XP profesional

Descripción detallada del proceso de instalación y configuración de Internet Information
Server en Windows XP profesional. Conceptos básicos necesarios para empezar la
administración.
Pág. 377

iv
Capitulo 1
Publicar en Internet

Tratamos los temas más básicos que necesitas saber para publicar una página web, como los materiales
necesarios, el lenguaje HTML, editores, elegir alojamiento, subir páginas a los servidores y mucho más.

Introducción a Internet

Internet es una red de ordenadores conectados en toda la extensión del Globo Terráqueo que ofrece
diversos servicios a sus usuarios como pueden ser el correo electrónico, el chat o la web. Todos los
servicios que ofrece Internet son llevados a cabo por miles de ordenadores que están permanentemente
encendidos y conectados a Internet, esperando que los usuarios les soliciten los servicios y sirviéndolos
una vez son solicitados. Como decimos, hay servidores para todo, los hay que ofrecen correo
electrónico, otros hacen posible nuestras conversaciones por chat, otros la transferencia de ficheros o la
visita a las páginas web y así hasta completar la lista de servicios de Internet.

También existe otro tipo de servidores que son los que se encargan de proveer de acceso a Internet a
nuestros ordenadores, son los proveedores de acceso, los servidores a los que nos conectamos con
nuestros módems. Cuando hacemos la llamada con el módem a los servidores que proveen el acceso
entramos a formar parte de Internet y mientras mantengamos la conexión podremos acceder a todos los
servidores repartidos por todo el mundo y solicitarles sus servicios.

En el momento que pedimos un servicio de Internet nos convertimos en clientes del servidor que lo
ofrece. Para solicitar uno de estos servicios es necesario contar con un programa especial que suele ser
distinto para cada servicio de Internet. Por ejemplo, para acceder al correo electrónico utilizamos
Outlook, para acceder a la web utilizamos Netscape o Internet Explorer o para entrar en el chat
utilizamos un programa como Mirc o Pirch. Todos estos programas que nos dan acceso a los servicios de
Internet se denominan clientes, como se puede ver, para ser el cliente de un servidor de Internet
necesitamos un programa cliente del servicio al que intentamos acceder.

La web es un servicio de Internet

Toda esta introducción sirva para que nos demos cuenta que Internet es un conjunto de servicios y el
web, que es lo que tratamos de analizar, no es más que uno de ellos. Probablemente sea el más popular
en estos momentos y a veces parezca que Internet se limita al web, como en los anuncios de prensa,
donde casi siempre nos venden portales o productos de la web como si ellos fueran lo único que se
puede hacer en Internet. La web es entonces un servicio más que consiste en un inmenso conjunto de
páginas conectadas unas a otras por un sistema de enlaces.

El sistema con el que está construido el web se llama hipertexto y es un entramado de páginas
conectadas con enlaces. Los sistemas de hipertexto se utilizan en otros contextos, como la ayuda del
Windows y son muy fáciles de utilizar y de encontrar lo que buscamos rápidamente. La web no solo se
limita a presentar textos y enlaces, sino que también puede ofrecernos imágenes, videos, sonido y todo
tipo de presentaciones, llegando a ser el servicio más rico en medios que tiene Internet. Por esta razón,
para referirnos al sistema que implementa el web (hipertexto), se ha acuñado un nuevo término que es
hipermedia, haciendo referencia a que el web permite contenidos multimedia.

Multimedia, por si alguno no lo sabe todavía, hace referencia a muchos medios, solamente quiere decir
que se están utilizando muchos medios para presentar información como son el vídeo, el audio o
realidad virtual. Cuando nos venden un ordenador multimedia, nos venden un ordenador que está
construido para poder trabajar con muchos medios, como imagen, sonido, animación, video, etc.

Cómo es una web por dentro

Una página web la vemos en nuestro navegador, o cliente web, y parece una sola entidad, pero no es
así, está compuesta por multitud de diferentes ficheros, como son las imágenes, los posibles vídeos y lo
más importante, el código fuente que dice donde colocar cada texto, cada imagen o cada video y la
forma que tendrán estos al ser colocados en la página. No es problema que las webs estén compuestas
por tantos elementos, ya que rápidamente veremos que su organización es fácil y que no se nos van a
perder o escapar ninguno.

Como hemos podido imaginar y a modo de resumen, para publicar en Internet necesitaremos construir
unos documentos hipertexto, o hipermedia, con sus correspondientes archivos de imagen o video y
colocarlos en unos ordenadores que son servidores de páginas web. Pero esto es algo que vamos a
tratar de explicar poco a poco en los siguientes capítulos.

4
Aunque signifique adelantarse a los acontecimientos, es interesante señalar que con una simple acción
podemos ver el código fuente de de las páginas, es decir, cómo están hechas por dentro. Para ello en
Internet Explorer se ha de pulsar sobre el menú de Ver > Código fuente y en Netscape se ha de
seleccionar Ver > Origen de la página.

Pasos previos I. Pensar un tema

Para publicar una página en Internet debemos seguir unos pasos, primero una planificación, luego la
construcción de las páginas y más tarde la promoción y constante actualización de las páginas. En este
capítulo vamos a ver cuáles son los pasos previos que debemos realizar para que nuestro esfuerzo y
resultados sean lo más óptimos posibles, es decir, vamos a ver cuál es la planificación que hay que
hacer antes de ponerse manos a la obra.

Pensar un tema

Puede ser el más importante de los pasos para la creación de un web. Hay que elaborar la idea y
documentarse sobre el tema que has elegido para tu página en Internet.

Cuando hacemos incluso una página personal podemos hablar de algún tema interesante como nuestro
equipo de fútbol o nuestro cantante favorito, o de un tema que nos conmueva profundamente, como el
ecologismo o la historia de nuestra comarca.

También podemos construir una página que trate de nuestra familia o de nuestros perros, o todo junto,
pero tenemos que tener en cuenta que el valor de este tipo de páginas es mucho menor y que a los
demás usuarios seguramente no les va a interesar. Si deseamos construir una página que algún día sea
popular, debemos abordar, como digo, temas que sean de interés para un grupo de gente.

Una vez pensado el tema es muy importante documentarse lo más posible sobre él, aunque muchas de
las ideas pueden estar en nuestra cabeza, es importante tomar notas, fotografías u opiniones de otras
personas que también conocen el asunto que nos traemos en la cabeza. Insisto, es importante que el
material que vamos a publicar tenga el mayor valor posible, así conseguiremos los mejores resultados.

Pasos previos II. Estructura del sitio

Es importante también que pensemos en la estructura de los contenidos de todo el sitio antes de
ponernos a diseñarlo. En este punto tenemos que pensar sobre varias cosas, como las distintas
secciones que va a contener el sitio, el árbol de las páginas que vamos a tratar, etc.

La manera de que este punto sea realmente útil, es preparar todas estas ideas sobre el papel. Con toda
la tranquilidad del mundo y con toda la determinación posible vamos a preparar una serie de diagramas
y listados que nos permitan dirigir nuestros esfuerzos de la manera más óptima.

Secciones del sitio: Podremos pensar en qué secciones vamos a poner en el sitio. Una con información
general, otra con información de contacto, otra con una visita gráfica a nuestras instalaciones, etc.

Árbol del sitio: Podemos dibujar en un papel cuáles son las distintas secciones del sitio, metidas dentro
de cuadrados y representar también los enlaces que hay entre cada sección, mediante líneas que unen
esos cuadrados. Es algo muy simple y divertido de hacer, además podemos tener nuevas ideas para el
web a medida que lo vamos dibujando.

Esquema de una página: podemos dibujar en papel también una página del sitio que vamos a
construir, para que veamos donde colocar la barra de navegación, el logotipo del sitio o la empresa, un
posible banner publicitario, etc. Este esquema puede ser también de utilidad a la hora de construir las
páginas y siempre es más fácil diseñar sobre el papel que diseñar directamente con el ordenador

Estos pasos son opcionales, cualquiera puede ponerse a construir una página nada más decidir que
desea tener una web, pero no todo el mundo es capaz de plantearse bien cuáles son sus objetivos y
formar un proyecto con todos los puntos desarrollados de antemano. Los resultados finales son lo más
importante y empezar la casa por el tejado no va a ser lo más positivo para nuestra página y los
resultados finales mejorarán si hacemos primero una planificación.

Qué necesitas para empezar

Para ponernos a diseñar páginas web nos hace falta realmente poco material. En la mayoría de los
equipos que se instalan con Windows 98 se encuentran todos los materiales necesarios para empezar sin
necesidad de obtener nuevos programas.

En concreto, los materiales necesarios son un editor de textos, con el que programaremos nuestras
páginas y un cliente del web como Internet Explorer o Netscape Navigator. Como un ordenador Windows
5
98 por defecto siempre tiene instalado el Block de Notas y también el Internet Explorer se puede
empezar a construir una página web sin más necesidades que lo que ya tenemos.

En otros sistemas distintos de Windows 98 será también muy fácil obtener un editor de textos sencillo y
un navegador con el que ver las páginas que vamos a crear, si es que no están instalados ya. Sitios en
la web desde donde se pueden descargar estos programas son Tucows o Download.com, donde tienen
software de todos los sistemas operativos como Windows, Mac OS, o Linux.

También en castellano tenemos buenas páginas de descarga de software, la más representativa es
Softonic.

Sin duda, en nuestra aventura con el desarrollo del web vamos a necesitar muchos más programas
como por ejemplo programas de retoque fotográfico o editores complejos de páginas web, pero no es
necesario que los introduzcamos todavía en este manual porque no son necesarios para dar nuestros
primeros pasos.

Qué es HTML

HTML es el lenguaje con el que se definen las páginas web. Básicamente se trata de un conjunto de
etiquetas que sirven para definir la forma en la que presentar el texto y otros elementos de la página.

El HTML se creó en un principio con objetivos divulgativos. No se pensó que la web llegara a ser un área
de ocio con carácter multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posibles
usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo,
pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, estos
son los estándares del HTML. Numerosos estándares se han presentado ya. El HTML 4.01 es el último
estándar a febrero de 2001.

El HTML es un lenguaje de programación muy fácil de aprender, lo que permite que cualquier persona,
aunque no haya programado en la vida pueda enfrentarse a la tarea de crear una web. HTML es fácil y
pronto podremos dominar el lenguaje. Más adelante se conseguirán los resultados profesionales gracias
a nuestras capacidades para el diseño y nuestra vena artista.

Una vez conocemos el concepto de HTML os vamos a adelantar algunas cosas más. Este lenguaje se
escribe en un documento de texto, por eso necesitamos un editor de textos para escribir una página
web. Así pues, el archivo donde está contenido el código HTML es un archivo de texto, con una
peculiaridad, que tiene extensión .html o .htm (es indiferente cuál utilizar). De modo que cuando
programemos en HTML lo haremos con un editor de textos, lo más sencillo posible y guardaremos
nuestros trabajos con extensión .html, por ejemplo mipagina.html

Por adelantar un poco cómo se utiliza el HTML os diremos que el lenguaje consta de etiquetas que tienen
esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba en
negrita (bold) o <P> significa un párrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su
correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta.
Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. Así que el HTML no es más
que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro
documento. <B>Esto está en negrita</B>.

Para aprender HTML en profundidad tenemos un manual en DesarrolloWeb.com. Además se pueden
consultar los enlaces a distintos manuales que tenemos en nuestro buscador en la sección de HTML. Hay
que hacer en este punto una mención especial a un manual que es muy interesante, aunque un poco
anticuado ya, el Webmaestro.

Editores de HTML

Para las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo de
aprenderlo o porque se sientan incapaces de hacerlo, hay una posibilidad distinta a programar
directamente el HTML a base de texto. Se trata de utilizar un tipo de programas que nos permiten
diseñar la página como si estuviéramos escribiendo un documento con un editor del tipo de Word. El
editor de HTML es el encargado de vérselas con el lenguaje y programar internamente la página con el
código HTML según lo que nosotros estamos diseñando.

Con el editor HTML podemos colocar imágenes, definir estilos, utilizar negritas o cursivas, etc. sin
preocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el editor el que sabe estas
etiquetas y las utiliza convenientemente. Este tipo de editores HTML se denominan habitualmente
WYSIWYG (What You See Is What You Get) porque cuando trabajas con ellos lo que ves que estás
creando con el editor es lo que obtienes luego cuando grabas la página.

Existe entre las personas que se dedican a realizar las páginas web dos tendencias. Por un lado tenemos
6
a las personas que prefieren crear las páginas programando el HTML y por otro las personas que utilizan
editores HTML. Algunas diferencias entre hacerlo de un modo u otro son las siguientes
Escribiendo el HTML Con un editor WYSIWYG
Dominas con mayor precisión el código de la El código de la página tiene peor calidad,
página, queda más limpio. Si dominas bien el incluso puede llegar a tener errores, más o
HTML nunca tendrás ningún problema para menos visibles, que cuestan arreglar. Es la
hacer lo que deseas. máquina la que domina el trabajo.
Es más complicado el aprendizaje, más lento El aprendizaje es muy sencillo, tal como
y cuando se llega a un nivel avanzado puede ser trabajar en Word. Solo se trata de
también se hace considerablemente más manejar un programa más.
difícil
Hacer una página cuesta más trabajo y Es muy rápido.
tiempo.

Cada uno debe escoger el camino que más le convenga o el que le parezca más atractivo. De todos
modos siempre se puede empezar de un modo y luego pasar al otro modo sin ningún tipo de problema.
Incluso, por adelantarnos a los acontecimientos, diríamos que cuando una persona profundiza en el
diseño de páginas web llega un momento en el que le hace falta conocer las dos maneras de construir
webs. A los programadores en HTML les hará falta aprender un editor porque eso aumentará su
productividad y los que utilizan editores necesitarán aprender un poco de HTML para arreglar alguna
cosa que el editor ha hecho mal o realizar alguna cosa que el editor no puede hacer.

Este manual está escrito por una persona que aprendió a realizar sus primeras webs con el Block de
notas y algunas veces puede verse mi mayor inclinación a escribir el código HTML uno mismo. Aunque
mi consejo es aprender HTML, estoy seguro que muchos de vosotros, maestros diseñadores, obtendréis
mejores resultados utilizando un editor HTML WYSIWYG.

En el mercado existen multitud de editores de HTML WYSIWYG, es importante elegir un editor bueno
porque nuestros trabajos van a depender de sus resultados. Actualmente el rey de los editores y el que
os aconsejaríamos sin duda es el Dreamweaver, fabricado por Macromedia. Otras posibilidades son
editores como GoLive de Adobe o Frontpage de Microsoft, aunque este último lo desaconsejamos.

Editores de texto preparados para escribir HTML

Las personas que después de estas líneas han decidido aprender el lenguaje HTML también tienen
herramientas muy interesantes para aumentar su productividad sin dejar de escribir ellos mismos el
HTML que desean. Se trata de unos editores de texto, como cualquier otro, que están preparados para
escribir HTML y por lo tanto ofrecen multitud de ayudas a los diseñadores
• Colorean los códigos de las páginas para hacerlos más comprensibles
• Ofrecen ayudas a la programación
• Completan etiquetas
Y un montón de cosas más que sería demasiado complejo de enumerar aquí. Estos editores son por
ejemplo Home Site o UltraEdit y es muy recomendable utilizarlos para sentirnos más a gusto al
programar las páginas y poder hacerlas más rápido. Posiblemente sea aconsejable empezar con el Block
de notas, por que es lo más sencillo, pero utilizar un programa de estos será imprescindible con el
tiempo.

Construir las páginas

Por fin empezamos a trabajar en la página y vamos a ver algunos consejos útiles para hacerlo bien.

Es el momento en el que nos ponemos manos a la obra de una forma más dedicada y tenemos que
trabajar más duramente. El programar o diseñar las páginas podrá gustar más o menos que otras
acciones como planearlas o promocionarlas más tarde, pero no cabe duda que es el momento más
excitante porque nuestros sueños y nuestras ideas empiezan a concretarse en los resultados que
esperábamos conseguir.

Si hemos proyectado un sitio compuesto por un gran número de páginas lo más habitual es empezar
diseñando una página con el marco del sitio, que luego vamos a repetir a modo de plantilla en todas las
páginas. Pero esto son técnicas que aprenderemos con el tiempo.

Para ahorrarnos errores cuando hacemos las páginas podemos seguir una serie de consejos útiles.
7