Pgina web

Una pgina Web, tambin conocida como una pgina de Internet, es un documento electrnico adaptado para la Web pero normalmente forma parte de un sitio Web. Su principal caracterstica son los hipervnculos de una pgina, siendo esto el fundamento de la Web. Una pgina Web est compuesta principalmente por informacin (slo texto o mdulos multimedia) as como por hiperenlaces; adems puede contener o asociar datos de estilo para especificar cmo debe visualizarse, y tambin aplicaciones embebidas para hacerla interactiva. Las pginas Web son escritas en un lenguaje de marcado que provea la capacidad de manejar e insertar hiperenlaces, generalmente HTML. El contenido de la pgina puede ser predeterminado ("pgina Web esttica") o generado al momento de visualizarla o solicitarla a un servidor Web ("pgina Web dinmica"). Las pginas dinmicas que se generan al momento de la visualizacin se hacen a travs de lenguajes interpretados, generalmente Java Script, y la aplicacin encargada de visualizar el contenido es la que debe generarlo. Las pginas dinmicas que se generan al ser solicitadas son creadas por una aplicacin en el servidor Web que alberga las mismas. Respecto a la estructura de las pginas Web, algunos organismos, en especial el W3Csuelen establecer directivas con la intencin de normalizar el diseo, para as facilitar y simplificar la visualizacin e interpretacin del contenido. Una pgina Web es en esencia una tarjeta de presentacin digital, ya sea para empresas, organizaciones, personas, etc. As mismo, la nueva tendencia orienta a que las pginas Web no sean solo atractivas para los internautas, sino tambin optimizadas para buscadores a travs del cdigo fuente. Forzar esta doble funcin puede, sin embargo, crear conflictos respecto de la calidad del contenido.

Quiero una pgina web. Que se necesita?

Hay que tomar en cuenta algunos aspectos importantes para iniciar una pgina web. A continuacin explicamos trminos usados para que usted conozca lo que implica tener una web. Es sencillo: Dominio. Hosting. Redaccin para la pgina web. Fotografa de sus productos o del servicio. Informacin Organizada.

Estudio Creativo lo asesora y gua en todo momento. Nosotros nos encargamos del proceso tcnico y usted solo ve como su pgina web es creada y empieza a funcionar. Sin embargo esta en nuestra tica el informar a nuestros clientes el aspecto tcnico.

:: Dominio: como se llamar su web (ej.www.minuevaweb.com).

El domino es el "punto com" con el que llamamos una web a travs de nuestro navegador. Es necesario verificar la disponibilidad del mismo y si no esta disponible tener una segunda opcin. Se contrata y queda reservado exclusivamente para usted durante un ao o el periodo que haya contratado. En la cuenta del dominio hay que configurar los DNS que es la manera de indicar a que servidor se debe de referir el nombre de la pgina web para mostrarse.

:: Hosting: donde se encuentra la informacin guardada.

Un buen hosting es necesario para una buena pgina web. El hosting es el que guarda la informacin de la pgina web y provee de otros servicios como el correo electrnico y soporte para bases de datos, blogs, foros y otros programas. Es necesario considerar un hosting mas grande si su pgina consume mucho ancho de banda y tiene miles de descargas por mes. SDG Estudio Creativo lo asesora en todo momento para hacerle saber cual es el plan de hosting mas indicado.

:: Redaccin, Fotografa e Informacin organizada.

Estos son los elementos bsicos para hacer un proyecto web. Estudio Creativo apoya en todo momento para la produccin tanto del material grfico como del organizar al informacin y redaccin adecuada.

Tipos de software:
Los programas ms importantes para desarrolladores web, comentados en DesarrolloWeb.com:

Photoshop - Editor de Imgenes HomeSite - Editor web Dreamweaver - Editores HTML UltraEdit - Editor de texto HTML-kit - Editor web Flash - Editor de animaciones Sothink DHTML Menu - Creacin de mens DHTML Zend Studio - Editor PHP FileZilla, cliente FTP - FTP

