Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos...

48
Los libros más útiles Suplemento especial de computer!dea número 10 • octubre 2001 Colección especial de 10 Nociones básicas de HTML Manejo de los más importantes editores Creación de páginas Web Las guías fáciles y rápidas para que no te líes con la tecnología páginas con los mejores trucos paso a paso 48 Web Crea tu propia Web Crea tu propia

Transcript of Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos...

Page 1: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

Los libros más útiles

Suplemento especial de computer!dea número 10 • octubre 2001

Colección especial de

10

Nociones básicas de HTMLManejo de los másimportantes editoresCreación de páginas Web

Las guías fáciles yrápidas para que no te líes con la tecnología

páginascon

los mejorestrucospaso a paso

48Web

Crea tu propia

WebCrea tu propia

p01-PORTADA10.qxd 10.09.2001 12:58 Página 1

Page 2: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

La colección de librosComputer Idea viene a

ampliar y profundizar el planteamiento práctico y de utilidadque caracteriza a nuestra publicación. De forma regular, nosacompañará ampliando y desarrollando temas que interesanal gran colectivo de usuarios informáticos: hardware,periféricos, herramientas, software, Internet, comunicaciones,etc. Cada tema es diseccionado minuciosamente para ofrecerpistas y trucos que optimicen la relación entre el usuario y lamáquina. Todos estos desarrollos van arropados deconceptos generales y de pasos a paso de las tareas quecorresponden en cadasituación. Los pasos apaso se seleccionan enfunción del provechoque pueden reportar alos lectores, abarcandotodo tipo de tareas quepueden interesar tanto ausuarios nuevos como aaquellos másexperimentados. Comopodréis comprobar, el tonode las explicaciones noencierra gran dificultad.Hemos utilizado un lenguaje lo más claro posible a la hora de explicar las tareas. En esta ocasión, nos acercamos alpeliagudo mundo del diseño de páginas web, mucho más fácil y accesible para el usuario medio gracias a lasherramientas de edición.

colección!dea octubre 20012

Bienvenidos

p02.qxd 10.09.2001 12:59 Página 2

Page 3: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

4 IntroducciónPáginas de presentación de los contenidos.

6 Planificar una página webUna preparación al trabajo de creación de la página.

8 Introducción a HTMLAlgunas nociones del clásico lenguaje de Internet.

11 Herramientas de diseño11 MS FrontPage 2000

El más sencillo de los dos programas básicos de diseño.13 Dreamweaver 4

El campo profesional llega a los usuarios medios.15 FrontPage: instalación y primeros pasos

Cómo empezar a trabajar con la herramienta.18 Las tablas y su publicación en la web

Uno de los elementos imprescindibles para la web.21 Estilo CSS en Dreamweaver

Opción que marca la diferencia del programa.24 Barra de navegación con Fireworks

La mejor forma de conseguir este elemento.26 Apache

Un servidor web muy sencillo.26 Instalación y primeros pasos

Ideal bajo Linux, funciona en Windows.35 WAP

Crear páginas para los móviles.39 Modos de explotación

Cómo poner en marcha la página.43 Nombres de dominio

Busca el nombre perfecto para tu dominio.

46 Glosario de términosGlosario de los más importantes términos utilizados en el ejemplar.

colección!dea octubre 20013

Sumario

p03.qxd 10.09.2001 13:13 Página 3

Page 4: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

IDEA PRÁCTICA

colección!dea octubre 20014

fectivamente, el diseño de un sitio web noes especialmente complicado, aunque lógi-camente deberemos empezar por un site

sencillo, en el que coloquemos algunas fotosnuestras que queramos compartir con nuestrosamigos y algunos comentarios sobre ellas o sim-plemente nuestro Currículo Vitae interactivo, enel que podemos insertar nuestra fotografía eincluso algún vídeo nuestro en el que nos exten-damos en la explicación de nuestros conocimien-tos, experiencia y aficiones.Una vez controlamos estas operaciones básicas, essólo cuestión de tiempo que progresemos e incre-mentemos el índice de complejidad de nuestraweb, que inicialmente será una sola página perocon el tiempo se puede convertir en un complejoentramado de páginas interrelacionadas en lasque ofrezcamos no sólo información, sino la posi-bilidad de descargar información e incluso cuen-tas de correo. Pero antes de ponernos ante nues-tro ordenador debemos analizar el tipo de páginaque queremos, si vamos a incluir alguna lista ofotografía, ya que para tratar estos elementosexisten otras herramientas más apropiadas queluego podemos exportar a nuestra web.Para realizar la tarea de construcción de lapágina en sí misma, existe un lenguaje propio

denominado HTML (Hipertext Markup Lan-guage o lenguaje de marcación de hipertexto)diseñado especialmente para esta operación.Sin embargo, la enorme penetración de Inter-net en nuestras vidas ha llevado a muchosdesarrolladores a diseñar aplicaciones que nosliberen de la tediosa tarea de escribir páginas ypáginas de un código poco atractivo, con unasintaxis inflexible que nos puede ocasionar

E

Aprende a diseñartu propia WebEl reto que supone la realizaciónde nuestra web personal resultamucho más asequible de lo quemuchos podrían pensar gracias ala aparición de los editores web.

p04/05.qxd 10.09.2001 13:13 Página 4

Page 5: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

más problemas que soluciones. Haremos unrápido recorrido por las herramientas o edito-res web más conocidos para pasar a continua-ción al diseño propiamente dicho de la páginaweb, en el que incluiremos algunos trucosprácticos que pueden simplificar notablementeel proceso de diseño.Una vez hemos diseñado nuestra páginaweb, sea del tipo que sea, todavía estare-mos a medio camino de publicar nuestracriatura. Deberemos elegir un lugar dondealojarla. También os explicaremos las dife-rentes opciones que podemos encontrar

para ello, las que son gratuitas y las que nolo son.En los últimos años, la enorme evolución de pro-cesadores y memoria y el lanzamiento de nuevasversiones de los dos navegadores más extendidos,Netscape y Explorer, permite que cualquierusuario disponga de un equipo con las suficientesprestaciones como para afrontar esta tarea sinmayores problemas en este sentido.

Lógicamente, para comprender con mayor clari-dad todo el proceso, es necesario conocer toda latecnología subyacente que hace falta para sopor-tar que nosotros «visitemos» páginas web que seencuentran en el ordenador de al lado o en uno amiles de kilómetros de distancia. Es preciso quehaya servidores que ofrezcan la información aunos clientes, que somos nosotros. Tanto clientescomo servidores necesitan un software específi-co, por lo que os explicaremos la instalación deambos. Casi todo el mundo ha instalado algunavez un navegador; sin embargo, la instalación delsoftware del servidor seguro que no está tanextendida. Y, por otra parte, este proceso se deberealizar de una manera ordenada, que tambiénexplicaremos.Otro detalle que reflejamos en este libro es unapequeña guía de las principales funciones deHTML, que además de ser conveniente, nosdará una idea de lo útiles que son los editoresweb, sea cual sea, y la cantidad de trabajo quenos ahorran. Otro aspecto que conviene acla-rar es el tema de los dominios, qué es lo quehay que hacer si queremos adquirir uno ycuánto hay que pagar en caso de que tengamosque hacerlo.Por último, haremos mención a aplicacionesespecializadas en realizar operaciones concretas.El enorme crecimiento de la World Wide Web hapermitido que las páginas web a las que accede-mos estén mucho más refinadas que las quepodíamos encontrar hace pocos años. Esto sedebe a la aparición de aplicaciones como Flash ya leguajes específicos como Java, que ya requie-ren unos conocimientos más amplios, pero con-viene que sepamos que existen y para qué valen.En definitiva, con este pequeño manual preten-demos aportar los conocimientos básicos paradiseñar nuestra web personal y explicar todo loque hay detrás, infraestructura y tecnología, paraque tengamos una idea mucho más completa delo que supone Internet sin conocimientos previosy sin recurrir a complejos manuales y terminolo-gía técnica que sólo nos va a complicar las cosas,más que aportarnos soluciones.

colección!dea octubre 20015

La enormepenetración de

Internet ha llevado a diseñar

aplicaciones que nos liberen del

tedioso HTML

p04/05.qxd 10.09.2001 13:13 Página 5

Page 6: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

l desarrollo de una página web, al igualque cualquier otra actividad que vaya-mos a realizar, necesita un trabajo previo

de planificación para facilitar lo máximo posi-ble el proceso de creación del site.Lógicamente, el camino que debemos seguir siqueremos realizar una web a modo de catálo-go de productos con un breve comentariosobre ellos es absolutamente distinto al que ha-bría que seguir si el objetivo es ofrecer infor-mación a modo de prensa digital, o si nuestra

intención es ofrecer la descarga de aplicaciones.Una vez hemos decidido el objetivo de nuestraweb, debemos tener claro el lugar donde vamosa alojarla. Si vamos a optar por utilizar como ser-vidor nuestro propio equipo el camino es biendistinto al que tendríamos que tomar si nuestraintención es valernos de las múltiples ofertas dealojamiento que encontramos en la red.En este apartado os ofrecemos el guión quehay que seguir cuando nos hayamos planteadohacer nuestra primera web.

PASO A PASO

colección!dea octubre 20016

Planificar una página webRealizar un trabajo previo de planificación de nuestra web nos facilitaránotablemente el proceso de desarrollo de la misma.

E

BÁSICO

Objetivode la webEl primer paso que reali-

zar es el objetivo de la web. Debemos hacerun esfuerzo para predecir los elementos quevamos a introducir en la web, ya sean foto-grafía o cualquier otro elemento. Para ello esconveniente que los vayamos almacenandoen un lugar específico para que la importa-ción a nuestra web sea más sencilla.

PASO 1 Tratamiento de los elementosUna vez hemos selecciona-

do los elementos que vamos a incluir en nuestrosite, debemos adecuar sus características a lasexigencias de la red. La inclusión de imágeneshace que la página «pese» más, por lo que debe-mos guardar los archivos gráficos con una defini-ción concreta y un tamaño concreto. De la mismamanera debemos proceder con el resto de ele-mentos. Si insertamos una presentación enPowerPoint, resulta mucho más sencillo realizarlacon la propia aplicación y retocarla para optimi-

PASO 2

p06/07.qxd 10.09.2001 13:14 Página 6

Page 7: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 20017

Elección de laherramienta dedesarrollo

A la hora de elegir la herramienta que vamos autilizar debemos tener en cuenta nuestro nivelde conocimientos en lo referente al diseño depáginas web. Editores web podemos encontraren gran número, pero ciñéndonos a los dos másextendidos, FrontPage y Dreamweaver, pode-

mos recomendar el primero de ellos a aquellosque se están iniciando en el diseño de páginasweb y su objetivo es realizar una sola página sinmayores complicaciones. Sin embargo, paraaquellos usuarios un poco más experimentadosque quieran realizar un trabajo más complejo eincluso hacer la labor de un administrador de lapágina web, es recomendable la aplicación deMacromedia: Dreamweaver.

zarla lo más posible para luego exportarla anuestro editor web. En este libro os recomenda-mos algunas de las aplicaciones específicas de

las que nos podemos valer para este proceso. Entodo caso, en la red podemos encontrar multitudde ellas totalmente gratuitas y muy prácticas.

PASO 3

Añadir efectosEn caso de que queramosañadir efectos de alto

impacto como pequeños vídeos o diseñarlosnosotros mismos, podemos valernos de herra-mientas diseñadas específicamente para estatarea como son Flash de Macromedia o Brycede Corel Corporation.

PASO 5

Depuración ypruebasUna vez hemos acabado el

diseño propiamente dicho, debemos reducir elcódigo al máximo. Ésta es una tarea propia de pro-gramadores, pero en la medida que podamos reali-zarla siempre es conveniente. Por otra parte, debe-mos realizar todas las pruebas antes de publicarnuestra web para evitar efectos indeseados comoel mal funcionamiento de la carga de la página o ladescarga de información si así lo teníamos previsto.Para ello podemos recurrir al la vista previa del edi-tor o ejecutar la página en nuestro propio equipo.

PASO 6

Desarrollode la webEl siguiente paso es, lógi-

camente, el más importante de todos, ya que setrata del diseño y desarrollo de la web propia-mente dicho. En este pequeño manual hemosrealizado algunos casos prácticos de cómo lle-var a cabo los primeros pasos en este sentido.

PASO 4 Alojamientode la webComo mencionamos a lo lar-

go de este libro, tenemos varias posibilidades a lahora de publicar nuestra web. Si la elección hasido utilizar nuestro equipo como servidor, debe-mos instalarnos el software apropiado, como porejemplo Apache, que realizará las labores de servi-

dor de nuestra página web. Si por el contrariooptamos por alojarla en uno de los servidores queofrecen este servicio en Internet, tendremos queponernos en contacto con ellos y seguir sus ins-trucciones y realizar el pago correspondiente sifuese necesario. Si optamos por comprar un domi-nio, debemos ponernos en contacto con el provee-dor de este servicio y, de la misma manera, pagarpor adquirirlo.

PASO 7

p06/07.qxd 10.09.2001 13:14 Página 7

Page 8: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

omo se menciona en la introducción deeste manual, el leguaje en el que se pro-graman las páginas web es HTML

