Sobre paginas web...

Planificación: Sitio Web

Planificación: Sitio Web: Objetivos

Antes de diseñar, publicar y publicitar un Sitio en Internet, se debe tener muy en claro cuál va a ser el objetivo del mismo. Los Sitios pueden cumplir diversas funciones en el ámbito de una empresa. Se pueden usar como presencia institucional, como un medio para ofrecer información valiosa a nuestros clientes, para la realización de ventas directas o bien como centro de consultas.

Un buen comienzo implica un Sitio con una actitud clara. Mínimamente debe ser utilizado como presencia institucional, por lo cual una actitud o un perfil confuso jugaría en contra de los propios intereses.

Ideas claras

Antes de iniciar la creación del Sitio es importante tener las ideas claras. Es recomendable dibujar un boceto de como va a ser el Sitio y determinar que componentes y que enlaces contendrá. Muchas personas suelen pasar por alto este punto debido a que tienen una idea general de lo que van a hacer, pero se ahorra tiempo y dinero si se cuenta con un boceto del Sitio que vamos a crear.

Puntos a tener en cuenta

	Contenido: Generar el interés de los usuarios.
	Diseño: Crear un Sitio que sea fácil de leer y navegar.
	Credibilidad: Ganar la confianza de los visitantes.
	Imagen: Respetar las características de la empresa.
	Dominio: Elegir el nombre del dominio adecuado.

Planificación: Sitio Web: Contenido

Desarrollar un Sitio no es solamente publicar en la Web los materiales impresos de la compañía. Para atraer visitantes se debe dar algo más, aprovechando los múltiples recursos que Internet ofrece. Hay que generar el interés de los usuarios para que de esa manera se conecten al Sitio y tengan información precisa y de interés, y no solamente lo que pueden ver en un fax o una carpeta de presentación. Internet es una herramienta interactiva, que permite crear un vínculo de ida y vuelta con los usuarios y/o clientes independientemente de dónde ellos estén. No hay que desaprovechar esta oportunidad usando el espacio en la Red como un depósito de documentos.

El contenido dependerá directamente de la temática del Web. La gran mayoría de los usuarios que acuden a un Sitio Web lo hacen en busca de información. Da igual como se presente dicha información (texto, imágenes, vídeo, audio) pero un Web debe aportar contenido. Es importante tener en cuenta que WWW es un medio de comunicación distinto a los que hasta ahora conocíamos (televisión, radio, prensa, etc.); el navegante pasa de página en página Web a ritmo de clic de ratón, y generalmente pasa poco tiempo en una misma página. Por lo tanto no se debe abusar de la información textual, ya que son muy pocos los visitantes que se leen completamente una página Web. Siempre se ha dicho que una imagen vale mas que mil palabras, y aunque una página Web no es un programa de televisión, las imágenes siempre son importantes.

Planificación: Sitio Web: Credibilidad

Para que el Sitio sea más creíble y gane la confianza de las personas que lo visitan, es recomendable incluir el nombre de la Empresa o de la persona responsable con la dirección física e información acerca de los contactos por otras vías como número de teléfono y fax. Es algo muy tranquilizador para quienes nos visitan saber que existe detrás de nuestro Sitio una empresa o una persona real aún cuando se trate de un negocio que solamente funciona en Internet.

Donde más se nota que estos datos son fundamentales es en los Sitios en los cuales se vende a trevés de la Red. Para dejar los datos personales y en especial el número de tarjeta de crédito, es imprecindible que quienes visiten el Sitio tengan la absoluta certeza de que la empresa existe y es responsable.

¿Alguien compraría productos, ingresando los datos de su tarjeta de crédito, en un Sitio que no posea una referencia física y real clara, o bien que su dirección de correo fuera una dirección de webmail? Seguramente no. Por eso, salvo los Sitios que son reconocidos, es muy difícil generar una estrategia sin el referente real de nuestra presencia. No te olvides, ganar la confianza de quienes nos visitan es el primer paso de un Sitio exitoso.

Imagen del Sitio

Al definir el diseño y el contenido del Sitio, es muy importante respetar todas las características con las cuales se identifica la empresa. Por ejemplo, si las personas asocian McDonald's con los colores rojo, amarillo y blanco, el Sitio también debe tener estos colores.Que pasaría si el fondo del Sitio de Renault fuese negro? Las personas al entrar se sentirían un poco desconcertadas ya que el negro es generalmente asociado con cosas malas, como por ejemplo la muerte.

Planificación: Sitio Web: Competencia

Cualquiera sea el rubro o negocio en el que queramos incursionar, es más factible que en Internet existan diversos Sitios ubicados en el mismo segmento, es decir, que busquen el mismo público. Ya sea de acá o de cualquier parte del mundo, es una muy buena práctica visitar y analizar esos Sitios y fundamentalmente estudiar a fondo los más exitosos. Es una práctica muy recomendable ingresar a un buscador y pedir Sitios que desarrollen actividades similares a las que estamos realizando nosotros y queremos publicitar en Internet.

En Internet existe un alto grado de compañerismo entre Webmasters lo cual nos permite crear relaciones muy beneficiosas. Crear un vínculo profesional, una alianza o una comunidad con otros Webmasters puede resultar muy productivo para nuestro negocio. Los Webmasters son personas que conocen perfectamente el negocio en Internet, por lo tanto pueden proveernos de valiosa información sobre nuestros potenciales clientes y todo lo relacionado a la actividad que estemos desarrollando.

No te olvides, en Internet hay mucho material y, seguramente, haciendo una recorrida exhaustiva por Sitios del mismo rubro, vas a tener una fuente de ideas inagotables para potenciar no sólo tu presencia on-line sino también off-line.

Planificación: Dominio: Nombre

