Iniciacin a la creacin Web desde cero (crear web dinmicas)

Hace ya no pocos aos me interes por saber como se creaba una pgina Web, o ms concretamente un sitio Web. En aquellos momentos todo eran dudas, preguntas y muchos conceptos errneos y confusos. Con este cmulo de preguntas y dudas, realice un curso de verano de la universidad donde estonces estudiaba otra carrera que nada poco o nada tiene que ver con el desarrollo de sitios Web. Dicho curso trataba sobre diseo de pginas Web con Front Page y HTML. El curso tuvo una duracin de 20 horas, muy poco, pero me sirvi para entender conceptos bsicos, como: que es un documento HTML, cuales son sus partes, como se incrustan imgenes en estos documentos o como puedes saltar de uno a otro con su simple clic de ratn. Gracias a ese curso, a esas pocas horas y esos conceptos pobres, me sirvieron para ir adentrndome poco a poco en el fascinante mundo del diseo Web y programacin. Dicho esto, si ya has creado alguna Web, poco te puede ayudar este mini manual de HTML y Front Page. Pero si no tienes ni idea, estas en el lugar adecuado. Espero te sea til.

1.- Introduccin elemental a la creacin Web.

Hace tiempo que estas pensando en construir tu primera pagina Web?, no tienes ni idea de como empezar? tienes lo que necesitas? Si tienes estas preguntas y no tienes ninguna respuesta, tranquilo, as estaba yo hace unos cuantos aos. Desde aqu te ofrecemos todas las respuestas de manera clara, rpida y sencilla. Lo primero que necesitas es un editor Web instalado en tu ordenador, y dado que esta Web esta pensando en los principiantes, sugerimos empezar con FrontPage, que es el editor Web que en tiempos venia como parte del paquete de Office. Otra opcin interesante es el editor NVU, que adems es gratuito y lo puedes descargar desde Softonic. Lo segundo es saber como manejar ese programa, para ello tenemos preparado un curso de diseo Web que toma como referencia Front Page, ya se que no es el mejor, pero por su parecido con otros programas de Office como Word, te resultara muy sencillo su manejo. Para que puedas introducir funcionalidades en tu Web ponemos a tu disposicin una biblioteca con un montn de cdigos listos para pegar en tu Web, solo tendrs que decidir cual quieres poner, lo dems es bien sencillo. Una vez hecho todo eso necesitaras un servidor para publicar. Una vez lo tengas necesitas una cuenta ftp con su respectivo nombre de usuario y contrasea. Ya solamente necesitas un programa FTP para poder subir tus archivos al espacio Web, y lo podrs descargar desde aqu. Te recomendamos File Zilla, ya que es gratuito y tambin lo puedes descargar desde Softonic. Adems este programa tiene su versin en espaol. Y con esto ya tienes todas las dudas resueltas sobre que hacer para tener un sitio Web y no aburrirse y en el intento. Una vez superada esta primera y elemental parte, nos adentraremos en otros asuntos con ms profundidad, como es la promocin del sitio Web, el diseo con hojas de estilos CSS o la programacin ejecutada en el servidor mediante lenguaje PHP.

2.- Sitio Web esttico vs. dinmico.

El diseo de sitios Web es un rea que se encuentra entre el arte y la ciencia. Arte, por que la apariencia visual y sonora que tenga un sitio Web va ha ser un motivo ms para el aumento, mantenimiento y conservacin del trafico. Ciencia, por que cada da se buscan nuevas aplicaciones cada cual ms concreta y especifica, esto implica el desarrollo progresivo de los lenguajes de programacin, y dentro de cada uno, una inmensa variedad de funciones a cumplir. Dentro del amplio conglomerado del diseo Web, se pueden diferenciar dos grandes grupos de sitios Web, los estticos y los dinmicos. Un sito Web esttico es aquel que permite una interaccin mnima con el visitante, simplemente ofrece informacin y esta informacin es la misma a no ser que el webmaster actualice los contenidos del sitio Web. El contacto que el visitante mantiene con el responsable del sitio Web se limita a un nmero de telfono publicado, el e-mail, y segn los casos tambin el formulario. Un sitio Web dinmico es aquel que permite una interaccin con el visitante para realizar ciertas funciones y puede ofrecer informacin cambiante sin necesidad de la actuacin del webmaster. Ejemplos es esto son las bases de datos on-line que permiten, por ejemplo, registrar una cuenta de correo electrnico o aquellas que ejecutan, al realizar una compra on-line, el cargo en la tarjeta de crdito del cliente de manera automtica. Otro ejemplo, tambin muy comn de sitios Web dinmicos son aquellos que ofrecen cada da de manera automtica una foto nueva. Hoy da no es comn encontrar sitios Web puramente estticos o dinmicos, lo mas comn es encontrar sitios Web que mezclan los dos conceptos. Estos son los sitios Web mixtos. As funcionan la gran mayora de sitios Web publicados, sin embargo el mayor desarrollo se esta dando en el diseo de aplicaciones on-line, para de esta forma, poder hacer cualquier tipo de gestin (que hasta ahora requera la presencia en la propia oficina) desde cualquier ordenador en cualquier parte del mundo. Ya no es preciso estar en la oficina para poder emitir una factura o consultar los datos de los clientes y los productos, ahora solo se precisa un ordenador conectado a la red. Esta innovacin ofrece tambin otras ventajas, dado que la informacin ya no reside en un lugar fsico, ya no es posible destruirla o que simplemente se pierda por un incendio o robo.

3.- Qu es un sitio Web?

