4.

LECCIN 4

Acopio de utensilios
Una vez completada esta leccin, podr:
Saber lo que va a necesitar para mostrar pginas Web en lnea. Buscar espacio para un sitio Web en un servidor en Internet. Elegir software para crear, modificar y tratar las pginas Web. Probar las pginas Web en varios exploradores. Cuando cree pginas Web, al menos deber tener un par de herramientas de creacin de pginas Web, probablemente ms. Le advertimos de que no hablamos de hardware: tenemos la certeza de que se ha dado cuenta de la importancia de disponer de un equipo informtico adems de, posiblemente, acceso a un escner, una impresora y una cmara (digital o estndar). En esta leccin, nuestro inters recae en la serie de programas que puede usar para crear, modificar y tratar pginas Web. Como le mostramos en las siguientes lecciones, puede crear, modificar y publicar pginas Web con diversas aplicaciones y herramientas software, y encontramos que las armas que preferimos se mezclan y coinciden con frecuencia. Igualmente, conocer sus opciones le ayudar a crear el entorno de trabajo que mejor se adapte a sus necesidades y estilo personal. Para comenzar, echemos un vistazo a dos de las herramientas ms bsicas que necesitar en su proceso de creacin Web: una conexin a Internet y espacio en un servidor.

Conexin a Internet y espacio en un servidor

No importa lo asombrosa que sea su pgina Web, vivir en el anonimato virtual si no puede conectarse a Internet y transferir sus archivos a un servidor. Recuerde de la leccin 1 que un servidor es un equipo muy eficaz que se conecta a las lneas de datos de la red troncal de Internet, almacena archivos de pginas Web y responde a las solicitudes de los usuarios para ver las pginas Web almacenadas. Debe estar conectado a Internet o tener acceso a una conexin a la gran red si desea demostrar su presencia en lnea. Es verdad que puede crear muchas pginas Web sin una conexin a Internet pero fallar en el intento cuando llegue el momento de publicarlas en lnea.

Sugerencia
Si usa su equipo para explorar el Web, puede tener la certeza de que dispone de una conexin a Internet. Con una conexin a Internet de acceso telefnico estndar, puede copiar los archivos de las pginas Web desde un equipo a un servidor que est conectado a Internet.

4.2

Conceptos bsicos de diseo Web

Adems de disponer de conexin a Internet como requisito bsico, puede que deba adquirir algo de espacio en un servidor para sus archivos Web. Decimos puede porque en numerosas ocasiones el espacio se ofrece gratuitamente o se proporciona junto con otros servicios de pago. Por ejemplo, su proveedor de servicios Internet (ISP, Internet Service Provider) podra darle 30 MB, por ejemplo, de espacio gratuito en el servidor adems de su conexin a Internet. La nocin de espacio gratuito atrapa a muchos por sorpresa, pero existe y es una prctica en aumento en la red. No es de extraar, sin embargo, que encuentre beneficios en comprar espacio en un servidor adems de usar el gratuito.

Espacio gratuito en lnea

Es cierto. Puede crear y mostrar un sitio Web en este momento gratis, es decir, sin pagar dinero. Todo lo que necesita es emplear un poco de tiempo y esfuerzo creativo. No requiere ningn software adicional ni cuentas de Internet de pago, slo precisa su texto y unas cuantas imgenes, si desea incluirlas. Desde luego, se enfrenta a un par de limitaciones de poca importancia si sigue este camino (por ejemplo, al uso de una direccin Web larga y, posiblemente, a ciertas restricciones en las opciones del diseo de la pgina), pero, dependiendo de cul sea su objetivo ltimo, estas limitaciones podran no afectarle demasiado. As que considrese informado: hay espacio gratuito en el Web. Como mencionamos anteriormente, nos hemos encontrado con ms de una persona que se qued sinceramente impresionada al descubrir este hecho.
Jerga: un grupo o comunidad en lnea es un rea virtual en el Web donde las personas con intereses similares renen y comparten informacin.

