DiseñoPaginasWebPro

= media type="custom" key="7349861" align="right" =

=**Cómo crear un sitio WEB profesional**=

Este manual pretende dar a conocer tanto a los recientemente iniciados al mundo de Internet como a los desarrolladores actuales de sitios WEB las técnicas, normas y trucos a usar para que su sitio presente tanto un aspecto como un servicio de calidad. Como ya conocemos, Internet nos ofrece la posibilidad de lanzar diferentes tipos de servicios, FTP, Correo electrónico, Accesos remotos, News, WEB,IRC, Video Conferencia, etc. Este tratado se centra especialmente sobre los servicios WEB, aunque se incluyen en los mismos notas de ofrecer enlaces a otros servicios consultables por el cliente desde su navegador. Especialmente dirigido a los desarrolladores y empresas que deseen implentar su imagen coorporativa en Internet y servicios de comercio electrónico. Se incluyen links ( enlaces ) a las herramientas mas utiles, así como algunos ejemplos que clarifiquen el tratado, pero en todo caso, esto no es un manual de programación en ninguno de los lenguajes HTML, XML, PHP, Perl, etc. Mas bien, tratamos de cómo usar e implementar dichas herramientas para conseguir el efecto deseado en nuestras páginas WEB.
 * Introducción.**

**El medio y el mensaje** Internet es por supuesto algo mas que un envio de un mensaje unidireccional. Es un sistema participativo, interactivo.Esto es una de las bases de su grán éxito. Es necesario lograr la participación del visitante en el sitio, darle oportunidad no sólo a seleccionar la ruta de navegación sino además a intercomunicarse con nosotros. Y en este nosotros, podemos incluir algún "robot" o programa a tal fin situado en el servidor.Esa es la gran innovación en Internet, es interactivo, en tiempo real, es participativo.

**Redución de costos: la gran trampa ?** Con el boom actual del desarrollo de internet, como medio de comunicación muy atractivo, participativo y aceptado a nivel global, frente a los medios mas tradicionales de publicidad, venta y distribución de productos y servicios, podemos caer en una gran trampa.En una primera fase, podemos pensar que tendremos a un representante, o a un equipo de ellos, de nuestra empresa, trabajando 24 horas al día, 365 días al año y en todos los paises del mundo.Podemos además añadir un canal de ventas directas, con lo cual además a veces ni siquiera requerimos canal de distribución en funcion del tipo de servicio, y consecuentemente esto repercute en un ahorro enorme de costos de venta.Esto es así, pero no es toda la verdad. Estamos viendo parcialmente una realidad, y a veces no hay nada mas erróneo y falso que una verdad parcialmente concebida.