(Hipertext Markup Languaje). Aunque, afor-tunadamente, se puede diseñar completa-mente cualquier tipo de página web sin tenerconocimientos sobre él, conviene tener unaspequeñas nociones al respecto por lo quepueda ocurrir.Para crear un documento HTML, tan sólo es

necesario tener instalado en nuestro equipoInternet Explorer o Netscape, no hace falta uneditor web. El siguiente paso sería abrir undocumento .txt en blanco y empezar a teclearcódigo (es decir, a través del Bloc de notas). Ala hora de guardarlo, lo haremos con extensión.html; este documento debe cumplir una seriede directivas o condiciones para que se puedavisualizar en el navegador, de las cuales oshacemos un resumen de las más importantes.

PASO A PASO

colección!dea octubre 20018

Introducción a HTMLC

MEDIO

CabecerasTodo el contenido de nues-tro documento HTML debe

estar comprendido entre estas dos directivas,directiva de apertura <HTML>, y directiva de cie-rre </HTML>.El significado de las otras dos directivas que apa-recen en el código de cabe-cera son las siguientes:<HEAD>: Es la cabeceraque marca el principio detodo el código que signifi-cará nuestra página web.Necesita directiva de cie-

rre: </HEAD>.<BODY>: Contiene el cuerpo de todo el docu-mento, también requiere directiva de cierre:</BODY>.Dentro de las directivas <BODY> y la correspon-diente a su cierre aparecerán el resto de las direc-tivas que exponemos en los siguientes puntos.

PASO 1

TextoCuando queramos introdu-cir un elemento de tipo tex-

to debe ir acompañado de unas directivas quehagan referencia a su tamaño, fuente, color y asu alineación. Para ello se utilizan las siguientes:

<FONT>: Nos indica el tipo de fuente de unaletra o bloque texto. Necesita directiva de cierre,</FONT>. Entre la apertura y el cierre se puedehacer referencia a los siguientes atributos:Size=”indicamos tamaño”Face=”indicamos fuente”Color=”indicamos color”

<CENTER>: Esta directiva se utiliza para alinearel texto que queramos introducir. Cuenta tam-bién con su homónima de cierre, </CENTER>.Entre su apertura y cierre podemos hacerreferencia a los siguientes atributos:

<P align=”right”, “left”, “center”, “justify”>: Ali-neamos el texto según hayamos indicado conuno de los cuatro atributos.<I>Texto en cursiva</I><B>Texto en negrita</B>

<Marquee>: Esta directiva nos permite realizarmovimientos con un texto concreto, delimitando su

PASO 2

<HTML><HEAD>

<TITLE> Nombre o título de la página </TITLE></HEAD><BODY>

</BODY></HTML>

p08/10.qxd 10.09.2001 13:15 Página 8

Page 9: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

capacidad de acción con los parámetros expuestosa continuación. Como casi todas las funciones deHTML, tiene su directiva de cierre, </MARQUEE>.

Behavior=”scroll”: El texto gira alrededor de lapantalla.Direction=”right” o “left”: Dirección hacia laizquierda o la derecha.Behavior=”slide”: Cuando el texto llega al final

de la pantalla se detiene.Behavior=”alternate”: Cuando el texto llega alfinal de la pantalla, rebota.Bgcolor=”color de fondo”: Indicamos el color defondo del texto.Width=”anchura”Loop=”número” o “infinite”: Bucle que hará apa-recer el texto las veces que lo indiquemos conun número o infinitas veces si así lo marcamos.

PASO A PASO

colección!dea octubre 20019

Insertar tablasLas tablas son un elementomuy utilizado y práctico para

exponer información de manera ordenada. Lamayoría de los editores web las exportan demanera automática. Sin embargo, en HTML esalgo más engorroso. Dentro de la estructura de latabla podemos indicar algunas características: eltítulo, la alineación del texto o el color de fondo.

<TABLE>: Indica el inicio de la estructura en laque vamos a definir la tabla; al finalizar la defini-ción de la estructura añadimos </TABLE>.<TR>: Esta directiva se utiliza para la creaciónde filas; al final se cierra con </TR>.<TD>: Esta función se coloca dentro de laestructura de la fila y añade una celda. Se finali-za con </TD>.Bordercolor=”blue”, “red” o cualquier otro.<CAPTION>: Indica el título de la tabla; se cierracon </CAPTION>.Align=”center”, “left”, “right”.

<A href=”mailto:[email protected]”>texto</A>: De esta manera realizamos un enlacea la dirección de correo electrónico que indica-mos si pinchamos en el texto que indicamosinmediatamente después.<A href=http://www.computeridea.es>texto</A>:Enlace a la dirección que marquemos al pincharen el texto que se indica en la propia sentencia.<A ref.=”ftp://direccionFTP>texto </A>: De lamisma manera que los demás, al pinchar en eltexto que indicamos, accederemos a la direcciónFTP que marcamos.

PASO 3

Inserciónde imágenesLa utilización de imágenes

en una página web es fundamental para realizarun diseño atractivo.

<IMG src=”archivo de imagen” alt=”texto”height=”alto” width=”ancho” border=”2”>: Coneste tipo de sentencia indicamos la imagen queinsertar, con algunos de sus atributos, como sualtura o anchura. El atributo alt permite que alpasar el ratón por encima de la imagen nos apa-rezca el texto que hemos incluido en la sentencia.

PASO 5

BotonesLa inserción de botones enuna web puede resultarnos

de mucha ayuda, ya que a ellos les podemosasociar cualquier función, enlaces a otras webso saltos a otros «lugares» de nuestro site.Para explicar parte del funcionamiento de losformularios, veremos la directiva que los intro-

PASO 6

EnlacesLa inclusión de enlaces aotras páginas web o a

direcciones de correo electrónico son muy habi-tuales en la mayoría de las páginas web. Losenlaces a direcciones FTP son menos comunes,aunque también importantes.

<A href.=”archivo> texto </A>: Con esta senten-cia realizamos un enlace a una dirección local ala que accederemos pinchando en el texto quecolocamos a continuación.

PASO 4

p08/10.qxd 10.09.2001 13:15 Página 9

Page 10: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

duce: <FORM name=”nombre del formulario”</FORM>. Lógicamente, dentro de un formula-rio podemos introducir muchos tipos deestructuras, entre ellas los botones. Para ello,una vez estamos «dentro» de la directiva<FORM>:

<INPUT type=”button” name=”B1” value=”pin-cha”>: Con esta sentencia realizamos el botónmás sencillo posible, aunque para que tengacierta utilidad le debemos asociar una acción, ocualquier otra función, como pueda ser un enla-ce a un correo electrónico.

Existen muchas otras, como son las listas ysobre todo los frames o marcos, herramientasmuy útiles cuando queremos fraccionar nues-tra página en diferentes contenidos, comohabréis observado en muchos portales, en losque encontramos unos servicios en una partee información en otras. Estas herramientastambién tienen sus propias directivas y sinta-xis. Sin embargo, no creemos que sea nece-sario profundizar en la explicación de todaslas que existen, ya que resultaría bastantetedioso y no es el objetivo de este pequeñomanual.

PASO A PASO

colección!dea octubre 200110

Nuestra primerawebPara que observemos

cómo es la sintaxis de este tedioso lenguaje y losencillo que es de estructurar, vamos a desarro-llar una web que nos pida por pantalla nuestro

nombre y apellidos y que a continuación nos for-mule la posibilidad de contactar con nosotros enuna dirección de correo electrónico. Además,dotaremos al fondo de la página con un colorconcreto, que en este caso es el color agua,aunque si nos hacemos con un listado de loscódigos de colores de HTML observaremos que

todos son una referencia. Es un fragmento decódigo bastante corto, pero lo suficientementeilustrativo.

<HTML><HEAD><TITLE> Página prueba </TITLE>

</HEAD>

<BODY bgcolor=”#00FFFF”><CENTER><B><I> Crea tu web conComputer Idea </CENTER><FONT face=”Verdana” size=”6”color=”red”> Rellena tus datos:</FONT><FORM name=”formulario CI”><P>Escribe tu nombre: <INPUTtype=”text” name=”F1” width=”12”maxlength=”15” <BR></P><P>Escribe tu apellido: <INPUTtype=”text” name=”F2” width=”12”maxlength=”15” <BR></P>

<FONT face=”Arial” size=”12”color=”blue”> Si quieres contactar

con nosotros, pincha <A href=”mailto:[email protected]”> aquí </A></FONT>

</BODY>

</HTML>

PASO 7

p08/10.qxd 10.09.2001 13:15 Página 10

Page 11: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

a hemos visto antes lo tedioso y pocointuitivo que es trabajar con HTML siqueremos diseñar una página web sin

más ayuda que este lenguaje. Sin embargo, conla aparición de los editores web, el trabajo sesimplifica notablemente, lo que nos va a per-mitir no sólo realizar el mismo trabajo enmenos tiempo, sino realizar operacionesmucho más complicadas y de mayor impactocon muy poco esfuerzo.

Aunque esta situación es extensible a numerososámbitos de las tecnologías de la información, enel campo de diseño y creación de páginas web laprogresión ha sido espectacular y en poco tiemposerá bastante habitual, de hecho a nivel profesio-nal empieza a serlo, que cada uno de nosotrostengamos nuestro site. A continuación, realiza-mos un análisis de los dos editores de páginasweb más extendidos entre los usuarios, MicrosoftFrontPage y Macromedia Dreamweaver.

PASO A PASO

colección!dea octubre 200111

Herramientas de diseñoDiseñar una página web cada vez resulta más asequible debido a lasfacilidades que ofrecen las interfaces de este tipo de programas.

Y

BÁSICO

La herramienta para la creación y administra-ción de sitios web de Microsoft, FrontPage2000, incorpora una nueva interfaz integradapara crear y administrar páginas web. La pri-mera ventaja que ofrece la interfaz de este edi-tor es la similitud con cualquier otra aplicacióndel paquete Office. Esta característica la agra-

decerán especialmente los usuarios menosexperimentados.Como alternativa a los usuarios más avanza-dos, tanto barras de herramientas como cua-dros de diálogo y menús son absolutamentepersonalizables. Otra ventaja que hace deFrontPage 2000 una aplicación accesible es laposibilidad de obtener una vista previa demanera inmediata y permite agregar a suspáginas web efectos de HTML dinámico(DHTML), como por ejemplo texto animado,de manera extremadamente sencilla. Estas ani-maciones se mantienen estáticas en las versio-nes anteriores a la 4.0 tanto de Internet Explo-rer como de Netscape.

MS FrontPage 2000La inclusión de FrontPage dentrodel paquete Office ha llevado amuchos usuarios a comenzar a darsus primeros pasos en el campodel diseño de páginas web.

p11/17.qxd 10.09.2001 13:15 Página 11

Page 12: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

Aquellos usuarios que no tengan mucha expe-riencia en la manipulación e implementaciónde bases de datos, pueden incorporar consultasdirectamente en sus páginas web de formaautomática. Esta característica nueva resultade extrema importancia dado el auge de lasherramientas de manipulación de bases dedatos a través de Internet. Los registros debases de datos se pueden recuperar dinámica-mente cada vez que se carga una página y losvisitantes del sitio pueden agregar o modificarla base de datos directamente desde sus explo-radores. A nivel puramente de diseño esta ver-sión incorpora 60 nuevos temas y combinacio-nes de colores prediseñados. También permitela personalización de colores, logotipos, gráfi-cos, viñetas y fondos para crear la aparienciadeseada.

Continuando con la interfaz, la modificación oseguimiento del código fuente HTML con sólopulsar una pestaña facilita considerablemente lalabor del programador. Incluso el código gene-rado por otras aplicaciones o herramientas dediseño se puede importar de manera transpa-rente y no se verá modificado ni ajustado. Seconservarán etiquetas, comentarios, las letrasmayúsculas, incluso los espacios en blanco. Lasangría del código también se puede personali-zar, elegir con qué colores mostrar las etiquetas

o cuándo deseas mostrar las letras mayúsculas.Para ver las etiquetas HTML que se han creadoen modo Normal, selecciona Mostrar Etiquetas.Después sólo tendrás que pasar sobre éstas.Para obtener una herramienta de ayuda, carac-terística muy útil para aquellos que estén apren-diendo en un entorno de creación Notepad, sólotendrás que pulsar sobre la etiqueta HTML.En la vista de página también se pueden mos-trar las etiquetas HTML que generan los ele-mentos de tu página actual. Otras caracterís-ticas de modificación, como puedan ser Buscaro Reemplazar, funcionan perfectamente en laficha HTML. En esta ficha nos encontramoscon numerosos comandos de menú FrontPageque permiten la inserción de código nuevo.La creación de contenidos se puede realizar enun entorno tan fácil de utilizar como MS

Word, usando el Modo Normal(WYSIWYG, what you see is what youget). Tan sólo tendrás que empezar ateclear, añadiendo enlaces y dibujandotablas.El cuadro de vistas es una de las herra-mientas más importantes que incorporaesta última versión para administrar tusitio web de manera más eficaz y sencilla.Además de la vista de página, este editorofrece cinco más de enorme utilidad.Éstas son: Carpetas, Reportes, Navegación,Enlaces y Tareas.La primera de ellas muestra todas las pági-nas, gráficos y archivos de tu web, y posibi-lita moverlas o renombrarlas sin proble-