La forma ms habitual de convertirse en el orgulloso propietario de una pgina Web gratuita es acudir a un grupo o comunidad en lnea. Una de las ventajas de esto, adems del factor de gratuidad, es que la mayor parte de los grupos y comunidades en lnea permiten la creacin de pginas Web proporcionando para ello plantillas o asistentes que puede usar. Entre los numerosos grupos y comunidades gratuitos, rpidamente nos vienen a la mente tres bastante populares:
Grupos Web de MSN (http://groups.msn.com/home.msnw?pgmarket=es-es) Tripod de Lycos (http://www.tripod.lycos.es) Yahoo! GeoCities (http://es.geocities.yahoo.com/)

La mayor parte de las compaas que patrocinan los grupos y comunidades en lnea obtienen sus ganancias a travs de los anuncios, de la venta de actualizaciones y caractersticas, y de servicios complementarios.

Las desventajas principales de los grupos y comunidades en lnea son que su direccin Web suele ser bastante larga, generalmente se dispone de una cantidad limitada de espacio en el servidor, las opciones de diseo de pginas resultan, con frecuencia, algo restringidas o dirigidas, puede tener que tolerar anuncios emergentes cada vez que visite su pgina y, si no desea usar las plantillas de un grupo o comunidad, la personalizacin de la pgina puede resultar difcil en ocasiones.

Leccin 4

Acopio de utensilios

4.3

De forma similar al uso de los grupos y comunidades en lnea, otra forma gratuita de conseguir un espacio en el Web es crear pginas especficas de un sitio. Al explorar Internet, puede encontrar que algunos sitios Web ofrecen espacio gratuito a los miembros registrados. Por ejemplo, puede crear una pgina Acerca de m en eBay (un sitio de subastas en lnea que se encuentra en www.es.ebay.com), si es uno de los participantes registrados en el sitio. El propsito de las pginas Acerca de m de este sitio es presentar a los usuarios de eBay al resto de personas que lo visitan. Y otro tipo de espacio en el Web en lnea gratuito, que tcnicamente no es tal, es el que obtiene de su ISP. Puesto que lo ms probable es que firme un cheque para su ISP de forma regular (o al menos compruebe que se le ha cargado el pago en su cuenta), no podemos etiquetar exactamente el espacio en los servidores del ISP como gratuito; es ms bien un espacio disponible con prepago. Cuando se suscribi a su ISP actual (suponiendo que tenga alguno), probablemente le inform con voz excitada o con una frase que terminaba en un signo de admiracin que consegua X megabytes de espacio gratuito en el servidor!. En ese momento, es probable que no supiera lo que eso significaba as que simplemente pens: Oh, qu bien! y pas al siguiente detalle. Ahora que est pensando en crear una pgina Web, debe volver a visitar la clusula acerca del espacio gratuito en el servidor de su contrato con el ISP. Los ms probable es que encuentre que tiene en alguna parte entre 10 MB y 50 MB de espacio a su disposicin en un servidor.

Prubelo!
Para buscar espacio gratuito en el Web, escriba free Web space (o espacio gratuito en el Web) en cualquier motor de bsqueda; se le recompensar con un montn de sitios que le permiten alojar sus pginas. O bien, revise el sitio Web 100 Best Free Web Services en www.100best-free-web-space.com (en ingls). En este sitio se proporcionan exmenes y clasificaciones de sitios, lo que lo convierte en un gran recurso para localizar y examinar servicios de alojamiento de sitios Web (o hosts).

4.4

Conceptos bsicos de diseo Web

La ventaja de usar el espacio en los servidores de su ISP es que ya est pagando por l, as que tambin podra emplearlo. El inconveniente es que probablemente tendr que convivir con una voluminosa direccin Web, similar a las de las comunidades y grupos en lnea. Por ejemplo, un par de nuestros ISP (tenemos varios) conceden espacio gratuito en sus servidores, pero los formatos de las direcciones Web son www.dominio.com/~nombredeusuario/ nombredearchivo.html y members.dominio.net/ nombredeusuario/ nombredearchivo.html. Para la mayora de las personas, estos formatos son un poco largos y no resultan fciles de recordar. Otra virtud de usar el espacio de los servidores de los ISP con respecto al de los de los grupos y comunidades en lnea es que, generalmente, se tiene mayor libertad en relacin a la forma en que se crean y muestran las pginas (lo que podra ser un inconveniente si prefiere trabajar con las plantillas preconfiguradas que parecen ser una prctica estndar en numerosos sitios de comunidades en lnea). Con todo, la cuestin principal en relacin a los sitios gratuitos en lnea es que el espacio en el Web est a su disposicin de forma instantnea. Y, siempre que no tenga inconveniente en usar una direccin Web largusima para su pgina principal, sufrir ciertas limitaciones de diseo y, posiblemente, que aparezcan anuncios emergentes, entonces el espacio gratuito es una estupenda forma de iniciarse en el Web.

Adquisicin de espacio en un servidor

En contraposicin al uso de espacio gratuito en el Web, puede desembolsar algo de dinero para que una pgina Web use la direccin Web que prefiera siempre que alguien no haya llegado antes. Si toma este camino, debe recordar las dos consideraciones siguientes: necesita elegir y registrar el nombre de una direccin Web (como creationguide.com) y suscribirse a un proveedor que aloje (o almacene) sus pginas Web, a menos que vaya a poner en funcionamiento su propio servidor, pero ese tema es mejor dejarlo para libros ms avanzados. Echemos un vistazo al modo de registrar una direccin Web y obtener un servicio de alojamiento.

Registro de una direccin Web

Antes de seguir, vamos a concretar cierto vocabulario sencillo. Para ser ms precisos, en lugar de direccin Web, realmente deberamos decir nombre de dominio. Someramente (mucho), un nombre de dominio es una direccin Web. Como tal vez sepa, todas las direcciones Web son en realidad grupos de nmeros, denominados nmeros de Protocolo Internet (IP, Internet Protocol), que actan como direcciones de Internet. Siendo un humano, probablemente tambin sabr que, para la mayor parte de la gente, recordar un nombre con sentido es mucho ms fcil que recordar una serie de nmeros divididos por puntos. Por ello, el Sistema de nombres de dominio (DNS, Domain Name System) vio la luz. En esencia, DNS simplemente asigna nombres de texto (como creationguide.com) a las direcciones de Internet con nmeros (como 207.155.248.5). Por lo tanto, para que parezca que sabe lo que hace, debera usar el trmino nombre de dominio en lugar de direccin Web.

Leccin 4

Acopio de utensilios

4.5

Cuando est listo para obtener su propio nombre de dominio, podr elegir un nombre (como creationguide.com, aunque podemos decirle ahora mismo que ya lo tiene algn otro), ver si est disponible y, si lo est, registrarlo a su nombre a cambio de una cuota nominal anual. Por nominal, queremos decir un precio cercano a lo que cuesta una buena comida o un poco ms. Elegir y registrar un nombre de dominio Web es sencillo, una vez que tiene acceso a un sitio de registro legtimo. Afortunadamente, InterNIC (que se encuentra bajo el paraguas del Departamento de comercio de Estados Unidos) aloja una pgina Web que enumera todos los sitios Web de registro de nombres de dominio aceptables. Muchos sitios de alojamiento tambin ofrecen servicios de registro de nombres (como explicamos en la seccin siguiente). Para ver una lista oficial de registradores de nombres de dominio, visite www.internic.net/alpha.html (en ingls). Mientras visita el sitio de InterNIC, examine unos cuantos sitios de registro para revisar sus listas de precios y directivas (o visite www.creationguide.com/resources, en ingls, y le dirigiremos a un par de nuestros servicios de alojamiento Web favoritos). Cuando haya encontrado un sitio que le guste, por lo general puede escribir el nombre de dominio propuesto en un cuadro de texto. Entonces, se le informar si est disponible. Si es as, se establece un contrato de pago (normalmente, mediante tarjeta de crdito) y el sitio registra su dominio en InterNIC. El siguiente paso es buscar un ISP que aloje su nombre de dominio y sus pginas Web.

Bsqueda de espacio para un dominio

Si no utiliza su propio servidor, que es lo que hace la mayor parte de la gente, el prximo paso es buscar un ISP u otro servicio de alojamiento dispuesto a proporcionar un lugar para su nombre de dominio, es decir, si no complet este paso durante el proceso de registro de su dominio (segn se describe en la seccin precedente). Puede encontrar numerosos servicios de alojamiento en lnea; escriba Web hosting (la forma inglesa de denominar al servicio de alojamiento de sitios Web) en cualquier motor de bsqueda y puede pasar un da de campo investigando a los diversos proveedores. O, mejor an, visite http://hostindex.com (en ingls), un extenso sitio dedicado a proporcionar informacin acerca de numerosos aspectos de los servicios de alojamiento Web, incluida una lista mensual de los 25 mejores. Para finalizar, como hemos mencionado hace un momento, puede visitar www.creationguide.com/resources (en ingls) para buscar vnculos a los servicios de alojamiento Web y registradores de nombres de dominio. Independientemente de cmo lleve a cabo la bsqueda de espacio para su sitio Web, recuerde comprobar algunas cuestiones clave, como son las cuotas, la configuracin de la red, si dispone de Extensiones de servidor de Microsoft FrontPage (si utiliza caractersticas de FrontPage) y la confiabilidad. Como promedio, los servicios bsicos de alojamiento Web cobran una cuota mensual nominal adems de otra cuota nica de configuracin (consulte el sitio Web de cada servicio de alojamiento para conocer los precios especficos). A menos que las tarifas le parezcan monstruosas, no deje que determinen su decisin.

4.6

Conceptos bsicos de diseo Web

Antes de firmar ningn contrato con un servicio de alojamiento de sitios Web, averige todos los aspectos relacionados con lo siguiente:
Ancho de banda Muchas compaas de servicios de alojamientoWeb se conectan a Internet mediante lneas T1 y T3; si no llegan a esto, bien podra elegir otra compaa. Bsicamente, una lnea T1 puede transportar hasta 1,5 megabits de datos por segundo mientras que una lnea T3 puede transportar 45 megabits por segundo. Por lo tanto, una conexin T3 proporciona mucho ms ancho de banda y permite una mayor velocidad. Adems de las conexiones a Internet, debe comprobar cuntos clientes se alojan en cada equipo. Si un servicio de alojamiento sobrecarga sus equipos, el rendimiento se ver afectado a pesar de las lneas de conexin de alta velocidad. Espacio Cuando se suscribe a los servicios de alojamiento Web, los ISP y las compaas de alojamiento le asignan una cierta cantidad de espacio en un servidor (de igual modo que su equipo tiene una cierta cantidad de espacio de disco que puede usar para almacenar archivos). La mayora de los ISP y servicios de alojamiento ofrecen ms espacio en sus servidores de lo que necesitar (al menos inicialmente). Sin embargo, debe conseguir 10 MB como mnimo. Muchos hosts proporcionan a partir de 25 MB. Soporte tcnico ste es un elemento importante en la eleccin de una compaa de alojamiento de sitios Web. Si tiene problemas, desear acudir a alguien que pueda ayudarle. La consideracin ms bsica sobre el soporte tcnico que debe tener en cuenta es el nmero de horas al da que el personal de este servicio est disponible. Muchos sitios lo ofrecen de forma ininterrumpida, as que busque esta caracterstica cuando est eliminando posibles compaas. Un soporte tcnico continuado es importante porque es muy probable que actualice sus pginas durante las horas que tenga libres, as que en ese momento es cuando seguramente ms ayuda necesite. Adems, compruebe si el sitio indica lo que cobra por cada incidencia de soporte. Finalmente, mire si puede identificar con facilidad el modo en que la compaa ofrece el servicio, incluyendo los nmeros de telfono (mire si hay nmeros gratuitos), nmeros de fax, direcciones de correo electrnico, informes en lnea, listas de preguntas ms frecuentes y una direccin de correo disponible.

Leccin 4

Acopio de utensilios

4.7

Extras Es posible que desee comprobar qu extras ofrece cada compaa para atraer clientes. Por ejemplo, muchos servicios de alojamiento Web proporcionan cuentas de correo electrnico que puede usar con su nombre de dominio (como mm@creationguide.com o jc@creationguide.com). Generalmente, puede configurar entre 5 y 20 cuentas de correo electrnico con un nico contrato de alojamiento Web. Otras caractersticas que podra investigar incluyen el costo de agregar espacio al sitio, si ste crece demasiado como para caber en su espacio asignado originalmente; el costo de aumentar la cuota de trfico, si visitan su sitio ms personas de lo previsto; si se admite el uso de Extensiones de servidor de FrontPage (si utiliza FrontPage) y de la transmisin de multimedia; y si se dispone de servicios complementarios, como la adicin de grupos de charla y caractersticas de bsqueda.

Ahora que ha estudiado su nombre de dominio, los servicios de alojamiento y las opciones bsicas de espacio Web, podemos quedarnos ms cerca de casa y hablar sobre las aplicaciones de escritorio. En la seccin siguiente, echaremos un vistazo a las aplicaciones de software que puede usar en su sistema para crear, modificar y publicar pginas Web, y sus elementos.

Herramientas de creacin de pginas Web

En esta seccin, damos una idea general de los tipos de herramientas que podra necesitar para crear pginas Web, enumeramos algunas que encontramos de utilidad y le sealamos el camino para hallar otras que se adapten mejor a sus necesidades. Como podra imaginar, gracias a la popularidad en auge del Web, muchos proveedores de software se han puesto manos a la obra para producir programas de creacin de pginas Web. En esta leccin, presentamos numerosas herramientas (pero de ningn modo nos acercamos a todas las utilidades disponibles) y en las lecciones siguientes mostramos cmo usar algunas de ellas para crear sitios Web completos. Sin embargo, al final le dejamos a usted la responsabilidad de elegir los paquetes de software con los que se sienta ms cmodo. Para simplificar nuestro enfoque de esta leccin, hemos dividido las herramientas de desarrollo de pginas Web bsicas en las tres categoras principales siguientes:
Procesadores de texto y editores HTML Aplicaciones de grficos Utilidades FTP

4.8

Conceptos bsicos de diseo Web

Procesadores de texto y editores HTML

Sobre todo, cuando cree pginas Web, emplear la mayor cantidad de tiempo utilizando un procesador de texto o un editor HTML. Los editores se usan para crear archivos HTML que contienen instrucciones destinadas a los exploradores Web y proporcionan el contenido de las pginas Web. Puede trabajar con un editor bsico, en el que especifica el cdigo HTML de forma manual, o con uno ms avanzado del tipo WYSIWYG (siglas correspondientes a What You See Is What You Get, en ingls, que traducido es algo as como lo que ve es lo que consigue), que crea cdigo HTML de forma automtica mientras usted escribe el texto, inserta las imgenes y arrastra los elementos en una vista de diseo de pginas Web. Finalmente, y como caba esperar, algunas aplicaciones ponen un pie en ambos campos al calificarse como editores bsicos mejorados pero no tanto como las aplicaciones de edicin WYSIWYG (damos un repaso rpido a los tres tipos de editores en las siguientes pginas).

Sugerencia
Puede descargar muchas de las aplicaciones (o versiones de demostracin) mencionadas en esta leccin en sitios de shareware como www.tucows.com, www.shareware.com o www.download.com (los tres en ingls). La mxima del shareware podra ser prubelo antes de comprarlo. Cuando descarga un programa de shareware, lo prueba durante un tiempo de forma gratuita. Si le gusta, enva a su creador la cuota que le solicita. Por desgracia, en ocasiones es ms una estrategia mercantil que otra cosa.

Procesadores de texto y editores HTML bsicos

Si utiliza un procesador de texto bsico, debe escribir todos los comandos HTML y el texto de la pgina Web en un documento vaco. El ms bsico de los procesadores de texto de este tipo es la aplicacin Bloc de notas, que se incluye con el sistema operativo Microsoft Windows. En la figura 4-1 se muestra el Bloc de notas con algo de texto HTML.

Leccin 4

Acopio de utensilios

4.9

Figura 4-1. Muchos diseadores Web acuden al Bloc de notas cuando codifican a mano documentos HTML. Puede que se pregunte por qu los diseadores Web optaran por codificar manualmente las pginas Web. La respuesta vara pero, en su mayor parte, lo hacen por alguna de las razones siguiente:
Control La codificacin a mano permite usar los cdigos que se desea en lugar de los que inserta un editor WYSIWYG. Por ejemplo, puede que desee utilizar dos saltos de lnea en blanco pero un editor WYSIWYG podra insertar un marcador de prrafo. Adems, algunos editores WYSIWIG crean cdigo confuso; la codificacin a mano puede mantener el cdigo ordenado y fcil de leer, y su alineacin se puede configurar segn las preferencias del diseador. Correcciones rpidas Saber cmo crear y modificar manualmente cdigo HTML permite a los diseadores Web hacer cambios en una pgina Web con rapidez, con independencia de cmo se creara inicialmente. Por ejemplo, si desea actualizar la fecha de copyright de su sitio, puede realizar y guardar el cambio en un procesador de texto en menos tiempo del que se tardara simplemente en abrir la pgina en un editor WYSIWYG.

4.10

Conceptos bsicos de diseo Web

Limpieza del cdigo Muchos editores HTML avanzados (como se explica ms adelante en esta leccin) agregan cdigo adicional a los documentos. Si sabe cmo crear y modificar cdigo HTML estndar, puede limpiar al cdigo extra y reducir el tamao de los archivos HTML. Y recuerde: en el Web, el tamao importa y cuanto ms pequeo mejor. Adems, puesto que los editores HTML slo estn diseados por personas, a veces, pueden codificar mal las pginas. En estos casos, puede ahorrarse mucho tiempo e irritaciones si cambia el cdigo HTML directamente en lugar de seguir la pista a la opcin del cuadro de dilogo apropiado del editor HTML. Precisin Otro hbito de los editores HTML avanzados es que, en ocasiones, usan etiquetas HTML que no todos los exploradores admiten. Puede usar procesadores de texto para modificar el cdigo HTML de modo que se ajuste a las capacidades de la mayor parte de los exploradores.

Por supuesto, aprender HTML es un requisito primordial para crear pginas en un procesador de texto. En la leccin 6, le guiamos en la utilizacin de HTML con el fin de crear una pgina Web para que se haga una idea del formato HTML. (No se preocupe: puede hacerlo.) Sin embargo, esa leccin slo es una introduccin. Necesitar tener acceso a otros recursos si desea conocer de verdad HTML. Si le interesa aprender HTML o tener cerca una referencia de este lenguaje, encontrar una generosa coleccin de libros sobre dicho tema ocupando las estanteras de las libreras de su ciudad. Tambin puede encontrar pginas y pginas de informacin en lnea. (Hemos hecho una lista de algunas referencias de HTML al final de la leccin 6.) Los procesadores de texto pueden variar desde los que apenas le echan una mano a los que vienen totalmente equipados con caractersticas personalizadas especficas de HTML. Como ayuda para ilustrar la variedad, hemos proporcionado una breve descripcin de algunos de los ms usados en este momento:
BBEdit (www.barebones.com/products/bbedit.html) (en ingls) Este editor HTML de Bare Bones Software es popular entre los desarrolladores Web de Macintosh. BBEdit permite modificar, buscar, transformar y tratar texto. Al igual que otros editores HTML, ofrece una serie de caractersticas con diversos fines adems de otras desarrolladas especficamente para satisfacer las necesidades de los creadores de cdigo HTML. HomeSite (www.macromedia.com/software/homesite) (en ingls) Macromedia HomeSite es una herramienta de diseo de cdigo HTML muy usada entre diversos desarrolladores profesionales de sitios Web. Este editor de texto incluye caractersticas especficas de HTML que sirven de ayuda en la creacin de pginas HTML efectivas y claras. Por ejemplo, incluye caractersticas de inspeccin de etiquetas HTML, edicin en ventanas divididas, mapas de imgenes y algunas otras funcionalidades. Puede descargar una versin de prueba de 30 das para examinar el producto.

Leccin 4

Acopio de utensilios

4.11

Bloc de notas Este programa viene con el sistema operativo Microsoft Windows y sus funcionalidades son casi tan limitadas como cuando se usa como procesador de texto. Tenga cuidado, sin embargo: si trabaja en un documento muy largo, no podr usar el Bloc de notas. En los documentos ms largos, tendr que usar WordPad (que se describe ms adelante en esta lista). NoteTab (www.notetab.com) (en ingls) El procesador de textos NoteTab, de Fookes Software, es el Bloc de notas con esteroides (fortalecido, queremos decir). Este programa incluye varias caractersticas que pueden simplificar la codificacin a mano de pginas Web. Por ejemplo, puede mostrar utilidades HTML en el lateral izquierdo del panel de la ventana en la barra de clips. A continuacin, puede insertar cdigo HTML haciendo doble clic en los elementos de mens y, por ejemplo, puede hacer clic en el elemento de men Nueva pgina Web para insertar la estructura bsica del cdigo para todo un documento HTML. Un inconveniente, tpico de muchos procesadores de texto, es que el programa gratuito de prueba slo permite deshacer una operacin; si desea deshacer varias acciones, tendr que restaurar la informacin manualmente. TextPad (www.textpad.com) (en ingls) Este programa, creado por Helios Software Solutions, sirve como otra versin reforzada del Bloc de notas. En TextPad, mientras trabaja puede ver un men de etiquetas HTML junto con las fichas de los documentos. TextPad permite deshacer varias acciones, lo que resulta prctico cuando se juega con HTML. UltraEdit (www.ultraedit.com) (en ingls) IDM Computer Solutions proporciona este programa como paquete de edicin de texto que se puede usar durante un perodo de prueba de 45 das. Una vez descargada e instalada la aplicacin, debe hacer clic en About UltraEdit (Acerca de UltraEdit) en el men Help (Ayuda) y, despus, cerrar la ventana Help para activar el programa. Aunque esta aplicacin est diseada para usuarios algo avanzados, como los programadores, incluye caractersticas que podran venirle bien. Por ejemplo, puede mostrar vistas previas de las pginas en el explorador con facilidad y usar el diccionario que le acompaa para corregir la ortografa de los documentos. WordPad Este programa es un paso ms all del Bloc de notas. Si utiliza Windows, puede abrir WordPad si hace clic en Inicio, selecciona Programas y Accesorios, y despus hace clic en WordPad. Este programa ofrece ms caractersticas de procesamiento de textos que el Bloc de notas y admite documentos ms largos. La figura 4-2 muestra un documento HTML en WordPad.

4.12

Conceptos bsicos de diseo Web

Figura 4-2. WordPad sirve como un buen procesador de texto cuando el documento en el que se trabaja es demasiado largo para que el Bloc de notas pueda tratarlo.

Prubelo!
Muestre la pgina Web que prefiera en un explorador y haga clic en Source (Cdigo fuente) o View Source (Ver cdigo fuente) en el men View (Ver). Se abre un documento del Bloc de notas que muestra una versin de texto del cdigo HTML de la pgina.
Al igual que Word versin 2002, otros programas de Office XP (versin 2002), como Microsoft Excel y Microsoft PowerPoint, permiten guardar los documentos como pginas Web.

Procesadores de texto y editores HTML de grado medio

El siguiente escalafn en los editores HTML empieza a entrar en el territorio de WYSIWYG. Podramos llamar a los procesadores de texto de grado medio aplicaciones WYSIWYG ligeras porque ofrecen caractersticas de procesador de texto junto con una serie limitada de capacidades avanzadas de los editores HTML. Dado que la mayor parte de las aplicaciones son procesadores de texto o editores HTML completos, slo aconsejamos una aplicacin de esta categora: Microsoft Word versin 2002. Word 2002 permite usar una interfaz de procesamiento de texto conocida para crear documentos HTML a travs del comando Guardar como. Cuando guarda un documento de Word como pgina Web, Word crea automticamente el cdigo fuente HTML. En la figura 4-3 se ilustra un documento HTML en las vistas Diseo Web y Cdigo fuente HTML.

Leccin 4

Acopio de utensilios

4.13

Figura 4-3. Word 2002 ofrece una vista Diseo Web y otra vista Cdigo fuente HTML.

Editores HTML avanzados

El tercer grupo de editores HTML incluye las aplicaciones avanzadas que permiten crear y modificar pginas Web mediante interfaces grficas. En la mayor parte de los editores avanzados, puede ver y modificar el cdigo fuente HTML directamente adems de trabajar en la interfaz WYSIWYG. Asimismo, la mayora de los editores avanzados ofrecen una caracterstica de presentacin de vista previa que permite ver cmo aparecer una pgina Web en lnea antes de verla en el explorador. Las caractersticas especficas para el Web se suelen incorporar tambin en los editores HTML avanzados. (Sabemos que esto ltimo suena un poco impreciso, pero al crear una pgina Web en FrontPage, en la leccin 7, le introduciremos en el uso de algunas herramientas especficas para el Web de modo que podr saber a lo que nos referimos.) Los editores HTML avanzados ms utilizados estn muy bien documentados en lnea as que, en lugar de desperdiciar espacio en estas pginas resumiendo las estadsticas en lnea, hemos proporcionado varias direcciones URL para los sitios Web donde se ofrecen las aplicaciones que aparecen en nuestra breve lista. Aunque hay otros editores disponibles, estos seis son algunos de los programas ms populares. (Revise la direccin del sitio Web de cada producto para poder comparar ms fcilmente las caractersticas y precios.)
Adobe GoLive (www.adobe.es/products/golive/main.html) CoffeeCup HTML Editor (coffeecup.com/editor) (en ingls) HotDog Professional (http://www.sausage.com/hotdogprofessional.html) (en ingls) UltraEdit (www.ultraedit.com) (en ingls); este editor puede estar disponible en su versin localizada Macromedia Dreamweaver (www.macromedia.com/es/software/dreamweaver)

4.14

Conceptos bsicos de diseo Web

Microsoft FrontPage 2002 (www.microsoft.com/spain/Office/frontpage/default.asp); tambin se incluye con el conjunto de programas Microsoft Office 2000 XP Developer NetObjects Fusion MX (www.netobjects.com/products/html/nfmx.html) (en ingls)

Nota
Adems de HotDog Professional, Sausage Software ofrece un editor HTML WYSIWYG para principiantes, denominado HotDog PageWiz, y un editor HTML para nios mayores de seis aos, denominado HotDog Junior. Explore la pgina principal de Sausage Software y encontrar otras herramientas tiles de creacin de pginas Web. Despus de todo, si nos pregunta, cualquier compaa llamada Sausage Software (Software Salchicha) que ofrezca editores HTML que se llamen HotDog (Perrito caliente) merece un poco de atencin adicional.

Entre las aplicaciones anteriores, Dreamweaver probablemente sea el editor Web ms popular (aunque el ms difcil de aprender) entre los profesionales de diseo, por diversas razones, como es el hecho de que mantiene el cdigo escrito a mano, permite a los usuarios obtener una vista previa de las pginas en varios exploradores y realiza comprobaciones automticas de los posibles conflictos que existan entre ellos. Por otro lado, FrontPage (que se ilustra en la figura 4-4) es el editor HTML avanzado ms sencillo de aprender para los principiantes y proporciona cdigo HTML bastante limpio. Adems, es popular entre los usuarios empresariales. Como hemos mencionado anteriormente, se har una idea de cmo crear pginas Web en FrontPage en la leccin 7.

Nota
Tenga en cuenta que el entorno de creacin de una pgina Web no es fijo. En ocasiones, es ms rpido usar una aplicacin WYSIWYG avanzada (en especial, al cambiar el tamao de las tablas), pero otras veces, un cambio rpido en el Bloc de notas nos ser ms til.

Leccin 4

Acopio de utensilios

4.15

Figura 4-4. Microsoft FrontPage es un programa avanzado de desarrollo Web muy utilizado, que resulta bastante fcil de aprender.

Aplicaciones de grficos
Cuando se trata de desarrollar una pgina Web, las aplicaciones de grficos ocupan un segundo meritoso lugar detrs de los muy importantes editores HTML o procesadores de texto. Despus de todo, la mayor parte de las pginas usa grficos y tendr que crear o retocar los que incluya en las suyas. Por lo tanto, necesitar tener un paquete de grficos instalado en su sistema. Nuestros programas favoritos (o al menos los que parece que usamos con ms frecuencia) son Jasc Paint Shop Pro y Adobe Photoshop; ambos aparecen en la lista de aplicaciones de grficos con la que est a punto de toparse a continuacin del prrafo siguiente.

4.16

Conceptos bsicos de diseo Web

Con independencia del paquete de grficos que utilice, las cinco habilidades ms importantes que tiene que adquirir al usar un programa de grficos son recortar, cortar, cambiar el tamao, cambiar el color y guardar los archivos en otro formato diferente. Por tanto, revise los archivos de ayuda de su aplicacin para pulir su tcnica. Ahora, aqu tiene cinco programas de grficos conocidos junto con sus direcciones Web (le recomendamos que visite los sitios Web enumerados con el fin de conseguir los detalles y precios de los productos):
Fireworks (www.macromedia.com/es/software/fireworks) Esta aplicacin es fcil de usar y especialmente cmoda cuanto se necesita crear botones y otros grficos bsicos para un sitio Web. Macromedia desarroll Fireworks especficamente para la creacin de grficos Web. LView Pro (www.lview.com/index1024.htm) (en ingls) Este programa de grficos shareware es muy conocido. Incluye varias caractersticas tpicas de grficos adems de utilidades de pginas Web, por ejemplo, una herramienta para crear pginas de galeras de fotografas en lnea. Paint Microsoft Paint es un programa de grficos que se incluye con Windows. Se trata de un paquete de grficos con menos funciones en comparacin con otros pero resulta una herramienta grfica prctica cuando se est en un apuro o se desea hacer rpidamente algunos ajustes poco importantes. Paint Shop Pro (www.jasc.com/products/paintshoppro) (en ingls) Este programa de grficos tiene muchas caractersticas y un precio razonable, y lo utilizan muchos diseadores. Visite el sitio Web de Jasc y descargue un programa de demostracin gratuito. Photoshop (www.adobe.es/products/photoshop/main.html) Probablemente sea el programa de edicin de imgenes ms importante. Puede resultarle un poco difcil de utilizar cuando empiece a aprenderlo pero una vez que domine los comandos, le gustar mucho la flexibilidad de la aplicacin. Con frecuencia, imitamos los sitios donde se usa Photoshop antes de crear pginas Web reales en un editor HTML. Su principal desventaja es que es bastante caro para los diseadores casuales.

Jerga: los grficos basados en vectores son imgenes hechas con lneas y formas en lugar de con pxeles y sombras.

Adems de las aplicaciones de grficos anteriores, tambin puede usar programas de ilustraciones para crear grficos basados en vectores. En un grfico basado en un vector, puede mover, cambiar el tamao y manipular de cualquier otro modo los elementos de una imagen, por ejemplo, puede girar una forma completa. Los programas de ilustraciones basadas en vectores que suelen resultar prcticos al crear pginas Web son Adobe Illustrator (www.adobe.es/products/illustrator/main.html), Macromedia Freehand (www.macromedia.com/es/software/freehand) y CorelDraw (www.es.corel.com).

Leccin 4

Acopio de utensilios

4.17

Prubelo!
Si desea incluir un GIF animado en una pgina Web pero no le entusiasma la idea de comenzar desde el principio, se alegrar de or que el CD-ROM de multimedia de Office XP contiene varias animaciones pequeas que puede usar en las pginas Web. Para insertar un GIF animado:
1 2 Abra Word (u otra aplicacin de Office), muestre el men Insertar, elija Imagen y, despus, haga clic en Galera de imgenes. En el panel de Galera de imgenes, busque un elemento de la galera y haga doble clic en alguna imagen que muestre una estrella dorada. Para ver una animacin en accin, abra el men Archivo y haga clic en Vista previa de pginas Web.

Si sigue nuestra sugerencia anterior, debera insertar los componentes animados con moderacin. Las animaciones pueden llegar a resultar molestas, lo que quitara mrito a su pgina en lugar de aportarle encanto.

Programas de animacin de grficos GIF, de mapas de imgenes, de creacin de pancartas y mucho ms

Las pginas Web incorporan todo tipo de baratijas, incluidos elementos desarrollados con tecnologas muy sonoras como Pginas Active Server, Java, Flash, etctera. Adems, puede crear archivos de audio y vdeo para usarlos en el Web. Aunque nos fascinan tanto estos temas como las tcnicas de diseo de pginas Web bsicas, la creacin de estos elementos no es uno de los objetivos de estas lecciones. Nuestro fin es lograr que consiga crear y utilizar pginas Web. Por lo tanto, nos guardaremos los caprichos para otro curso. Si tiene ganas de adquirir algunas maas adicionales para la elaboracin de sus pginas, le sugerimos que empiece por aprender a crear GIF animados, mapas de imgenes y pancartas. A continuacin se enumeran algunos sitios que puede encontrar de utilidad:
Archivos GIF animados (www.mindworkshop.com/alchemy/gifcon.html) (en ingls) GIF Construction Set Professional usa asistentes que le guan durante todo el proceso de creacin de un GIF animado y se encuentra constantemente entre los mejores, segn los crticos.

4.18

Conceptos bsicos de diseo Web

Pancartas (www.animation.com) (en ingls) El sitio Animation.com permite crear en seguida pancartas de anuncios. Mapas de imgenes (www.globalscape.com/cutemap) (en ingls) CuteMAP de GlobalSCAPE es una aplicacin shareware que simplifica la creacin de mapas de imgenes. Puede descargar una versin gratuita de prueba.

Tenga en cuenta que puede encontrar un buen nmero de programas de creacin de archivos GIF animados, de pancartas y de mapas de imgenes en lnea. Adems, algunos de los programas de grficos que mencionamos anteriormente en esta leccin (como Fireworks y Paint Shop Pro) tienen integradas caractersticas de mapas de imgenes e imgenes GIF animadas. Las tres aplicaciones anteriores se enumeran simplemente como ejemplos que pueden ayudarle a comenzar su bsqueda.

Utilidades FTP
En ltimo lugar, puede que necesite alguna de esas misteriosas utilidades FTP. En realidad, las utilidades FTP no son en absoluto misteriosas, pero siempre que hacemos mencin a las siglas FTP ante personas que nunca las haban odo antes, el color parece huir de su cara. Bsicamente, las utilidades FTP son programas que permiten copiar archivos enteros de un equipo a otro a travs de Internet. Por ejemplo, siempre que completamos una leccin, copiamos con FTP sus grficos en Microsoft Press, en la ciudad de Redmond (en Washington, Estados Unidos), incluso aunque estemos en el (demasiado) soleado Arizona y en el (demasiado) lluvioso Oregon.

Sugerencia
Es posible que no necesite usar un programa FTP si va a crear una pgina Web en un grupo o comunidad en lnea. Asimismo, si usa el Asistente para la publicacin en Web de Microsoft, Mis sitios de red o una utilidad de publicacin de un editor HTML avanzado con el fin de cargar las pginas, no tendr que usar un programa FTP en principio. Sin embargo, finalmente podra desear usarlo para eliminar, copiar y administrar de cualquier otra forma los archivos en lnea. En la leccin 8, le ponemos al corriente de los detalles de la administracin de archivos en lnea, porque sentirse cmodo usando una aplicacin FTP puede resultarle prctico.

Puede encontrar numerosos programas FTP en lnea, muchos de los cuales son aplicaciones shareware. Los programas FTP ms usados son, entre otros:
BulletProof FTP (www.bpftp.com) (en ingls) Esta aplicacin proporciona una intuitiva interfaz con la funcionalidad de arrastrar y colocar, al igual que otros de los programas FTP ms usados.

Leccin 4

Acopio de utensilios

4.19

CoffeeCup Direct FTP (www.coffeecup.com/software) (en ingls) Este programa sirve como aplicacin FTP que tambin permite la edicin de pginas HTML en lnea. En la pgina de descargas del sitio, encontrar que CoffeeCup Software tambin proporciona aplicaciones de mapas de imgenes, creacin de botones y creacin de GIF animados, entre otros productos. CuteFTP (www.globalscape.com/cuteftp) (en ingls) Esta popular aplicacin FTP de fcil uso lleva mucho tiempo utilizndose y es nuestra favorita para PC. Con CuteFTP, puede arrastrar y colocar los archivos para transferirlos desde su equipo a otro equipo remoto y viceversa. Entre otras aplicaciones, GlobalSCAPE tambin ofrece un editor HTML (CuteHTML) y una aplicacin de mapas de imgenes (CuteMAP). Fetch (www.fetchsoftworks.com) (en ingls) Recientemente, Fetch se ha actualizado con la versin 4.0.2 (antes, llevaba sin actualizarse desde 1997!). El diseo de Fetch est enfocado a hacer que el acceso a los sitios FTP sea lo ms sencillo posible. Est disponible gratuitamente para instituciones educativas y organizaciones sin nimo de lucro; los dems deben pagar la cuota de shareware.

Ahora que conoce vagamente lo que hacen los programas FTP y que puede descargarlos del Web, no se preocupe demasiado por ellos. En este momento, con que sepa que existen es suficiente: si no puede esperar, puede descargar una aplicacin FTP y podr cargar sus pginas en cuanto las cree, pero no tiene que hacerlo ahora. Le ayudaremos con los programas FTP y con la administracin de los archivos en la leccin 8. Pero antes, deseamos ocuparnos de cosas ms divertidas en el resto de las lecciones.

Un poco acerca de exploradores

Dos procesadores (o incluso dos versiones de un explorador) no procesan el cdigo HTML exactamente del mismo modo; por lo tanto, al disear pginas Web, valas en tantos exploradores como sea posible antes de publicar el sitio.

Estaramos completamente perdidos si concluyramos esta leccin sin ocuparnos de la herramienta de aplicacin de software ms obvia de todas: un explorador. Necesita tener un explorador (o varios) instalado para poder obtener una vista previa de sus pginas antes de publicarlas en lnea. Recuerde que los exploradores son las aplicaciones que interpretan las pginas HTML. Por desgracia, no todos lo hacen exactamente de la misma forma. En consecuencia, una pgina que disee y vea en Microsoft Internet Explorer podra mostrarse muy fcilmente como un revoltijo espantoso en otro explorador. Incluso las pginas bien diseadas parecen algo diferentes en distintos exploradores. Para ver una ilustracin de este fenmeno, observe las diversas capturas de pantalla de la figura 4-5.

4.20

Conceptos bsicos de diseo Web

En la figura 4-5, puede ver las anomalas siguientes:

Las vietas predeterminadas de Netscape Navigator son mayores, tanto en los equipos Macintosh como en los basados en PC, que las de Internet Explorer. El espacio de los mrgenes (o desplazamiento) alrededor de los permetros de la pgina vara en cada explorador. Observe que las ventanas del explorador Internet Explorer dejan ms espacio de margen alrededor del grfico de la parte superior izquierda que las ventanas del explorador Navigator.

Figura 4-5. Al ver la misma pgina Web en varios exploradores, se demuestran las pequeas anomalas que surgen en las pginas cuando se ven en lnea.
El tamao de fuente predeterminado es ms pequeo en PCs que en equipos Macintosh tanto en Internet Explorer como en Navigator, lo que puede afectar al modo en que se muestra y se ajusta el texto. Como consecuencia de las diferencias en la fuente y el espaciado, encima del final de la pgina Web aparecen cantidades variables de informacin. El ancho de las ventanas de los exploradores difiere. Observe cmo abarca el grfico de la barra de ttulo toda la ventana en un par de casos y cmo aparece con un espacio en blanco adicional en los dems.

Leccin 4

Acopio de utensilios

4.21

Diseamos la pgina Arts Camps for Kids para que funcionara bien tanto en Internet Explorer como en Navigator, pero puede ver que sigue habiendo ligeras diferencias que escapan del control del diseador. En el Web existen varios exploradores. Puede que desee o no comprobar que sus pginas se muestran como deben en todos ellos. Para la mayor parte de los diseadores, con asegurarse de que las pginas se muestran de modo correcto en los ms importantes (Internet Explorer y Navigator) es suficiente; conjuntamente, estos dos exploradores suman ms del 90 por ciento de todos los exploradores que tienen acceso a Internet. Desde luego, siempre debe considerar su audiencia. Si sabe que los visitantes de su sitio van a usar el explorador Opera, sera mejor que se asegurara de si ve bien en l. Para contribuir a aumentar sus conocimientos, a continuacin incluimos una lista breve de otros exploradores que puede encontrar al acecho en el Web:
America Online usa una versin adaptada de Internet Explorer (webmaster.info.aol.com) (en ingls). Lynx es un explorador de texto (lynx.isc.org/current) (en ingls). Mozilla es un explorador Web diseado para quienes desean crear productos y paquetes basados en Mozilla (una gran parte del explorador Netscape Communicator se basa en el cdigo de Mozilla), pero el pblico general puede usar el explorador tambin (www.mozilla.org) (en ingls). Opera es una pequea aplicacin que exhibe un tiempo de descarga extremadamente bajo (www.opera.com/download), (en ingls).

Puede ser aconsejable descargar otros exploradores para ver cmo se muestran sus pginas en ellos. Obtener una vista previa de las pginas Web simplemente implica mostrar los archivos HTML en la ventana del explorador de forma local, as que el proceso es rpido y sencillo. Sin embargo, lo ms importante es que se asegure de tener acceso al menos a una versin (para PC o Macintosh) de Internet Explorer y de Navigator de modo que pueda realizar pruebas y ver cmo quedan las pginas. No se preocupe: en los siguientes captulos le recordaremos algunas veces ms la importancia de ver las pginas Web en varios exploradores y en varias versiones de cada explorador, si es posible.

4.22

Conceptos bsicos de diseo Web

Puntos clave
Necesita una conexin a Internet y espacio en un servidor para mostrar una pgina Web en lnea. Averiguar que hay espacio gratuito disponible en lnea en el Web, particularmente en los grupos y comunidades en lnea. Puede adquirir un nombre de dominio y comprar espacio en un servidor para controlar por completo su sitio Web y direccin Web. Puede utilizar procesadores de texto para crear pginas Web. Los editores HTML abarcan desde programas que slo usan texto a interfaces WYSIWYG. Las aplicaciones de grficos permiten crear grficos Web, modificar imgenes y crear maquetas de las futuras pginas Web. Puede encontrar programas de animaciones de grficos GIF, sitios de creacin de pancartas y utilidades de mapas de imgenes (adems de montones de programas de software gratuito y shareware). Las utilidades FTP permiten copiar archivos de un equipo a otro equipo remoto. No todos los exploradores estn diseados igual: pueden mostrar la misma pgina Web de diversas formas. Siempre debe ver sus pginas Web en Internet Explorer y en Netscape Navigator (como mnimo) antes de publicarlas en lnea.