El concepto de sitio Web hace referencia a un conjunto de documentos electrnicos que constituyen un "paquete" informacional. La temtica que puede abarcar es ilimitada y la cantidad de informacin que se puede ofrecer tampoco tiene limites en cuanto tal. Apartndonos de los aspectos legales, cualquier elemento audio visual se puede difundir a travs de la red. Es indiferente que se trate de una obra literaria, cualquier tipo de msica, cine, programas informticos, etc. Un sitio Web est formado por un conjunto de pginas Web. En analoga, un sitio Web es, por ejemplo, una revista, mientras que una pgina Web es una de las pginas que constituyen dicha revista. Cualquier sitio Web publicado en Internet puede ser visto desde cualquier parte del mundo. Las posibilidades que esto ofrece son inimaginables. Los propsitos para los que nos podemos servir de Internet y las tecnologas de la informacin en general vienen a cubrir todo el espectro de propsitos, ya sea para fines personales, de ocio, acadmicos, laborales, empresariales, etc. Su gran potencialidad depender pues de lo inteligentemente que empleemos dicha tecnologa. La creacin de un sitio Web es algo tan sencillo o tan complicado como manejar un programa informtico ms. Lo que har de una creacin Web una tarea sencilla o complicada depender de los objetivos y propsitos con lo que desarrollemos tal aplicacin. De todas formas, sean cuales sean los propsitos y los objetivos, la creacin Web es una tarea que hay que iniciarla empezando por los "cimientos". Si empezamos por los cimientos con una buena base y comenzamos ha conseguir nuestros primeros modestos objetivos iremos en el buen camino. Este es el objetivo de este Curso Bsico de Diseo Web. Este Curso ha sido desarrollado con un objetivo bsico, y es que en menos de 8 horas una persona pueda haber creado su primer Sitio Web partiendo desde cero. Creemos que es importante que empiece a apreciarse una rapidez por que de esta manera se infunden nimos para seguir trabajando en la direccin de propsitos ms ambiciosos.

4.- Qu clase de Web podr crear?

El objetivo de este Curso de Diseo Web es dar a conocer los aspectos ms bsicos del diseo de sitios Web. Este curso tiene por objetivo conseguir que una persona que nunca haya tenido contacto con el diseo Web pueda en unas pocas horas crear su primer sitio Web. Este manual tiene como objetivo ser conceptualmente claro para profanos, aunque esto conlleve ser tcnicamente impreciso. Desde aqu te ensearemos lo indispensable, y algunas cositas ms, para crear una pgina Web, o mejor dicho, un sitio Web, y publicarlo. No obstante, en otras secciones trataremos aspectos tales como la maquetacin con CSS, el uso de javascript, el lenguaje PHP y las bases de datos. El principal problema que me encontr la primera vez que pens crear un sitio Web fue: "y por donde empiezo?"; no tenia ni la mas remota idea de que hacer para que haciendo un clic en un fragmento de texto o fotografa fuera de una pgina a otra, de una Web a otra o se me abriera un mensaje de correo electrnico. Pero llego el "sublime da" que me entere que ese "fenmeno extrao" se llamaba hipervnculo (tambin vnculo) y me lo encontr en el men "Insertar" de FrontPage. Tranquilos, no os pongis nerviosos/as, ya hablaremos de eso mas adelante, es muy sencillo. A partir de ahora hay que ir mas despacio, hasta ahora solo hemos explicados conceptos muy generales con muy poco relacin con el diseo Web en cuanto tal. nimo que ya mismo entramos en materia.

5.- Software para la creacin de sitios Web.

Para el diseo de sitios Web existen cientos de programas, mientras que en unos puede verse la estructura visual del sitio Web segn se va creando, en otros solo puede verse el cdigo de la pgina Web. Algunos manuales que dicen ser bsicos, recomiendan utilizar el Bloc de Notas de Windows como primera herramienta para el diseo Web. Desde mi punto de vista, aunque didcticamente pueda ser ideal, no resulta viable para un mini-curso acelerado. Creo que la mejor manera es comenzar ha hacer Web sencillas con un editor grafico, en el que en cada momento se esta viendo lo que se hace, y cuando la familiaridad vaya aumentando poco a poco iremos analizando un comprendiendo las ventajas de poder manipular el cdigo del la pgina Web, que son muchas. Para conseguir nuestro objetivo vamos a recurrir a un programa muy comn, un programa que esta en casi todos los ordenadores que funcionan con Windows y viene incluido en muchos paquetes del Software Office, me refiero a FrontPage. Se ha decido utilizar este programa por dos motivos fundamentales: por un lado, por su gran difusin; y por otro por la familiaridad de sus iconos, prcticamente los mismos que los de otro programa muy conocido, el procesador de textos Word, tambin perteneciente al paquete de Software Office de Microsoft. Este software (FrontPage) ofrece tres vistas: la vista normal o de diseo; la vista de HTML o de cdigo; y la vista previa, o como se ver la pagina en el navegador. Con los siguientes siete artculos explicaremos como crear una Web y su publicacin. Aparte de la utilizacin de FrontPage, tambin trataremos otros aspectos del diseo Web muy importantes como es la promocin y el uso de script. En nuestra Gua de Diseo Web marcaremos las pautas para aquellas personas que estn interesadas en adentrase dentro del diseo Web de manera mas profunda, tanto en lo relativo a programas (software) como en lo relacionado con los lenguajes de programacin. Aunque este minicurso esta orientado a FrontPage, no puedo dejar de mencionar editor grfico NVU, que tiene como ventaja ser gratuito y lo puedes descargar desde softonic. Tampoco podemos dejar de mencionar que el programa mas completo y mas usado por los profesionales del diseo Web es Macromedia Dreamweaver. No obstante, desde aqu recomendamos comenzar con un programa bsico, y solo cuando suba el nivel de demandas y ya nos resulte "pequeo pasar a Macromedia Dreamweaver.

6.- Creando nuestra primera pgina Web