**La "home page"** Esta es la primera página que se presentará al entrar a nuestro nombre de dominio, por lo que su importancia es vital. Sin embargo, debemos tener en cuenta que como veremos mas adelante, no siempre se accede a nuestro contenido a través de dicha página, ya que podemos tener indexadas en buscadores otras páginas con contenidos específicos, entrando el visitante directamente a la página de su interés. En todo caso, la home page o página inicial, debe por norma general ser capaz de :
 * Cargarse rápidamente en la mayoría de las circunstancias. Para ello evitaremos el abuso de imagenes de gran tamaño, de listas largas, que demoren en exceso su carga. Tengamos en cuenta que una gran mayoría de usuarios conectarán a nuestra página, en función de nuestro perfil, desde conexiones de muy baja calidad, donde no llegarán a sobrepasar velocidades de unos 3 kBps ( tres mil bytes o caracteres por segundo ), con lo cual una imagen en dicha home page que mida por ejemplo 80 KB tardará algo más de 30 segundos en llegarle al cliente. Notese que además se pierde cierto tiempo y transferencia en el tráfico, ya que no todo es tráfico útil, habiendo parte de la información que indica durante la transmisión el estado de la recepción de los paquetes, apertura de ficheros, etc. con lo cual el retraso es algo mayor del que podriamos teoricamente calcular.
 * Presentar un menú de navegación comprensible en un vistazo rápido. Muchos sitios adolecen de un gran contenido de información y de enlaces en la misma home page, de manera que cuando buscamos algo, nos cuesta bastante trabajo saber por dónde anda.
 * Dar una idea clara del tipo de sitio al que hemos accedido. Aparte de presentar el logotipo o anagrama de la empresa, deberiamos usar elementos distintivos del tipo de servicio al que estamos accediendo. Para ello, podremos jugar con fondos, imagenes, dibujos y texto explicativo. Como en cualquier medio multimedia, mejor una imagen que un texto.
 * Pensar que debemos abarcar la mayor cantidad posible de la audiencia de nuestro interés. Debemos comprobar que nuestra home page es plenamente accesible y util para todos los usuarios, con independencia del sistema que usen.
 * Usar "detectores" del sistema que tiene el cliente, así como de los plug-in instaslados. Esto evitará que enviemos un contenido Macromedia con Flash a un usuario que no dispone del plug-in, y que le aperecerá una molesta e incordiante pantalla requiriendole a bajar el plug-in. Para complicar algo mas el tema, aún en el caso de que el cliente bajara el plug-in, estos son dependientes de su navegador y de su sistema operativo. Es una buena técnica hacer que sean plenamente legibles nuestros contenidos desde browsers no gráficos, como linx, que aunque muy poco usados, en realidad es casi como nos van a "ver" los buscadores al tratar de indexarnos. Estos detectores, pueden estar realizados con variadas herramientas, en realidad los navegadores nos informan de estos datos, y solo se trata de saberlos capturar y tratar, esto es, si alguien navega con MI Explorer 5.0 y con el JRE instalado, podemos detectarlo antes de enviar un contenido para dicho entorno.
 * Introducir detalles dinámicos, sin abusar de ellos, contribuye a un menor cansancio para usuarios asiduos a nuestra home page, a la vez que dá cierta vida al sitio con muy poco consumo de recursos y prácticamente ninguna perdida de tiempo. Un ejemplo de ello puede ser un reloj horario, una nota de prensa con la ultima noticia, etc.
 * En algunos casos, personalizar la sesión con el cliente, incluso identificando la conexión de éste. Es bueno en algunos diseños enviarle al visitante un mensaje "Bienvenido Mr. Bean, gracías por visitarnos de nuevo". Pero... cómo sabemos quién nos visita ? Para este tipo de información se usan los llamados "cookies" que son pequeños fragmentos de información con un tiempo de vida predeterminado, que se envian al navegador del cliente, y que después, días mas tarde, o incluso años, podremos recoger esa información desde la maquina del cliente para saber quien era.

