Cómo hacer sitios web

Tutorial conceptual

Nunca hice un tutorial conceptual, así que voy a explicar primero a qué me refiero.

Este tutorial explica los conceptos que tienes que tener en claro antes de lanzarte a hacer un sitio web. Leyéndolo no vas a salir con un sitio web hecho; ya que debes leer otras cosas antes. Pero esto puede ser lo mejor que puedas leer antes de todas esas cosas.

Básicamente, explica las partes de concepto, no técnicas, que yo  tengo en cuenta a la hora de hacer un sitio y todo el proceso de hacerlo.

Esta es una lista de las cosas que tienes que saber antes de leer este documento:

  1. Manejo de computadora como de: archivos, carpetas, programas, documentos, etc.
  2. Uso básico de Internet: qué es Internet, cómo funciona, qué son las direcciones URL, etc.
  3. Conocimiento básico del lenguaje HTML.

Como se ve, no es nada del otro mundo. Con respecto a los programas de “creación de páginas web”: el objetivo de este tutorial no es ahondar en la parte técnica. Yo hago las páginas escribiendo en varios lenguajes como: HTML PHP CSS SQL. Pero ustedes pueden hacerlo con lo que quiera y puedan.

Manual básico de HTMLDescarga. Pero primero lee entero este documento.

Responsive-Design-Multi-Device-Example


Cosas básicas

Lo primero que tienes que plantear es para que necesitas este sitio web. Pregúntate a vos mismo por qué lo hacés. Tu respuesta no debe ser “porque todos los demás tienen un sitio y yo quiero tener el mío”. Ya sé que todo el mundo tiene un sitio web, pero el objetivo de hacer un sitio es mostrar algo, expresarte libremente. Si no tienes ideas que quieras compartir con el mundo,    entonces no hagas nada.

Estas son cosas que tienes que tener en claro. Cuáles son los contenidos que estarán en tu sitio. Lo que te conviene es tenerlos preparados de antemano. Por ejemplo, si los contenidos del sitio son materiales escritos (un sitio literario) deberías tenerlos ya escritos en la computadora; en el formato del procesador de textos que uses. No sirve de nada que trates de hacer un sitio web en    base a materiales en papel, porque vas a tener que tipear todo cuando hagas las páginas.

Si tu pintas, deberías escanear tus pinturas, y así sucesivamente sea lo que sea que hagas.

Una vez que cuentes con los contenidos en tu PC (o tu Mac), tenés que pensar cómo va a ser el sitio en sí mismo. Para ello, el mejor consejo es que veas algunos cientos (y en lo posible miles) de páginas web primero.

Digo esto porque muchos quieren hacer un sitio web sin saber qué es un sitio web. Tenés que saber en qué consiste la web, cuáles son las bases, y qué cosas se pueden hacer y qué no. No pienses en la web como la ‘magia’ que ves en las películas (que siempre muestran interfaces muy fantasiosas).

Y lo otro que tenés que hacer, es tomar un lápiz y varios papeles, dibujar algunos rectángulos en proporción de 4×3, y dentro de ellos dibujar las páginas, su diseño, diagramación, grilla o como lo quieras llamar. Así sabés qué es lo que querés hacer, antes de hacerlo.

Acá hay dos corrientes de pensamiento: están los que ven a su sitio web como una expresión de su personalidad, y por lo tanto les importa poco y nada lo que piensen los usuarios. En el caso extremo, sus sitios se convierten en monumentos a su ego. La otra vertiente es ponerse en el lugar del usuario y tratar de crear un sitio que pueda satisfacer sus necesidades. En el caso extremo, se    termina volviendo una demagogia. Los extremos nunca son buenos.

La decisión sabia es balancear ambas visiones. Hacer un diseño que sea accesible para todos, pero con una impronta personal. Por ejemplo, a los góticos les encanta hacer sitios con el fondo negro o usar imágenes muy obscuras como fondo. Está bien, siempre y cuando quien prefiera el fondo claro con letras obscuras tenga la posibilidad de ver las página de acuerdo a su preferencia. Más    adelante en este artículo voy a explicar cómo hacer páginas accesibles.


Plan

La creación

¿Ya tenés tu programa para hacer las páginas? Usá el que quieras. Yo no recomiendo ninguno, porque no uso ninguno. Si querés usar Publisher, Dreamweaver, FrontPage, etc., es cosa tuya. Pero si vas a usar alguno de ellos, por favor leé su manual. En serio. Y no me mandes preguntas relacionadas con el uso de esos programas que, como ya dije, no uso.

Lo primero que tenés que hacer es una carpeta. Dentro de esa carpeta tiene que estar todo tu sitio web. No puede haber ningún archivo afuera. Puede tener las subcarpetas que quieras, pero acordate, nada afuera.

En esa carpeta, y no en una subcarpeta, tiene que estar la página principal; esa página se debe llamar index.html, yo siempre le pongo .html de extensión y no .htm porque eso de las extensiones de tres letras es un invento de Microsoft, y yo odio a Microsoft ;)

Asegurate que tu programa esté guardando las páginas en formato HTML, y no en el formato ‘de proyecto’ que esos programas usan internamente. También te tenés que asegurar de que los links entre las páginas sean relativos y no absolutos. Leé la ayuda de tu programa para verificar esto.

Para convertir tus contenidos escritos a HTML, tenés dos opciones: la que recomiendo es que copies el texto del documento y lo pegues en el programa editor, o plantilla. La otra opción es que uses la opción del procesador de texto para convertir a HTML. Esta opción no es recomendable porque    tanto el Word como el Open Office hacen cosas muy asquerosas, sobre todo el Word.