Por fin lleg el momento de entrar en materia. Lo primero, cuando creas un documento web se guarda con la extensin html o htm, por lo dems piensa que estas creando un documento cualquiera en Word, es casi lo mismo. Primero que nada elegiremos un lugar para guardar la web que vamos a crear. As que decidimos guardarla en una carpeta situada en el disco duro llamada mi_web. Desde este momento en adelante debemos tener presente que nunca debemos nombrar un archivo con un espacio (ej. mi web), esto imposibilitara la publicacin. Esto lo haremos de la siguiente manera: Abrimos FrontPage, pulsamos sobre Archivo/Nuevo/Web. En el cuadro Especifique la ubicacin del nuevo web, escribimos C:/mi_web, (en este caso damos por sentado que el disco duro lo tenemos nombrado con la letra C) dejamos marcada la opcin web de una pgina y aceptamos. Nos aparecer una carpeta en el disco duro cuyo nombre es mi_web. Si ya hubiera una carpeta con ese nombre se creara una nueva llamada mi_web2, y as sucesivamente. Esta carpeta contiene un documento html llamado index(al pulsar sobre el se abre en el navegador, normalmente Internet Explorer) y dos carpetas, una llamada images y otra llamada private Este documento llamado index es la pgina de entrada a nuestro sitio web. El documento llamado "index" es denominado "pgina por defecto" esto quiere decir que cuando guardas un documento con este nombre su URL se corresponde con el nombre de la carpeta. Traducido a "cristiano". Si publicas una carpeta llamada " mi_web" en un dominio llamado por ejemplo uterra.com, que contiene un documento llamado " index" su URL tendra dos formas, y serian: http://www.uterra.com/mi_web http://www.uterra.com/mi_web/index.htm no obstante, si en lugar de llamarlo " index" lo llamas "entrada" su URL solo tendra una forma que seria: http://www.uterra.com/mi_web/entrada.htm. Es muy importante tener claro este concepto, ya que la pgina de inicio del sitio web es la que permite que la URL sea la correspondiente a un nombre de dominio, nombre de dominio mas carpeta o mas documento con su extensin, que dado que este curso es bsico solo hablaremos de la extensin html o htm Para crear las sucesivas pginas pulsamos en Archivo/Nuevo/Pgina y las vamos guardando

con el nombre que estimemos oportuno (por motivos didcticos de momento solo creamos las pginas como archivos en blanco, o sea, no insertamos ni textos ni imgenes). Supongamos que creamos cuatro pginas ms, que llamaremos: presentacion, aficiones, fiestas y enlaces. No queremos pasar por alto que signos de puntuacin como el acento o la " " tambin invalidan el nombre de un archivo web. Pues bien, ya tenemos creada la estructura de nuestro sitio web. Ahora la carpeta que creamos en el disco duro llamada mi_web ofrece el siguiente contenido. Ver Imagen de la Carpeta. La carpeta web mi_web muestra todo el contenido del sitio web que estamos creando. Ahora que ya tenemos todas las pginas creadas las vamos abriendo desde FrontPage y procedemos a su diseo. Desde mi punto de vista, la creacin de un sitio web debe ser planificada antes de empezar a construir dicho sitio web. Es decir, deberemos determinar cuantas pginas van a formar nuestro sitio web, la carpeta o carpetas donde vamos a guardar las imgenes, etc. Si el sitio web va a contener muchas fotos, lo mas adecuado es crear mas de una carpeta para fotos, por ejemplo: fotos_fiestas. Si el sitio web contiene varias galeras de fotos lo mejor es guardar las fotos de cada galera en una carpeta, por ejemplo: galeria_1, galeria_2, galeria_3, galeria_4, etc. As se consigue tanto una publicacin mas cmoda, como tener organizados los elementos de cada pgina o galera para poder modificarlos rpidamente. Es tambin muy importante tener un plan de trabajo para las sucesivas actualizaciones y ampliaciones del sitio Web. Siguiendo este criterio decido por ejemplo guardar las imgenes ornamentales del sitio web, como: botones, banner, lneas divisorias, iconos, flechas, etc; en la carpeta images y dejo las carpetas fotos_aficiones y fotos_fiestas para guardar las fotos propiamente dichas. La carpeta _private la dejamos olvidada, no nos preocuparemos de ella, su funcin esta asociada a recogida de datos y otras funciones avanzadas. Esto lo veremos en otro manual relacionado con las bases de datos. Una vez hecho esto, solo queda crear un diseo atractivo y agregar los contenidos. Ten presente, que los archivos guardados en las carpetas, al pulsar sobre ellos se te abren en el explorador, para poder modificarlos debes abrirlos desde FrontPage. Vamos pues al paso segundo.

7.- El diseo de nuestra Web.

Para conseguir un diseo ptimo de un sitio Web lo mejor es crear tablas y dentro de cada una de sus celdas vamos colocando los diferentes elementos, ya se trate de textos o imgenes. Las tablas las podemos crear de tal manera que en el navegador sean o no visibles sus bordes, en tal caso podremos seleccionar el tipo de lnea, el color, etc. Para ello abrimos el men Tabla y pulsamos Insertar, seleccionamos las opciones que nos convengan y aceptamos. Sobre las tablas, merece destacar el que sean construidas bajo la medida de pxeles o de porcentaje. La construccin de una u otra forma determina el aspecto final que tendr la pgina cundo la vean visitantes que tengan configurada diferente resolucin de pantalla. Si la construyes bajo medida en pxeles para que el visitante la vea igual que t tendr que tener la misma resolucin de pantalla que tienes en tu ordenador: Si la construyes bajo porcentaje le aparecer siempre bajo la misma apariencia que te ofrece en tu ordenador, tenga la resolucin de pantalla que tenga el visitante. Esta segunda opcin puede parecer la ideal, pero dado que ciertos elementos, como las imgenes, tienen una medida concreta (en pxeles) pueden deformar el aspecto del sitio Web cuando son visitados desde un sitio Web con distinta resolucin de pantalla. Las resoluciones de pantalla mas usadas con los monitores TRC era de 800x600, posteriormente con los monitores TFT, LCD, etc. pasaron a ser de 1024x768 pxeles o mayores. As pues recomendamos que se hagan pruebas con diferentes resoluciones de pantalla hasta conseguir resultados ptimos. Ahora solo queda insertar elementos de texto, fotografas, etc. La insercin de texto, obviamente no requiere explicacin. La insercin de fotos es muy simple, vasta con pulsar el men Insertar/Imagen/Desde archivo..., seleccionamos la foto que nos interese y aceptamos. Damos por sentado que las imgenes que queremos publicar en nuestra Web ya las hemos colocado en las carpetas correspondientes asignadas a tal fin. Esto ya comienza a parecer una pgina Web.