Mozilla - Navegador web PDF Creator - Editor ficheros PDF Bitrix Site Manager - XML Skype - General Picasa 2 - Gestin de imgenes Adobe Photoshop CS - Diseo grfico Visual Web Developer 2005 Express Edition - IDE gratuito Para .NET ClamWin, antivirus gratis de cdigo libre - Antivirus cdigo libre Camtasia Studio - Creacin de video tutoriales Stylizer - Editor CSS
Categoras de programas comentadas + General Programas cuya utilidad es de inters general, de uso no slo exclusivo para los desarrolladores. + Diseo Programas tiles para disear pginas web. Diseo web y diseo en general. + Multimedia Programas orientados a la gestin o creacin de animaciones y otros componentes con los cuales podrs dar ms dinamismo a tu web. + Programacin Programas enfocados a desarrolladores y programadores, con los cuales tu idea de proyecto web se ir convirtiendo en realidad. + Gestin de contenidos Programas que facilitan la gestin dinmica de contenidos en pginas web. + Navegadores Diferentes navegadores, con los cuales visualizar pginas web, que te interesa conocer, para hacer pruebas en distintos entornos. + Editores HTML Programas para la edicin de cdigo HTML, que ofrecen ayudas visuales especficas para construir webs, como editores WYSIWYG. + Editores CSS Programas que facilitan la creacin y edicin de cdigo CSS (hojas de estilo en cascada). + Clientes FTP Programas clientes de FTP, con los que conectar por FTP a servidores de alojamiento, para publicar tus pginas web. + Lectores RSS Programas lectores RSS, con los podrs leer todos tus RSS.

HTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Java script), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. HTML tambin es usado para referirse al contenido del tipo de MIME texto/HTML o todava ms ampliamente como un trmino genrico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).

Historia de HTML
La primera descripcin de HTML disponible pblicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berns-Lee en 1991.1 2 Describe 22 elementos comprendiendo el diseo inicial y relativamente simple de HTML. Trece de estos elementos todava existen en HTML 4.3 Berns-Lee consideraba a HTML una ampliacin de SGML, pero no fue formalmente reconocida como tal hasta la publicacin de mediados de 1993, por la IETF, de una primera proposicin para una especificacin de HTML: el boceto Hypertext Markup Language de Berns-Lee y Dan Connolly, el cual inclua una Definicin de Tipo de Documento SGML para definir la gramtica.4 El boceto expir luego de seis meses, pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar imgenes sin cambio de lnea, reflejando la filosofa del IETF de basar estndares en prototipos con xito. 5 Similarmente, el boceto competidor de Dave Raggett HTML+ (Hipertexto Marcus Formato) (Formato de marcaje de hipertexto), de 1993 tardo, sugera, estandarizar caractersticas ya implementadas tales como tablas.6

Marcado HTML
HTML consta de varios componentes vitales, incluyendo elementos y sus atributos, tipos de data, y la declaracin de tipo de documento.
Elementos