Básicamente un sitio, debe de estar compuesto por los siguientes elementos: Claro está, que si observamos estos puntos en su conjunto, hay unas lineas generales y objetivos a conseguir, entre los mas importantes es facilitar al visitante la información que busca en cada momento y ganar su confianza en nuestra empresa. Para cubrir estos objetivos, de confianza y de calidad del servicio debemos: >
 * Normas generales sobre nuestro sitio WEB**
 * 1) Página inicial de bienvenida
 * 2) Página donde seamos capaces de convencer al visitante de lo bueno que somos. En estas páginas se incluyen por ejemplo referencias de clientes, premios obtenidos, calidad de los servicios, normativas a las que nos sometemos ( por ejemplo ISO 9002 ), etc.
 * 3) Página que facilite un contacto rápido con nuestra empresa, incluyendo tanto los datos postales como los electrónicos, direcciones e-mail, direcciones de ICQ, canales IRC donde pueden contactar con nosotros, etc.
 * 4) Página de los productos y/o servicios que ofrecemos.
 * 5) Páginas de valor añadido. Estas son las que contribuirán en gran medida a captar a nuestro publico objetivo. El ejemplo mas claro: éste manual que está usted leyendo ahora mismo, corresponde a ésta categoría. Su función es facilitarle información, al mismo tiempo que hemos conseguido que usted visite nuestro sitio... talvez le pueda interesar algo más que le ofertamos durante su visita.
 * 1) Disponer de nuestro propio nombre de dominio en Internet, o si fuera viable, más de un nombre. Quien va a pensar en serío de una empresa que no gasta ni siquiera 70 dolares USA anuales en su sitio WEB ??
 * 2) Manejar servicios adicionales bajo nuestro propio nombre de dominio, por ejemplo news.midominio.xxx, ** [|ftp.midominio.xxx] ** Esto indicará claramente al visitante que tenemos "poder" sobre nuestros servidores DNS y no andamos de prestados como cualquier usuario doméstico.
 * 3) Nunca incluir en el email nombres de terceras compañías. Creería usted en un correo electrónico remitido por ** ibm@arrakis.es ** ?
 * 4) Usar nuestros propios nombres de dominio en todos los servicios. Por ejemplo, si alguien recibe un email de nosotros, y desea curiosear quienes somos, lo mas normal es que se remita a ver las cabeceras del mensaje ( es una buena forma de detectar a tanto inepto que promete el oro y no saben ni de qué están hablando ). Por ello, nuestro correo debe de ser enviado por mail.midominio.xxx y no por un server de una tercera compañía.
 * 5) En los casos en los que se considerara preciso, disponer de un rango de IP exclusivo asignados para nosotros, de como mínimo 16 direcciones. Aunque no las usemos todas, su objetivo es el poder efectuar un registro en RIPE ( ** [|www.ripe.net] ** ) que es el organismo europeo de asignacion de direcciones IP, de manerar que aparezca el nombre de nuestra compañía en dichos registros.
 * 6) Activar lo que damos en llamar "resolucion inversa". Si instala por ejemplo un servicio IRC en sus páginas, cuando los usuarios entren usando su servicio, todos les verán como ** usuario@su_dominio.xxx ** o el nombre que introduzca en la resolución inversa. Además, demuestra nuevamente que tenemos control sobre los servidores de nombre ( DNS ).
 * 7) No incluir links a otros sitios. Es una puerta de invitación al zapping, además de que probablemente, si hemos seleccionado un sitio de calidad acorde a nuestra empresa, cuando el cliente acceda a dicho link el otro sitio puede dar una peor calidad de servicio, en muchos casos ir mucho mas lento. La medida ideal es solicitar autorización del otro sitio para copiar al nuestro parte de su contenido, de manera que se evita que nuestro visitante recibiera posible publicidad o información fuera de nuestro control, así como le garantizamos la calidad del servicio. Es bueno en todo caso facilitar los links originales, procurando no evitar que el cliente pueda ir a otros sitios, pero naturalmente sin invitarle a salir del nuestro cuando esto no es realmente necesario.
 * 8) Incluir servicios adicionales, tales como pagos con tarjetas de crédito, pedidos on-line, comprobación de stocks, etc. Tengamos en cuenta que el cliente quiere información y servicios on-line y en tiempo real. El solicitar del cliente que envie un email o peor aún un fax, para obtener algo que pudiera ser obtenido automáticamente on-line es como si cuando fueramos a una maquina expendedora de latas de refrescos nos dijeran que introduzcamos la moneda con un ojo cerrado, a pie cojito, mirando hacia arriba y cantando el himno a la alegría.
 * 9) Con un poco de rodaje, comprobaremos que muchos clientes preguntan lo mismo, y nuestras respuestas van en el mismo sentido. No es mala idea dar toda esta información con lujo de detalles al cliente, siempre cosa no fácil, procurando no sobrecargar el sitio, pero pretendiendo hacerlo ameno y coloquial como si de la información que damos en una llamada de teléfono se tratara.
 * 10) Internet no tiene fronteras, salvo restricciones impuestas en algunos pocos dictatoriales paises. Aunque nuestra empresa sea de actividad local, no vamos a poder evitar que nos vean desde fuera. Tanto por los visitantes extranjeros que tengamos, como por los propios convecinos, no es mala idea incluir información en otros idiomas.
 * 11) Optimizar al detalle cada página del sitio. Esto es una labor tremenda !!! Para cada navegador usado por el cliente, para cada plug-in instalado en dicho navegador, para cada tipo de conexión e incluso para cada región del visitante.
 * 12) Usar herramientas automaticas que faciliten tanto la visita al sitio como sus actualizaciones. Un ejemplo de ello pueden ser los preprocesadores de imágenes, que si bien incluyen alguna carga extra a nivel del procesador de nuestro servidor WEB, consiguen optimizar el tamaño y caracteristicas ideales de un fichero de imagen antes de enviarlo al cliente.