8.- La operatividad de nuestro sitio Web

Nuestra pgina Web poco a poco va evolucionando, pero hasta ahora solo tenemos unas pginas que nos van quedando muy atractivas pero no podemos saltar de unas a otras, no podemos indicarles a nuestros amigos cuales son nuestras Web favoritas, y ellos no tienen medio de enviarnos un correo electrnico. Que fastidio verdad? Pues nada, no hay problema, ha llegado el momento del hipervnculo (del que os hablaba al principio) y los marcadores. Sepamos primero que es uno y otro. Un hipervnculo es un elemento que nos permite saltar de una pgina a otra, de un sitio Web a otro, ver una fotografa a tamao real (cuando lo que vemos es una miniatura) o abrir el programa de correo con una sola pulsacin para enviar un correo a una direccin concreta. Como ya podis imaginar, aqu esta la esencia de un sitio Web. Vamos, que sin hipervnculos no existira Internet. Para insertar un hipervnculo selecciona con el ratn el elemento sobre el que lo quieres colocar y pulsa el men Insertar/Hipervnculo y marca la direccin de Internet, el archivo de la pgina que estas creando, la direccin de correo electrnico, o en su caso el marcador correspondiente, y pulsa aceptar. Sobre los hipervnculos es preciso que tengas en cuenta que el hecho de cambiar los nombres de los archivos o cambiarlos de carpeta con posterioridad a la colocacin de un hipervnculo har que este se te rompa, es decir, el hipervnculo no te llevara a ninguna parte. Mucho ojo, por que tras poner un montn de hipervnculos y romperlos despus sin darte cuenta fastidia montn. Un aspecto importante de FrontPage relacionado con los hipervnculos a la hora de crear galeras de fotos es la vista en miniatura automtica. En que consiste? Cuando se crea una galera de fotos es frecuente presentar todas las fotos en un tamao reducido y al pulsar sobre esta miniatura el hipervnculo te lleva a la foto de tamao real. Pues bien, hacer esto de manera manual supone crear una pgina para cualquiera de las fotos con sus correspondientes miniaturas, y por supuesto, su correspondiente hipervnculo, vamos, "horas para llorar" en crear una sola galera de 15 fotos, ya que te obliga a crear 16 pginas que tienes que ir vinculando. La opcin vista en miniatura automtica te ahorra todo este laborioso proceso. Funciona as: cuando insertas una foto y la seleccionas el botn de Vista en Miniatura Automtica se vuelve activo entonces lo pulsas y ya tienes la miniatura con el hipervnculo a la foto a tamao real, sencillo verdad. Si este botn no lo tienes visible pulsa en Ver/Barras de herramientas/Personalizar y en Comandos pincha sobre la categora Imagen, lo arrastras a tus barras de herramientas y listo, ah para siempre. Si lo que quieres es determinar la manera en que automticamente se crean las miniaturas pulsa en Herramientas/Opciones de Pgina/Vista en Miniatura automticay haz los cambios pertinentes. Un marcador es un elemento un poco distinto, el marcador es el destino de un hipervnculo dentro de un mismo documento o pgina. Es decir, cuando queremos movernos dentro de una

misma pgina, y saltamos del inicio al medio o del final al principio, lo que tenemos son hipervnculo dirigidos a marcadores. Esto tiene especial utilidad en los documentos largos. Los espacios, acentos y otros caracteres tampoco pueden usarse en los marcadores. Tanto para nombrar un marcador como para nombrar los archivos usa solo combinaciones de letras y nmeros, as nunca tendrs problemas. Para insertar un marcador selecciona con el ratn el elemento sobre el que lo quieres colocar y pulsa el men Insertar/Marcador elige un nombre (que no contenga espacios) y acepta. Ya nuestro sitio Web empieza a parecerse a esos que aparecen en la red.

9.- Elementos que mejoran un sitio Web.

Hay muchos elementos que resultan muy tiles y muy estticos para un sitio Web, unos son muy complicados, otros muy sencillos. Nosotros desde aqu apostaremos por unos elementos sencillos que bien empleados le dan a una pgina la imagen de haber sido creada por verdaderos profesionales. . Los elementos que vamos a tratar son: El fondo.- Dar a un sitio Web un color de fondo atractivo puede significar la diferencia entre una Web "poco atractiva" y una "atractiva". Con la opcin fondo no solo podrs darle un color homogneo a tu Web, tambin podrs introducir imgenes vuestras o de otra procedencia como fondo de tu pgina Web. Instalar este componente es muy sencillo, pulsa el men Formato/Fondo. El tema.- El tema es una forma de dar color al fondo de una Web pero el color no es uniforme. Los efectos que se pueden conseguir con la aplicacin de un tema son extraordinarios. Instalar este elemento es igualmente sencillo, pulsa el men Formato/Tema. HTML dinmico.- El HTML dinmico son unos efectos que se producen sobre los elementos que conforman la Web, como el texto, en el que dicho texto cambia por ejemplo a negrita al pasar el ratn por encima. Hay varios efectos, seguro que alguno se adapta a tu Web a la perfeccin. Este elemento tambin es muy sencillo de instalar, pulsa Formato/Efectos de HTML dinmico y en la barra de efectos DHTML que se abre selecciona las opciones que mas atractivas te resulten. Marquesina.- La marquesina es un texto con desplazamiento. Este efecto, en combinacin con los otros da una imagen de web muy sofisticada. Prubalo, te gustar. Tambin es muy sencilla la instalacin de este componente, pulsa Insertar/Componente/Marquesina y configrala como mejor se adapte al diseo de tu web. Sobre los elementos ornamentales, siempre cabe decir que pueden ser atractivos, pero tambin pueden dar problemas de compatibilidad con determinados navegadores. Cuando crees una Web no uses un solo navegador para probarla, usa varios. Los navegadores Internet Explorer, Crome, Firefox, Safari y Opera se reparten ms del 98 % del trafico.