Los elementos son la estructura bsica de HTML. Los elementos tienen dos propiedades bsicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere vlido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-deelemento>). Los atributos del elemento estn contenidos en la etiqueta de inicio y el contenido est ubicado entre las dos etiquetas (p.ej. <nombre-deelemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos,

tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

Estructura general de una lnea de cdigo en el lenguaje de etiquetas HTML.

El marcado estructural describe el propsito del texto. Por ejemplo, <h2>Golf</h2> establece a "Golf" como un encabezamiento de segundo nivel, el cual se mostrara en un navegador de una manera similar al ttulo "Marcado HTML" al principio de esta seccin. El marcado estructural no define cmo se ver el elemento, pero la mayora de los navegadores web han estandarizado el formato de los elementos. Un formato especfico puede ser aplicado al texto por medio de hojas de estilo en cascada. El marcado presentacional describe la apariencia del texto, sin importar su funcin. Por ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qu deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de <b>negrita</b> e <i>itlica</i>, existen elementos que se ven de la misma manera pero tienen una naturaleza ms semntica: <strong>nfasis fuerte</strong> y <em>nfasis</em>. Es fcil ver cmo un lector de pantalla debera interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debera decir ms fuerte el nombre de un libro, aunque ste est en itlicas en una pantalla. La mayora del marcado presentacional ha sido desechada con HTML 4.0, en favor de Hojas de estilo en cascada. El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecer la direccin URL a la que apunta el enlace. Por ejemplo, un enlace a la Wikipedia sera de la forma <a href=es.wikipedia.org>Wikipedia</a>. Tambin se pueden crear enlaces sobre otros objetos, tales como imgenes <a href=enlace><img src=imagen /></a>.

Comandos bsicos de lenguaje de programacion INTRODUCCIN

La informacin en la Red necesita viajar de una manera rpida y precisa, para lo cual se cre el protocolo de comunicacin HTTP o Hper Texto Transporte Protocol, el cual fue desarrollado en un laboratorio de fsica de partculas del CERN en Suiza con el fin de transferir rpidamente a todos los usuarios lo ltimos resultados de sus investigaciones. Fue entonces este el comienzo de las redes compuestas por diferentes servidores que proveen informacin de todo tipo a los usuarios. Inicialmente el WWW (Worl Wide Web) era poco interactivo, limitndose a desplegar la informacin en modo texto . Luego el permanente avance de tecnolgico surgieron los visualizadores grficos (browsers) y con ellos el HTML (Hipertexto Marcus Lenguaje) lenguaje utilizado para la presentacin de la informacin en la red. La finalidad de los browsers, como Netscape o Internet Explorer es interpretar el cdigo HTML que llega a nuestros computadores por medio del HTTP. Ahora para proporcionar mayor versatilidad a las pginas, se utiliza el Common Gateway Interface (CGI), que le permite a un programa correr en el servidor de acuerdo a los requerimientos del protocolo HTTP de las pginas.

HTML (Hipertexto Marcus Lenguaje)

El HTML es ms una codificacin que un lenguaje de programacin. Su estructura bsica es tan simple que cualquier persona sin principios en programacin puede aprenderlo con gran facilidad. Lo sorprendente de este lenguaje es que proporciona al usuario la informacin en una manera interactiva, haciendo uso del hipertexto , o texto con enlaces hacia otros lugares del Web, o hacia inserciones de multimedia (videos, sonidos, grficos, etc.). Adems es universal y no depende del sistema operativo que se est utilizando. Los documentos HTML se escriben en modo ASCII (texto plano), haciendo uso de cualquier procesador de palabras y en cualquier sistema operativo.

ESTRUCTURA BSICA
Para comenzar debemos saber que el HTML utiliza una codificacin genrica, la cual hace uso de TAGS o etiquetas. Mediante estas etiquetas es posible separar el contenido del documento de su formato.

Los TAGS son comandos que se especifican en el cuerpo del programa, con el fin de darle las caractersticas deseadas a la informacin. Toda pgina Web debe contener la siguiente estructura : <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> Esta es mi primera pgina Web</BODY> </HTML> La etiqueta <HTML> le indica al visualizador que va a comenzar a leer un documento HTML y se debe colocar siempre al comienzo y al fin del texto. La etiqueta <HEAD> indica un encabezado, dentro del cual se coloca informacin como el ttulo, el cual debe estar contenido entre la etiqueta <TITLE> Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que realmente vemos en el Web. Para comenzar a escribir un documento, es importante tener en cuenta que el lenguaje HTML no distingue mas de un espacio entre caracteres y se olvida de cualquier formato que se le de al texto (negrilla, cursiva, tipo de letra, entre otras). Recordemos que para esto es que se cre el HTML, toda presentacin final debe ser proporcionada mediante las etiquetas. Cada etiqueta, con excepcin de unas cuantas, le debe indicar al visualizador cuando finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser cualquier etiqueta. De esta manera indicamos cuando comienza y termina el encabezado, el ttulo, el cuerpo y el documento HTML.

EDITAR - GUARDAR Y VISUALIZAR

Para editar o crear un documento HTML se puede hacer uso de cualquier procesador de palabras. Para ello se debe modificar o digitar la estructura completa del documento y guardarlo como texto simple con extensin HTML. Ahora para visualizar nuestros cambios o ver cmo va quedando nuestra pgina, antes de cargarla en nuestro servidor, se puede abrir el archivo en cualquier visualizador, y este lo desplegar tal como se vera la pgina en la Black. Las opciones de que disponen los browser ms comunes, son: Netscape: Menu "File", comando "Open file in a browser" (Ctrl O). Para volver a cargar el archivo una vez que este ya est abierto en el browser, se dispone del comando "Reload" del men "View".

Internet Explorer: Comando "Abrir" del men "Archivo". Para volver a cargar se dispone del comando "Actualizar", del men "Ver".

DANDO FORMATO AL TEXTO DEL DOCUMENTO

Como ya habamos mencionado, el HTML no distingue masa de un espacio entre caracteres, saltos de lnea, negrilla, cursiva, tamao y tipo de fuente, vietas, entre otras. Para lograr tales caractersticas en el texto del documento HTML (recordemos que el texto va dentro del cuerpo del documento entre las etiquetas <BODY> </BODY>) se debe hacer uso de las etiquetas que explicaremos a continuacin. Etiquetas de formato:

Negrita Cursiva Subrayado

<B> Texto en negrita</B> <I> Texto en cursiva</I> <U> Texto subrayado</U>

Monoespaciado <TT> Texto como si estuviera escrito en mquina da escribir </TT> Pre formateado

<PRE> Texto que conserva todos sus espacios y tabuladores, y aparece en formato monoespaciado</PRE>

Etiquetas para prrafos:

Nuevo prrafo (dos espacios) Lnea horizontal Salto de lnea (un espacio) Tamao de la fuente

<P> <HR> <BR> <Hx> </Hx>. Donde x es un nmero entre 1 y 6, siendo 1 el tamao mas grande y 6 el ms pequeo

LISTAS
Las listas sirven para desplegar la informacin que debe ser enumerada o tabulada de una manera organizada. En el lenguaje HTML se pueden construir varios tipos de listas : Lista numerada: Numera los prrafos u objetos que se encuentran dentro de la siguiente estructura: <OL> <LI> Primer prrafo u objeto. <LI> Segundo prrafo u objeto. Etc... </OL> tiles para crear tablas de posiciones y enumerar procedimientos. Lista con vietas: Inserta un punto negro a los prrafos u objetos que se encuentran dentro de la siguiente estructura: <UL> <LI> Primer prrafo u objeto. <LI> Segundo prrafo u objeto. Etc... </UL> Son tiles para enumerar por puntos los comentarios de su pgina. Lista de definicin: Son tiles para las entradas de tipo diccionario o para las secciones de documentos donde un trmino es el encabezado de la seccin y la definicin es el texto de aquella. La estructura es la siguiente: <DL> <DT> Primer trmino. <DD> Primera definicin. <DT> Segundo trmino. <DD> Segunda definicin. Etc... </DL> A cada una de estas listas se les puede crear una lista dentro de ellas, simplemente agregando la estructura deseada dentro de la etiqueta correspondiente.

VNCULOS DE HYPERTEXTO
El hipertexto son vnculos dentro del texto del documento HTML que permiten al usuario navegar con facilidad a travs de la Black, tanto a nivel interno como externo, es decir , pueden crearse vnculos que lleven hacia una misma parte del documento (interno) o hacia otra parte del mundo Web (externo). Tambin existen otro tipo de vnculos que llevan al surfeador a otras partes como correo, gopher, ftp, entre otras. Las etiquetas HTML que se encargan de generar los vnculos son <A> y </A>. A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se realiza de la siguiente manera: <A HREF="URL">Texto del vnculo</A> Vnculos externos hacia pginas lejanas Este vnculo enva al lector fuera de la pgina hacia otro site Web. Generalmente son usados para relacionar al usuario con otros sitios interesantes en el mundo Web. El URL ser entonces la direccin completa de la pgina a la que se desea crear el vnculo. Ejemplo: http ://www.insomnia-group.com Vnculos externos hacia pginas cercanas Generalmente las personas que disean sus pginas no encuentran cmodo desplegar toda la informacin en una sola, sino que crean varias pginas vinculadas entre s. Por ejemplo, es comn ver una pgina principal (Home Page) con una tabla de contenido a la cual se le han creado vnculos hacia cada uno de sus temas. Estos vnculos son hacia archivos HTML que, generalmente, se encuentran en el mismo directorio de la pgina principal. El URL ser entonces la ruta completa (incluyendo el nombre del archivo) que lleva al visualizador a cargar el documento que se desea desplegar. Por ejemplo en mi cuenta he creado una pgina para que las personas que visiten al Home Page registren su visita. Si el nombre de documento es firmas.html y se encuentra en el mismo directorio de la Home Page, el URL sera firmas.html. Vnculos internos: anclas Cuando un pgina tiene un gran contenido, es posible hacer que el usuario navegue a travs de la pgina. Para ello se debe marcar tanto el inicio como el fin del ancla. Para marcar el inicio del ancla se utiliza la etiqueta <A HREF="#seccin"> Texto que relaciona al ancla </A> . Ntese que lo que sera en los otros casos el URL se ha cambiado por el nombre que se le da al ancla, precedido del signo #. Para marcar el fin del ancla (a donde debemos llegar) se hace uso de la etiqueta <A NAME="seccin"> Texto del ancla </A>. Donde "seccin" debe coincidir con el nombre designado en el inicio del ancla.

Vnculos de correo electrnico Por lo general las personas que disean sus pginas proporcionan la opcin de tener una retroalimentacin por parte del visitante. La manera ms sencilla de lograr esto es travs de un vnculo que lleve al surfeador a un cuadro de correo electrnico con la direccin pblacketerminada. La estructura es la siguiente: <A HREF=mailto:"direccin de correo electrnico" Texto del vnculo </A> Ejemplo: <A HREF=mailto:"edpq148cronos.eafit.edu.co" Sugerencias y comentarios</A> Vnculos hacia otros recursos del Web En la black, a parte del World Wide Web, existen otros cuatro recursos, que son el gopher, el FTP, el Usenet y el Telnet. Para generar un vnculo hacia cualquiera de estos recursos, basta con designar adecuadamente el URL requerido dentro de la estructura normal de etiquetas de vnculo.

RECURSO

URL

FTP (directorio) ftp: //quin/dnde FTP (archivo) Gopher Use Net Telnet ftp: //quin/dnde/que gobher: //quin news: //nombre del grupo de noticias telnet: //quin

AGREGANDO IMGENES A SU PGINA

Las pginas en el Web no deben estar llenas de texto por todos lados pues esto hace que los surfeadores se aburran de verlas y como resultado obtendrn una pgina que nunca es visitada. Una herramienta muy til para hacer de las pginas un documento llamativo y amigable es hacer uso de imgenes relacionadas con el texto al que se est haciendo referencia. Se imaginan una valla publicitaria sin ningn tipo de imagen? Tambin es muy importante una excelente combinacin de colores de fondo y de texto, con el fin de hacer que la pgina sea lo ms leble posible. Es en este punto donde entra a jugar la creatividad del diseador.

Para colocar una imagen en una pgina basta con llamarla desde el documento HTML ( es similar los vnculos hacia pginas cercanas). Lo primero es disear el grfico deseado en cualquier programa de dibujo como el Corel DRAM o el Adobe Photoshop, luego se debe convertir a cualquiera de los formatos aceptados por el lenguaje HTML (GIF y JPEG). La estructura es la siguiente: <IMG SRC= "Nombre del archivo" > Donde "Nombre del archivo" es el nombre del archivo de grfico que desea desplegar.

GENERE TABLAS
En general las tablas pueden ser sin borde o con borde. La tabla sin borde es quizs la herramienta mas til en la codificacin HTML, pues a travs de ellas podemos organizar nuestro documento como lo deseemos, teniendo en cuenta que el HTML no entiende mas de un espacio, tabulador o salto de lnea? Pero por qu no hacerlo usando la etiqueta pre formateado para arreglar la distribucin de mi documento? Sencillo: como todos sabemos esta etiqueta despliega el texto en el tipo de letra monoespaciado y no permite cambios ni de forma ni de tamao. Conclusin; el documento se vera horrible. La tabla con borde es til para desplegar tablas de contenido, resmenes, cuadros de atencin, entre otras. Pero qu es una tabla?: es un conjunto rectangular de filas y columnas que aparecen en su pantalla. ESTRUCTURA BSICA DE LAS TABLAS <TABLE BORDER="Nmero entre 0 y 7"> <CAPTION ALIGN=TOP BOTTOM>;Aqu va el texto del ttulo</CAPTION> <TR> <TD>Primera fila, primera columna</TD> <TD>Primera fila, segunda columna</TD> <TD>Primera fila, tercera columna</TD> .......... </TR> <TD>Segunda fila, primera columna</TD> <TD>Segunda fila, primera columna</TD> <TD>Segunda fila, primera columna</TD> .......... </TR> etc... </TABLE>

Notas: El nmero que se designa en la etiqueta <TABLE BORDER="Nmero entre 0 y 7"> determina el ancho del borde de la tabla. Este nmero puede estar entre 0 y 7. Se preguntarn que significa la etiqueta <CAPTION ALIGN=TOP BOTTOM>; Aqu va el texto del ttulo</CAPTION>. Simplemente da la posibilidad de colocarle un ttulo a la tabla, bien sea en la parte superior (TOP) o en la parte inferior (BOTTOM).

REGLAS BSICAS EN EL DISEO

1. Tener algo interesante que decir en su Home Page: Su pgina deber ser informativa para mantener vivo el inters. 2. No ser otra lista de listas: Todo el mundo ya conoce las herramientas de bsqueda. Haga que sus enlaces sean pertinentes al tema que est tratando. 3. Recordar que no en todos los Browser aparece igual: No haga que su pgina dependa demasiado de ciertos comandos HTML que pueden no apatrecer en todos los Browsers . Algunos Browsers pueden no aceptar sus grficasa, as que proporcione textos alternativos. 4. No todos los que ven pgina,lo hacen a 28.8 o ms rpido: Mantenga su pgina con un mximo de 15K en imgenes o fraccionela si sta es muy grande. 5. No usar grficas de otros autores si no est autorizado: Hay muchasa fuentes de grficas gratis. Tambin existen graficadoes sencilos con los que usted puede crear sus propias grficas. 6. Reconocer el trabajo de los dems: Si algn "Web Site" le ayud de alguna manera a construir su pgina, entonces brndele un enlace 7. Colocar fecha de la ltima revisin: Indique cundo se realiz la ltima revisin. Esto har que las personas se motiven a leer su pgina. 8. Verifique sus enlaces peridicamente: No deje que expiren sus enlaces durante largos perodos de tiempo. Revise su validez. 9. Sea abierto a comentarios o sugerencias: Especifique vnculos de correo electrnico o, si es podible, formularios de realimentacin. 10. Practique su HTML: Use los editores solo cuando conozca los principios bsicos del HTML. Esta es la combinacin ideal.