Professional Documents
Culture Documents
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.
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.
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.
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.
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:
<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.
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".
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:
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> <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.
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.