10.- Publicar archivos de nuestro sitio Web.

Son muchas las ocasiones en que se presenta la necesidad de distribuir archivos desde nuestro sitio Webs. Esta necesidad se presenta por dos motivos principales: a) la necesidad de colocar un programa para que pueda ser descargado por lo visitantes del sitio Web; y b) la necesidad de facilitar la impresin de la informacin presentada en las diferentes paginas, y que por motivos de diseo del sitio Web resulta poco apropiada ya que se imprimen enlaces, imgenes ornamentales, etc.

Para poder descargar un archivo crearemos una carpeta llamada, por ejemplo, "archivos" y colocaremos dentro de esta los archivos comprimidos. Ahora ya solo abra que poner un enlace a ese archivo comprimido y cuando el visitante pulse sobre el enlace se abrir el dialogo de descarga. A la hora de "colgar" archivos es preciso tener en cuenta su tamao, dado que tenemos un espacio Web limitado. Tambin es importante advertir a los visitantes el periodo de descarga aproximado. Puede que esto no tenga mucho sentido en Europa occidental, Japn o Estados Unidos, pero pensemos que muchos pases del mundo que generan un buen trafico, tienen unas redes que en trminos generales, son bastante ms lentas que las de los pases mencionados. Quiero advertir que los diferentes archivos a "colgar" de nuestro sitio Web deben ser de uso libre, ya que si no es as es posible incurrir en la violacin de derechos de autor.

11.- Promocin Web: las etiquetas metatag.

Todo lo visto hasta ahora es de una gran importancia, no obstante, si lo que en este apartado se dice es ignorado, todo lo anterior es solo tiempo perdido. Aunque la promocin Web no es solo una cuestin de metatags, lo que ms prima hoy es el contenido, aqu nos referiremos exclusivamente a la sintaxis de las metatags y su relacin con los motores de bsqueda, fundamentalmente Google. Lgicamente si construimos una Web es para que sea visitada, y para que una Web pueda ser visitada es preciso que pueda ser detectada por lo motores de bsqueda, siendo el ms famoso de todos ellos "Google" cuya direccin de su pagina espaola es www.google.es.

Uno de los elementos que permite que una pgina Web sea detectada son las llamadas etiquetas Meta Tags (en singular Meta Tag) y son una parte del cdigo fuente de una pgina Web. El cdigo fuente de una pgina Web con sus etiquetas Meta Tags es el siguiente:

Figura 01. Cdigo fuente de un sitio web

<html> <head> <TITLE>EL TTULO DE LA PGINA.</TITLE> <META NAME='description' CONTENT='FRASES CLAVE'> <META NAME='keywords' CONTENT='PALABRAS CLAVE'> <META name='language' content='es'> <META name='revisit-after' content='1 month'> <META name='rating' content='General'> <META name='author' content='uterra.com'> <META name='owner' content='uterra.com'> <META name='robot' content='index, follow'> </head> <body> Las etiquetas metatag. </body> </html>
Una pgina Web esta constituida fundamentalmente por tres etiquetas: a) la etiqueta de apertura y la de cierre, y comprende la totalidad de la pgina Web b) la etiqueta de apertura y la de cierre, tambin llamada cabecera y que comprende siempre las etiquetas Meta Tags. Dentro

de la cabecera y bajo las Meta Tags se pueden colocar cdigos JavaScript, como por ejemplo los encargados de la apertura y cierre de ventanas secundarias. Las Meta Tags siempre estarn situadas en la parte superior de la cabecera y en el orden que se expresan. c) la etiqueta de apertura y la de cierre, tambin llamada cuerpo y que comprende todos los contenidos visibles del sitio Web. Las etiquetas Meta Tags pueden variar sensiblemente en su forma en relacin a las expresadas, y de hecho as lo hace FrontPage cuando se abre una pagina Web en blanco. En este sentido recomiendo la eliminacin todo todo el cdigo generado al abrir la pagina en blanco y pegar el cdigo correspondiente a la Figura 01. Si pulsas sobre el botn derecho del ratn y pulsas "Ver cdigo fuente" podrs comprobar que estas viendo el mismo cdigo que aparece en la Figura 01. El cdigo presentado en la Figura 01 tiene forma de texto plano, es decir sin formato y se corresponde con el texto que se escribe en el bloc de notas o cualquier otro editor de texto plano. Aqu ha sido representado con formato por fines didcticos. Para ser pegado en la vista de cdigo html de FrontPage ser preciso pegarlo primero en el bloc de notas y de l copiarlo y pegarlo en la vista de cdigo de FrontPage; si se intenta copiar directamente tambin copiara el formato y entonces tendremos cualquier cosa menos lo que pretendemos.

Como construir de manera adecuada las diferentes etiquetas Meta Tags?

La etiqueta es probablemente la mas importante dado el uso que de ella hacen los principales motores de bsqueda como Google. La parte en azul mayscula y negrita debe ser una frase que contenga toda la esencia de la pgina Web que la contiene, no debe superar las 15 o 20 palabras y debe contener entre 50 y 100 caracteres. Debe ser una frase con sentido y con repeticin mnima de palabras.

La etiqueta es de gran importancia ya que en ella debern estar incluidas las frases que imaginemos que los usuarios van a introducir en los motores de bsqueda para llegar a una Web como la nuestra. La parte en azul mayscula y negrita debe ser sustituida por varias frases con sentido, con repeticin mnima de palabras y separadas por comas, en su conjunto debe contener no mas de 150 o 200 caracteres.