Éste es el primer aspecto técnico que se debe considerar cuando se desea definir un espacio en la Red. Normalmente para garantizar una asociación mental de los usuarios, se pone al dominio un nombre que coincida con el de la empresa o el producto que se va a presentar en la Web. Ese simple hecho, por sí solo, garantiza un importante tráfico a la Red. Es más, en muchas ocasiones, cuando uno intenta acceder al Sitio de una empresa de la cual no conoce exactamente su dirección en la Web, lo primero que hace intuitivamente es buscar con la dirección www.nombredelaempresa.com. Existen innumerables ejemplos de esto, las excepciones se dan fundamentalmente cuando el nombre elegido está siendo utilizado por otra empresa o persona.

Otra de las importantes ventajas de que el dominio tenga el mismo nombre que la empresa, es la presencia y credibilidad que le da a la misma. No es lo mismo www.webmaster.com que www.gratis.com/webmaster.

Recordemos que fundamentalmente los Sitios se publican para vender. No quiere decir esto que se vendan productos directamente desde el Sitio; acá el término "vender" tiene una acepción más amplia: quiere decir que toda publicidad o presencia de la empresa tiene como objetivo directo o indirecto la concreción de ventas. Por lo tanto, para ganar el dinero de nuestros clientes es necesario ganar primero su confianza, y esto no se logra con nombres de dominio que no sean definitivamente claros y precisos.

Si no fuera posible, porque ese nombre ya existe, es decir, que el dominio está registrado, o porque el nombre de la empresa es demasiado largo o inconveniente para asignarlo al dominio, es muy importante elegir uno que se identifique y asocie con lo que se quiere publicar. Estos son algunos de los puntos que se deben tener en cuenta a la hora de elegir el nombre del dominio:

	Debe de ser fácil de asociar e identificar con nuestra empresa, marca o actividad. Ejemplo http://www.webtutorial.com.ar. Se identifica fácilmente con la actividad que estamos desarrollando.
	Debe ser fácil de recordar, pronunciar y escribir. Ejemplo http://www.webtutorial.com.ar. Las palabras Web y Tutorial son de uso frecuente y reconocidas internacionalmente, por lo tanto son fáciles de recordar.

Planificación: Dominio: Nivel

ICANN es el organismo internacional que regula los nombres de los dominios. En Argentina, el Ministerio de relaciones Exteriores, Comercio Internacional y Culto regula los dominios propios de la Argentina.

Los dominios se clasifican en tres niveles:

	Primer nivel

	Son los que indican la actividad o la zona geográfica a la que pertenecemos o registramos el dominio. Pueden ser genéricos (com, net, org, gov, edu, mil, int, biz, name, info, pro, coop y aero) o territoriales (ar, es, mk cl, etc).

	Segundo nivel

	Son las palabras o letras que nosotros registramos, por ejemplo, el nombre de nuestra empresa, producto o actividad. Ejemplo: www.nombre.xxx

	Tercer nivel

	Son los que se crearían cuando el nombre con el que deseamos que se nos identifique estubiera con el de nuestro proveedor de Internet. Ejemplo: www.nombre.servidor.xxx

Enlaces recomendados

	NIC Argentina http://www.nic.ar
	NIC España http://www.nic.es

	Maestros del Web http://www.maestrosdelweb.com
	Desarrollo Web http://www.desarrolloweb.com
	Tiendas Urbanas http://www.tiendasurbanas.com
	Master Net http://www.master-net.net
	Marketing Directo http://www.marketingdirecto.com
	Marketing Eficaz http://www.marketing-eficaz.com
	Fenicios en la Red http://www.fenicios.com
	Armas de Venta http://www.armasdeventa.com

Desarrollo: Código HTML

Desarrollo: Código HTML: Introducción

El HTML no es un lenguaje de programación como el Basic o el Pascal, sino un lenguaje descriptivo con el cual es posible codificar un hipertexto de manera tal que los programas navegadores lo entiendan. Esta codificación se lleva a cabo a través de determinadas etiquetas, más conocidas como tags, que dan forma al documento.

A continuación se explica las funciónes que cumplen los principales tags y las distintas aplicaciones que tienen los mismos:

El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la siguiente manera:

<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.

Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por claridad, se usarán en los siguientes ejemplos sólamente las mayúsculas

Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>

<HTML> [Todo el documento] </HTML>

El documento en sí está dividido en dos zonas principales

El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>

Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda de direcciones).

Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.)

Por tanto, la estructura queda de esta manera:

<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>

Antes de crear nuestra primera página, unas consideraciones sobre el texto: Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos párrafos debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de
cierre </P>)

El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Puedes experimentar en el ejemplo que sigue, cambiando el número para comprobar el efecto que se logra.

Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER>. Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.

También tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, como se puede observar a continuación:

En el procesador de texto copiamos lo siguiente:

<HTML>

<HEAD>
<TITLE> Mi pagina del Web - 1 </TITLE>
</HEAD>

<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla. Como el
lenguaje HTML no es dificil, pronto estare en condiciones de hacer
cosas mas interesantes.
<P> Aqui va un segundo parrafo.
</BODY>

</HTML>

Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores.

Para obtener más información sobre la función que cumple cada uno de los tags y las distintas aplicaciones que tienen, visitá el Sitio http://www.wmaestro.com

Desarrollo: Código HTML: Editores HTML

Lo úncio que debemos saber sobre este tema es que las páginas Web están escritas en un lenguaje llamado HTML, que significa Hyper Text Markup Language. Los HTML son archivos de texto que pueden ser editados libremente con programas como el Notepad de Windows, aunque para hacerlo de esta manera es necesario conocer la estructura del lenguaje.