mas. La vista de reportes ofrece trece reportesweb que te ayudarán a encontrar, diagnosticar yreparar cualquier problema potencial. Con ellosserá fácil averiguar el tamaño de tu sitio, sunúmero de páginas o archivos perdidos, asícomo solicitar información sobre qué páginastardan más en cargarse y cuál es la razón.Una novedad que resulta cómoda e interesantees la revisión ortográfica en segundo plano. Laspalabras mal escritas de nuestras páginas webaparecerán subrayadas con la misma línea ondu-

PASO A PASO

colección!dea octubre 200112

p11/17.qxd 10.09.2001 13:16 Página 12

Page 13: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

lada roja que se muestra en Microsoft Word.Haz clic con el botón secundario del ratón en laspalabras mal escritas para ver las opciones pro-puestas o para agregar palabras nuevas y nom-bres desconocidos al diccionario de ortografíapersonalizado de Microsoft Office.

La conclusión más importante que podemossacar es que se trata de un programa dirigido aaquellos que quieren dar sus primeros pasosen el diseño de páginas web, aunque ofreceposibilidades para los más experimentados.(www.microsoft.com/spain)

Una herramienta como Dream-weaver se ha considerado habi-tualmente como una aplicaciónpara profesionales, aunque desdela comercialización de la terceraversión, la facilidad de uso y lointuitivo de su interfaz han lleva-do a muchos usuarios neófitos enestos menesteres a migrar a estaaplicación.De esta nueva versión cabe desta-car la interfaz del programa, unode sus puntos fuertes por su ver-satilidad, funcionalidad y facili-dad de manejo. Se sigue con el sistema de ven-tanas flotantes, similares a las de AdobePhotoshop, con las que interactuaremos connuestro diseño. La primera de ellas, la de Pro-piedades, nos servirá para conocer con detallecualquier característica del elemento en el queestemos situados, tal es el caso de fuente, enla-ces, colores, posición...Otra de las ventanas es la de Referencia o siste-ma de ayuda. A través de ella accederemos a uncompleto manual sobre Javascript, HTML oCSS entre otros, que está basado en las publica-ciones DHTML de O´Reilly Estilos CSS. Latercera de las ventanas juega un papel realmen-te importante. Se trata de la de Estilos HTML;en ella se presentarán las distintas hojas de estilo

en cascada que poseamos, parasu posterior asignación, modi-ficación o creación de nuevosestilos. Por último, nos encon-tramos con el menú de Objetos,dividido en tipos y con el queincrustaremos fácilmente en eldiseño imágenes, tablas, for-mularios, subprogramas,secuencias de comandos invisi-bles o una de las novedosascaracterísticas: botones deMacromedia Flash.

PASO A PASO

colección!dea octubre 200113

Dreamweaver 4Aunque inicialmente Dreamweaver era una herramienta dirigida al campoprofesional, las facilidades que ofrece su interfaz han seducido a muchosusuarios.

p11/17.qxd 10.09.2001 13:16 Página 13

Page 14: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

Otro de los aspectos que destaca en Dreamwea-ver es la posibilidad de intercalar el diseñovisual con el código fuente. De esta forma, cual-quier modificación que hagamos en uno de losdos se verá afectada automáticamente en elotro, minimizando así el tiempo empleado paralos clásicos retoques que muchas veces se pue-den presentar tediosos. Desde la opción Impor-tar del menú Archivo podemos incluir en nues-tras páginas cualquier documento que hayasido realizado en Word y guardado como pági-na web en dicha aplicación. Resulta una opciónmuy interesante a la horade importar largos docu-mentos de texto e inclusotablas. Tras importardatos desde Word, Dre-amweaver realiza unalimpieza del códigoHTML bastante comple-ta, aunque no todo loexhaustiva que sería dese-able cuando lo que se haimportado son tablas.Afortunadamente, parafacilitar el trabajo contablas, Dreamweaver 4permite importar datoscreados en Excel o decualquier hoja de cálcu-lo que pueda guardarlosen formato de textotabulado.Escogiendo la opciónDatos tabulares del menúInsertar, basta con selec-cionar el archivo previamente guardado comotexto tabular y Dreamweaver creará automáti-camente una tabla con los datos importados,con la ventaja adicional de que tras seguir esteprocedimiento de importación no será necesa-rio limpiar el código.Quizá una de las capacidades más admirablesde la aplicación sea la posibilidad de incorpo-rar elementos interactivos y comportamientos

basados en guiones Javascript sin necesidad detener conocimientos de programación.Mediante sencillos cuadros de diálogo pode-mos crear barras o menús de exploración conefectos rollover. También podemos guiar alusuario a través de las diversas secciones de unsitio web insertando los llamados «menús desalto»: menús desplegables que permiten lle-varnos a cualquier otra página de nuestra webo a una URL definida.Pero, como en todo programa que se precie,hemos detectado que algunas páginas crea-

das externamente y posteriormente cargadasen la aplicación, no se visualizan de formaexacta a como realmente se verían en elnavegador. Esto se debe a alguna pequeñaincompatibilidad entre aplicaciones, que notiene porqué perjudicar al diseñador depáginas web, que ya estará acostumbrado aeste tipo de contratiempos.(www.macromedia.com/es)

PASO A PASO

colección!dea octubre 200114

p11/17.qxd 10.09.2001 13:16 Página 14

Page 15: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200115

Instalación de FrontPagel editor de páginas web de Microsoft, FrontPage 2000, viene integradodentro del paquete ofimático MS Office. Lo habitual es que, alinstalarlo, también instale por defecto este editor. Si no ocurre así, o

por cualquier otra razón no lo tenemos lo instalado, podemos hacerlodesde el propio CD-ROM de MS Office.

E

BÁSICO

Elegimos la reparaciónUna vez hemos introducidonuestro CD-ROM en el equipo y

arranca el programa de instalación, ya sea de maneraautomática o por nuestra acción directa, selecciona-mos la opción de Reparación.

PASO 1

Componentesque instalarUna vez hemos elegido la

opción de reparar, se nos indican todas las aplicacio-nes que tenemos disponibles, las que tenemos insta-ladas y las que no. Para instalar FrontPage 2000, nosdirigimos al apartado con ese nombre y lo desplega-mos. Entonces visualizaremos todos los módulos de

FrontPage y los marcamos todos, aunque dos de ellos no nos vayan a servir de mucho de momento.Una vez hemos seleccionado los módulos que queremos instalar, basta con finalizar el proceso.

omo veremos a continuación, la inserciónde los elementos más comunes con unaherramienta como FrontPage es muy sen-

cilla, basta con que sepamos qué elementovamos a insertar y dónde los tenemos almacena-do. A lo largo de este pequeños paso a pasovamos a crear una página sin orden ni concierto,con el único objetivo de mostrar las enormes

facilidades que ofrece este editor de páginas webpara insertar objetos a nuestro gusto.

PASO 2

Primeros pasos con FrontPageC

Insertar uncontadorUno de los primeros ele-

mentos que podemos introducir en nuestraweb es un contador de visitas. Lo podemos

PASO 1

p11/17.qxd 10.09.2001 13:16 Página 15

Page 16: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200116

encontrar visible en la mayoría de ellas, y en laque no lo está, seguro que se encuentra ocultoa nuestros ojos.Para ello nos dirigimos al menú principal y segui-mos la siguiente ruta:Insertar/Componente/Contador de visitas depágina...

mo camino que en el paso 1, pero esta vez elegi-remos la opción formulario de búsqueda.

Elegir fuenteUna vez selecciona-da esta opción, nosaparecerá una venta-na en la que podre-mos elegir entre lasdistintas fuentes queestán a nuestra dis-posición.

PASO 2

Insertar unformulario debúsqueda

Si queremos rea-lizar búsquedas através de nuestrapágina web,podemos introdu-cir uno sencilla-mente. Para elloseguimos el mis-

PASO 3

Elección decaracterísticasDespués de elegir esta

opción demenú, apareceuna ventana enla que se nosconsulta sobreel texto quequeremos poneren las etiquetasde búsqueda yde borrar la lon-gitud en carac-teres y el texto

de la etiqueta para el texto buscado.

PASO 4

HipervínculosPara insertar un enlace ohipervínculo a otra página

web, por ejem-plo, tan solodebemos acce-der al menú principal, selec-cionar la opciónInsertar y, de esa lista desple-gable, Hiper-vínculo.

PASO 5

DirecciónA continuación debemosindicar la dirección URL

que queremos ponercomo destino. Estaventana nos ofreceposibilidades como elestilo, si queremosincluir un marcador o

si queremos seleccionar el marco de destino, encaso de que hubiese alguno.

PASO 6

p11/17.qxd 10.09.2001 13:16 Página 16

Page 17: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200117

Inserción deimágenesLa inserción de imágenes

resulta igual de sencilla que cualquier otro elemen-to. Nos dirigimos de la misma manera a Insertar/Imágenes y, de entre las opciones que se nosmuestran, elegimos la que creamos conveniente.Si elegimos la opción Desde archivo, podremosseleccionar cualquier imagen que tengamosalmacenada en nuestro disco duro o indicar unadirección URL en la que haya una imagen quesirva para nuestros propósitos.

Si elegimos la opción Vídeo, el asistente nos guia-rá, de la misma manera que en el caso de las foto-grafías, hacia el lugar en el que tengamos almace-nados los archivos con formato .AVI, o cualquierotro formato de vídeo reconocido por FrontPage.Si elegimos la opción Imágenes, accederemos auna pequeña biblioteca de imágenes propias deFrontPage, en la que podremos elegir la queconsideremos oportuna.

Una vez hemos elegido la ima-gen, ésta se inserta automáti-camente en nuestra web, que-dando finalmente con todoslos elementos que hemosañadido a lo largo del proce-so; en este caso hemos opta-do por la inserción de una

imagen de la biblioteca propia de FrontPage.

PASO 7

Elección de un fondoSi queremos darle algo de

vistosidad a nuestra web,tenemos la posibilidad deadornar el fondo de la páginaa nuestro gusto con una ope-ración muy sencilla. Basta conque nos dirijamos al menúprincipal y seleccionemos laopción Formato/Fondo

PASO 8

Color o imagen de fondo

Unavez hemos seleccionadoesta opción, aparece unaventana en la que se nosofrece la posibilidad deelegir un color de fondo ouna imagen que tenga-mos almacenada en nuestro disco duro, o bienuna imagen que nos haya llamado la atención enuna página web concreta. En este caso nosotroshemos elegido poner un solo color de fondo.El resultado final es una web extremadamente

sencilla. Sin embargo, si lacomparamos con la quehemos generado a través delpropio HTML, observamosque es más completa, sudiseño ha sido mucho mássencillo y hemos tardadomenos tiempo.

PASO 9

p11/17.qxd 10.09.2001 13:16 Página 17

Page 18: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

sta posibilidad es muy utilizada para diri-gir a un posible comprador en una webque nos permita comprar cualquier pro-

ducto. En las celdas colocaremos hipervínculos aotras páginas en las que podemos exponer unafoto del producto concreto, el formulario querellenar para realizar la transacción económicapor la compra o la descarga de un archivo.En este paso a paso os mostramos la manera dehacerlo. En este caso simplemente realizaremosun salto a una fotografía. En la columna de allado podemos colocar un contador de visitas si

queremos establecer un control de las visitas.Como hemos mencionado en este mismolibro, FrontPage está perfectamente integra-do con el resto de las aplicaciones de Office,por lo que si queremos trabajar con una listapodemos trabajar en Excel y luego importar-la desde FrontPage.La inserción de fotografías debe llevar asociadoun paso previo, éste es el retoque de las imáge-nes para adaptarlas a las características de laRed, es decir, que no sean demasiado grandes yque su definición sea la apropiada.

PASO A PASO

colección!dea octubre 200118

Utilización de tablas ypublicación en la webLa utilización de tablas en una página web es muy común, ya que se tratade una estructura válida para ordenar cualquier tipo de información,desde una simple lista de nombres con sus direcciones en la celda de allado, hasta disponerla como medio para controlar el acceso a distintaspáginas de nuestro site.

E

MEDIO

Insertarla tablaPara insertar la tabla tene-

mos dos opciones. La primera de ellas consisteen dirigirnos al menú principal Insertar/Compo-

nente/OfficeSpreadSheet. De esta manera abri-mos una tabla con todas las posibilidades deuna hoja de cálculo de Excel.PASO 1

Tabla de FrontPageSin embargo, FrontPage

nos ofrece la posibilidad de insertar una tabla sintener que recurrir a Excel. Para ello elegimos laopción Tabla del menú principal y a continuaciónescogemos Insertar/Tabla.

PASO 2

p18/25.qxd 10.09.2001 13:17 Página 18

Page 19: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200119

Características dela tablaSi seleccionamos esta

opción, aparecerá una ventana en la que debe-mos especificar las características de la tabla,columnas, márgenes, etc. En este caso hemoselegido dos columnas y tres filas, aunque estaopción la puedes configurar a tu gusto.