>
 * Requisitos minimos para dar un buen servicio.**
 * 1) Por supuesto un servidor WEB donde tengamos alojado todo el contenido, que no tenga sobrecargas por otras funciones, preferiblemente en Unix, ya que las diferencias de rendimiento con respecto a Windows ( y no hablemos de seguridad !!! ) son mayores. Esto pasa por servidores con gran capacidad de carga, capaces de soportar toda la demanda de los visitantes, mas los "trabajos" internos del procesador para crear imagenes dinámicas, acceso a bases de datos, etc.
 * 2) Disponer además de cuenta FTP para enviar los ficheros, de un acceso al menos a nivel "shell" o telnet. Idealmente en servidores y redes compartidas usar el protocolo SSH ( es un protocolo con encriptación de todo lo que hacemos, incluidos los login ). Hay cientos de cosas que no se pueden hacer por FTP y que requieren su configuración mediante una cuenta shell al servidor.
 * 3) Usar un servidor HTTP que cumpla nuestros requisitos. Normalemente INTEREC usa Apache, con compilacion interna de PHP incluido en el propio server, y con librerias gráficas incluidas así como interfase a multitud de bases de datos.
 * 4) Posibilidad total de situar programas ejecutables usando diferentes técnicas en el servidor. Esto facilita desde poder incluir un simple contador de visitas hasta poder acceder a grandes bases de datos. Esto son lo que se denominan CGI ( Common Gateway Interfase ) y constituyen la base de toda la construccion de sitios dinámicos e interactivos.En definitiva, poder "ejecutar" en el servidor programas.
 * 5) Disponer de Perl. Perl es uno de los lenguajes interpretados mas usados en los servidores web, y de gran ayuda para multitud de funciones.Su uso en muchos CGI es obligado.
 * 6) Disponer de PHP. PHP, al igual que Perl es otra herramienta de lenguaje interpretado para la contruccion de CGI. Posibilita un acceso fácil a sistemas motores de bases de datos.
 * 7) Disponer de herramientas adicionales de pre-proceso de ficheros, tales como manipuladores de imagenes, con los que podemos incluir titulaciones sobre imágenes "en el aire", o sea bajo demanda. Otras caracteristicas por ejemplo de un pre-procesador de imagen, es convertir tamaños, colores, formatos, tipo de fichero, calidad de compresión, etc. y todo ello se puede programar sobre la marcha, en función de las caracteristicas propias del visitante a nuestro sitio.
 * 8) Disponer de C/C++ y otros lenguajes compilados. Para tareas muy repetitivas, de gran carga, es mejor usar aplicaciones compiladas que no requieran interpretes externos de código, aunque su actualizacion sea mas tediosa, ya que hay que compilar y linkar el código.
 * 9) Servicios adicionales en la parte del servidor, como pudieran ser streams RealMedia para contenidos de video y audio, CGI de las funciones mas normales usadas, así como gran cantidad librerías para CGI de gran utilidad para cualquier desarrollador.
 * 10) Sistema de seguridad bien implementado y que garantice nuestro servicio ante posibles ataques, incluyendo desde sistemas de quotas de grupos y usuarios sobre las particiones de disco que usamos ( esto evita por ejemplo, que nos "saturen" nuestro sitio simplemente bombardeandonos con muchos email de gran tamaño ) hasta firewalls que controlados por procesos automaticos detecten y traten en consecuencia cualquier ataque.
 * 11) Procesos automaticos de ejecución de tareas. Por ejemplo, check de estado de quotas del grupo, de funcionamiento de procesos, mediante herramientas incluidas en casi todos los sistemas operativos. Una aplicación clásica puede ser elaborar unos resultados estadisticos sobre nuestro sitio todas las noches a determinada hora. Estos procesos pueden por ejemplo ejecutar un comando con otros permisos a partir de una captura de datos efectuada por un CGI.
 * 12) Servicios de estadisticas, medidas tanto a nivel de visitas y tráfico como a nivel de caudales para nuestro sitio, detectando posibles cuellos y atascos en nuestras transferencias a los visitantes. Con ellos podemos ver gráficas claras con los picos, y si estos fueran recortados por nuestra capacidad de proceso o por nuestra capacidad de lineas de comunicación.
 * 13) Servicio de asesoramiento, formación y cursos a los diseñadores WEB, sobre el uso de herramientas como Perl, PHP y C/C++, uso de motores de bases de datos, seguridad y todo lo que va a condicionar que nuestros diseñadores no se queden en ser meros creativos a la hora de enfrentarse a un mundo muchas veces nuevo para ellos y en los que lamentablemente en muchos casos no pasan de manejar un editor fácil de HTML.


 * Funciones con JavaScript**