Existen varias empresas como Macromedia y Microsoft que ofrecen programas para editar documentos HTML, que emplean la filosofía WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes). De esta manera no es necesario conocer en profundidad el lenguaje HTML, basta con saber operar estos sencillos programas, cuya función es traducir a ese formato la página que hacemos en pantalla. El manejo de estos programas no es más complicado que el de un procesador de textos.

La mayoría de los Webmasters parecen tener claras las herramientas de desarrollo Web: Dreamweaver o FrontPage.

	Macromedia Dreamweaver UltraDev
	http://www.macromedia.com

	Dreamweaver UltraDev es la nueva herramienta de Macromedia con la que se puede desarrollar aplicaciones fácilmente basadas en los lenguajes Microsoft Active Server Pages (ASP), Sun Microsystems JavaServer Pages (JSP) y Allaire ColdFusion Markup Language (CFML) de una manera visual. UltraDev se ha convertido en una herramienta clave para los creadores de aplicaciones de Web debido a su capacidad única para previsualizar información en vivo dentro de un entorno visual. Esta nueva actualización optimiza la autoría visual y de código, lo cual da como resultado una mejora revolucionaria en productividad y la posibilidad de desarrollar aplicaciones con conexión a bases de datos mucho más impactantes. Permite una previsualización de las creaciones y ofrece un control total sobre el código de las páginas. Su apartado de diseño visual destaca por la posibilidad de poder manejar capas, insertar imágenes y figuras, manejo de ficheros multimedia (flash, shockwave, etc.) así como de otros elementos como Active-X. Para los desarrolladores Web sin duda es una herramienta sorprendente. Los creadores de aplicaciones Web pueden también aprovechar el nuevo Server Behavior Builder integrado para generar código que igual a sus propios estándares de desarrollo. Además de la capacidad para crear comportamientos de servidor personalizados, UltraDev incluye también una biblioteca de secuencias preestablecidas de comandos (scripts) de servidor ASP, JSP y CFML comúnmente utilizadas que ofrecen autenticación de usuario y navegación, así como actualización de bases de datos e inserción de nuevos récords dentro de bases de datos. Manual Dreamweaver

	Microsoft FrontPage
	http://www.microsoft.com

	FrontPage se centra en Sitios poco esquematizados, horizontales, con un buen contenido en formularios o elementos pre-programados. Una de las características a tener en cuenta de este programa es que nos permite insertar una gran variedad de componentes externos, como por ejemplo controles Active-X, Webots, marquesinas y videos, los cuales funcionan únicamente con Microsoft Internet Explorer y por lo tanto no cuadran dentro del estándar HTML. FrontPage merece todos los honores de un gran producto para los que se inician y para los Webmasters preocupados por otras tareas que no es el HTML puro. No se enfoca tanto en la programación, no es muy completo, pero es fácil de manejar. Manual FrontPage

No obstante existen muchas otras alternativas a la hora de elegir un buen editor HTML, entre ellas se encuentra el reconocido editor HomeSite que distribuye la empresa Allaire:

	Allaire HomeSite
	http://www.allaire.com/

	Una de las principales características de este Editor es que suelen generar código "basura", o código muy complicado para hacer cosas sencillas. Este programa te ofrece control total sobre el documento HTML, con la posibilidad de optimizar al máximo el código. HomeSite dispone tanto de las opciones típicas de cualquier buen editor HTML, como de opciones totalmente originales. Las que son más interesantes son las siguientes: conversión automática de caracteres especiales, palabras clave que nos permiten introducir código que repitamos mucho, edición de documentos HTML directamente de servidores FTP, búsqueda y reemplazo en múltiples documentos, editor de hojas de estilo ("cascade style sheets"), manual completo de HTML integrado, visión jerárquica de las páginas, coloreado automático de los lenguajes de programación JavaScript, ASP, Perl, PHP, y DHTML (HTML Dinámico), integración de proyectos con software de gestión de versiones MS SourceSafe y PVCS, interfaz totalmente configurable, integración con DreamWeaver, y mucho más.

Enlaces recomendados

	Maestros del Web http://www.maestrosdelweb.com
	Foros del Web http://www.forosdelweb.com

Descarga de archivos

	Softonic http://www.softonic.com/
	Guía Soft http://www.guiasoft.com/

	Starmedia http://software.starmedia.com/
	Canal Software http://www.canalsw.com/

ABC Datos http://www.abcdatos.com/

Desarrollo: Código HTML: CSS

Cascading Style Sheets

Seguramente ya han escuchado hablar de las hojas de estilo o CSS. Estas nacieron hace ya un buen tiempo y fueron recomendadas por la W3 Consortium con el propósito de ayudar al creador de sitios web, y mejorar la presentación de las paginas web. Pero, no lo solo mejorarlas, si no también facilitar la creación de las mismas.

El uso de las hojas de estilo se puede aplicar a varios efectos, por lo que en este articulo solo tocaremos los mas utilizados.

Hemos recibido varias consultas de como hacer para agregar un link, pero sin que aparezca subrayado. Este no es mas que una modificación en el código de CSS, que incluimos mas abajo:

<style type="text/css">
</style>

El código que mostramos más arriba permite al webmaster presentar enlaces sin subrayado y estos afectan a todos los enlaces. Si queremos presentar solamente algunos enlaces debemos clasificar a estos enlaces por clases, y luego asignar la clase al enlace que se desee. Como ven es algo un poco mas complicado que discutiremos mas adelante.