ras, en este caso hemos seleccionado el textoque queremos que cumpla esa función, pincha-mos en el botón de la derecha del ratón y selec-cionamos la opción Hipervínculo.

PASO 3Alojamientode la imagenUna vez hemos selecciona-

do esta posibilidad, aparece una ventana en laque se nos pide la localización del archivo odirección URL a la que saltaremos en caso deque pinchemos en el hipervínculo.

PASO 5

Inserción de textoe hipervínculosEn este caso vamos a utili-

zar la tabla como medio para ordenar los acce-sos de los usuarios a la información. Vamos aofrecer el acceso a fotografías, por lo que dire-mos el tipo de fotografía que veremos si pincha-mos en un hipervínculo.Para ello nos limitamos a escribir el texto queponemos como condición de acceso y a conti-nuación el hipervínculo. La creación de un hiper-vínculo se puede de realizar de muchas mane-

PASO 4Elección delarchivoEn nuestro caso vamos a

insertar una imagen que tenemos en nuestro dis-co duro, por lo que pincharemos en la opción deexplorar nuestro PC y seleccionaremos la foto-grafía que nosotros deseemos.

PASO 6

p18/25.qxd 10.09.2001 13:17 Página 19

Page 20: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200120

VerificaciónPara comprobar si hemosejecutado correctamente la

operación, basta con que nos dirijamos a la len-güeta de Vista previa situada en la parte inferior dela interfaz de FrontPage y pinchar en el hipervíncu-lo que hemos creado para comprobar si aparecela fotografía que nosotros hemos seleccionado.

En este caso hemos escogido una de las fotosde Windows y lo hemos debido hacer bien por-que aparece la seleccionada. De esta maneratan sencilla podemos empezar a estructurarlos accesos a nuestro site, que ya va adqui-riendo algo de complejidad al añadir fotografí-as o cualquier otro elemento que nosotrosqueramos vincular.

PASO 7

Aplicaciones de apoyoCuando queremos diseñar y desarrollar una página web, no debemos limitarnos a los programas pensadospara esta tarea. La interacción entre aplicaciones es fundamental para catalogar un editor web y porsupuesto para que la página web resultante esté lo más optimizada posible. No tiene ningún sentido queincluyamos una fotografía en nuestra página si previamente no la hemos tratado para ofrecer su mejorcara y fundamentalmente para optimizar su formato y poder hacer la web menos «pesada».Para ello existen múltiples aplicaciones que están íntimamente relacionadas con el desarrollo de sitiosweb, aunque no hayan sido pensadas para ello.

Adobe Photoshop: Se trata prácticamente de un estándar en el retoquefotográfico, por lo que es fundamental a la hora de tratar imágenes, y enespecial para la web, ya que tiene una opción concreta para ello.Image Ready: Herramienta para la optimización de imágenes con trama, esdecir bitmap.CorelDRAW: Herramienta para eltratamiento de imágenes vectoria-les, recomendable para generarilustraciones y optimizarlas.FireWorks: Optimización de ilus-traciones vectoriales.

Flash: Herramienta para el desarrollo de efectos de gran impac-to para la web.PaintShop Pro: Aplicación para retoque fotográfico, muy utiliza-da para realizar capturas.

p18/25.qxd 10.09.2001 13:17 Página 20

Page 21: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200121

Uso de hojas de estilo encascada en Dreamweaver

on unos sencillos pasos podemos crear hojas de estilos en cascadapara usar con los textos de nuestra página, ahorrando así tiempo ypudiendo manipular eficazmente un gran número de documentos a la

vez, variando el aspecto visual de nuestra web rápidamente.

C

MEDIO

Creación de unahoja de estiloLas hojas de estilos CSS

ofrecen numerosas ventajas a la hora de mani-pular el texto en diseño de una página. Permitendefinir muchas propiedades que no se puedencontrolar utilizando sólo HTML, como puede serlos tamaños de los tipos, fondo de imagen, san-grados de texto y otras muchas, que la convier-ten en una herramienta imprescindible en laswebs actuales.Para crear hojas de estilo en Dreamweaver, des-pliega el menú Ventana y selecciona la opciónEstilos CSS. Aparecerá una ventana de diálogocon tres pestañas. Escoge la pestaña llamadaEstilos CSS. Una vez en ella, nos dirigimos a la

parte inferior de la misma, donde hay tres boto-nes activos. El del medio crea un Nuevo estilo.Pulsándolo accederemos a otra ventana de diá-logo, donde daremos nombre a nuestro primerestilo o clase, dejando el resto de opciones en laasignación que nos hace el programa por defec-to. Pulsando el botón de aceptar pasaremos aotra ventana donde nos darán las opciones paraguardar nuestra nueva hoja de estilos. Le asig-namos un nombre y la colocamos donde tenga-mos definido nuestro sitio web.

PASO 1

Opciones deconfiguración deun estilo o clase

Una vez hecho esto, pasaremos a definir en unanueva ventana los atributos de nuestro primerestilo, al que anteriormente dimos nombre. Lasopciones que tenemos a nuestra disposición seencuentran divididas en ocho grandes aparta-dos: Tipo, Fondo, Bloque, Cuadro, Borde, Lista,Posición y Extensiones. Por defecto, el programanos situará en las diferentes alternativas con lasque cuenta la opción de Tipo, por otro lado lamás usada de todas ellas, pues define las carac-terísticas internas de la tipografía que vamos ausar en nuestra clase de estilo.Aquí definiremos la fuente (es aconsejable elegiruna de las más normales dentro de la red, comoArial o Verdana), el tamaño del tipo, el grosor deltexto, su estilo, la variante, el uso de mayúsculas

PASO 2

p18/25.qxd 10.09.2001 13:17 Página 21

Page 22: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

y minúsculas, el color y la decoración. La opcióndel Fondo nos permitirá asignar colores o imá-genes de fondo a nuestro estilo y asignar unaserie de atributos al fondo para visualizarlo des-plazado a derecha o izquierda, arriba o abajo orepetido, o modificarlo.Bloque nos permite modificar los atributos depárrafo, tales como el espacio entre palabras yletras, la alineación vertical y horizontal del textoy la sangría y el espacio en blanco al principio delos párrafos. Los atributos que se muestran en laopción de Cuadro son más especiales y apenasse usan. Se refieren a márgenes con otros ele-

mentos y dentro del mismo, situación decapas y colocaciones absolutas del elementodentro del navegador.Borde editará, como su nombre indica, elborde de estilo cuando éste se aplica a ele-mentos tales como tablas o filas y columnas.Nos permite modificar cada uno de los ladosen ancho y color, así como aplicar un estilodeterminado eligiendo entre varios de ellos.Lista permite personalizar los tipos de listas ysu visualización, dejándonos elegir entrediferentes tipos, aplicar una propia imagenpara crear nuestras propias viñetas y suposición exacta. Posición nos indicará, en

caso de que el estilo lo situemos en una capa,cómo situará el navegador la capa, su visibilidady si la capa se redimensiona cuando el texto seamás grande que ella. Extensiones nos amplía losefectos, cambiando el cursor, dando efectosespeciales a los texto (sólo para Internet Explo-rer 4.0 o superiores), etc.Todos los atributos que no consideremosimportantes los dejaremos en blanco. Una vezrealizadas todas estas operaciones, acepta-mos dando por concluida la creación de nues-tro primer estilo o clase. El nombre del mismoaparecerá en la pestaña de Estilos CSS.

PASO A PASO

colección!dea octubre 200122

Aplicar estilos altexto y elementosde la página

Una vez creados los estilos (repetiremos estaoperación tantas veces como sea necesario,hasta crear un número mínimo de estilos parautilizar en nuestra web), seleccionaremos el tex-to, tabla, celda, imagen o tag al que queramosaplicar el estilo (pues, aunque los estilos se usanprincipalmente para dar formato a texto, se pue-de aplicar literalmente a cualquier elemento den-tro de la página) y, con la ventana de estilosabierta, pinchamos sobre el estilo que queremosaplicarle a esa selección. Repetiremos la opera-ción cada vez que queramos aplicarle estilo a unelemento.

PASO 3

p18/25.qxd 10.09.2001 13:17 Página 22

Page 23: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200123

Asociar más de unahoja de estilo CSSdentro de la página

Podemos adjuntar la hoja de estilos en cascadaseleccionando el primer botón de la parte inferiorderecha que se encuentra en la ventana EstilosCSS, en el menú Ventanas/Selección/Estilos CSS,llamado Adjuntar hoja de estilos. Pulsando sobreeste botón aparecerá una ventana para seleccionarla ruta de la hoja de estilos que queremos añadir.Aceptaremos una vez seleccionada la hoja de esti-los. A continuación, observaremos que todas lasclases del nuevo estilo han sido añadidas a la pes-taña de Estilos CSS.

PASO 4

p18/25.qxd 10.09.2001 13:17 Página 23

Page 24: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200124

Crear una barra denavegación en Fireworks

ireworks es una de esas aplicaciones que nos va a ahorrar muchotrabajo. En concreto permite realizar rápidamente barras denavegación para colocarlas en una página web aplicándoles efectos

de rollover sin necesidad de que tengamos conocimientos deprogramación en Javascript.

F

Creación de unbotónEn casi todas las páginas

hay barras de navegación y cada vez son mássofisticadas. Ya hemos visto antes cómo se creaun botón con HTML. Sin embargo, existen multi-tud de aplicaciones que nos van a permitir

hacerlo con pocos elementos de manera mássencilla y efectiva. Con Fireworks podemos crearestas barras y aplicarle efectos y comportamien-tos de programación en Javascript sin necesi-dad de conocer este lenguaje. Lo primero quetenemos que hacer es crear un botón. Para elloabrimos, el menú Insertar/Nuevo botón. Apare-cerá una ventana para que dibujemos el botónen todas las opciones posibles; es decir, tanto sise muestra activado, desactivado, se está

pasando el ratón por encima o está siendo pul-sado. Una última pestaña dentro de todas estasopciones nos muestra el área activa, la secciónque utilizará el programa para hacer los efectosdel botón. Cuando Fireworks exporta botonescreados a base de imágenes, como en estecaso, divide la página en diferentes imágenes ysólo utiliza una de ellas para que varíe. Ésta es lasección activa. Una vez terminado de crear elbotón, cerramos la ventana y éste es añadido ala biblioteca de símbolos de Fireworks.

PASO 1

Bibliotecas ycomportamientosPara acceder a la biblioteca

de símbolos del programa y ver nuestro botón,nos vamos a Ventana/Biblioteca o bien presiona-mos la tecla de función «F11». Aparece por

PASO 2

MEDIO

p18/25.qxd 10.09.2001 13:17 Página 24

Page 25: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200125

defecto una ventana con tres pestañas. La primerade ellas, Estilos, incluye soluciones gráficas paraaplicar rápidamente a dibujos y formas vectoriales,como nuestro botón. Haciendo doble clic sobre élen la biblioteca, nos volverá a salir la ventana de

edición del botón y podremos aplicarle el estilocorrespondiente. Desde esta ventana tambiénpodemos aplicar el destino o URL de nuestrobotón, una vez que éste sea presionado en lapágina.

Aplicar acciones ofunciones a losbotones

Esta posibilidad la podemos encontrar en Venta-na/Comportamientos. Los comportamientos sonacciones de Javascript que pue-den ser aplicadas a los botonespara que hagan funciones espe-ciales como, por ejemplo, rollover(cuando pasamos por encima deél con el cursor nos mostrará laotra imagen diferente del mismo,haciendo un efecto de movimien-to). Todo botón tiene asignado, pordefecto, un rollover simple.

Si queremos aplicarle un comportamiento máscomplicado, sólo tenemos que seleccionar elbotón y abrir la ventana de comportamientos,apretando un botón +, donde están recogidaslas diferentes acciones que podemos asignar.

Así, es posible hacer másatractiva la página con efectosvistosos como mostrar imáge-nes en otra parte de la páginacuando se pase por un botón,establecer menús emergenteso elegir el texto que apareceráen la barra de estado cuandoestemos con el cursor sobrenuestro botón.

PASO 3

Crear una barra denavegaciónAún debemos juntar

varios botones, partiendo de ese botón baseque hemos creado, para poder hacer nuestrabarra de navegación. Vamos arrastrando haciael lienzo tantos botones como vayamos aponer en nuestra barra uno al lado del otro. Esmuy importante que el botón base sea siem-

pre el mismo para que el efecto visual de labarra sea homogéneo. Después colocamos eltexto que llevará cada uno de los botones porseparado.

PASO 4La exportaciónSólo nos falta ver cómo haquedado nuestra barra de

navegación en un navegador de Internet. Exporta-mos el documento de Fireworks desplegando el

menú Archi-vo y selec-cionandoExportar. Elcuadro de

diálogo de exportación que aparece nos informade las particularidades de la exportación del códi-go HTML. Dejamos las características por defectoy guardamos donde queramos tener la página. Yasólo queda abrir con un navegador. De esta mane-ra hemos hecho de forma muy rápida y sencilla untrabajo que antes resultaba largo y tedioso.

PASO 5

p18/25.qxd 10.09.2001 13:17 Página 25

Page 26: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