JavaScript es un lenguaje de fácil uso que podemos insertar en nuestras páginas, o bien referenciar como un fichero de código externo, que puede estar incluido en un directorio de acceso restringido en caso de que no queramos que nuestro código JavaScript sea visible. No confundamos JavaScript con JAVA, ya que son cosas bien diferentes. JavaScript nos permite saltar de páginas, hacer links automáticos, detectar el navegador que usa el visitante, chequear los campos de un formularío relleno por el visitante y muchas cosas más. Sin embargo algunas de las funciones que podriamos hacer con JavaScript pueden ser realizadas de mejor forma con otras herramientas, por ejemplo la deteccion de campos rellenos en un formulario, pueden tener un tratamiento mejor y a veces hasta más facil con Perl, PHP o C que con JavaScript. Por otro lado, resulta de gran utilidad para referenciar y actualizar contenidos en nuestra página, por ejemplo cambiar una fotografía sin recargar la página, referenciando el contenido para ese objeto. Este puede ser el mayor valor que incorpora JavaScript en el diseño de un sitio WEB cuando se disponen de las demás herramientas. En otros casos, cuando el diseñador no dispone de la posibilidad de incluir Perl o PHP ( y mucho menos código C compilado ! ) no le queda mas remedio que usar JavaScript para hacer un check de campos o enviar un email.

JAVA es código que podriamos llamar precompilado, ya que requiere de un procesador especial que lo haga ejecutable. Su ventaja principal está en que el mismo código, que será un fichero del tipo .class o .jre, o sea compuesto por lo que es un "bitcode" o codigo ejecutable para este interprete JAVA, es ejecutable independiente de la plataforma, ya sea MAC, Windows, Unix ... etc. Para ello funciona sobre lo que se llaman "maquinas virtuales", donde la maquina virtual está en el navegador del cliente, por tanto el programa se ejecuta en el ordenador del visitante, y bajo su navegador o interprete, llamado normalmente JRE. Esto parece una gran ventaja, pero como todo, tiene sus inconvenientes. Trataremos de exponer muy brevemente sus dos mayores, que posiblemente le lleven a la conclusión ( un poco errónea ) de obviar totalmente el uso de JAVA. El primero de ellos estriba en que al requierir cargar un software intermedio que interprete el código "bitcode" de JAVA, su rendimiento es muy bajo, y si lo ejecuta el cliente en un ordenador de tipo doméstico o con baja capacidad de proceso, tanto en CPU como en memoría, su funcionamiento es muy lento. Otro inconveniente es que muchos navegadores se "cuelgan" al ejecutar determinados códigos "bitcode", con lo cual al problema de rendimiento, añadimos un problema de estabilidad. Por si fuera poco, nos encontramos que además de su bajo rendimiento y de su intestabilidad, tambien tenemos un problema de seguridad. El problema de seguridad se dá cuando el cliente usa unos de los actuales MS Internet Explorer versiones 4.0 y 5.0 y ha requerido para ejecutar correctamente nuestro bitcode, implementar el JRE de Microsoft en su máquina. Esto permite que si accede a otros sitios WEB de Internet, donde haya habido alguien con "mala intención" éste haya podido poner en una página WEB un bitcode que puede tener acceso total al disco duro del cliente.
 * JAVA**


 * MacroMedia, Flash y otras maravillas**