Respecto al código proporcionado mas arriba,la etiqueta <style type="text/css"> demuestra al browser que el tipo a tratar es texto específicamente CSS. Luego a:link { color: black; text-decoration: none } nos indica que es un link, de color negro (black) y NO posee decoración de texto, es decir, sin subrayado. La tercera línea a:visited { color: black; text-decoration: none indica la misma cosa solo que lo hace para un link ya visitado. Con la etiqueta </style> se cierra el código de CSS.

Otro efecto bastante utilizado en los sitios web, es el efecto "hover". Este nos permite hacer un efecto, sea cual fuere (cambio de color, agrandamiento de letra, cambio de fuente, etc) sobre el enlace.

Con el siguiente ejemplo demostramos uno de los tantos usos del hover:

<style type="text/css">
</style>

Vemos que, la única diferencia con respecto al código presentado anteriormente es la inserción de una nueva línea ( la de hover )
a:hover { color: navy; text-decoration: underline }. Esta línea nos permite crear un efecto de subrayado sobre el enlace que no se encuentra subrayado.Vemos entonces que el hover puede ser aplicado a cualquier cambio de propiedad de la fuente.

En la continuación de este articulo, veremos como aplicar efectos mas avanzados a realizar con las hojas de estilo, así también nos encontramos desarrollando un tutorial para entender como funcionan y para que pueden ser utilizados, ya que, estos efectos son una de las tantas propiedades del CSS.

1) Diferentes formas de vincular hojas de estilo en cascada a su sitio web:

Las hojas de estilo en cascada involucran el uso de tres diferentes tipos de definiciones:

a) Estilos en línea

Estos pueden ser atribuidos a etiquetas individuales en el BODY o cuerpo del sitio web. Aunque esto no es parte de una hoja de estilo en cascada, es llamada así porque esta hecha "como una hoja de estilo". Por ejemplo:

<p style="font-size=12pt; font-style=Verdana,Arial"> Copyright</p>

Esta etiqueta modifica todo el párrafo con tamaño de letra de 12 puntos del tipo Verdana por defecto y Arial como sustituto.

b) Estilos enlazados:

Este tipo de estilo puede adjuntar un tipo de estilo separado el cual es vinculado a través de la siguiente etiqueta ubicada en la cabecera del sitio. <LINK HREF="archivo.css" REL=STYLESHEET> Como ejemplo:

<LINK HREF="/files/developy.css" REL=STYLESHEET>

Aquí llamo a un archivo de nombre developy.css ubicado en la carpeta files dentro del directorio principal o public_html del servidor.

c) Estilos encerrados:

Los estilos encerrados son aquellos que van "encerrados" entre las etiquetas <style> </style> Por ejemplo:

<style type="text/css">
</style>

2) Clases para ubicar diferentes tipos de enlaces en su página:

Para poder tener diferentes tipos de efectos realizados con hojas de estilo en el mismo sitio, debes crear distintas clases y luego asignar estas a los links deseados.

Por ejemplo:

Y después debe referirlos en el cuerpo de su documento como:

<a href="loquesea.html" class="azul">Link</a>

En este caso el enlace se verá azul porque el tipo de clase es azul, y esta clase se encuentra definida mas arriba como azul.

Desarrollo: Diseño

Desarrollo: Diseño: Estructura

La organización de la información es un tema clave para asegurar un buen funcionamiento de un sitio.

El primer elemento organizador son las páginas. Conviene incluir en cada una de ellas una unidad de información autónoma, completa. En el caso de que el volumen sea excesivo para ello, dividir esa unidad de información en subunidades más pequeñas, coherentes, completas cada una en sí misma. Una unidad de información es un tema o un subtema.

Las relaciones de las páginas entre sí configuran la estructura del sitio. A partir de la página principal o home page se vinculan mediante links el resto de las páginas. Esto es bastante sencillo de implementar en lenguaje HTML, pero es más complicado decidir de que manera, en qué orden, con qué configuración se establecerá la cadena de vínculos.

Ante todo hay que tener en cuenta que la estructura debe responder a los criterios de búsqueda. Hay que hacerse la pregunta acerca de ¿cómo se intentará encontrar esta información?. Los criterios " naturales" de clasificación pueden no ser adecuados. Por ejemplo, es común que quienes venden repuestos acomoden los mismos por tipo: juntas por aquí, poleas por allí, resortes de este lado. El usuario, a su vez, necesita el repuesto para una máquina o artefacto, marca, modelo, función del repuesto que busca. Los links y la estructura del sitio tendrán que tener en cuenta estas cuestiones.

El otro tema es que los usuarios reconocen las páginas de la Web utilizando como guía palabras clave colocadas en botones, barras de control, gráficos mapeados, o utilizadas como marcas de hipertexto; palabras que por su significado indican o sugieren el contenido de páginas a las que derivan. Es sabido que los significados de las palabras no son unívocos, y la ambigüedad puede ser un problema. El conocimiento de la cultura y usos lingüísticos del público nos será sin duda, de gran utilidad a la hora de elegir las palabras que se titularán nuestros botones o identificarán los links de derivación a otras páginas del sitio.

Hay que tener en cuenta que el usuario no tiene cómo saber la manera en que sigue la cadena de links más allá de las páginas a las que puede entrar directamente desde el lugar donde se encuentra. Que el usuario no encuentre la información buscada después de recorrer cuatro o cinco páginas encadenadas puede significar que el mismo abandone el sitio o la indeseada sensación de frustración que nos interesa evitar.

Un tema relacionado a éste es el de los mecanismos de identificación y de recorrido del sitio. Estos deberían permitir al usuario saber en todo momento el lugar o zona del sitio donde se encuentra, así como desplazarse hacia cualquier otra página sin necesidad de recorrer toda la cadena en sentido inverso. Los paneles de control son una buena ayuda.

Un Sitio es más creíble y legible cuando presenta consistencia en aspectos tales como tipo de letra utilizado, fondos y, en general, la distribución de los distintos elementos en la pantalla. En cada una de las pantallas debe haber una presencia sólida. Todo lo que ayude a una coherencia visual y de trabajo será en beneficio del navegante y, por ende, del Sitio.