Si escaneaste imágenes es posible que las tengas en formato TIFF o mapa de bits (.bmp); estos formatos son muy pesados y no son adecuados para la web. Debés usar un formato comprimido, ya sea JPEG para las fotos, o GIF o    PNG para los dibujos y gráficos. Debés optimizar la compresión para que pesen lo menos posible. Tenés que encontrar un balance entre calidad de imagen y tamaño del archivo.

Si en una página querés mostrar una imagen, por ejemplo una pintura, lo lógico es que esa imagen no pese más de 100 Kb. Mi consejo es que la página más todas sus dependencias no superen los 100 ∼ 120 Kb. Las dependencias son todos los recursos que utiliza una página cuando se carga, esto es las imágenes, la hoja de estilos, applets, flash, etc.

A la hora de hacer un sitio yo tengo un método infalible. Consiste en primero hacer una página de prueba, una especie de pueba piloto. Cuando el diseño de esa página esté bien, aceptable, convincente, le extraigo los contenidos y la convierto en plantilla. Y le extraigo la hoja de estilos para hacer una hoja de estilos externa. Leé la ayuda de tu programa para saber cómo hacer ambas    cosas.

Este método nunca falla. De este modo las páginas del sitio quedan todas con una estética uniforme. Un sitio debe mantener la misma estética en todas sus páginas.


Cosas que molestan

Tenés que entender que hay muchas cosas que molestan a los usuarios; y que debés evitarlas en tanto puedas. Es probable que si usás un programa “creador de páginas” (siempre lo pongo entre comillas ya que una página web es tan sólo un documento de texto) te agregue estas cosas en forma automática.

Estas son las cosas que molestan a la mayoría de los usuarios:

  • Páginas que tardan en cargarse: Cuando subas el sitio tenés que probarlo con una conexión de 56 Kbps, ya que la mayoría de los usuarios usan conexiones telefónicas y no banda ancha.
  • Pop-ups: Son las ventanas que se abren mientras navegás, hechas en JavaScript. Tratá de no usar JavaScript o al menos que la navegación de tu sitio no dependa de ello, ya que somos muchos los que desactivamos JavaScript en el navegador para no soportar los pop-ups.
  • Frames: Los frames causan infinidad de problemas al navegar, incluyendo dificultades para guardar páginas, agregarlas a favoritos o imprimirlas.
  • Páginas que se ven bien en un sólo navegador: Hay más de 10 navegadores en el mercado (Opera, Mozilla, Internet Explorer, Apple Navigator, Netscape, Amaya, Phoenix, Lynx, etc.). Pensá en todos y no discrimines.
  • Todo en Flash: por favor… que las páginas tengan un contenido real, que no sea todo en Flash.

Estas cosas molestan, pero hay cosas que tenés que saber que no podés hacer bajo ningún concepto:

  • Subir archivos con espacios en el nombre: convertí los espacios a guiones bajos _ sino el servidor no los va a poder entregar. Las URLs no pueden contener espacios.
  • Subir formatos propietarios: Nunca pongas archivos de Word, Excel, PowerPoint, etc. en un servidor web. La web está hecha en HTML, que se te grabe en la cabeza.
  • Robar cosas de otros sitios: Si bien todo lo que está en Internet es público, por lo menos dale el crédito a quien lo hizo originalmente.

No entiendo nada ¿Qué hago?

¿Estás usando un programa como FrontPage, Dreamweaver, Publisher, etc.? leé el manual. Leelo. En serio, leelo.

Si estás escribiendo el HTML a mano, como Dios manda, simplemente mirá las páginas que te gustan, mirá su código y copialo en el código de las tuyas.

Hacer un sitio es simple. En la carpeta que creaste, poné una página HTML con cada sección de tu sitio, con cada nota, artículo, segmento o como sea que los llames.

Linkeá las páginas entre sí. Desde index.html, se debe poder hacer un “caminito” de links hasta cualquiera de las otras páginas.

Tratá de hacer un menú que puedas copiar y pegar en todas las páginas, así desde cualquier página del sitio se puede saltar a cualquier sección.

¿Necesitás algo más? si lo podés navegar desde tu disco, el sitio ya está hecho. Descansá.


Subir el sitio

La parte final es subirlo. Tenés que registrarte en un hosting. Leé este documento sobre cómo elegir un hosting.

El hosting te va a pedir ciertos datos en un formaulario. Completalos. Después te van a mandar un mail con tu nombre de usuario FTP, contraseña FTP y la URL de tu sitio.

Vas a necesitar un cliente FTP para subirlo. Si usás Windows, te recomiendo el CuteFTP. Adiviná qué tenés que leer… sí, el manual.

Una vez que lo subiste por FTP, entrá a la URL que te daban en el mail. Mirá cómo quedó (a veces le agregan publicidad).

Si estás conforme, mandale la URL por mail a tus amigos. Probablemente ellos usen un navegador distinto del tuyo, así que los errores que reporten te servirán para que mejores el sitio.

Nunca tengas miedo de pedir consejos. Hay gente que está en esto desde antes que vos. Y acordate de actualizar el sitio regularmente.

Nuestra mejor Recomendación:

Deje que un experto realice su trabajo y obtenga un diseño Web profesional para garantizar el retorno de su inversión y el incremento en sus ganancias. Recuerde invertir en conocimiento nunca es un gasto por el contrario siempre reditúa. Contáctanos, asesoría telefónica sin compromiso

Le sugerimos también leer los artículos relacionados ¿Precio O Calidad?