La etiqueta es la otra etiqueta que no debe faltar en ningn sitio Web. Las palabras clave son aquellas que consideramos que los usuarios van a introducir en los motores de bsqueda para llegar a una Web como la nuestra. Sern palabras sueltas, con repeticin mnima, separadas por comas; jams ms de cinco repeticiones y entre unos 200 y 400 caracteres en total.

Como se ha dicho, estas tres etiquetas son fundamentales, no obstante tambin hay otras de menor importancia pero que no debemos olvidar, y son: La etiqueta indica el idioma en el que esta escrita la pgina Web, esto es til por que cada vez ms los motores de bsqueda seleccionan los resultados en funcin del idioma que el usuario ha indicado en la peticin de bsqueda.

La etiqueta indica al motor de bsqueda el periodo de tiempo tras el cual debe revisar nuestra pgina. No debe ser nunca inferior a un mes.

La etiqueta se refiere a si el contenido de nuestro sitio Web es apto para todos los pblicos o solo para adultos. Si la macamos como "general" o all, se indicar a los motores de bsqueda que su contenido es para todos los pblicos, si la marcamos como "Adultos" los motores de bsqueda no la ofrecern en sus resultados cuando haya filtros para menores de edad.

La etiqueta se refiere al nombre de la persona o empresa que ha construido el sitio Web. La etiqueta se refiere a la persona, empresa o sociedad propietaria del sitio Web.

La etiqueta indica a los motores de bsqueda si deben ofrecer o no esa pagina como parte de sus resultados y si deben o no incluir en sus registros los enlaces de dicha pgina. Si sustituimos "index" por "noindex" la pgina no ser indizada por los motores de bsqueda. Si sustituimos "follow" por "nofollow" el motor de bsqueda no detectara los enlaces que parten de esa pgina. Esta etiqueta es importante por que puede haber pginas que no interesa que sea detectada por los motores de bsqueda, como puede ser el caso de aquellas pginas de agradecimiento que aparecen tras haber enviado un formulario y que solo contienen un mensaje de cortesa. Tambin pueden ser interesante, si lo que se pretende es tener un sitio Web para difundir informacin entre un grupo limitado de personas, y se desea que el acceso a dicha pagina sea mnimo. En casos como estos, solo se incluir esta etiqueta y se eliminarn las dems. Una etiqueta Meta Tag as impedir la deteccin de la pagina Web y todos sus enlaces internos. Estas etiquetas tambin resultan muy adecuadas para usarlas en los administradores de contenidos dinmicos, ya que a ellos solo debe acceder el administrador del sitio Web. Tambin deben ser empleadas en pginas, que aunque protegidas por contrasea, contengan informacin personal o comprometida.

Por ultimo, y para terminar con el tema de la promocin Web, indicar que cada una de las paginas debe tener construidas sus propias Meta Tags ajustndose al contenido especifico de cada pgina concreta. Si colocamos las mismas etiquetas en todas las pginas nos quietaremos posibilidades de visitas, piensa que hasta cierto punto un motor de bsqueda contempla cada pgina como un sitio Web distinto, a mas variedad en las etiquetas, mas posibilidades de que se detecte y si no es una pagina ser otra. Otro punto muy importante son los enlaces, mientras mas paginas enlacen la tuya mejor posicionamiento tomar en los buscadores (PageRank), aunque esto es algo mas complicado y requiere un buen anlisis. Como ultima recomendacin y tambin consejo, si piensas que por la aparente lgica que se pueda deducir sobre el funcionamiento de los motores de bsqueda, algn "truco" te puede ayudar a conseguir mejor posicionamiento, piensa que a alguien se le habr ocurrido antes que a ti. Por otro lado, los administradores de los motores de bsqueda, continuamente recopilan informacin sobre los "trucos" que aun no han controlado ya para invalidarlo. Como ejemplo prctico de etiquetas meta tags, puedes ver las de esta misma pgina pulsando sobre el botn derecho del ratn y haciendo clic sobre ver "Ver cdigo".

12.- La publicacin de un sitio Web.

Bueno, ya tenemos creada nuestro sitio Web, y tiene un aspecto estupendo. Ahora solo falta que alguien la vea. Para que la pgina pueda verse lo primero es colocarla en un servidor de Internet, que a fin de cuantas no es mas que otro ordenador, eso si, con caractersticas especiales. Pues bien, publicar una pgina no es ni mas ni menos que eso, colocarla en otro ordenador, que es el servidor.

Ahora viene la pregunta, y donde estn los servidores?. Eso es muy sencillo, los servidores estn por todas partes en la red, unos ofrecen hosting (espacio para publicar tu web) gratuito, mientras que otros lo venden. Obviamente el que se compra es mejor que el que te regalan. Y todava hay mas, cuando ya tienes tu pgina publicada, bajo que nombre aparece tu pgina en la red?, eso es lo que se llama URL. Las URLs pueden tomar diversas formas: dominios, subdominios y carpetas web. Veamos un ejemplo de cada uno: Dominio Su URL Subdominio Su URL Carpeta Web Su URL uterra.com http://www.uterra.com subdominio.uterra.com http://subdominio.uterra.com uterra.com/carpetaweb http://www.uterra.com/carpetaweb

Cada una de estas tres formas de conseguir una URL tiene sus ventajas, no obstante esta claro que la mejor opcin de todas es el dominio. No obstante hoy ya va siendo muy complicado conseguir un buen dominio, puesto que hay empresas que compran los dominios libres de valor comercial para revenderlos. Las otras formas de conseguir URLs de calidad es la relacionada con los subdominios y las carpetas. Lgicamente las carpetas han de ser primarias y mejor si dependen de un dominio que de un subdominio. De hecho, los mejores espacios web gratuitos (en cuanto a URL) estn ofreciendo URLs como carpetas secundarias bajo subdominio. De esta manera las URL se hacen demasiado extensas, un ejemplo de URL de este tipo podra ser: http://subdominio.dominio.com/web_gratis/mi_web Adems, los espacios gratuitos incluyen publicidad y su funcionamiento no es del todo homogneo ni constante. Dado que con los subdominios y las carpetas Web se dispone de una gran cantidad de nombres