n servidor web no es más que otro pro-grama cuya función es despachar conte-nidos a medida que se le piden. Para

ello, el servidor web permanece a la escucha enun puerto de red del equipo.Un cliente web, como por ejemplo InternetExplorer, realiza una petición de un determi-nado archivo (como una página HTML o unaimagen), abriendo una conexión con unadirección de red y un puerto. Una vez estable-cida la conexión, el cliente emite un mensajeindicando el comando correspondiente paraque el servidor web le devuelva el contenidosolicitado.Una de las ventajas de los navegadores web esque hacen todo este proceso completamente

transparente al usuario. Basta con poner ladirección de una página web en el navegador yéste se conectará al servidor adecuado, descar-gando no sólo la página, sino también cual-quier otro archivo que esté relacionado con lamisma (imágenes, JavaScript, Flash, melodíasMIDI, etc).Para ser exactos, un navegador web es uncliente web, pero no todos los clientes web sonnavegadores web. Por ejemplo, los programasde descarga automatizada como WebZip, o losllamados aceleradores de descarga comoGetRight, Download Accelerator, etc, tambiénactúan como clientes web, aunque su funcio-namiento no requiera de interactividad con elusuario.

pache es el servidor web más extendi-do en Internet. Desde luego, existenproductos comerciales con mayores

prestaciones, calidad y rendimiento (comoiPlanet Enterprise Server y Microsoft Inter-net Information Server). Apache Web Ser-ver se distribuye bajo la licencia de softwareApache, que permite la distribución gratuitatanto del programa como de su código fuen-

te. Gracias a esto Apache ha sido portado aun gran número de plataformas, entre ellasWindows y Macintosh. Quizá hayas oídohablar de Apache como el servidor web queviene por defecto en las distribucionesLinux. En efecto, Apache es un servidor webpensado para funcionar en plataformasUnix, no sólo Linux para PC, sino también

PASO A PASO

colección!dea octubre 200126

Tecnología subyacenteEl funcionamiento de las aplicaciones de Internet tal y como lasconocemos ahora está basado en el modelo cliente-servidor.

ApacheEl rendimiento, funcionalidad yextensibilidad de Apache sonenvidiables y lo convierten en unproducto capaz de entrar en lacompetición con otras solucionescomerciales.

U

A

AVANZADO

p26/31.qxd 10.09.2001 13:18 Página 26

Page 27: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

en plataformas más grandes como Sun Sola-ris para Sparc o HPUX e IBM AIX, entreotras muchas, lo que da una idea de las capa-cidades reales de Apache, uno de los expo-nentes más relevantes del software libre.Como principal defecto de Apache, hemosde mencionar que la configuración que rigesu funcionamiento se encuentra almacenadacomo texto plano en un archivo de texto

(muy frecuente en el mundo Unix), por loque su configuración no es tan intuitivacomo en otros productos comerciales, comopor ejemplo Microsoft Internet InformationServer, con un sistema de administraciónexquisitamente cuidado, o iPlanet Enterpri-se Server que, una vez instalado, se puedegestionar a través de la web con un navega-dor convencional.

PASO A PASO

colección!dea octubre 200127

Instalaciónde ApacheDescarga el archivo de ins-

talación de http://httpd.apache.org/dist/httpd/binaries/win32/. Ejecuta el archivo de instala-ción que acabas de descargar para iniciar elproceso de instalación. Es necesario aceptar lalicencia de Apache que se muestra y las condi-ciones de uso.

el nombre «localhost», aunque posteriormentese ignorará.Server Name (nombre del servidor). De la mis-ma forma, hemos de introducir el nombre delequipo donde lo estamos instalando. Si lo des-conocemos, podemos introducir simplemente«localhost». Si el equipo tiene un nombre accesi-ble desde Internet, podemos introducirlo (porejemplo, «felipe.bpe.es»)Administrator’s Email Address (dirección decorreo electrónico del administrador). La direc-ción que introduzcamos aquí se mostrará en laspáginas de error de Apache, junto con informa-ción descriptiva del error producido.En sistemas Windows NT/2000, se puede confi-gurar Apache como servicio, lo que significa quese ejecutará siempre al arrancar el sistema,incluso aunque ningún usuario inicie sesión. EnWindows, sólo las versiones indicadas tienenesta característica. Si estamos utilizando Win-dows 9x/ME, sólo podemos instalarlo como un

PASO 1

DatosimprescindiblesEn la página de

información del servidor se nos pregunta por varios datos.Network Domain (dominio de red). Si el PCdonde estamos instalando pertenece a algúndominio de red conocido en Internet, podemosintroducirlo aquí (por ejemplo, «bpe.es»). Encaso contrario (por ejemplo, un PC domésticocon conexión por módem) podemos introducir

PASO 2

p26/31.qxd 10.09.2001 13:18 Página 27

Page 28: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

programa convencional, por lo que para que fun-cione tendremos que arrancarlo manualmente, aligual que hacemos con otras aplicaciones deusuario. Si dispone de Windows NT/2000, espreferible instalar Apache como servicio, pues

no será necesario iniciarlo manualmente cadavez que inicie sesión, ni tampoco se cerrará sicierras la sesión de usuario, por lo que te asegu-ras de que estará funcionando siempre que elordenador esté encendido.

PASO A PASO

colección!dea octubre 200128

Terminar lainstalaciónEl tipo de instalación que

elijamos es indiferente, ya que en el caso de estaversión de Apache, siempre instala los mismosarchivos.

Elige el directorio de instalación. Puesto que ten-drás que acceder repetidas veces a esta carpe-ta, escoge una ubicación que te resulte fácil.Nosotros hemos elegido C:\Apache para el restode este apartado.

PASO 3 Comprobarla instalaciónUna vez introducido estos

datos, el programa de instalación ya tiene toda la información necesaria para instalar yconfigurar Apache en tu equipo. Pulsandosobre Siguiente, comienza la copia de archivosde Apache al directorio indicado y finaliza lainstalación.

Para probar la instalación de Apache, abre tunavegador favorito e introduce http://localhosten la caja de direcciones (este nombre hacereferencia al propio equipo, como veremos másadelante). El resultado ha de ser similar al que semuestra en la figura.

PASO 4

ConfiguraciónComo hemos mencionadoanteriormente, la configura-

ción de Apache reside en varios archivos de tex-to, por lo que para modificar algún aspecto desu funcionamiento, tenemos que editar estearchivo y reiniciar el programa. Aunque sonvarios archivos, para prácticamente todos los

PASO 5

p26/31.qxd 10.09.2001 13:18 Página 28

Page 29: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

propósitos nos con bastará editar <Directorio deinstalación Apache>/conf/httpd.conf.Si hemos realizado la instalación correctamente,no será necesario modificar nada. En cualquiercaso, un simple vistazo al archivo «httpd.conf»nos hará ver que su formato es en realidad bas-tante simple.Para que surtan efecto los cambios, es necesa-rio que guardes el archivo «httpd.conf» y reini-cies Apache (en la versión Windows se puedehacer directamente desde un icono accesibledesde el menú de inicio), pues solamente leeeste archivo una vez ha arrancado.

los contenidos de la carpeta que se encuentranen el disco del ordenador donde se ejecuta elprograma en cuestión. Los archivos son los mis-mos, lo que varía es la forma de acceder a ellosdependiendo de si lo hacemos a través delexplorador de Windows o si lo hacemos a travésdel servidor web.En el caso de hacerlo a través del explorador deWindows, se emplea el sistema de archivos delsistema operativo, en nuestro caso Windows,aunque podría ser cualquier otro. Este sistemade archivos actúa como un sistema de directo-rios que permite al usuario localizar cualquierarchivo que se encuentre en el disco de una for-ma cómoda y sencilla. En efecto, los contenidosde un archivo se escriben en el disco duroempleando diversas tecnologías, con una lógicaen la disposición de los datos fáciles de manejarpara el ordenador, pero complicada para unusuario. Gracias al sistema de archivos y direc-torios, podemos organizar los contenidos denuestro disco duro de una forma que resultalógica para nosotros y que podemos manejar sinproblemas. El sistema de archivos mantiene unacorrespondencia entre los nombres de archivosy los datos que contienen éstos realmente.Cuando abrimos el archivo C:\Diario.doc, Win-dows se encarga de localizar en el disco losdatos reales correspondientes a este documen-to, indicando al disco duro qué zonas ha de leersin que el usuario se tenga que preocupar porcómo están organizadas físicamente.

PASO A PASO

colección!dea octubre 200129

Cómo funcionaComo hemos visto antes,un servidor web es un pro-

grama cuya misión es servir archivos a los clien-tes web que se los pidan a través de la red.Estos archivos están localizados físicamente enel equipo en el cual se ejecuta el servidor.Una de las cosas que más suele costar ver alprincipio es la forma en que se relacionan loscontenidos disponibles en un servidor web con

PASO 6

Localizar archivosLocalizar un archivo en eldisco duro y abrirlo es una

tarea muy habitual y cualquier usuario estáacostumbrado a hacerla desde el explorador deWindows (o el Finder de MacOS, o la línea decomandos en Unix).Un servidor web actúa de la misma forma que elsistema de archivos. Es decir, es un sistema dedirectorio que nos permite acceder a la informa-ción alojada en el servidor web de forma lógica. Loque varía es la forma de referenciar a los datos en

PASO 7

p26/31.qxd 10.09.2001 13:18 Página 29

Page 30: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200130

