Crea tu Web: Indice de diseño

Indice Visión general Previos Estructura Diseño Herramientas Recursos


Herramientas básicas

Básicamente una página web puede construirse con un simple editor de texto (como puede ser el bloc de notas de windows) siempre que se tenga un profundo conocimiento del pseudo lenguaje HTML, o al menos seamos capaz de memorizar todas sus etiquetas y atributos. Es lo que se conoce como vrear las páginas web a pelo.

Pero esto no es fácil y además un sitio web está compuesto de multitud de páginas enlazadas entre ellas, imágenes, archivos de scripts, archivos de estilos y un sinfín de elementos que debemos controlar. Por ello es conveniente disponer de algunos programas básicos que nos faciliten la tarea.

En este apartado te aconsejamos un entorno básico de trabajo, y algunas de las muchas herramientas que existen en el mercado, algunas son de pago y otras gratuitas. Aunque dicen que por ahi existen lugares donde los programas de pago son gratis (¿será verdad?)

Sistema operativo

¿Sistema operativo (SO) en tu entorno de desarrollo? El entorno de desarrollo va a ser donde editas tus páginas y donde inicialmente pruebas tus páginas. En cuando a desarrollo elige aquel SO en el que te sientas más cómodo. Ten encuenta que puedes encontrar más editores y utilidades para Windows que para Linux, aunque éste tiene emuladores para simular el sistema de Microsoft y poder ejecutar sus programas.

Las pruebas deben funcionar igual tanto si las haces en entorno Linux como en entorno Windows. Para casos más específicos puede que necesites un sistema operativo idéntico al usado por el servidor donde alojes tu sitio web. Pero no es problema, pues existen máquinas virtuales (Virtual Box, es la más extendida) que pueden emular perfectamente un servidor Linux bajo Windows o viceversa. Para que lo consideres al alojar tu sitio has de saber que alrededor del 70% de los servidores web (donde se alojan las páginas) funcionan bajo alguna distribución tipo Linux, y la más aconsejable por seguridad y también por precio.

Servidor local

No es indispensable, pero es muy aconsejable tener un servidor web instalado en nuestro ordenador. Puede ahorrarnos más de un dolor de cabeza con los enlaces situados en nuestras páginas. Un servidor local permitirá que podamos acceder a nuestro sitio en forma local (en nuestro ordenador) como si estuviéramos accediendo a él a través de internet, es decir, con una dirección tipo http://misitio/paginas.htm. Y antes de subir tu sitio al servidor donde lo alojes tendrás que probarlo en las condiciones más parecidas a las condiciones reales.

Además si vas a desarrollar páginas con PHP y con bases de datos el servidor local es imprescindible. Aunque en el mercado existen muchos programas para montar tu servidor local, el más extendido es el Apache, y también es el más barato: es gratis. También gratis es nginx (este se usa a veces junto a Apache, como proxy). No te va a ocupar mucho espacio ni te va a pedir complicadas operaciones de instalación y configuración. Además existe una amplia comunidad de usuarios va a permitirte encontrar soluciones a los problemas que se te puedan plantear.

Si usas bases de datos también necesitas un servidor de base de datos para las pruebas. Lo más habitual es usar un servidor MySql, la versión que corre actualmente en el universo web es MariaDB. Es simple de instalar y existe una gran comunidad de usuarios donde vas a encontrar soluciones.

Editores de páginas web

Aunque un editor de textos es suficiente para escribir una página web, no está de más contar con un programa específico que además te dará otras prestaciones enfocadas al mantenimiento de un sitio completo, como comprobación y actualización de enlaces, cambios en múltiples páginas, plantillas, etc.

Lo más sencillo es como decía un editor de textos, pero enriquecido como Notepad++, con facillidades para escribir código en diferentes lenguajes de programación. Es muy usado y una gran ayuda para editar páginas e incluso scripts. Existen más opciones, a destacar Visual Studio Code, con soporte para una gran variedad de lenguajes includídos HTML, PHP, Javascript y CSS. Realmetne interesante.

Editores específicos y enfocados a la gestión de sitios completos hay menos. Para iniciarse puede valer NVU (aunque está descontinuado desde hace años). Su sucesor es Bluefish, igualmente válido para iniciarse. Otra opción muy interesane es Aptana, un entorno de desarrollo muy completo, que permite incluso gestionar tus páginas a nivel de sitio web, incluye un cliente FTP y soporte para GIT (un entorno de desarrollo colaborativo, GitHub). Bueno y tienes nuestro editor online EdiWeb, que te permite crear páginas web, código javascript, estilos CSS y descargarlas a tu ordenador. Es una buena herramienta para probar código o para practicar lo que vayas aprendiendo.

En las opciones de pago, DreamWeaver (de Adobe) era el rey de los editores WYSIWYG, y caro, pero con un poco de investigación lo tienes gratis. Es un editor web con el que gestionas todo un sitio, y puedes editar como lo haces con un editor de texto, o en el modo WYSIWYG, que es una forma en la editas la página web tal y como se ve en el explorador, sin escribir cídigo HTML. En la práctica esto ya no es tan simple. Si usas Dreamweaver también vas a escribir mucho código a mano. Pero eso es bueno porque quieres aprender HTML.

Aparte de este tipo de software, de un tiempo a esta pare han surgido multitud de sistemas para editar páginas web por el sitema de pinchar y arrastrar: escoger elementos HTML (imágenes, tabls, bloques) con el ratón, arrastrarlos y colocarlos en tu página. Son diseñadores de páginas, muchos de ellos online y otros con opción de descargar a tu ordenador. La mayoría son ofrecidos por sitios de alojamiento para que alojes tus págínas en sus servidores. Auqnue también tienes una opcion gratis muy interesante, ofrecida por Google: Google Web Designer. Este método de creación de páginas es rápido, está bien pero no te va a ayudar a aprender a crear páginas web, solo a diseñar páginas, pero si necesitas modificar cualquier detalle te va a ser algo complicado.

Ampliar

Editor de imágenes

En otro apartado de esta guía se dice que las imágenes son prácticamente imprescindibles en las páginas web, razón por la cual no está de más disponer de un editor de imágenes. Con él podrás optimizar las imágenes, cambiar su formato o crear imágenes propias para botones o barras de navegación. Existen muchos programas que pueden serte útiles en este apartado, como por ejemplo el veterano Gimp (gratuito). Y luego tienes las opciones de pago como Photo Shop o Corel Photopaint.
Dentro de este apartado si vas a usar imágenes en formato gif animado deberás disponer de un programa al efecto, el más simple quizás sea el Easy Gif Animator, aunque si aprendes a utilizar el elemento <canvas> de HTML5 las animaciones serán un juego de niños.

Cliente FTP
Si el editor HTML que uses no lo posee, necesitaras un cliente FTP, es decir, un programa que te permita enviar las páginas que hayas creado a donde hayas alojado tu sitio web. Habitualmente es un programa que te conecta a tu alojamiento mostrándote lo que allí tienes almacenado (directorio remoto), al mismo tiempo te muestra lo que tienes en tu sitio local. Mediante algún botón o comando sencillo te permite como mínimo enviar ficheros a tu directorio remoto o recogerlos para traerlos a tu disco local. Hay algunos gratuitos como coffeCup FTP o FileZilla FTP. Además, es muy probable, que los servidores donde alojes tus páginas te ofrezcan algún sistema online para gestionar los archivos de tu sitio.
Estructura de los sitios web
Las imágenes en tu página
Diseño Web | Plantillas Web | Guia de Estilo | Lenguaje HTML

Comunidad Virtual. Alojamiento web gratis