Diseño del Sitio

Estos son los principales puntos a tener en cuenta:

	Tipografía
	El tamaño de la tipografía debe ser adecuado para ser leído sin dificultad aun en computadoras configuradas con altas resoluciones de pantalla. Es importante jerarquizar los títulos, subtítulos, manteniendo la coherencia de los estilos en todo el sitio. Para eso es una buena ayuda escribir una pequeña norma que establezca el tamaño relativo de la tipografía para cada categoría de títulos y subtítulos, así como si éstos van centrados, alineados, etc. El color del texto no debe confundirse con el fondo de la página como así tampoco debe cansar a la vista.
	Textura de fondo
	Evitar el uso de imágenes de fondo en las páginas. Si se usan hay que tener mucho cuidado. No deben tener un dibujo excesivamente nítido que perjudique la lectura. Tampoco es conveniente que sean motivos muy contrastados (contornos claros y oscuros), ya que se verán mal tanto los textos oscuros como los claros.
	Imágenes
	Las imágenes deben ocupar el menor tamaño posible. Es muy importante reducir al mínimo la cantidad de colores de los gráficos. Hay que tratar de repetir los iconos y las imágenes tantas veces sea posible, esto se debe a que el browser lee los gráficos de la memoria caché cuando se ingresa a una página. Muy importante: El tamaño de las imágenes influye en la velocidad en que se carga la página.
	Diseño monótono
	Algunos expertos recomiendan re-diseñar el Sitio cada seis meses. Esto proyecta una imagen de cambio y da la sensación de que el Sitio se encuentra en constante actualización.
	Coherencia visual
	La coherencia visual ayuda en ese sentido. Un sitio en el que cada página tiene un fondo diferente, varían los iconos y cambian otros componentes de la composición visual, desconcierta al usuario, que no sabe si está en el mismo Sitio o si el último enlace lo llevó al otro extremo del mundo.

Enlaces recomendados

	Maestros del Web http://www.maestrosdelweb.com
	Foros del Web http://www.forosdelweb.com
	Web Estilo http://www.webestilo.com
	Mr Devy http://www.mrdevy.com
	Developy http://www.developy.com
	Desarrollo Web http://www.desarrolloweb.com

Desarrollo: Diseño: Navegación

Navegación del Sitio

Un punto de vital importancia en relación al Sitio es que el mismo sea fácil de leer desde su página de inicio. Diseños muy cargados resultan sumamente incómodos y, por lo general lentos, lo cual es contraproducente si queremos atraer visitantes. Los Sitios más frecuentados son precisamente muy sencillos de visualizar y, por ende, de recorrer. Hay que evitar el uso de elementos pesados que no se necesiten ver, como fotos o sonidos y si, en cambio, utilizar estos recursos cuando se convierten en elementos de información.

Es muy importante incluir todos los links internos dentro de cada página en el mismo lugar siempre. Si la barra de navegación está compuesta por imágenes, es muy importante agregar otra barra de navegación que contenga los mismos enlaces pero en forma de texto. De esta manera las personas que tengan configurado el navegador para no mostrar imágenes van a poder navegar por el Sitio sin problema. Esto también puede agilizar la navegación, ya que estamos dando a conocer los enlaces del Sitio antes de que se descarguen la imágenes.

Otro punto muy importante es el tamaño de las páginas, por lo general se recomienda que no superen la pantalla y media. De esta manera no se satura al lector con tanta información y se evita que se produzca el "scroll infinito".

Lectura complementaria

Barra de navegación Enlace

Enlaces recomendados

	Maestros del Web http://www.maestrosdelweb.com
	Foros del Web http://www.forosdelweb.com
	Web Estilo http://www.webestilo.com
	Mr Devy http://www.mrdevy.com
	Developy http://www.developy.com
	Desarrollo Web http://www.desarrolloweb.com

Desarrollo: Diseño: Compatibilidad

Hacer una página de Internet puede ser algo muy sencillo. Sin embargo, lograr que cumpla su objetivo y sea un sitio interesante para los visitantes es el gran reto de todo Webmaster. Parte del éxito de una página Web es su presentación ante el visitante. Por ejemplo, imagine que esta navegando en búsqueda de información de su artista favorito. Dependiendo el artista puede encontrar de una a miles de páginas en referencia al artista, pero cual será la que mas va a frecuentar: Yo diría que la que ofrezca mas información, la que más se actualice y principalmente la que ofrezca un mejor diseño. Y es que el diseño tiene una influencia increíble con el visitante. Uno de mis sitios empezó con un diseño pobre y así fue como lo di a conocer. Luego que ya tenia un promedio fijo de visitantes se me ocurrió mejorar el diseño y así lo hice. El resultado fue inmediato, pues a la gente le gusto, y no solo recibí más emails con comentarios, sino que también aumentaron los visitantes.

A continuación les menciono algunas características que a mi parecer son fundamentales para todo sitio web y que deben considerar con todos sus diseños:

Compatibilidad de Navegadores (Browsers)

Toda página web tiene que poder ser visualizada con las más recientes versiones de Netscape, Internet Explorer y Opera. Y con lo de mas recientes versiones no me refiero a que hay que cargarlas de efectos de los últimos navegadores.

Compatibilidad de Resoluciones

Hay una gran incomodidad al tener que desplazar la ventana de nuestro navegador hacia la derecha. Para evitar esto es necesario adaptar nuestras páginas para cualquier monitor por medio de tablas que ocupen el 100% de la pantalla o tomar en cuenta la resolución promedio que utilizarán los visitantes. Actualmente la mayoría de monitores tienen una resolución de 800x600, por lo que en si trabajamos en este formato, monitores más grandes podrán verla sin problema. Hay que tomar en cuenta que aún existen computadoras con resoluciones de 640x480, pero ya es una minoría menor al 5% de los navegantes.