cuestión. Los datos serán exactamente los mis-mos, pero en función de si accedemos a través delsistema de archivos o a través de un servidor web,lo indicaremos de una forma un otra. (Por ejemplo,C:\apache\htdocs\personal\diario.doc ohttp://localhost/personal/diario.doc).«Localhost» es un nombre de red que referencia alpropio equipo. Es decir, para acceder al servidorweb desde el mismo ordenador donde se está eje-cutando el programa puedes hacerlo utilizando elnombre de equipo que le hayas asignado en elmomento de la instalación o bien «localhost».Como veremos más adelante en el apartado denombres de dominio, estos nombres se relacio-nan con direcciones numéricas de red (direccio-nes IP). En el caso de localhost, es el equivalen-te a 127.0.0.1. No te preocupes si tu ordenadorno dispone de tarjeta de red o no está conecta-do actualmente a Internet a través de módem.Esta dirección es interna al equipo y siempre seencuentra disponible.

Cuando le llega una petición para descargar unarchivo concreto, como por ejemplo una páginaHTML, el servidor trata de localizar el archivo apartir del directorio que tiene asignado para docu-mentos. En caso de encontrarlo, lo lee del disco ylo despacha a quien se lo ha pedido. Si el archivoen cuestión no se encuentra en disco o se producecualquier error durante este proceso, se presentauna página con información del error al usuario quesolicitó el documento.

En el caso de Apache, se puede utilizar cualquiercarpeta del disco como carpeta de documentosdel servidor web. Por defecto, cuando se instalaApache, tiene configurado como carpeta de docu-mentos htdocs, dentro de la carpeta donde se ins-taló Apache (p.e: C:\Apache\htdocs\ o C:\Archivosde programa\Apache Group\Apache\htdocs si seeligió la ruta por defecto durante la instalación). Esdecir, que se podrá acceder a todos los archivosque se encuentren en esta carpeta o sus descen-dientes a través del servidor web utilizando unnavegador.

Carpeta dedocumentos webAunque se podría, nunca se

configura un servidor web para que pueda servirtodos los archivos del ordenador donde seencuentra funcionando. En su lugar, se le asigna undirectorio concreto de éste y el servidor podrá des-pachar únicamente los documentos que seencuentren situados en esta carpeta o en sus des-cendientes.

PASO 8

p26/31.qxd 10.09.2001 13:18 Página 30

Page 31: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200131

Distintos enlacesEn la imagen del ejemplo, siaccediendo a través del

servidor web pinchamos sobre el fichero de ima-gen «Cobertizo.jpg», ésta se mostrará en elnavegador. Si por el contrario hacemos dobleclic sobre el archivo desde el explorador de Win-

dows, se abrirá la imagen con el programa quetengamos configurado por defecto para ver estetipo de archivos.Si en cualquier momento quieres cambiar la car-peta de documentos de Apache, tendrás queeditar el archivo de configuración «httpd.conf»que hemos mencionado anteriormente.

PASO 9

Edición delarchivoCon un editor de

texto (por ejemplo, el Bloc de notas) abre elarchivo «httpd.conf» alojado en la carpeta conf del directorio donde instalaste Apache.Localiza la línea donde se encuentra la palabra«DocumentRoot».

PASO 10

Cambiar losvaloresLo que viene a continua-

ción entrecomillado es el directorio que se empleaactualmente como carpeta de documentos de

Apache. Cambia este valor por la ruta completa dela nueva carpeta de documentos que desees.Guarda los cambios y reinicia el servidor web(puedes hacerlo a través del Menú de Inicio).

PASO 11

p26/31.qxd 10.09.2001 13:18 Página 31

Page 32: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

ste mecanismo se sigue en cualquierservidor web, no solamente Apache,por lo que si tienes que utilizar Micro-

soft Personal Web Server, iPlanet Enterpri-se Server o cualquier otro, los pasos queseguir son idénticos. Es decir, tienes quecopiar o mover los archivos que desees ser-vir a través de la web al directorio de docu-

mentos que tenga configurado el servidorweb que utilices.A la hora de diseñar tu sitio web, es muy útiltrabajar sobre esta carpeta. Créate la estructurade directorios que creas más conveniente paraorganizar tu sitio web (por ejemplo, una car-peta para imágenes, otra para vídeos, otra paraagrupar secciones particulares de la web, etc).

PASO A PASO

colección!dea octubre 200132

Manejo del servidor webYa has visto cómo a través de un navegador se puede acceder a losarchivos alojados en la carpeta de documentos del servidor web.

E

BÁSICO

Navegadores webComo hemos mencionadoantes, los navegadores

web son los clientes del servicio que propor-cionan los servidores web. Hasta ahora, nosservían para visualizar y navegar por los distin-tos sitios web de la red. Sin embargo, desdehace un tiempo estas herramientas han ascen-dido en la escala de utilidad para el usuario. Sinos fijamos un poco, actualmente estamosrealizando un viaje al pasado, en términosinformáticos. En el pasado, los programas yaplicaciones residían en inmensas y costosasmáquinas y se accedía a los servicios queestas proporcionaban a través de clientes lige-

ros, también denominados «tontos». Actual-mente, los sitios web que ofrecen contenidosestáticos están dando paso cada vez más a losservidores de aplicaciones, que realizandotareas complejas (como banca on-line, reservade billetes, etc.) se relacionan con el usuariofinal a través de clientes ligeros (y relativamen-te «tontos»), como lo son los navegadoresweb. No hay que olvidar que, además, estosprogramas son uno de los principales respon-sables de haber facilitado el uso de la red atodo tipo de usuarios, desmitificando Internetcomo una herramienta exclusiva para los ámbi-tos de investigación y educación.

PASO 1

Explorer, elganadorA estas alturas, la guerra de

los navegadores tiene ya un ganador indiscutibledesde hace tiempo, Internet Explorer. Los moti-vos que nos llevan a decir esto son muy objeti-vos; un motor de render (la parte del programaque compone el aspecto y disposición de lapágina a partir del código HTML descargado)más rápido que el de sus competidores, unaimplementación de hojas de estilos en cascada(CSS) muy superior a los demás, distintas posi-bilidades de efectos gráficos (no estandarizadaspero sí muy popularizadas y extendidas), ade-

PASO 2

p32/38.qxd 10.09.2001 13:18 Página 32

Page 33: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

más de otros aspectos también objetivos comola velocidad de carga del propio programa y subajo consumo de recursos.Ésto son hechos objetivos que han hecho alnavegador de Microsoft ganar la batalla en elmundo Windows/Macintosh a Netscape Com-municator, que incluso en su más reciente ver-sión (la 6.01 en el momento de escribir estaslíneas) no termina de alcanzar a Explorer 5.0 (del cual se acaba de lanzar la versión 6).

Como remate de esta polémica, existendiversas diferencias de incompatibilidad (yseguramente irreconciliables) entre ambosnavegadores, entre las que destaca el mode-lo de objetos de documentos (DOM, Docu-ment Object Model) de cada navegador,empleado fundamentalmente en la programa-ción de JavaScript, que hace que en muchasocasiones los diseñadores tengan que dupli-car el código para que se ejecute correcta-mente en ambos navegadores.Entrar en profundidad en las ventajas e inconve-nientes de estos dos titanes se escapa del obje-to de este suplemento. En cualquier caso lo cier-to es que, actualmente, Communicator sigueacaparando un porcentaje relevante del mercadode navegadores web, por lo que cualquier sitioweb serio se preocupa en mantener sus páginaspara que se puedan visualizar de forma correctaen ambos navegadores.

PASO A PASO

colección!dea octubre 200133

IncompatibilidadesCommunicator presentaalgunas características que

lo siguen haciendo interesante para muchos usua-rios, como la facilidad para cambiar su aspectovisual mediante pieles (skins) que no resultan tanintuitivas ni evidentes en su versión para Explorer.

PASO 3

Otros navegadoresDe todas formas, InternetExplorer y Communicator

no son los únicos actores enel escenario de los navega-dores. Existen multitud denavegadores web, que per-manecen a la sombra de

estos dos gigantes, concaracterísticas especí-ficas que los hacenmuy adecuados paradeterminados usos.Por ejemplo, en el

mundo Unix, cadavez más extendidogracias a la popu-

larización de Linux, noexiste una variedad de clientes web tan ampliadonde escoger. Internet Explorer, sin duda pormotivos políticos, sólo cuenta con versionespara algunas variantes Unix (Solaris y HPUX).Netscape, por el contrario, siempre ha sido másconsiderada con estas plataformas (apenas

PASO 4

p32/38.qxd 10.09.2001 13:19 Página 33

Page 34: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

extendidas entre los usuarios domésticos), y halanzado las sucesivas versiones de su popularnavegador, casi de forma simultánea para los

distintos sistemas operativos. Communicator eraen Unix, hasta hace poco, lo que tanto se criticaa Microsoft, la única alternativa posible.

PASO A PASO

colección!dea octubre 200134

OperaSin embargo, un veterano actorsecundario se ha convertido en una

alternativa real a Communicator, Opera (www.opera.com).Dispone de versiones, nada más y nada menos, que paraWindows, Macintosh, Linux, Solaris, OS/2, BeOS, QNX yEPOC. Es realmente rápido y ligero en cuanto recursos dela máquina necesarios para funcionar y, a pesar de teneruna interfaz de usuario distinta a lo que nos tienen habi-tuados, es muy manejable e intuitiva.Con estos datos sobre la mesa, ya sólo nos queda recon-siderar nuestra posición actual y qué menos que echar unvistazo a la versión actual de estos navegadores.

PASO 5

Instalación yconfiguraciónSalvo en el caso de Opera y

algún otro navegador minoritario, lo habitual esencontrar los programas de instalación de tipo«inteligente», que consisten en un pequeñoarchivo que sólo sirve para iniciar el proceso deinstalación. Posteriormente, se pregunta al usua-rio qué módulos o componentes del navegadordesea instalar y, en función de la elección, sedescargan del sitio web del fabricante los archi-vos necesarios para llevar a cabo la instalación

de los módulos seleccionados. Aunque realmen-te ahorra tiempo de descarga, al reducirse a losarchivos imprescindibles, presenta el inconve-niente de que para volver a instalar el programaen cuestión es necesario volver a realizar la des-carga de los componentes (si no se ha salvadoconvenientemente en otro lugar).Si te conectas al servicio FTP de Microsoft(ftp://ftp.microsoft.com) o Netscape(ftp://ftp.netscape.com), podrás descargar susnavegadores de forma íntegra, con lo cual nonecesitarás estar conectado a Internet en suce-

sivas instalaciones, aunque encontrar eldirectorio adecuado no es nada sencillo ytendrás que ir navegando por la estructurade directorios del sitio.Tanto en la instalación inteligente como enla convencional, el proceso es muy sencilloy no entraña mayores complicaciones.La configuración por defecto de los nave-gadores también es la óptima, por lo que ano ser que quieras de funcionalidades muyespecíficas, como ajuste del nivel de segu-ridad o instalación de plugins (comoMacromedia Flash o Apple Quicktime), elprograma se encuentra perfectamente listopara su uso.

PASO 6

p32/38.qxd 10.09.2001 13:19 Página 34

Page 35: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

os dispositivos WAP más conocidos en laactualidad son los teléfonos móviles, queincorporan capacidades de conexión a

Internet a través del operador. Lejos de ponertodo el poder de Internet en nuestras manoscomo se profetizaba hace unos años, la funcio-nalidad que son capaces de ofrecer es más bienescasa.Apenas hay diferencias entre el acceso a páginasweb convencionales. De hecho, WAP utilizaHTTP como protocolo de acceso a sitios web enInternet. ¿Qué es lo que varía? Salvo el transpor-te de la información entre el teléfono y la pasare-la del operador, lo demás permanece igual. Esdecir, la información desde un teléfono y el ope-

rador viaja de formadistinta, normalmen-te como WAP sobreel protocolo GSM,pero a partir del mo-mento en que llega aloperador, el resto dela información setransmite de la formahabitual, empleandoel protocolo de Inter-net (TCP/IP).Tecnicismos aparte, cualquiera de nosotrospuede ser capaz de ofrecer contenidos WAP.Para ello, nos hace falta crearlos, por supuesto.

PASO A PASO

colección!dea octubre 200135

WAPEl protocolo de aplicación inalámbrica (WirelessApplication Protocol) es una especificación abierta yglobal que permite acceder e interactuar a los usuariosmóviles con dispositivos inalámbricos con información yservicios de forma instantánea.

L

Tipos de contenido WAPEl lenguaje más utilizado

para crear páginas WAP es WML (Wireless Mar-kup Language), si bien existen otros lenguajesmenos extendidos, utilizados por unos pocosterminales telefónicos, que sin duda terminarándesapareciendo.En la terminología WAP, un archivo WML se pue-de dividir en más de una página, denominadatarjeta o carta. Es por esto que los archivosWML se suelen denominar también barajas omazo de cartas (del inglés deck). La idea es quedebido a las reducidas prestaciones de los dis-positivos WAP y a la limitación de tamaño yvelocidad de descarga, se puede incluir más deuna tarjeta WAP en la misma baraja, de formaque se pueda cambiar entre una y otra sin tenerque volver a descargar nada de Internet.

PASO 1

MEDIO

p32/38.qxd 10.09.2001 13:19 Página 35

Page 36: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200136

Un archivo WMLAl igual que el HTML, paracrear un archivo WML, nos

basta con un simple editor de texto como el blocde notas de Windows. WML es un subconjuntode XML (eXtensible Markup Language o lenguajede etiquetas extensible). Una de las caracterís-ticas de XML es que su sintaxis es siemprecorrecta, por lo que, a diferencia de HTML (en elque, aunque cometamos fallos, es muy probableque la página se visualice correctamente), enWML es estrictamente necesario que la sintaxissea perfecta. Por este motivo, puedes encontrarinteresante descargar algún editor de WML a finde que te facilite la edición de páginas y despre-ocuparte un poco de la sintaxis.En el mundo WAP, las imágenes no son unrecurso tan popular como en el tradicionalweb, donde es imprescindible acompañar de

un diseño adecuado incluso a los contenidosmás serios. Esto viene dado fundamentalmen-te por las limitaciones del área de visualiza-ción de los terminales móviles y la velocidadde descarga, por lo que se puede decir que eluso de imágenes en WAP está justificado enmuy pocos casos.

PASO 2

Imágenes en WAPSin embargo, WAP permiteel uso de imágenes en

documentos WML. Las imágenes son mapas debits (como el conocido formato .BMP) con unaprofundidad de color de dos colores (monocro-mo) y sin ningún tipo de compresión. La profun-

didad de color (2) esta justificada por las carac-terísticas de la mayoría de los terminales WAP,por lo general teléfonos móviles con una pantallatambién monocroma y sin posibilidad de distin-tas tonalidades (aunque ya existen algunosmodelos avanzados que sí lo permiten).Puede que te preguntes por qué no se utilizaningún tipo de compresión en las imágenesteniendo en cuenta la baja velocidad de transfe-

rencia de estos dispositivos. El motivo es que lacapacidad de proceso de estos aparatos es muyreducida y la descompresión de una imagenpara su posterior visualización resulta una tareamuy costosa para ellos. Es por esto por lo quese ha optado por WBMP como formato gráfico,al ser el más sencillo de manejar.

Técnicamente, un ficheroWBMP es exactamenteigual que un fichero BMP,con las característicasanteriormente menciona-das (es decir, monocromoy sin ningún tipo de com-presión), por lo que esposible emplear cualquier

programa capaz de manejar este tipo de forma-to. Sin embargo, para evitar complicaciones sesuelen utilizar aplicaciones específicas que con-vierten formatos más conocidos como JPEG/GIFa WBMP.Existen además algunos otros tipos de archivosque pueden ser reconocidos por dispositivosWAP, como WMLScript (similar a JavaScript),aunque no todos los clientes WAP lo soportan.

PASO 3

p32/38.qxd 10.09.2001 13:19 Página 36

Page 37: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200137

Creaciónde WMLLa sintaxis del código nece-

sario para generar una página WML es muy similaral HTML empleado para las páginas web, si bienimpone algunas restricciones propias de XMLpues, como ya hemos mencionado, WML es unsubconjunto de XML.Para la edición de este WML de prueba cuyo resul-tado puedes ver en la imagen, hemos empleado elkit WAP de Nokia, aunque también podríamoshaber editado el archivo con un simple editor detexto como el Bloc de notas.Al comienzo del WML, hay que indicar laversión XML y el DTD (Definición de Tipode Documento) del WML que vamos ausar. En el ejemplo se puede ver que hacereferencia a la versión de WML 1.1. Paranuestros propósitos, podemos utilizaréste, puesto que es el que soportan lamayoría de los terminales existentes en elmercado.El contenido de la página se abre y secierra con la etiqueta <WML> y su corres-pondiente etiqueta de cierre </WML>.El cuerpo del contenido queda definidopor la apertura y cierre de la etiqueta<CARD>. Es el equivalente de la etiqueta<BODY> de HTML, sólo que, como indi-cábamos anteriormente, al poder definir-

se más de una tarjeta en el mismo fichero WML,podemos incluir más de un bloque <card>.Los enlaces, definidos también con la etiqueta <a href> como en HTML, pueden ser a otras pági-nas o bien a otras tarjetas dentro del mismo WML.En este último caso, el contenido del atributo hrefde la etiqueta contiene el identificado de la tarjetaprecedido del carácter «#».Si deseas ampliar más información y obtener lasespecificaciones completas de WML, siempre pue-des encontrar la versión más reciente enwww.wapforum.org.

PASO 4

ConsejosgeneralesA la hora de compo-

ner contenidos WAP, es muy importanteprestar atención a los contenidos más que ala línea gráfica (que debería ser nula). Enuna pantalla minúscula de teléfono resultamuy incomodo leer el Quijote, por lo quedebes ser parco en el texto e intentar redu-cirlo a la mínima expresión, a fin de que lapágina se descargue rápidamente y hayaque desplazarse poco a través de ella. Elsecreto está en mostrar los contenidos queresulten imprescindibles al usuario.

Ten en cuenta que la navegación a través deun dispositivo WAP, normalmente un teléfo-no, es bastante más complicada y pesadaque desde un navegador web convencional,por lo que, en la medida de lo posible, inten-ta que la página sea lo más útil posible.Emplea enlaces con texto descriptivo, agru-pa contenidos en distintas tarjetas (de unamisma página WML a ser posible) y no abu-ses del uso de imágenes.Utiliza algún emulador WAP para diseñar yprobar tus páginas. Son mucho más rápi-dos que los terminales reales, más cómo-dos de usar y algunos se comportan exac-

PASO 5

<?xml version=”1.0”?><!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN”“http://www.wapforum.org/DTD/wml_1.1.xml”><wml><card id=”card1” title=”Computer Idea”><p><!— El contenido de la tarjeta va aquí. —>Enlaces WML de prueba<!— Enlace a otra tarjeta —><a href=”#card2”>Ayuda</a><!— Enlace exterior a otro sitio —><a href=”http://wap.lanetro.com”>LaNetro W@P</a>

</p></card>

<card id=”card2” title=”Ayuda”><p align=”center”>Esta puede ser la tarjeta para ayuda al usuario

</p></card>

</wml>

p32/38.qxd 10.09.2001 13:19 Página 37

Page 38: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

tamente igual que los modelos a los que emulan,por lo que son realmente fiables.Si de verdad te quieres tomar en serio el ofrecercontenidos WAP, prueba tus páginas con los ter-minales más extendidos. Es lamentable ver

cómo algunos fabricantes (algunos muy conoci-dos) incluyen navegadores WAP en sus teléfo-nos que nos son capaces de mostrar páginasWML, a pesar de que estén perfecta y correcta-mente escritas.

PASO A PASO

colección!dea octubre 200138

Contenidos¿Que necesito para servircontenidos WAP? Exacta-

mente lo mismo que para servir contenidos web:un servidor web, como Apache o cualquier otro,y por supuesto un canal de comunicación queen la mayoría de los casos hará uso de Internet.Una simple conexión a través de módem es másque suficiente para usos domésticos, teniendo

en cuenta la escasa velocidad de descarga queofrecen los teléfonos GSM actuales (habitual-mente, 9.600 bps en contraste con los 56.700bps de un módem actual)La diferencia es que con seguridad tendrásque configurar tu servidor web para que ade-más de los tipos de contenidos normales, sirvatambién adecuadamente aquellos tipos decontenidos de WAP.Cuando un cliente web solicita un determinadoarchivo, el servidor web le indica primero eltipo de contenido del archivo que le está sir-viendo, por ejemplo text/html para una páginaweb o image/jpeg para un gráfico en este for-mato. Para poder hacer esto, lo que se hace esrelacionar extensiones de archivos con un tipodeterminado Content-type (tipo de contenido)como, por ejemplo, image/jpeg con todosaquellos archivos cuya extensión sea JPEG,

JPG, JPE, JFIF, PJPEG o PJP.Los contenidos WAP no son dis-tintos, por lo que es necesarioestablecer una relación entre elMIME type correspondiente alos archivos para navegadoresWAP y su extensión.

PASO 6

Contenidos y extensionesContenido MIME type Extensión

Página WML text/vnd.wap.wml .wmlPágina WML compilada application/vnd.wap.wmlc .wmlcWireless BitMaps (imagen) image/vnd.wap.wbmp .wbmpWMLScript text/vnd.wap.wmlscript .wmlsWMLScript compilado application/vnd.wap.wmlscriptc .wmlsc

Configuraciónde tipos MIME WAP en Apache

En el caso de Apache, no es necesario definir laasociación entre los tipos MIME de WAP y suscorrespondientes extensiones, ya que si descar-gamos una versión reciente, éstos ya han sidoincluidos en la configuración por defecto del ser-vidor web.No obstante, en caso de disponer de una ver-sión antigua del servidor o para verificar queefectivamente se encuentran definidos, lospasos son sencillos.Con un editor de texto, abre el archivo«mime.types» alojado en la carpeta conf deldirectorio donde instalaste Apache. Compruebaque se encuentran los tipos de WAP y, si no esasí, añádelos tú mismo.Guarda los cambios y reinicia el servidor web.

PASO 7

p32/38.qxd 10.09.2001 13:19 Página 38

Page 39: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

hora llega la pregunta: ¿cuál es la mejorforma de hacerlo? La respuesta sola-mente depende de ti, de diversos facto-

res como las necesidades de acceso al sitio y,como en tantas otras ocasiones, de cuántodinero estés dispuesto a gastarte en ello.

Estos son los tres métodos de explotación desitios web que existen. Cada uno tiene sus ven-tajas e inconvenientes. Te contamos las venta-jas y desventajas principales, para que despuésseas tú quien elija.

PASO A PASO

colección!dea octubre 200139

Modos de explotaciónUna vez hemos creado nuestro sitio web, llega el momento de la gloria, dehacerlo público y accesible a todo el mundo en Internet y de comunicarsu existencia.

A

MEDIO

In-HousePor este término inglés sehace referencia al aloja-

miento del sitio web (o de cualquier otro servi-cio de Internet) en las instalaciones del propie-tario. Si el sitio web es para una empresa,podemos decidir montar un servidor en sus oficinas o un CPD (Centro de Proceso deDatos) del mismo. En caso de ser una páginade carácter personal, este modo de explota-ción no podría ser más descriptivo: en nuestrapropia casa.

PASO 1

VentajasTenemos un control totaltanto sobre los contenidos

como sobre la máquina en la que se ejecuta elservidor web.Si los contenidos que vamos a mostrar son decarácter reservado, seguramente estemos mástranquilos en tenerlos a nuestro recaudo, enlugar de dejarlos en manos de terceros.

PASO 2DesventajasA pesar de la primeraimpresión, si se quieren

hacer las cosas bien, el desembolso de dineroes realmente alto, seguramente el más alto detodos los modos que te exponemos aquí. Lo pri-mero es tener una conexión permanente y sufi-cientemente rápida. Para usos domésticos ypersonales, las conexiones de tipo ADSL o cable

PASO 3

p39/45.qxd 10.09.2001 13:19 Página 39

Page 40: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

son suficientes. Tenemos que disponer de unequipo conectado las 24 horas del día a fin deque no haya momentos en que no se puedaacceder al sitio, simplemente porque estábamosreiniciando.En el caso de pequeñas y medianas empresas,en donde la calidad del servicio se hace mucho

más patente, los costes de infraestructura sedisparan vertiginosamente (salas acondiciona-das, contratación de una línea de datos dedica-da, redundancia en fuentes de alimentación, ser-vidores, personal cualificado para mantenerlo,etc.). Si el negocio de la empresa no es el tecno-lógico, no merece la pena optar por el modo In-House. Incluso si lo es, solamente está justifica-do en casos muy concretos. Si aún no te hasquitado la idea de la cabeza, toma a Microsoftde referencia; las máquinas que alojan micro-soft.es, no se encuentran en sus oficinas. Unavez más se aplica el dicho de «Zapatero a tuszapatos».Obviamente, si nuestro sitio web es de carácterpersonal y sólo esperamos que lo visiten unoscuantos amigos, con tu PC de casa de siempre yuna buena conexión será más que suficientepara satisfacer tu ilusión de tener tu propio ser-vidor web y administrarlo tú mismo.

PASO A PASO

colección!dea octubre 200140

HostingEl método de hosting estámuy extendido y aporta con-

siderables ventajas sobre tener el servidor en tupropia casa u oficina. El hosting consiste en alojartu sitio web en un equipo propiedad de un provee-dor de hosting. Habitualmente, tu sitio web compar-tirá «casa» con otro sitios web, es decir, un mismoequipo se destina a albergar diferentes sitios web.

Este método te puede salir incluso totalmentegratis si no eres demasiado exigente o tu sitioweb no tiene grandes necesidades ni pretensio-nes. Diversos portales generalistas y sitios espe-cializados en hospedaje ofrecen espacio para«colgar» tu sitio web de forma completamentegratuita. Habitualmente, se exige que el conteni-do del sitio no sea de carácter comercial o cor-porativo.

PASO 4

VentajasDisponibilidad 24 horas aldía, 7 días a la semana. Las

máquinas del proveedor se encuentran conectadasa la red de forma permanente, por lo que salvo pro-blemas técnicos graves, te aseguras de que tu sitioweb puede ser visitado en cualquier momento.Su velocidad de transferencia es muy alta. Elproveedor de hosting se encuentra conectado aInternet mediante sistemas mucho más rápidosque los que se puede permitir un usuariodoméstico e incluso muchas empresas peque-ñas y medianas. La ventaja que se desprende deesto está clara: cuanta más velocidad y caudal

PASO 5

p39/45.qxd 10.09.2001 13:19 Página 40

Page 41: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200141

DesventajasLos recursos de la máquinaque aloja el sitio web son

compartido, por lo que no se obtiene el máximorendimiento del equipo. Tampoco es posible insta-lar más aplicaciones que las que proporciona elproveedor.Si no optamos por el alojamiento gratuito de pági-nas personales, el hosting supone una inversiónmensual, aunque habitualmente en modo comparti-do, la relación calidad / precio suele ser muy buena.El acceso al servidor está restringido por el pro-veedor. Sólo puede hacer uso de las aplicacio-nes comunes que éste proporcione (servidorweb, servidor de aplicaciones, contadores, listasde correo, etc.).

de transferencia, mayor número de usuarios quepodrán visitar tu sitio web.

PASO 6

HousingEl housing viene a solucio-nar todos los problemas

señalados anteriormente, aunque, como es lógi-co, a costa de una inversión económica muchomayor. Este método consiste en configurar e ins-talar un equipo de nuestra propiedad y llevarlodespués a una «granja de PCs».

PASO 7

VentajasNos beneficiaremos de lasinstalaciones y recursos del

proveedor de housing; altas velocidades deconexión, salas refrigeradas, redundancia en ali-mentación eléctrica y conexiones y personal

cualificado que se encargará de solucionar pro-blemas o ampliar el equipo en caso de avería.Tenemos un control total sobre el equipo.Somos nosotros quienes elegimos la configu-

PASO 8

p39/45.qxd 10.09.2001 13:20 Página 41

Page 42: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

ración hardware de la máquina sobre la quecorrerá el servidor web (memoria, tamaño deldisco duro, velocidad del procesador), asícomo el resto de programas que funcionan enla misma máquina. Podremos elegir nuestro

sistema operativo favorito e instalar las aplica-ciones que nos sean necesarias, como porejemplo un servidor de correo o un intérpretede páginas activas para dar mayor funcionali-dad a nuestro sitio.

PASO A PASO

colección!dea octubre 200142

DesventajasSi nuestro sitio web no tienemucha afluencia de visitas,

estaremos desperdiciando recursos de la máquina,que podrían ser aprovechados por otras aplicacio-nes o programas de otros usuarios.Este método es el más caro de todos, no sólo porel coste del equipo (componentes hardware ylicencias de los programas instalados) que correráa nuestra cuenta, sino por el precio asociado a losservicios de housing. Además, se precisan conoci-mientos técnicos para la configuración y puesta enmarcha inicial de la máquina.

PASO 9

p39/45.qxd 10.09.2001 13:20 Página 42

Page 43: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

e accede a todas las máquinas conectadasa Internet a través de una direcciónnumérica que las identifican inequívoca-

mente unas de otras. Estas direcciones, llama-das direcciones IP, están compuestas por cua-tro números del 0 al 255 separados por puntos(p.e: 213.56.1.280). Esto está muy bien para lasmáquinas, pero evidentemente para cualquie-ra de nosotros sería un suplicio tener quememorizar, además de los teléfonos y fechasde cumpleaños de nuestros amigos, las direc-ciones IP de nuestros sitios web favoritos. Parasolventar esto se inventaron los nombres dedominio.Los nombres de dominios son fáciles de recor-dar para identificar computadoras en Internety se corresponden con direcciones IP. Losnombres de dominio se usan generalmentecomo una forma cómoda de localizar informa-

ción y hacer referencia a máquinas conectadasa Internet.El sistema de nombres de dominio (DNS,Domain Name System) de Internet surgió a prin-cipios de los 80 para facilitar la localización deun sitio en particular a través de un sistemaestructurado de elementos, consistente en undirectorio organizado de forma jerárquica. Esteárbol incluye todos los nombres de dominioregistrados por compañías y particulares, y lascorrespondientes direcciones IP de sus equipos.La asociación de nombres y direcciones se man-tiene durante el periodo de tiempo en que esefectivo el registro. Los nombres de dominio quepueden comprarse siempre constan de, al menos,dos partes: el nombre de dominio de primernivel («.com», «.net», «.org», «.es», «.tv», etc.) yuno o más nombres de subdominios (www.vnu-net.com, correo.vnunet.com, etc).

PASO A PASO

colección!dea octubre 200143

Nombres de dominio¿Qué diferencia hay entre www.macdonalds.com y www.terrra.es/personal3/manolo/? Aparte de algunos aspectos técnicos que veremos a continuación, fundamentalmente la diferencia está en la imagen que se da al visitante.

S

Un nombre únicoUna vez hemos elegido elnombre para nuestro domi-

nio, el primer paso es comprobar que nadie máslo ha elegido y se encuentra aún disponible.Para ello podemos utilizar el sistema de búsque-da de InterNIC (www.internic.com/whois.html) obien podemos acudir al sitio web de las princi-pales compañías de registro de dominios, queofrecen un servicio gratuito de comprobación denombres.Al registrar un nombre de dominio, éste se asig-na a una dirección IP en Internet, durante elperiodo de tiempo que dura el registro. Pode-mos hacerlo de dos formas, encargárselo al pro-veedor de servicios de Internet que tengamos

contratado o hacerlo nosotros mismos a travésde un formulario web.

PASO 1

BÁSICO

p39/45.qxd 10.09.2001 13:20 Página 43

Page 44: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200144

El precio del dominioHace años, el registro de

un nombre de dominio era gratuito, pero cuan-do el número de registros se disparó (de18.000 dominios «.com» a mediados de 1994 a82.000 un año después), InterNIC impuso unacuota de registro.

Actualmente, el registro de un nombre de domi-nio «.com», «.org» o «.net» cuesta entre $30 y$50 y es válido durante los siguientes dos años.A partir del tercero, el coste de renovación ymantenimiento es la mitad del inicial. Para otrosdominios de primer nivel (como «.es» o «.cc»), elcoste lo marca el organismo que los gestiona.En España, lo regula ES-NIC ( www.nic.es).El registro a través de un ISP es mucho más sen-cillo y cómodo, pero resulta más caro que reali-zarlo nosotros mismos a través de InterNIC.

dos por todo el pla-neta no se actuali-zan todos al mismotiempo, sino quedisponen de siste-mas de alimenta-ción periódicos, loque hace que laactualización delregistro de dominiotarde un tiempo enpropagarse a todoslos servidores

(actualmente alrededor de 48 horas).

PASO 2

Acceso desdeInternetAhora que ya hemos visto

cómo funciona un servidor web, cómo crearcontenidos para la web y dispositivos WAP,cómo acceder a éstos desde un cliente (unnavegador o un terminal WAP) y la relaciónentre nombres de dominio y direccionesnuméricas, tenemos todos los elementos paracomponer el puzzle que nos permitirá crearcontenidos para Internet y compartirlos conotros usuarios.

Para visitar nuestro servidor web, hasta ahorahemos estado utilizando el mismo equipo dondese ejecutaba Apache (o cualquier otro servidor).Para ello, hacíamos referencia al equipo a travésdel nombre especial «localhost», tecleando

PASO 4

Asociación condirección IPUna vez hemos reservado y

adquirido un nombre de dominio, es necesarioactualizar los diferentes servidores de nombresde dominio (DNS) de Internet, facilitando la infor-mación de localización de nuestro servidor, esdecir, la dirección IP del mismo.Una vez hemos asociado nuestro nombre conuna dirección IP, los resultados no son inmedia-tos. Los distintos servidores de nombres reparti-

PASO 3

p39/45.qxd 10.09.2001 13:20 Página 44

Page 45: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

PASO A PASO

colección!dea octubre 200145

«http://localhost» en nuestro navegador.«Localhost» es un nombre que sólo tiene signi-ficado en el ordenador que estemos usandoen ese momento. Para acceder desde otroequipo al servidor, no nos valdrá con teclear«localhost» en el navegador, sino que tendre-mos que indicar un nombre de red conocido.Por ejemplo si queremos acceder al sitio webde BPE, introducimos http://www.bpe.es.

El nombre al exteriorUna vez tengamos finali-

zado nuestro sitio web, querremos compartir-lo con los demás y para ello tendremos quefacilitarles un nombre para teclear en susnavegadores.En el caso de haber optado por algún modo deexplotación de los que hemos visto antes, ges-tionado por un proveedor, será éste el que nosproporcione el nombre de dominio, bien de laforma www.proveedor.es/paginade/manolo o, sihemos registrado un nombre de dominio, a tra-vés del mismo.Si, por el contrario, el servidor web se encuentraen nuestro PC de casa, lo más seguro es que notengamos ningún nombre de este tipo. En estecaso no nos queda más remedio que utilizardirecciones IP (numéricas) válidas en Internet.Nuestro proveedor de servicios de Internet (ISP)nos asigna una dirección válida cada vez quenos conectamos a Internet.

PASO 5

DireccionesdiferentesAquí nos encontraremos

con otro obstáculo. Salvo algunas excepcio-nes, la mayoría de los proveedores emplean un

sistema que asigna direcciones según se lasvan solicitando al conectarse sus clientes. Estohace que no podamos estar seguros de que ladirección que tenemos en un momento dado,la volvamos a conseguir la próxima si nos des-conectamos.Aunque existen algunas soluciones ingeniosas(por ejemplo, http://www.dhs.org), una solu-ción temporal si utilizamos un módem esconectarnos, con lo que se nos asignará unadirección, y emplear ésta para acceder desdecualquier otro sitio de Internet. Para conocer ladirección IP que nos ha asignado el proveedorexisten varios métodos, pero el más sencillo esabrir una ventana de DOS y ejecutar el coman-do IPCONFIG.

PASO 6

La dirección como nombreCon la dirección que anote-

mos, ya podremos acceder a nuestro servidorweb, no sólo desde el propio equipo sino desdecualquier punto del planeta que tenga conexióna Internet. Para ello, no tenemos más que susti-tuir «localhost» por esta dirección. En el ejemplode la imagen, comprobamos que nos han asig-nado la dirección 202.12.34.56. Para accederdesde cualquier otro equipo conectado a Inter-net, no tendremos más que introducirhttp://202.12.34.56 en la caja de direcciones delnavegador.

PASO 7

p39/45.qxd 10.09.2001 13:20 Página 45

Page 46: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

Administrador de la web: Respon-sable de la gestión y manteni-miento de los aspectos técnicosde la web.

Apache: Servidor http de dominiopúblico, creado en 1995, basadoen el sistema operativo Linux.

Aplicación: Programa o conjuntode programas que realizan una función específica para elusuario.

Applet Java: Aplicación diseñadaen lenguaje Java que se insertaen una página web para mejorarsu visualización o hacerla másatractiva. Se ejecuta en un nave-gador.

Banner: Formato de publicidadestándar en Internet.

Buscador: Aplicación que permiterealizar búsquedas en sitios weby transmitir los resultados.

Caché: Memoria de acceso rápidoperteneciente a nuestro equipoque almacena las últimas pági-nas web que hemos visitado.

Cliente: Programa o dispositivoque solicita determinados servi-cios a un programa servidor delque depende.

Cliente Web: Como el nombresugiere, un cliente web solicitainformación a un servidor web.Normalmente se tratan de losconocidos navegadores web, comoInternet Explorer o Netscape.

Conexion De Red: Como en todacomunicación, se necesita unmedio por el que transmitir lainformación. En este caso, conta-mos con una conexión de red,que puede establecerse a travésde un módem convencional, unalínea RDSI, ADSL, etc.

DHTML: HTML dinámico, quesoporta la creación de pequeñasanimaciones.

Dirección URL: Las siglas signifi-can Localizador Uniforme de

Recursos y son la referencia porlas que realizamos las búsquedasde páginas web.

Estilos CSS: También llamadas«hojas de estilo en cascada»,definen todos los estilos queincluirá nuestra página. Normal-mente vienen incluidas en unarchivo de texto independientedel documento HTML.

Gif: Graphics interchangeformat. Formato de intercambiode gráficos.

Hipervínculo: Enlace entre com-ponentes de soporte lógico que

relaciona información entre dife-rentes equipos.

Home y homepage: Nombre que seutiliza habitualmente para indicarla página de inicio de un site.

HTML: El más utilizado lenguajegenérico para definir páginas enInternet. Siglas de Hipertext Mar-kup Language, conjunto de códi-gos que podemos insertar dentrode un archivo para indicar víncu-los o imágenes de otros docu-mentos de hipertexto.

Javascript: Lenguaje interpretadopor un navegador de Internetcuyos programas están incorpo-rados directamente dentro delfichero del lenguaje HTML.

colección!dea octubre 200146

Nos falta espacio para incluir todoslos términos relacionados con lacreación de páginas web. En estasdos páginas hemos incluido los

conceptos más relevantes.

GLOSARIO DE TÉRMINOS

p46/47.qxd 10.09.2001 13:22 Página 46

Page 47: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

JPG: Algoritmo de compresión deimagen, ideal para el entorno on-line.

LAN: Local Area Network. Red deárea local.

MIME-type: Tipo MIME. MIME es laabreviación de MultipurposeInternet Mail Extensions y es utili-zado por muchos programas paradecodificar de forma adecuadalos distintos tipos de contenidosque circulan por Internet.

Páginas Web: Conjunto de fiche-ros HTML, imágenes, sonido yotros archivos que componen unapágina Web.

Pasarela: En inglés gateway.Conexión de dos redes de distintoprotocolo, o de un sistema anfi-trión a una red.

Rollover: Efecto de Javascriptque permite que una imagen sus-tituya a otra cuando pasemos elcursor por encima de ellas.

Servidor de aplicación: Equipoque proporciona un servicio con-creto a una comunidad de usua-rios.

Servidor de conexión: Servidorencargado de localizar los

recursos de red solicitados porel usuario.

Servidor de correo: Ordenadorencargado de la distribución delservicio de correo electrónicoentre usuarios de Internet.

Servidor de información: Equipoque atiende las solicitudes deinformación de múltiples usuariosconectados a él a través de lared.

Servidor de noticias: Servidor deInternet encargado de distribuirinformación de grupos de noti-cias.

Servidor proxy: Servidor que sesitúa entre una aplicación clientey un servidor real para almace-nar todas las peticiones que losusuarios de una red interna

hagan al servidor y comprobarante una solicitud la seguridadde la misma. También se usa parafiltrar recursos o impedir a losusuarios el acceso a determina-dos sitios de la red.

Servidor Web: Por servidor web seentienden dos cosas. Por un lado,un programa cuya función esprecisamente servir estas páginasa aquellos clientes que se la soli-citen y, por otro lado, también

recibe el nombre de servidor webel equipo informático que realizaesta función.

Sistema anfitrión: Ordenador queofrece servicios basados en losprotocolos de Internet, como pue-da ser el hospedaje de páginasweb.

Sitio web: Conjunto de páginasweb agrupadas en un mismodominio de Internet.

Subir: Cargar.

Tag: Etiquetas. Nombre genéricoque se les da a los elementos deprogramación del lenguaje HTML.Siempre están definidos por sig-nos de menor que (<) y mayorque (>).

TCP/IP: Transmission Control Pro-tocol. Protocolo de Control deTransmisión.

Telnet: Protocolo estándar deInternet para realizar un serviciode conexión des-de un terminalremoto.

WAP: WirelessAplication Proto-col. Protocolo deaplicaciones ina-lámbricas.

colección!dea octubre 200147

p46/47.qxd 10.09.2001 13:22 Página 47

Page 48: Crea tu propia Web - WordPress.com...Un servidor web muy sencillo. 26 Instalación y primeros pasos Ideal bajo Linux, funciona en Windows. 35 WAP Crear páginas para los móviles.

Editado por VNU Business Publications España. computer!dea . Director: Rufino Contreras. Coordinador: Rafael María Claudín. Redactores y colaboradores: Felipe Corsino, Fernando Reinlein, Susana Harari y Elena Julve. Jefe deArte y portada: Fco. Javier Herrero. Maquetación: Ismael Ortuño. Director de Producción: Agustín Palomino. Imprenta:Cobrhi. Suplemento especial de computer!dea Dep. Legal: TO-1913-00. Número 10. Octubre 2001.

San Sotero, 8 - 4ª planta. 28037 Madrid. Teléfono: 913 137 900. Fax: 913 273 704Avda. Pompeu Fabra, 10 - bajos. 08024 Barcelona. Teléfono: 932 846 100. Fax: 932 103 052

p48.qxd 10.09.2001 13:21 Página 1