Post Actualizado en julio 25, 2013
Que es una pagina web 2da parte
Continuacion del articulo que es una pagina web, ver primera parte aqui Unidad 3 "Lenguaje HTML" Lenguaje HTML Por medio del lenguaje HTML (HyperText Markup Languaje), podemos navegar por miles y miles de páginas a través de la WWW. Es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto presentado de […]
Continuacion del articulo que es una pagina web, ver primera parte aqui
Lenguaje HTML
Por medio del lenguaje HTML (HyperText Markup Languaje), podemos navegar por miles y miles de páginas a través de la WWW. Es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto presentado de forma estructurada, con enlaces (links) que conducen a otros documentos o a otras fuentes de información (por ejemplo bases de datos) que pueden estar en la propia máquina o en máquinas remotas de la red. Todo ello se puede presentar acompañado de cuantos gráficos estáticos o animados y sonidos seamos capaces de imaginar.
HTML es el lenguaje con el que se construyen las páginas Web. La idea inicial de HTML era describir la estructura y el contenido de un documento, sin embargo la tendencia actual es utilizarlo también como un lenguaje de descripción, controlando el aspecto de documento (tipografía, posicionado, etc.).
Por supuesto, la estética de los documentos escritos en HTML no se limita a texto digamos normal; consigue todos los efectos que habitualmente se pueden producir con un moderno procesador de textos: negrita, cursiva, distintos tamaños y fuentes, tablas, párrafos tabulados, sangrías, incluso texto y fondo de página de colores, y muchos más.
El programa encargado de interpretar el texto HTML es el navegador o browser. El navegador puede recibir el código HTML junto con los elementos integrados en la página (imágenes, sonidos, vídeo, etc.) desde un servidor remoto o de un servidor de red (utilizando el protocolo de transferencia de hypertexto y HTTP) o leer las páginas directamente de nuestro disco duro(sin un protocolo de transmisión tipo HTTP, sino el equivalente a abrir un documento con un procesador de textos).
En HTML todas las codificaciones de efectos en el texto que lo forman no son más que instrucciones para el visualizador. Partiendo de esto, se entiende el porqué no se ve lo mismo con todos los visualizadores. Depende de cómo estén diseñados y para qué versión de lenguaje estén diseñados.
Hasta no hace mucho los programadores de HTML cobraban una barbaridad por crear una página Web. Eran los inicios del boom WWW.
HTML no es un lenguaje de programación como puede serlo C, Pascal o Java; HTML tan sólo es un lenguaje para crear documentos en formato electrónico, una forma de definir efectos en el texto de manera similar a como se hacía en los antiguos procesadores de texto pero con complicados y poderosos servidores de información.
En la actualidad cualquiera puede crear sus páginas Web; puede escribir el código HTML directamente o utilizar alguno de los excelentes editores. Muchos usuarios de la Red tienen ya sus páginas Web publicadas, gracias al espacio que les brindan la mayoría de los proveedores de acceso. No es necesario que la pagina Web este publicada en Internet; podemos utilizarla tan solo para consultas en la red de área local para realizar consultas internas de la empresa u organización(Intranet).
La unidad fundamental en lenguaje HTML es el " tag " o la marca. Cada estructura de texto se encerrará entre una marca de inicio y otra de fin.
En HTML las marcas vienen delimitadas con los signos <(inferior) y >(superior). De este modo el navegador sabe que debe interpretar código comprendido entre estos símbolos.
Esqueleto Básico de un documento HTML
<HTML>
<HEAD >
<TITLE >Título del documento < /TITLE >
< / HEAD >
BODY
Cuerpo del documento
</BODY >
< / HTML >
Esqueleto Básico de la estructura HTML
Entre <html> y </html> encontraremos la definición de la página propiamente dicha. En el bloque delimitado por <head> y </head> se establecen ciertas características de la página, tales como el título, quien las construyó, etc. De estas características de la página, la única que es obligatoria declarar es el título. Esto se hace mediante el par de tags <title> y </title>.
Por último está <body> y </body>, entre los cuales se encierra toda la información que el navegador debe mostrar.
No todos los tags son iguales; hay alguno cuyas acciones están acotadas por las funciones que cumplen, por lo que no es necesario incluir otro tag para finalizar su acción. Algunos de ellos son:
<br> Genera un retorno de carro
<p> Equivale a un retorno de carro + un avance de línea
<hr> Crea una línea divisoria horizontal.
Existen tags que llevan parámetros asociados cómo:
<img src="/cm/marzo.gif" width=104 height=97>
Este tag <img> permite incluir imágenes dentro de una página. El parámetro src indica la ruta de acceso al archivo donde está la imagen, mientras que width y height detallan su ancho y alto en pixeles.
Formatear Texto
Hay códigos qué afectan a la distribución y aspecto del texto. Los más importantes agrupados en las categorías Tamaño, Tipo de letra y posición.
Tamaño
Lo más destacable aquí son los seis niveles de cabeceras. Por ejemplo:
<H1> Guía de Redacción HTML</H1>
<H2> Notas sobre esta Guía</H2>
<H3> Un Poco de Historia</H3>
Esta guía fue elaborada…
Se puede cambiar el tamaño de las palabras utilizando los códigos:
<FONT SIZE= +2> estas palabras </FONT>
Tipo de letra
La siguiente tabla muestra los principales códigos que afecta al aspecto del texto.
Atributo Sintaxis Resultado
Énfasis(cursiva) Quiero<EM>desacar<EM> esto. Quiero destacar esto.
Fuerte(negrilla) Quiero<STRONG>recalcar</STRONG>. Quiero recalcar esto.
Monoespaciado Teclea <TT>estos códigos</TT>. Teclea estos códigos
Posición
Los códigos principales son los que provocan salto de línea y el que se centra.
El código <P> señala el inicio de un párrafo y provoca un salto de línea precedido por un renglón en blanco.
El código <BR> hace lo mismo pero sin renglón en blanco.
Los códigos <center> y </center> centran el texto entre los márgenes.
Elementos Textuales
Caracteres y símbolos
Muchos de los caracteres que necesitamos representar, letras acentuadas, requieren un trato especial en HTML. Un buen editor nos irá haciendo la conversión automáticamente, pero a veces resulta necesario recurrir a los códigos. Aca se ve una tabla de los principales:
á á Á Á é è ü ü
ñ & ntilde Ñ Ñ ç ç © ©
¿ ¿ ¡ ¡ ª ª º º
Caracteres especiales
Listas
Hay varias maneras de tratar listas. Las principales son la lista numerada(OL) y de los puntos conductores(UL) que tiene un par de variantes. También hay una lista pensada para glosarios de términos (DL).
Una Lista Numerada (Ordered List)
<OL>
<LI>Animales
<LI>Plantas
</OL>
Se ve así:
1. Animales
2. Plantas
Una lista No Numerada (Unordered List)
<UL>
<LI>Animales
<LI>Plantas
</UL>
Se ve así:
. Animales
. Plantas
Un Lista de Definiciones (Definition List)
<DL>
<DT> Animales
<DD> Son unos bichitos que algunos tienen espinazo y otros no.
<DT> Plantas
<DD> Están vivas pero no les puedes llamar bichos. No sería correcto.
</DL>
Se ve así:
Animales
Son unos bichitos que tienen espinazo y otros no.
Plantas
Están vivas pero no se les puede llamar bichos. No sería correcto.
A veces resulta útil anidar las listas para representar un esquema jerárquico. Un ejemplo:
<UL>
<LI>Animales
<UL>
<LI>Vertebrados
<LI>Invertebrados
</UL>
<LI>Plantas
<UL>
<LI>Verdes
<LI>Nucleares
</UL>
</UL>
Se ve así:
. Animales
. Vertebrados
. Invertebrados
. Plantas
. Verdes
. Nucleares
Tablas
Las tablas nos permiten distribuir las cosas en columnas y en filas, aprovechando mejor el ancho de página. Se puede especificar un montón de parámetros de formato tanto de tabla (TABLE) como de filas (TR) y las celdas (TD) individuales. Los principales son:
<TABLE>
<TR><TD></TD>Mallorca</TD></TD>Menorca</TD><TD>Ibiza</TD></TR>
<TR><TD>Extensión</TD><TD>Grandecito</TD><TD>Mediano</TD><TD>Chiquitín</TD></TR>
<TR><TD>Población/TD><TD>Mallorquines</TD><TD>Menorquines</TD><TD>Ibicencos</TD></TR>
<TABLE>
Se ve así
Mallorca Menorca Ibiza
Extensión Grandecito Mediano Chiquitín
Población Mallorquines Menorquines Ibicencos
Podemos mejorar el aspecto de la tabla insertando atributos dentro de los códigos de TABLE, TR, y TD. Como el ancho de la tabla (WIDTH) y del reborde (BORDER),añadiendo un título(CAPION) debajo (ALIGN=BOTTOM) y formateamos las celdas de la primera fila y columna como cabeceras (TH) que salen en negrilla y centradas.
<TABLE BORDER=2 WIDTH=75%>
<CAPTION ALIGN=bottom>Datos de Baleare.</CAPTION.
<TR><TD></TD>Mallorca</TD></TD>Menorca</TD><TD>Ibiza</TD></TR>
<TR><TD>Extensión</TD><TD>Grandecito</TD><TD>Mediano</TD><TD>Chiquitín</TD></TR>
<TR><TD>Población/TD><TD>Mallorquines</TD><TD>Menorquines</TD><TD>Ibicencos</TD></TR>
<TABLE>
Se ve así:.
Mallorca Menorca Ibiza
Extensión Grandecito Mediano Chiquitín
Población Mallorquines Menorquines Ibicencos
Editores de HTML
Los editores existentes en el mercado eran bastante simples y pocos funcionales; y no soportaban muchos tags especiales ni tampoco los frames. Por esta razón para un diseño complejo, era imprescindible recurrir a un editor de textos convencional y abrir los archivos HTML, modificar el código y obtener el resultado esperado. Por lo tanto era necesario conocer el lenguaje HTML, para conseguir un Web mínimamente profesional.
Pero ahora existen editores complejos y WYSIWYG, por lo que ya no es imprescindible conocer el lenguaje HTML:
- FrontPage Express, incluido con Microsoft Internet Explorer 4.0.
- FrontPage 98, con las mismas características que el anterior.
- el editor de Netscape (Netscape Composer).
Links o enlaces de hypertexto
El link es uno de los elementos más importantes, es posible pasar de un Web a otro, alojados en servidores remotos, separados por miles de kilómetros.
En general, los enlaces tienen la siguiente estructura:
<A HREF="xxx"> yyy </A>
dónde xxx es el destino del enlace e yyy es el texto indicativo del enlace (con un color especial y generalmente subrayado).
En el parámetro HREF del tag <A> para crear los enlaces se debe especificar el URL o dirección a la cual apunta el enlace. Estas direcciones pueden ser absolutas o relativas.
En el caso de direcciones absolutas especificamos la dirección completa a la que apunta el enlace.
Por ejemplo:
<A HREF= http://www.pcplus.es/pruebas/test/mi_página.html>Enlace</a>
Si nuestro enlace apunta a una página dentro del mismo servidor, debemos utilizar direcciones relativas, es decir sin hacer referencia a la dirección de Internet (en el ejemplo anterior sería http://www.pcplus.es/)
Por ejemplo <A HREF ="../test2/ejemplo.html">Enlace2</a>
En el ejemplo anterior, las palabras "Enlace2" son un enlace a la página ejemplo.html situada en el directorio test2, al mismo nivel en el árbol de directorios que la página donde se encuentra el enlace. Para ascender niveles en una estructura de árbol de directorios se utilizan los dos puntos(exactamente igual como se hace en MS-DOS o Unix).
Tipos de enlaces
Podemos distinguir cuatro tipos de enlaces:
1. Enlaces dentro de la misma página
2. Enlaces con otra página nuestra
3. Enlaces con una página fuera de nuestro sistema
4. Enlaces con una dirección de email
1. Enlaces dentro de la misma página
En el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada.
En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la página a donde queremos saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en color (en forma de hipertexto). Su estructura es, entonces:
<A HREF="#marca"> YYY </A>
Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="marca"> </A>
Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta:
<A HREF="#final"> Pulsa para ir al final</A>
Que resulta como: Pulsa para ir al final
Y en el final del documento esta otra etiqueta:
<A NAME="final"> </A>
2. Enlaces con otra página nuestra
Puede ser que tengamos una sola página. Pero lo más frecuente es que tengamos varias páginas, una inicial o principal y otras conectadas a ella, e incluso entre ellas mismas.
En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del fichero:
<A HREF="pag2.html"> Ejemplo </A>
Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página, adonde va por defecto, en ese sitio tenemos que colocar una marca, y completar el enlace con la referencia a esa marca.
Una observación importante: Suponemos que la página en la que escribimos esta etiqueta y la otra página a la que quiero saltar están en el mismo directorio. Porque pude ocurrir que e organizamos el sitio del Web con un directorio principal, y otros subdirectorios auxiliares. Si la página a la que quiero saltar está, por ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/pag2.html".
Y a la inversa, si quiemos saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendría que ponerse "../pag2.html". Esos dos puntos hace que se dirija al directorio anterior. Obsérvese que se debe utilizar el símbolo / para indicar los subdirectorios, y no este otro , que es propio únicamente de Windows.
Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un único directorio, pero esto tiene el inconveniente de que esté todo más desordenado, y sean más difíciles de hacer las futuras modificaciones.
3. Enlaces con una página fuera de nuestro sistema
Si queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor distinto al que soporta nuestra página), es necesario conocer su dirección completa, o URL (Uniform Resource Locator). El URL podría ser, además de la dirección de una página del Web, una dirección de ftp, gopher, etc.
Una vez conocida la dirección (o URL), lo colocamos en lugar de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la página de Netscape (cuyo URL es: http://home.netscape.com/), la etiqueta sería:
<A HREF="http://home.netscape.com/"> Página inicial de Netscape </A>
Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas, pues los servidores UNIX sí las distinguen).
4. Enlaces con una dirección de email
En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la dirección de email. La estructura de la etiqueta es:
<A HREF="mailto: dirección de email"> Texto del enlace </A>
Un ejemplo
Comentarios a <A HREF="mailto: info[arroba]oninet.es">Soporte Técnico</A>
Ejemplo práctico
<HTML>
<HEAD>
<TITLE> Mi pagina del Web – 3 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis paginas favoritas </H1>
</CENTER>
<HR>
Estas son mis paginas favoritas:
<P><A HREF="http://home.netscape.com"> Netscape </A>
<BR> <A HREF="http://www.microsoft.com"> Microsoft </A>
<BR> <A HREF="http://www.yahoo.com"> Yahoo! </A>
</BODY>
</HTML>
Imágenes
Podemos incorporar imágenes, la estructura de la etiqueta es:
<IMG SRC="imagen.gif">
Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga).
Al programa navegador se le indica el nombre y la localización de un fichero que contiene una imagen.
Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT
<IMG SRC="imagen.gif" ALT="descripción">
Con el comando ALT se introduce una descripción (una palabra o una frase breve) indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra página con un programa navegador en forma de texto solamente. Ya que no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Pero no es sólo por esto. Hay casos, en los que se utiliza una imagen como enlace a otra página. Si se omitiera este comando, los que utilizan dichos navegadores no podrían de ninguna manera acceder a esas páginas.
Con respecto a la localización del fichero de esa imagen, si no se indica nada especial, como en el caso que se ha expuesto, quiere decir que el fichero imagen.gif está en el mismo directorio que el documento HTML que estamos escribiendo. Si no es así, se siguen los mismos criterios que los indicados para los enlaces.
Al igual que una página con la que queremos enlazar puede estar fuera de nuestro sistema, (en cuyo caso había que indicar su URL o dirección completa), podemos cargar una imagen que no esté en nuestro sistema siguiendo el mismo método, es decir, indicar en la etiqueta el URL completo de la imagen. Aunque esto no es muy aconsejable, pues alargaría innecesariamente el tiempo de carga de nuestra página.
En lo que se refiere a las direcciones absolutas y relativas se pueden aplicar en el caso de las imágenes. Un buen consejo al diseñar la Web es crear un directorio para las imágenes. De este modo siempre deberemos apuntar bien al directorio de imágenes para que aparezcan las imágenes correctamente en la página Web.
Los formatos más utilizados son del tipo:
Formato GIF
- Apropiado para logotipos y además arte gráfica, para imágenes con colores sólidos y continuos(especialmente para imágenes con bordes definidos, u texto o un dibujo). Este es el único soportado por cualquier navegador existente.
- Además comprime la información de la imagen sin pérdida de información.
- Este formato soporta un máximo de 256 colores.
- Un GIF puede ser transparente; la transparencia permite crear imágenes que comparten el mismo color de fondo de la página, simulando una apariencia no rectangular.
Formato JPEG
- Apropiado para imágenes complejas o para fotografías, ya que es bueno para trabajar con imágenes con múltiples patrones y contrastes.
- JPEG comprime y destruye parte de la información de la imagen.
- Soporta hasta 16,6 millones de colores.
- Un JPEG no puede ser transparente.
Teniendo en cuenta todo esto, no es bueno convertir un GIF a JPEG o viceversa. Se pierde gran parte de la calidad de imagen, además puede ocupar más espacio(en KB) que en el formato anterior.
Estos formatos gráficos cuentan con ciertas variaciones que permiten agilizar la visualización de sus contenidos hasta hacer simples animaciones. Ellos son:
- Los GIF intercalados que cargan las imágenes acrecentando el nivel de detalle: comienzan por verse borrosas y van tomando formando hasta que se completan; esto sirve para la espera por los gráficos de la página no sea ardua.
- Los JFEG progresivos, funcionan de manera similar a los GIF intercalados: primero muestran una imagen de baja resolución que luego se va completando con una alta resolución; esta clase de formato JPEG es bastante nueva, por lo que no todos los navegadores la soportan.
- Los GIF animados conocidos también como GIF89a; este formato permite crear simples animaciones que dan un impacto especial y atraen la atención de los visitantes.
Los GIFs animados están soportados por la gran mayoría de los navegadores, además debemos tener en cuenta que ocupan un mayor número de byte.
.
Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un fichero grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello. Además las imágenes incrustadas en páginas Web son en partes responsables de los cuellos de botellas existentes en laWWW.
Algo bueno relacionado con el HTML es incluir en el tag <IMG> los parámetros WIDTH y HEIGHT, es decir el alto y el ancho de la imagen. Por defecto, HTML toma las dimensiones reales de la imagen. Pero si incluimos estos valores la página HTML se presentará mucho más rápido en pantalla(el texto) mientras se acaban de transmitir las imágenes.
Posición de las imágenes
Para elegir la posición de la imagen con respecto al texto hay distintas posibilidades. La más sencilla es colocarla entre dos párrafos, con un titular a un lado. Los navegadores más actuales (como el Netscape Navigator y el Microsoft Internet Explorer) permiten que el texto pueda rodear a la imagen.
De momento nos vamos a limitar a escoger la posición del titular con respecto a la imagen (sí es que queremos ponerle un titular, claro está). Se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera:
<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba
<Imagen: isla>Titular alineado arriba
<IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio
<Imagen: isla>Titular alineado en medio
<IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo
<Imagen: isla>Titular alineado abajo
Imágenes utilizadas como enlace
Podemos utilizar una imagen como enlace a otra página. Para estos casos se utilizan generalmente imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen.
La estructura general de un enlace es:
<A HREF="xxx"> yyy </A>
donde xxx era el destino del enlace e yyy el texto del enlace . En este caso sustituimos xxx por el nombre del fichero de la página a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen
<A HREF="pag2.html"><IMG SRC="hombre.gif"></A>
También podemos utilizar una imagen para enlazar con otra imagen. En este caso sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e yyy
<A HREF="isla.gif"><IMG SRC="casa.gif"></A>
Por último, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e yyy (lo que aparece en pantalla como el enlace) por el texto.
<A HREF="isla.gif"> un paraíso tropical </A>
Un tipo de imágenes del que se hace abundante uso y que sirven para mejorar la presentación de la página son los iconos, botones, barras separadoras, etc. A pesar de su tamaño o forma, son imágenes como cualquier otra.
Editores de imágenes
|
Producto |
Descripción |
Plataforma |
Descripción en Internet |
Categoría |
|
Animagic GIF |
Animación GIF |
Windows 95 |
Http://www.rtlsoft.com/animagif |
Shareware |
|
GIF Construction Set |
Animación GIF |
Windows (todas) |
Http://www.mindworkshop.com |
Shareware |
|
Graphic Workshop 1.1 |
Editor de imágenes |
Windows (todas) |
Http://www.mindworkshop.com |
Shareware |
|
Paint Shop Pro 4.0 |
Editor de imágenes |
Windows 95 |
Http://www.jasc.com |
Shareware |
|
MS Image Composer 1.0 |
Editor de imágenes |
Windows 95 |
http://www.microsoft.com |
Shareware |
Frames o marcos
Con los frames se puede dividir una página HTML en varias y navegar dentro de cada frame. Por ejemplo es muy común utilizar un frame para situar en él un menú o iconos de navegación dentro del Web que permanece siempre en pantalla, mientras que las páginas van apareciendo en el segundo frame.
Podemos dividir las páginas HTML con los frames horizontalmte(líneas) o verticalmente(columnas). También se admiten frames anidados.
Los formularios
HTML permite crear un formulario(con listas de selección, menús desplegables, campos de texto, botones, etc.) para que el usuario pueda introducir cualquier tipo de información y la comunicación sea bidireccional, dejando de ser un mero espectador. La información introducida en el formulario es tratada en el servidor por un programa(CGI) y puede responder con una nueva página presentada en el navegador. La programación CGI es bastante más compleja que el HTML.
Sin embargo, sin necesidad de utilizar programas CGI podemos recibir información de los visitantes de nuestra Web vía correo electrónico. La cabecera de todo formulario en HTML es el tag<FORM>. Uno de sus parámetros es ACTION.
EJ: ACTION=MAIL-TO: email, donde "email" es nuestra dirección de correo electrónico, de esta manera recibiremos el contenido de los campos del formulario directamente en el buzón de correo.
Unidad 4 "Hardware y Software"
Hardware y Software
Las personas o empresas que deseen publicar sus páginas Web en un centro proveedor de Internet o bien que deseen montar su propio servidor, antes de publicar sus páginas, deben tener en cuenta varios aspectos como son seguridad, velocidad de acceso y servicios.
Al contactar con cualquier centro proveedor de Internet éste nos informará de todas sus características técnicas: el ancho de banda que tiene, el número de usuarios, las máquinas que tiene, los sistemas de seguridad que implementa y que sistema usa para tratar la información que se desea colocar en el centro.
Hardware
Tipos de línea
Actualmente la forma más extendida de acceder a un servidor es por medio de una Frame Relay, que es una técnica de conmutación por paquetes que nos servirá para enviar información. Esta técnica básicamente lo que hace es transferir a los terminales las funciones de flujo de control, corrección de errores y otras que anteriormente hacían los protocolos de comunicación como X.25. Frame Relay esta orientado a paquetes como X.25 y también transparente a los protocolos como el modo circuitos.
Router
Estos dispositivos operan en el nivel de red y permiten la interoperatividad entre redes diferentes eligiendo siempre el mejor camino para enviar un paquete.
El router necesario se debe adaptar a la información que nos llega por la línea de acceso a información que la máquina pueda entender. La elección del router vendrá especificada por el protocolo que se use. Además se debe configurarlo.
Los routers son tolerantes a fallos de enlaces(rutas alternativas), también soportan el desorden y duplicidad de paquetes, si bien los routers deberían minimizar la pérdida adicional de paquetes aunque el nivel no garantiza la entrega fiable de paquetes. Los routers introducen un tiempo de procesado adicional.
Servidores(Hardware)
Servidores son las máquinas donde hay depositada la información que deseamos publicar en Internet. Esta información puede estar distribuida en varios ordenadores o en un ordenador más grande. Tanto sise trata de una u otra opción, debemos tener en cuenta varios aspectos físicos.
- Memoria RAM
La mayoría de páginas que hay en Internet son HTML, por lo que una vez se haya publicado una de ellas, esta pasará a la RAM de nuestro servidor, por lo que sí un usuario viene inmediatamente después, se encontrará con la página de una manera mucho más rápida que no el usuario anterior. Por lo tanto, una buena cantidad de RAM siempre hará que nuestro servidor no tenga que hacer tantos accesos a disco duro, por lo que la velocidad de servicio aumentará. El mínimo que se considera para una PC es 8MB.
Hay que tener en cuenta que si trabajamos con páginas que se generan de forma aleatoria, que se generan con una consulta a una base de datos o simplemente a gusto del usuario, diremos que la RAM no juega un factor tan importante ya que es muy difícil que una misma sea cargada de una forma continuada.
- Disco Duro
Debido a toda la información que reside en disco duro, debemos tener una velocidad de acceso a éste lo más elevada posible. Con un par de imágenes, un fondo que no sea liso y un texto más o menos grande nos vamos a un tamaño de una página de unos 25-35Kb. Si tenemos en cuenta que las imágenes normalmente se encuentran en directorios distintos a los documentos HTML, y que por lo general los discos duros se encuentran llenos, se recomiendan el uso de discos duros SCSI o SCS II ya que tienen una velocidad de respuesta mayor a la de los discos duro normales (IDE).
Debido a que en todas las plataformas los navegadores Web requieren mucho espacio de disco libre el mínimo requerido está entre 50 y 100Mb libres.
- Procesador
Con las páginas HTML, no se gana mucho con la velocidad del procesador, aunque también es un factor importante. Pero si la página Web que nosotros generamos se hace a partir de una consulta a una base de datos o, a parte de la página Web, se generan archivos de consulta para guardar o imprimir, esto se realizará básicamente con el procesador, y cuanto más potencia se tenga(velocidad de proceso) estas se generarán de una manera más rápida.
Para las PC, se desea al menos un 486. Mientras más rápido el486 mejor, siendo el mínimo aceptable alrededor de 66MHZ. Mejor aún sería un Pentium 100MHz o un Pentium 133MHz.
Necesidades de Hardware para PC IBM y compatibles
|
Componente |
Mínimo |
Preferible |
|
Disco Duro |
50 Mb libres |
200Mb libres |
|
Memoria (RAM) |
4 – 8 Mb |
8 – 32Mb |
|
Velocidad de CPU |
66 a 486 MHz |
Pentiuma 133Mhz omejor |
A parte de los aspectos físicos del servidor, hay que tener en cuenta quien los gestiona. Esto es el sistema operativo. Máquinas como Silicon Grafhics o Sun Microsystems son un claro exponente de potencia y seguridad. Sus sistemas operativos, sus componentes de hardware y software hacen que estos ordenadores sean bastantes caros, pero en muchos modelos casi infranqueables por los temidos hackers.
Otras soluciones más económicas son el uso de servidores como los de IBM, Siemens, HP, u otras marcas que ofrecen soluciones a nivel hardware que se adaptan a las que hemos citado antes ya que ofrecen software o sistemas operativos más económicos.
Software
Servidores (Software)
Cuando hablamos de servidores a nivel software nos referimos a los programas que necesitamos para que los usuarios se beneficien de los servicios que se ofrecen. Algunos de estos servicios son:
- DNS(Domain Name Server)
Conocido como servidor de dominio. Este servidor lo que hace es traducir la dirección que enviamos con formato texto, en una dirección IP. Si reconoce esa dirección, dentro del dominio, la sirve; si no, reenvía la dirección a un servidor inmediato superior que si tampoco la reconoce, actuará de la misma manera.
- WWW(Word Wide Web)
Este servicio utiliza el protocolo HTTP ( Hyper Text Transfer Protocol) que está basado en la filosofía cliente-servidor y se utiliza para intercambiar documentos entre distintos ordenadores.
Este servidor debe soportar el HTML(Hiper Text Markup Lenguaje), que es el lenguaje usado en la realización de páginas Web, para que pueda ser tratado en todas las plataformas.
- FTP(File Transfer Protocol)
Lo utilizamos para poder intercambiar información en forma de archivos entre dos ordenadores. Generalmente, los usuarios utilizan el FTP para poder poner sus páginas Web en su servidor de una manera más clara, rápida y segura, ya que cada usuario normalmente tiene acceso a su directorio particular.
- Pop3(Post Office Control)
Representa la central de correos del usuario. Una vez que se ha recibido la información de para quién es y de quién es el mensaje por parte del SMTP, actúa el Pop3.
Esto son los servicios principales e imprescindibles, pero no los únicos. Otros servicios que se pueden añadir son sevidores de audio, vídeo, etc.
Otras características
Otros aspectos importantes a tener en cuenta son:
Direcciones IP
Basadas en el protocolo TCP/IP el cual ofrece un servicio no orientado a conexión, es decir, que cada trama en la que se ha dividido un paquete puede ser enviada por un camino distinto y también puede llegar de forma desordenada. El control de flujo y de errores se realiza en los terminales, por lo que hace que el envío de los paquetes sea bastante rápido. Cada máquina tiene asociado un número de 32 bits, al que llamaremos dirección IP. Esta dirección se divide en dos partes: NETID y HOST ID.NETID: esta parte es asignada por el NIC(Network Information Center).
Cuando la red o servidor no va a ser visto por ningún usuario externo o por ninguna red externa, no tenemos que pedir nada a este organismo. Según el tamaño que tenga la red, tendremos 8, 16 o 24 bits para poder identificarla. HOST ID: Identifica cada máquina dentro de la red, esta parte corre a cargo del redmaster (administrador de red)
Cada dirección vendrá representada, por cuatro números decimales separados por un punto entre sí, 194.168.100.7, que representará el valor binario de cada campo. De esta manera podemos asegurar que cualquier dirección, que se haya hecho pública podrá ser accesible siempre y cuando se cumplan los permisos necesarios para poder acceder a ella.
Servidor DNS
Algunas de las características más importantes que rigen el DNS.
Por lo general los usuarios prefieren asociar a un nodo un nombre simbólico en lugar de una dirección numérica, esto es www.xxxxxxx.es en vez de la dirección IP UUU.XXX.ZZZ.
EL DNS se puede entender como un servicio de directorios de Internet que proporciona información acerca de la asociación entre el nombre simbólico de un nodo con su dirección IP. Otra de sus particularidades es que divide la red en dominios y subdominios a partir de una estructura arbórea que identifica por caminos, por lo que una zona será una región compuesta de uno o más dominios y subdominios gestionada por un único administrador. Cada nodo se identifica por una etiqueta o alias, de longitud inferior a 63 caracteres, y cada nombre de dominio de un nodo del servicio DNS está formado por una concatenación de etiquetas, cada una de ellas separada por un punto.
EL servicio DNS se basa en una estructura cliente-servidor, donde los dominios superiores están divididos en tres grandes grupos: gestión(org), dominios compuestos por tres caracteres(net), y dominios compuestos por dos caracteres(resto de países). Todos estos gestionados por el NIC.
El DNS actúa como una base de datos distribuida donde los servidores DNS intercambian información en modo jerarquizado, los servidores son responsables de jerarquizar las zonas teniendo conocimiento de sus servidores vecinos y almacenando la información en los RR(Resource Records).
Nota del editor
Buscas hosting de calidad? asegura tu tranquilidad contratando tu plan de hospedaje con Okhosting, una empresa confiable y con experiencia en México, en todos nuestros servicios de alojamiento web ilimitado, gratis asesoría ayuda y orientación para principiantes y avanzados, compra tu dominio .MX y si aun no tienes sitio web utiliza nuestro programa para hacer paginas web en minutos, te invitamos a conocer nuestros planes de alojamiento ahora con mas espacio y con mas funciones profesionales. OKhosting.com todo lo necesario para estar en internet
Acceso telefónico
Teniendo un servidor conectado(la máquina donde hay la información) a un módem o batería de módems, se puede recibir tantas llamadas como módems tengamos.
Una opción interesante del acceso telefónico es poder administrar de forma remota el servidor, con una simple llamada, poder estar trabajando de forma remota con un equipo que se encuentra a una cierta distancia física, siempre que se tengan los permisos necesarios para poder hacerlo.
CGI’s
CGI(Common Gateway Interface) es un estándar de programación que actúa como interfaz entre un programa cliente (navegador), un servidor HTTP y una aplicación programada de forma tradicional. Los programas CGI pueden escribirse con cualquier lenguaje de programación.
Gracias a la programación CGI(anterior al lenguaje Java) se puede proporcionar interactividad al sistema Web, tales como tratamiento de formularios introducidos en el cliente, consulta y/o modificación de bases de datos remotas, estadísticas de acceso a una determinada página Web, animaciones con gráficos, etc.
La idea de la programación CGI es construir el documento HTML correspondiente a un enlace de hypertexto en el mismo momento en el que se hace clic sobre el enlace. El documento se envía al cliente a medida que se construye. Sin almacenarse nunca en un fichero.
Esto se realiza por medio de enlaces ejecutables. El cliente indica el nombre de un fichero, siempre mediante un URL, no para recibir el contenido sino para solicitar su ejecución en el servidor. Este ejecuta el programa indicado y devuelve al cliente la salida estándar de dicho programa(es decir, lo que se hubiera obtenido en la pantalla al ejecutar el programa manualmente desde el "prompt" del sistema operativo).
Esta salida estándar es lo que constituye el documento HTML. Los programas ejecutados a partir de enlaces ejecutables reciben el nombre de scripts CGI.
Los scripts CGI residen en un directorio determinado dentro de la estructura de datos del servidor, que generalmente, suele llamarse cgi-bin (aunque algunos servidores permiten que dichos scripts se ubiquen en otros directorios). Además los ficheros CGI deben tener permisos de acceso y ejecución para todos los usuarios. Esto es especialmente importante en sistemas operativos como Unix.
Al ser ejecutables por cualquier usuario externo es conveniente evitar que esos programas adquieran privilegios de superusuario.
Los scripts CGI pueden construirse en cualquier lenguaje, la única limitación la marca el sistema sobre el que está ejecutándose el servidor HTTP.
Los lenguajes utilizados en la programación CGI son, con diferencia, el Perl y el C. Esto se debe, principalmente a que la mayoría de servidores HTTP corren sobre máquinas Unix. Las principales ventajas del Perl son su carácter interpretado ya que simplifica el desarrollo y las pruebas, los potentes comandos de tratamiento de ficheros con que cuenta, y las numerosas extensiones con las que se puede ampliar el ámbito y funcionalidades del lenguajes.
Continua la tercera parte del articulo que es una pagina web aqui