Facilidad de Navegación

Todo sitio debe contar con un menú de navegación o estructura bien elaborado para que el visitante no se pierda. Es recomendable incluir en todas las paginas links hacia la página principal y hacia las principales secciones del sitio. De ser posible también un link hacia el email para enviar comentarios y un link para ir al inicio de página. Una recomendación es incluir un Mapa del Sitio para sitios muy extensos.

Rapidez al cargar páginas y gráficas

Lastimosamente Internet aun no ofrece gran velocidad a la mayoría de usuarios. Ayude nuevamente al visitante reduciendo los contenidos de las páginas, evitando usar muchas gráficas y de ser posible reduzca a lo máximo el tamaño de sus gráficas. En la sección de Editores Gráficos del área de Referencia de este sitio encontrara algunos links hacia excelentes herramientas para este trabajo.

Tomar en cuenta las actualizaciones

Un sitio o página de Internet nunca está realmente terminado. Simplemente dejas de trabajar en el por un rato. Tomando esta frase muy en cuenta hay que diseñar todo sitio pensando en el futuro y dejando espacio para agregar nueva información o secciones. Un diseño inicial flexible es un factor importante para mantener la apariencia de un sitio y su funcionalidad luego de varios meses y actualizaciones.

Bueno, estas fueron mis 5 recomendaciones que a mi parecer se deben tomar en cuenta en todo sitio web. Espero sean de utilidad y lleguen a ser parte de sus próximos diseños.

Enlaces recomendados

	Maestros del Web http://www.maestrosdelweb.com
	Foros del Web http://www.forosdelweb.com

Coordinador del Proyecto Webmasters 2.0

Christian Van Der Henst S. info@maestrosdelweb.com

Desarrollo: Imágenes

Desarrollo: Imágenes: Formatos

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, texto o un dibujo). La compresión está basada en el algoritmo de compresión LZW, la cual 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 24 bits de colores, posee un alto grado de compresión, aunque no permite transparencias.

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.

Desarrollo: Imágenes: Visualización

Imágenes en el diseño

La velocidad de acceso al Web está siempre muy reñida con el diseño. Es frecuente el caso en que, para embellecer un Web se utilicen muchas imágenes (en formatos gif o jpeg) de gran tamaño. Esto obliga a los usuarios con conexiones lentas a sufrir largas esperas hasta que la información se presente en pantalla, y eso es un riesgo porque más de dos saltarán a cualquier otra dirección Internet antes de perder su tiempo.

La velocidad de la Web también dependerá en gran medida de lo saturadas que estén las líneas de acceso a nuestro centro proveedor de presencia en Internet (en resumen, el servidor donde se aloja el Web). Sin embargo este es un problema que se escapa del ámbito del diseño.

La gráfica (incluida elementos multimedia) de un sitio Web debe se una herramienta de comunicación al servicio de los objetivos planteados y condicionados por las pautas culturales (preferencias, gustos) del público. Esto significa que tampoco es un espacio de lucimiento del diseñador, ni la estética.

Debe adecuarse a los gustos y preferencias de los responsables del sitio. Una vez más los objetivos trazados y el perfil del público deberían ser los instrumentos para tomar las decisiones de diseño gráfico y multimedia.

Además de los criterios estéticos y comunicacionales del diseño gráfico, es importante respetar los criterios técnicos específico:

1. Que cada página sea fácil de cargar. La velocidad de carga de una página está en función del estado de las líneas y de la cantidad de información que contiene. Sobre el primer parámetro no hay nada que podamos hacer desde el diseño, pero sí sobre el segundo: establecer para cada página un máximo de bytes y no sobrepasarlo.

2. Realizar los gráficos del tamaño más chico posible. Repetir los iconos siempre que sea posible. El browser los leerá de la memoria caché a partir de la segunda vez que deba colocarlos en la página.

3. Grabar cada gráfico en formato GIF y JFG, verificar el tamaño de ambos y descartar el mayor.

4. Reducir la cantidad de colores de cada gráfico al mínimo indispensable.

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.

Elementos Interactivos

La interactividad es fundamental para el éxito de un Web. Se debe evitar la sensación "lectura de periódico" que puede causar en un visitante un Web pasivo y lineal. Además la interactividad puede beneficiar a quien publica el Web ya que a través de formularios podrá conocer mejor los perfiles de quienes pasan por las páginas.

Desarrollo: Imágenes: Herramientas

Cuando hablamos de aplicaciones nos referimos a herramientas de desarrollo Web. Al diseñar y mantener un Sitio Web, aprendemos a valorar la ayuda que estas nos brindan. Nuestra tarea es mencionar las herramientas que más se destacan en el mundo del diseño Web, ustedes deberán elegir aquellas que mejor se adapten a sus necesidades.