Parece cada día tener mayor aceptación aplicaciones y diseños WEB realizados con estas herramientas, que ya incluso vienen de seríe en algunos navegadores, sin embargo para la mayoría de los mortales aún requiere el bajar un plug-in. Con ellas, podemos crear una página de un gran dinamismo publicitario, realmente bonita e impactante. Claro que quienes no tengan el plug-in no lo verán. En todo caso es bueno instalar un detector de plug-in instalados en la maquina del cliente y en funcion del resultado, enviar o no un contenido con Flash. Tengamos en cuenta, que en muchos casos, por ejemplo el actual plug-in para Linux de Flash, NO FUNCIONA correctamente con todos los sitos y contenidos Flash. Pero ante todo y lo mas importante, tengamos en cuenta que mientras pretendamos llegar a usuarios con modems analogicos, o incluso lineas RDSI, con conexiones "caseras" en muchos casos gratis, a traves de una RedIP (infovia Plus ) que fragmenta y rompe paquetes y los pierde, y donde las velocidades medias no superan los 3kBps ( en muchos casos ni aunque usaran ADSL ), Internet no es la TV, ni un producto multimedia. Para ello, mejor seleccionar dos tipos de clientes que nos visitaran, los que disponen de una conexión "decente" y los que disponen de conexión de "bajo costo", y en funcion de ello seleccionar el contenido a enviar. Señalar que las aplicaciones con Flash y MacroMedia, ocupan muy poco tamaño de fichero a enviar, son por tanto rápidas de enviar, y sus efectos son muy buenos, que realizarlos por otros medios costaría el envio de una inmensa cantidad de información por la red.

Una parte importante de nuestras páginas WEB serán las imágenes gráficas, compuestas en su mayoría por ficheros de imagen pixelados. Los formatos más usados son GIF, JPEG y PNG. Vamos a tratar la diferencia en el uso de cada uno de ellos a la hora de componer nuestra página web. GIF. ( Graphic Interchange Format ) en un formato en el que el fichero lleva incluida una tabla o mapa de colores de hasta 255 colores. En realidad el navegador no los usará todos, por ejemplo Netscape nos presentará sólo 216 colores. La principal ventaja de éste formato es la posibilidad de incluir transparencias y animaciones. Otra ventaja es que podemos usar paletas de color de menos de 255 colores, o sea, asignar menos de 8 bits a cada pixel de color, con lo cual se reduce el tamaño del fichero. Por ejemplo, podemos crear un GIF con tan sólo 4 colores, con lo cual se usan solamente 2 bits para cada pixel y el ratio de reducion de tamaño es prácticamente 8:2, o sea cuatro veces menor en tamaño. Su uso está aconsejado cuando se requiera animación de varios fotogramas, y siempre que podamos reducir el número de colores, o bien cuando nuestra imagen requiera un color ( o más de uno ) que se presente transparente para mostrar el fondo de la página. JPEG: Es un formato que trabaja con 24 bits de color, pero que gracias a un sistema avanzado de compresión de imagen ( basado en el Huffman compresion code ) logra unos fichero de pequeño tamaño y una relación de calidad alta. Podemos fijar el nivel de compresión/calidad que deseemos. Su uso queda aconsejado cuando se pretenda mostrar una imagen con gran calidad. Tengamos en cuenta que la calidad de una imagen viene determinada mas por el número de colores distintos que por la resolución de la misma. PNG: Es el nuevo formato añadido, similar a JPEG. Su aplicación es la misma que el JPEG, si bien promete añadir nuevas prestaciones. Un detalle interesante sobre los GIF es cuando empleamos imagenes "entrelazadas", esto es, el contenido de la imagen primero contiene las lineas pares y luego las impares por ejemplo, con lo cual la descarga de la imagen es mas rápida y su calidad de visualización va variando en la pantalla del visitante a nuestras páginas conforme se completa la descarga del fichero. En el caso de JPEG y PNG, la vision de la imagen durante la descarga es en sentido vertical, no completandose el cuadro por completo hasta que se ha finalizado su recepción. Con preprocesadores de imagen en la parte del servidor WEB, podemos antes de enviar la imagen al cliente, transformarla según unas necesidades dadas, por ejemplo detectando el tiempo que tardó en descargar un texto, u otra imagen, y calculando un ratio de velocidad, de ésta forma, las imagenes serán enviadas en menor resolucion y/o calidad a aquellos que tengan una conexión mas lenta. Otra funcion interesante de los preprocesadores de imagen es la de poder superponer titulaciones, cortar imagenes, pegar, etc. En realidad casi podriamos hacer bajo demanda en tiempo real todo aquello que hace nuestro editor gráfico con una imagen, la diferencia está en que lo hacemos dinámicamente. El servidor WEB puede tratar una salida de un proceso ( un CGI por ejemplo ) como una imagen, podemos escribir  donde image.cgi es en realidad un programa que vuelca al flujo un contenido de tipo GIF o JPEG.
 * LAS IMAGENES**



media type="custom" key="7359111"