disponibles, esta puede ser una buena opcin para conseguir ese nombre que necesitamos. Tambin es importante tener en cuenta que si en otro momento conseguimos un dominio que se ajuste a nuestras necesidades podremos redireccionarlo a la direccin que ya tenemos y de esta forma podremos acceder a nuestra Web desde dos direcciones distintas. Hechas estas aclaraciones vamos a grano de la cuestin sobre como publicar un sitio web. Aclararemos que la mayora de los servidores hacen la publicacin mediante protocolo de transferencia de archivos FTP, mientras que otros mediante HTTP (protocolo de transferencia de hipertexto). Dado que el primero es el dominante, solo hablaremos de este. La publicacin mediante FTP es tremendamente sencilla. Dado que el sitio ftp no es mas que una carpeta, lo que hay que hacer es copiar y pegar de la carpeta de tu ordenador a la carpeta del sitio ftp. Un buen programa ftp es File Zilla, es gratuito y lo puedes encontrar en softonic. Para publicar una pgina Web precisaras una direccin FTP a la que acceders desde tu navegador (algunos navegadores permiten abrir el sitio ftp como una carpeta ms, y podemos operar copiando y pegando como entre dos carpetas de nuestro ordenador) o desde un programa FTP, una cuenta FTP, y una contrasea. Estas tendrn la forma: Direccin FTP: Cuenta FTP: ftp.dominio.com usuario@dominio.com deber incluir por seguridad al menos 6 caracteres de nmeros y letras combinados.

Una contrasea:

13.- Las pginas Web de frames.

El diseo de sitios web de frames o marcos supone un gran ahorro a la hora de vincular las distintas pginas de un sitio web y aade un gran facilidad y comodidad de navegacin en el conjunto del sitio web. Para comprender que es un sitio Web de frames pondremos el siguiente ejemplo:

Figura 2: pgina de cuatro frames FRAME A FRAME B FRAME C FRAME D Este es un ejemplo tpico de pagina de frames o marcos. Se trata de una pagina que carga simultneamente cuatro paginas, cada una de ellas en un frame o marco. De esta manera la pgina puede funcionar de la siguiente manera:

El frame A: contiene una relacin general de todos los contenidos del sitio web, digamos por ejemplo que contiene ocho grupos de contenidos que denominamos 1A, 2A, 3A, 4A, 5A, 6A, 7A, 8A. Es por tanto un frame que cumple la funcin de men primario. Este frame siempre esta visible.

El frame B: para cada uno de los contenidos del frame A tiene otra relacin de contenidos, digamos por ejemplo que contiene 10 grupos de contenidos que denominaremos 1B, 2B, 3B, 4B, 5B, 6B, 7B, 8B, 9B, y 10B. Es por tanto un frame que cumple la funcin de men secundario, y depende del enlace que seleccionemos en el frame A

El frame C: este frame muestra las paginas propiamente dichas con todos sus contenidos textos, fotografas, etc; y responde a los enlaces del frame B.

El frame D: este frame lo destinamos al intercambio de enlaces con otras paginas Web, de esta manera veamos la pagina que veamos siempre tendremos a la vista los enlaces de intercambio. Este frame siempre esta visible.

De esta manera, con un simple clculo llegamos a la conclusin de que en el frame C podemos visualizar nada menos que 80 pginas distintas. 8 enlaces en el frame A por los 10 enlaces del frame B que corresponden a cada enlace del frame A. 8 x 10 = 80 pginas distintas. Para conseguir esto solo hemos tenido que poner 88 enlaces. Algunas de estas pginas serian: 1A3B, 4A1B, 5A6B, 7A5B, etc.

An estas claras ventajas, los frames tienen un gran inconveniente. Este gran inconveniente esta relacionado con lo problemtica que resulta la promocin de las pginas construidas de esta manera. El problema radica en que las pginas que nos interesan (las de contenido propiamente dicho) son las que se presentan dentro del frame C, y claro, estas no tienen enlaces, dado que los enlaces los hemos colocado en las pginas que se muestran en los frames A y B. Como podemos ver,

el ahorro de trabajo que nos ha reportado el uso de frames ahora se vuelve en nuestra contra, dado que el visitante que ha localizado nuestra pagina en un buscador ha llegado a una pagina sin enlaces, y por tanto lo mas fcil es que la cierre y no trate de buscar su inicio. Una posible solucin a esto seria o bien colocar un enlace hacia la pagina de inicio en cada una de las paginas internas del frame o bien colocar un script que al entrar en una pgina interna del frame te lleve de manera automtica a la pagina de inicio de frames. Otra solucin parcial que en algunos casos puede ser muy til en relacin al uso de frames es impedir que los motores de bsqueda detecten ciertas pginas internas. Consulta el apartado de promocin Web. Estas soluciones son solo soluciones parciales y ninguna de ellas es perfecta, por eso desde aqu recomendamos el uso de frames solo para usos muy concretos y donde estemos seguros que sus las ventajas de su uso van a superar los inconvenientes.

HTML de la Web de frames de la Figura 2.

<html> <head> <TITLE>Pagina con 4 frames.</TITLE> </head> <frameset cols='85%' border='5'> <frameset rows="*,81%,8%"> <frame src='pagina1.htm' name='superior' scrolling='auto'> <frameset cols="*,86%"> <frame name="central_izquierdo" src="pagina2.htm" scrolling="auto"> <frame name="central_derecho" src="pagina3.htm" scrolling="auto"> </frameset> <frame src='pagina4.htm' name='inferior' scrolling='auto'> </frameset> </frameset> </frameset> </html>
Aunque por lo dicho hasta ahora podemos pensar que los frames no sirven para casi nada, si hay un uso para el que resultan sumamente adecuados. Es el caso de aplicaciones que no sea necesaria que sus pginas sean detectadas por los motores de bsqueda, como los administradores de contenidos. Su utilidad esta relacionada con lo fcil que se hace agregar un nuevo enlace o la posibilidad de modificar el tamao de los frames en funcin de la necesidad de cada momento.