Herramientas de Diseño Web

	Photoshop Download
	Adobe Photoshop el editor de imágenes más popular en el mercado. Al principio puede resultar un poco sofisticado, pero una vez que le agarren la mano van a poder hacer cualquier cosa con las imágenes.

	Corel DigitalStudio Download
	El antiguo CorelDraw ofrece un paquete de herramientas que sirven para el desarrollo Web, entre ellas se destaca CorelDraw y Photo-Paint.

	PhotoImpact Download
	No tiene mucho que envidiarle al Photoshop y es mucho más fácil de manejar. Los efectos que tardan horas en realizar con otros editores, con Ulead PhotoImpact se hacen en minutos.

	Paint Shop Pro Download
	Un programa muy similar al Photoshop y Photo-Paint, pero mucho más sencillo de manejar.

	Flash CS4 Download
	Adobe Flash es una herramienta que trabaja con imágenes de vector y sirve para crear animacones Web de gran impacto. Ayuda a crear Sitios Web dinamícos e interactivos.

	Freehand Download
	Un programa de ilustración que se destaca por su sencilla interfaz gráfica, entre otras cosas..

	Fireworks Download
	Fireworks es la solución perfecta para diseñar y producir elementos gráficos para la Web. Muy utilizado para crear, editar y animar gráficos Web, añadir interactividad y optimizar imágenes en un entorno profesional.

	Font FX Download
	Una herramienta muy completa y muy fácil de manejar. Nos permite crear textos en 3D, animarlos y exportarlos como archivos gif, avi y swf.

	Ulead Cool 3D Download
	Dentro de la categoría "programas sencillos", el Ulead Cool 3D es el que más se destaca a la hora de trabajar con textos e imágenes en 3D. Permite exportar las imágenes y animaciones en formato gif, avi y swf.

	ACDSee Download
	Famoso por sus thumbnails, el ACDSee es una herramienta indispensable a la hora de trabajar con imágenes. Nos permite organizar y administrar de forma muy sencilla nuestros archivos.

Desarrollo: Alojamiento

Desarrollo: Alojamiento: Servidores

Alojamiento

Una vez terminado el desarrollo del Sitio sólo resta publicarlo. A continuación veremos una serie de conceptos que están ligados con este tema. Algunos de ellos son: cliente, servidor, hosting y housing. Es importante saber las diferencias entre un servicio rentado y gratuito y cuál de estas opciones conviene más. Es importante también conocer todos los factores que influyen en el rendimiento y eficiencia de nuestro Sitio Web.

Hosting y Housing

El hosting consiste en alquilar espacio en un servidor que ya esté permanentemente en línea. De este modo usted obtiene determinada cantidad de bytes para “subir” sus sitios y es allí a donde envía su página para que cualquier persona la pueda requerir. El housing, en cambio, es la instalación de un servidor propio dentro su empresa. Este servidor debe estar en línea constantemente para poder responder a los clientes precisando, por ejemplo, un enlace satelital o una línea punto a punto con algún ISP. Obviamente no son éstas las únicas diferencias entre estas dos formas de alojamiento. También las hay de carácter económico ya que es mucho más barato apelar al hosting que al housing. Imagínense que es mucho menos costoso contratar una máquina que ya esté on line que implementar todo el proceso de instalación y puesta en línea. Además, si usted opta por el housing debe tener una computadora especialmente dedicada a servir, con todo lo que eso implica (hard, soft y estadía on line) mientras que el hosting sólo requiere la reserva del espacio y el envío de la página y las modificaciones.

Hosting rentado vs Hosting gratuito

Seguramente usted optó por el hosting y no por el housing. Por lo tanto, debe decidir qué tipo de servicio querrá para su empresa, ya que hay múltiples variables. La primera decisión que debe tomar es si utilizará un servidor rentado o uno gratuito.

Veamos los puntos positivos y negativos de cada servidor:

Los servidores gratuitos brindan hosting, obviamente, sin ningún cargo. Pero ¿cuál es el problema? Evidentemente, para regalarle
al público este servicio las empresas que lo hacen precisan recuperar el dinero de alguna otra manera y la forma de hacerlo es mediante publicidad. Es decir, que al contratar este servicio gratuito usted adhiere a publicitar en su sitio, otros sitios que ellos determinan. Ésa es una parte del acuerdo. La otra es que no todos los sitios permiten la publicación de sitios comerciales. Otra desventaja de los servidores gratuitos es que no todos dejan que utilice su dominio propio, por lo cual su sitio no será, necesariamente, www.nombre.com.ar sino algo así como members.xoom.com/nombre o www.geocities.com/Athens/3665.

Veamos ahora los puntos positivos y negativos del servidor rentado. Obviamente los defectos de los servidores gratuitos son las virtudes de los rentados como por ejemplo la implementación del dominio propio y la ausencia de publicidad. Pero no hay que olvidar que los servidores rentados constituyen un gasto fijo mensual que varía entre los $ 7 y $ 100 dependiendo del servicio (el promedio de los abonos ronda los $ 20). Otro cargo que a menudo cobran los proveedores del servicio de hosting es un costo de instalación inicial que va de $ 20 a $ 100 pesos a nombre de setup o apertura de cuenta. En ningún caso estos costos incluyen el de la conexión a Internet por dialup (el acceso telefónico) ya que éste es un abono aparte.

Si usted va optar por un servidor rentado exija que el mismo funcione bajo su propio dominio. Una de las alternativas que brinda la obtención de un dominio es poder utilizar el mismo como dominio de correo electrónico.

A la hora de elegir el tipo de servicio:

Si lo que usted busca es que el sitio sea profesional pretenderá que la dirección del mismo tenga un dominio propio y que las páginas no se inunden con publicidad ajena. El costo de alojamiento de un dominio propio en un servidor rentado oscila entre los $ 7 y $ 100.

HTTP y FTP

La transferencia de datos por Internet puede hacerse de diversas maneras. Por un lado existe el tradicional envío y recepción de información a través de la Web. De esta manera usted navega por la Web viendo imágenes, texto, sonidos, etc. Este protocolo es el HTTP (Hyper Text Transfer Protocol o Protocolo de Transferencia de Hipertexto). Sin embargo éste no es el único protocolo de transferencia ya que también existe otro: el FTP (File Transfer Protocol o Protocolo de Transferencia de Archivos) cuya virtud es que transfiere cualquier dato sin importar cuál sea su formato y es mucho más veloz. Habitualmente este protocolo se utiliza para enviar al servidor las páginas web ya confeccionadas o las modificaciones. De esta manera, los archivos se envían por FTP y se consultan por HTTP.

Servicios de Hosting gratuitos

	Freeservershttp://www.freeservers.com
	Ofrece 20 Mb de espacio, FTP, dominio propio y redireccionamiento de e-mails.

	Virtual Av. http://www.virtualave.net/
	Ofrece 50 Mb de espacio, FTP, CGI, dominio propio y redireccionamiento de e-mails.

	Hypermart http://www.hypermart.com/
	Ofrece 50 Mb de espacio, FTP, CGI, dominio propio y redireccionamiento de e-mails.

	Gran Avenida http://granavenida.com/
	Ofrece espacio ilimitado, FTP, PHP, Perl, MySQL, soporte técnico y promoción de tu web.

	Brinkster http://www.brinkster.com/
	Ofrece 30 Mb de espacio, soporte de ASP y bases de datos Access.

	Freedom 2 Surf http://www.freedom2surf.net/
	Ofrece 20 Mb de espacio, soporte de PHP3, CGI, un motor de búsqueda y un dominio propio.


	Web Sambahttp://www.websamba.com
	Ofrece 30 Mb de espacio, soporte ASP, SSI, ODBC y cuenta FTP.

Desarrollo: Alojamiento: FTP

File Transfer Protocol

Existe en la actualidad, dentro de lo que es Internet, un servicio que permite trabajar con archivos (copiar, modificar, borrar) desde una PC hacia un servidor remoto. Estas transferencias de archivos se hacen por medio de un software conocido como FTP (File Transfer Protocol). Existen muchos programas de este tipo, con diferentes prestaciones, pero en este tutorial nos referiremos al Cute FTP y al WS FTP.

Abajo encontrará una lista con los términos más comunes en el uso del FTP:

- Site Manager (Cute FTP) o Session Profile (WS FTP): Es el conjunto de información necesaria para conectarse a un server.
- Download: Copiar un archivo desde una computadora remota a su computadora.
- Upload: Copiar un archivo desde su computadora a una computadora remota.
- Server: Es como se llama comúnmente a un FTP site.

Hay 5 datos importantes que usted debe saber para conectarse a un server FTP:

- Host Adress (Cute FTP) o Host Name (WS FTP): El nombre del Host
- User ID: Nombre de usuario
- Password: Contraseña
- Initial Remote Directory (Cute FTP) o Remote Host (WS FTP): La ubicación del directorio inicial.
- Site Label (Cute FTP) o Account (WS FTP): Nombre del Sitio

Estableciendo la Conexión

Para subir o actualizar nuestros archivos (html, gif, jpg, etc.) tenemos que volcarlos en el servidor. Para ello debemos configurar nuestro programa de FTP de una forma determinada. Abrimos la ventana del Site Manager y hacemos clic en Add Site (Cute FTP), o nos dirigimos al Session Profile (WS FTP) y completamos los datos. Una vez configurado, guardamos la configuración y hacemos clic en el botón Connect (Cute FTP) o Ok (WS FTP) y nos conectamos sin ningún problema.

Trabajando con Archivos

La pantalla principal se divide en dos partes claramente diferenciadas:

CUTE FTP:
Local (nuestro equipo)
Remote (el servidor)
Queue (comandos que se ejecutan)
Log Window (registro de eventos)

WS FTP:
Local System (nuestro equipo)
Remote System (el servidor)

Las ventanas Local y Remote se dividen a su vez en directorios y ficheros.

Antes de enviar los archivos al servidor debemos saber que los ficheros de texto (html, txt, etc.) se transmiten de forma distinta que los binarios (gif, jpg, etc.). Esto se le indica marcando en Transfer Type (Cute FTP) o en la parte inferior de la pantalla (WS FTP) ASCII o Binary según sea el caso. Igualmente recomiendo que seleccione la opción Auto-Detect, en caso de que su programa lo permita.

Lo siguiente que debemos hacer es seleccionar los archivos a enviar en la ventana de la izquierda (Local). Para esto hacemos clic sobre ellos de manera que queden marcados (para seleccionar muchos archivos se debe mantener presionada la tecla Shift). Una vez que el archivo está marcado hacemos clic en la flecha Upload. De esta manera el archivo aparecerá en la ventana de la derecha (Remote). Repetimos el proceso hasta subir todos los archivos.

Comandos permitidos

La mayoría de los servidores de ficheros trabajan en UNIX. Por ello, los ficheros y los directorios tienen nombres con la convención UNIX pero al transferirlos a un PC adoptan automáticamente el formato del sistema operativo que posea el mismo.

Los comandos más comunes que podemos utilizar son los siguientes:

- ascii
Transfiere los archivos en modo ASCII. Este es el valor por defecto.

- binary
Transfiere los archivos en modo binario.

- chmod
Cambia los permisos del archivo "nombre del archivo" en el sistema remoto al modo indicado con la instrucción.

- delete
Elimina el archivo remoto. El archivo remoto puede ser un directorio vacío.

- get
Copia el archivo remoto al archivo local. Si el archivo local no se especifica, ftp utiliza el nombre del archivo remoto especificado como el nombre de archivo local.

· mkdir
Crea el nombre del directorio remoto.

· rename
Renombra desde remoto, que puede ser un archivo o un directorio, a remoto.

· type
Establece el tipo de transferencia de archivo de ftp para el nombre del tipo. Si el nombre del tipo no es especificado, escribe el tipo actual. ASCII y binario son los tipos tolerados actualmente.

- chgdir
Cambia de directorio. Si tiene seleccionado un directorio, al hacer clic sobre este botón el sistema va a posicionarse en ese directorio. Si ningún nombre esta seleccionado, va a tener que escribir el nombre del directorio al que quiere ir, en la ventana de ChgDir.

- rmdir
Elimina un directorio

- Flechas
Transfiere un archivo de la ventana de la izquierda (Local) a la de la derecha (Remote).