14.- Los formularios.

Una de las principales funciones de un sitio Web, adems de ofrecer informacin, es la recogida de informacin de los visitantes.

Existe una diferencia importante entre la publicacin de una cuenta de e-mail y la publicacin de un formulario. La diferencia estriba en que cuando alguien enva un e-mail puede enviar o no toda la informacin necesaria, ya sea por exceso o por defecto.

Con el formulario este inconveniente se supera, de tal manera que un formulario ser enviado o no en funcin de si ha sido introducida toda la informacin y si la informacin que ha sido introducida es o no la adecuada.

La informacin que se enva a travs de los formularios puede ser manejada por el webmaster del sitio Web o incluso por el mismo sitio Web en el caso de los sitios Web dinmicos que ejecutan funciones del lado del servidor.

La ejecucin de la orden de envo de un formulario puede radicar en la configuracin de una cuenta de correo en un programa de correo en el ordenador del visitante. Esta seria la forma mas sencilla y la ejecuta un fragmento de cdigo HTML que esta publicado en nuestra seccin de javascript. Esta forma de enviar un formulario tiene como principal inconveniente que si el usuario no tiene cuenta de correo configurada en un programa de su ordenador, el formulario nunca podr ser enviado, y esto cada da es mas frecuente, dado que cada da se usan mas las cuentas de correo tipo webmail, es decir, esas cuentas que residen en un sitio Web y que tiene la ventaja que se puede acceder a ellas directamente desde cualquier ordenador en cualquier parte del mundo. Otra forma de enviar los formularios es a travs de los lenguajes de lado del servidor, de esta manera, el formulario se enva con total indiferencia de si el usuario tiene o no e-mail. Dado que esta es una funcin muy comn los buenos sistemas de hospedaje ya tienen configuradas estas aplicaciones de tal manera que basta con solicitar al administrador del servidor que nos configure una aplicacin para el envo de formularios. El administrador nos enviara un pequeo cdigo que colocaremos en nuestro formulario y este se encargara de hacer la peticin al servidor para que realice el envo. El lenguaje HTML o el javascript no tiene capacidad para procesar formularios de la forma en que lo desearamos, es decir, no nos podremos registrar en una Web o enviar un mensaje a una cuenta de e-mail usando estos lenguajes por si solos. Lo que estos lenguajes hacen es abrir un programa que ejecuta esta funcin, de la misma manera que un botn puede activar la impresora para imprimir un documento, pero no es en medida alguna el botn quien imprime la pgina.

Para procesar formularios necesitaremos un lenguaje como PHP. As, aunque un formulario puede estar escrito completamente en HTML, sin un lenguaje de alto nivel como PHP no nos servir de mucho. Por eso, nos encargaremos de los formularios en la seccin de PHP.

15.- Que es un dominio?

Todo plan de alojamiento debe tener asociada una direccin por la que se acceder a dicho espacio Web. Esta direccin puede tomar diversas formas: el dominio, el subdominio, y la carpeta Web. De las tres la ms importante con diferencia es el dominio. Dado que el dominio no es otra cosa que una direccin, habr direcciones buenas y malas, mejores y peores. Elegir un buen dominio para nuestro sitio Web puede ser la diferencia entre una Web de xito y una de fracaso. Son muchos los factores a tener en cuenta a la hora de escoger un dominio, pero quizs los ms importante sean: a) Que sea lo mas breve posible. b) Que sea fcil de recordar. c) Que sea fcil de escribir. d) Que describa el contenido del sitio Web. Una vez elegido un dominio se plantea un nuevo problema, que tal dominio este disponible, sobre todo si se trata de un dominio ".com". Cuando nos encontramos con esta problemtica, y hemos descartado todos los dominios parecidos podremos contratar un subdominio o una carpeta web, o incluso a podramos tener las tres formas de acceso para un solo sitio web, que a nuestro modo de ver es la mejor opcin a falta de nuestro dominio ideal. Es preciso distinguir entre dominio y URL. As uterra.com es el dominio, mientras que http://www.uterra.com es la URL o direccin propiamente dicha.

16.- Que son los subdominios de Internet?

Share on print Share on pdfonline Share on twitter Share on email More Sharing Services 9 Como ya hemos visto la mejor forma de tener una direccin en Internet es a travs de un dominio. No obstante el dominio confiere otras ventajas, entre ellas que bajo el se pueden crear subdominios. De esta manera podemos tener varias pginas Web compartiendo un nombre comn. Para ejemplificar esto proponemos varios subdominios bajo el dominio http://www.uterra.com, as tenemos: http://internet.uterra.com http://empresa.uterra.com http://www1.uterra.com Como puedes observar, un subdominio es una forma muy atractiva de conseguir un nombre atractivo. Los subdominios son tanto ms adecuados cuando el nombre del dominio es abstracto que cuando se refiere a algo concreto si es que sobre ellos queremos montar espacios Web de temtica muy diversa. Los subdominios tambin se suelen emplear para compartimentar diferentes reas de grandes sitios Web. Otro uso muy comn y que considero especialmente importante es el montar el administrador de contenidos de las Web dinmicas en un subdominio, en lugar de hacerlo sobre una carpeta del dominio principal. Si necesitas hacer pruebas y ensayos de desarrollo de nuevas aplicaciones, hazlo sobre un subdominio, de esa forma, adems de mantener intacta la estructura de la Web principal, no afectaras su posicionamiento en los motores de bsqueda por tener contenido descuidado o desorganizado. No puedo dejar de mencionar el caso del ultimo subdominio presentado, o sea, http://www1.uterra.com, as y a primera vista parece un dominio algo particular, pero no lo es, es un subdominio llamado "www1", tambin podra llamarse "www5" o como queramos.