Naturalmente hace falta algo de dedicación, y conseguir resultados avanzados requerirá bastantes horas de trabajo, pero tener lo mínimo para montar algo sencillo no exige demasiado. ¿Te animas a probar? Pues aquí llevas unos cuantos consejos para hacer tu primera página web, los cuales espero que sirvan para animarte a empezar en este apasionante (y a veces frustante) mundo.

Consigue un editor de código sencillo y competente

HTML y CSS, los lenguajes de programación más básicos que es necesario conocer para hacer diseño web, son muy sencillos; de hecho con una aplicación tan elemental como el Bloc de notas se podrían trabajar a la perfección. No obstante siempre es más cómodo disponer de algún editor de código que coloree las etiquetas y atributos que vayamos empleando, ya que así es infinitamente más fácil trabajar que con texto negro a secas.

Una muy buena opción para ello es Notepad ++, que además os será también útil si os atrevéis con otros lenguajes de programación. La alternativa de los editores web con modo visual también está ahí, pero personalmente es una opción que no recomiendo pues ni os permiten aprender de verdad a trabajar con webs, ni son tan precisos como el trabajo directo con el código.

Descarga plantillas web gratis

El movimiento se demuestra andando, así que la mejor opción que puedo recomendar para aprender lo que es una página web por dentro es la de plantillas web. En Internet hay miles de sitios que ofrecen plantillas web gratuitas para descargar, así que no os costará trabajo conseguir unas cuantas básicas para empezar a hacer pruebas con ellas, toquetearlas todo lo posible y descubrir así qué significa cada cosa.

Naturalmente, ayudará también mucho echar un vistazo a alguna guía sobre el significado de las etiquetas más importantes, y entender los principios básicos de HTML y CSS. Combinando este aprendizaje teórico con la práctica pura editando plantillas, el proceso se puede hacer muy ameno y accesible para cualquier usuario.

Aprende algo de diseño gráfico

Aunque con la suficiente destreza es posible crear páginas webs muy atractivas sólo con código, ese punto es mejor dejarlo para niveles más avanzados. Para gran cantidad de elementos del apartado visual de nuestra web, será necesario tener un conocimiento mínimo de programas de diseño gráfico: fondos de los elementos, botones, iconos, etc.

El estándar para esta tarea es el famoso Photoshop, pero ni es libre, ni tampoco precisamente barato, así que siempre quedan la alternativa de Gimp. Un consejo para ahorrar tiempo y esfuerzo: algunas veces las plantillas incluyen bocetos en formato PSD que podemos abrir en estos editores, para poder modificar cómodamente los diferentes elementos que las componen.

Monta un servidor local en tu ordenador

Este último paso ya queda para procesos más avanzados, pero será imprescindible cuando queráis desarrollar webs que funcionen en PHP o con bases de datos. Tal es el caso de gestores de contenido como WordPress, que necesitarán de un servidor local en marcha para poder funcionar. En realidad es muy fácil, y existen multitud de herramientas que nos permiten conseguirlo, como EasyPHP o XAMPP en Windows, y MAMP en Mac.

Todo esto son indicaciones básicas, orientaciones para vuestros primeros pasos por los caminos del diseño web. A partir de aquí cada uno puede seguir sus propios métodos, especializarse en algunos aspectos determinados y hacer las cosas como mejor le venga. Un último consejo, evidente para expertos, pero no tanto para recién iniciados: no uséis Internet Explorer como navegador de prueba mientras estáis diseñando, o podéis sufrir mucho.

Para que os animéis a realizar ese proyecto que tenéis en mente, esa foto que estáis deseando retocar desde hace tiempo, el póster que queríais crear para la fiesta de Halloween o esa página web tan sosa que estáis pensando en remodelar, en AnexoM hemos decidido recopilar las mejores páginas para descargar recursos de Photoshop. Hablamos de tutoriales, renders, pinceles, fuentes, motivos, acciones… Elementos que harán vuestro trabajo mucho más fácil y dotarán a vuestros montajes de una calidad y profesionalidad que ríete tú de los mejores diseñadores.

PSDSpy

¿Quién no se ha pasado horas recortando una foto y finalmente no ha quedado contento con el resultado? Pues básicamente todos los que lo hemos intentado. Para ayudarnos en ese aspecto existen páginas como ésta, que cuenta con una nutrida base de renders, imágenes recortadas, que podremos descargar sin ni siquiera registrarnos, para poder incluirlas en nuestros diseños.

Página oficial | PSDSpy

Diego Mattei

En esta ocasión nos encontramos ante un blog argentino que, además de diseños ya realizados que nos servirán de guía para nuestros propios trabajos, supone una de las mejores fuentes de plantillas, iconos y vectores que podemos encontrar en la red de redes. Sólo hay que buscar un poco para encontrar casi cualquier cosa que se os pase por la cabeza. Desde imágenes, hasta iconos, pasando por botones para webs, acciones o degradados. Muy recomendable para tenerla en nuestro lector de feeds y mantenernos atentos a sus novedades diarias.

Página oficial | Diego Mattei

Cosas Sencillas

Aquí tenemos otra web con contenidos muy variados. En este caso además de las diferentes descargas de recursos que se nos pondrán en bandeja de plata, encontraremos múltiples enlaces a diferentes páginas que nos permitan acceder a stocks de imágenes, wallpapers inspirativos o las noticias más relevantes del mundo del diseño. Sumémosle su inabarcable número de entradas relacionadas con la longevidad del site y correremos el riesgo de quedarnos embobados buscando nuevos elementos en vez de ponernos manos a la obra.

Página oficial | Cosas Sencillas

Adobe Tutorialz

Una vez tenemos todos los elementos posibles el siguiente paso es ponernos manos a la obra. Pero llegado este punto nos encontramos con el primer bache, la falta de inspiración. Que sumado a la falta de práctica nos pondrá cuesta arriba el mero hecho de tan siquiera intentar crear algo decente. Para ello haremos uso de algunos de los muchos tutoriales que se encuentran en la página que os facilitamos. No os asustéis al ver el resultado de cada proceso, tienen su curro pero con un poco de maña y paciencia podréis sacarlos adelante.

Página oficial | Adobe Tutorialz

DevianART

En realidad la lista de sitios podría reducirse simplemente a esta página, puesto que aquí encontraremos todos los recursos necesarios para nuestros diseños: tutoriales, renders, pinceles, acciones… Útiles que además se actualizan a un ritmo increíble y por los que no tendremos que pagar ni un euro. Los integrantes de la página se encargan de mantener el índice de contenidos bien nutrido y si queremos realizar nuestra propia aportación sólo tendremos que registrarnos para crear nuestro propio portfolio en la basta comunidad de artistas que puebla el site. Lo peor es que aquí se juntan aportes amateurs con profesionales, por lo que la criba a la hora de encontrar lo que buscamos deberá ser más rigurosa.

Página oficial | DeviantART

En esta ocasión iremos un poco más allá y, para aquellos que no podáis permitiros contratar la licencia de un programa como los de Adobe, os ofrecemos las mejores alternativas a Photoshop de libre descarga . Programas completamente gratuitos que podréis empezar a disfrutar desde ya y, con un poco de práctica, hacer de vuestra colección de fotografías una colección digna de ser expuesta en cualquier galería.

GIMP

GIMP (GNU Image Manipulation Program) es un editor de imágenes libre y gratuito que se encuentra bajo licencia pública de GNU. Podremos disfrutar de él desde cualquier sistema, ya sea Linux, Mac o Windows y nos permitirá trabajar con las mismas herramientas y formatos que han hecho famoso al programa de Adobe.

La posibilidad de añadir plugins que faciliten nuestras tareas, sumado a la comunidad de usuarios que fomenta el programa con tutoriales y el hecho de contar con más de 50 idiomas (entre los que se encuentra el español), han convertido a GIMP en el editor de imágenes freeware más famoso de la red.

Página oficial | GIMP

Paint.NET

Si GIMP es el rey de las alternativas libres a Photoshop, Paint.NET sin duda es la reina. Comúnmente conocido como el sucesor del mítico Paint de Windows, este editor de libre descarga es uno de los más usados entre los usuarios. Funciona sólo bajo el sistema de Microsoft y hace uso de las librerías .NET para trabajar a una velocidad envidiable.

Su última versión es la 3.5 y fue lanzada a principios de este mismo mes. Si buscas un editor sencillo que se encuentre a caballo entre la simpleza del Paint original y los entresijos profesionales de un sistema como Photoshop, ésta es sin duda una de las opciones más recomendables.

Página oficial | Paint.NET

Artweaver

Mientras que las dos opciones anteriores iban enfocadas al retoque fotográfico, Artweaver es la alternativa gratuita a Photoshop para aquellos usuarios más en contacto con el resto de artes gráficas. Eso no quiere decir que no podamos editar fotografías con él, pero la grandeza de este programa se encuentra en la creación y edición de dibujo.

Trabaja con gran cantidad de formatos, capas, plugins y además nos brinda la posibilidad de utilizar una de las colecciones de pinceles más grandes que ha tenido un programa hasta la fecha. Eso sin contar las opciones de personalización que nos permitirán cada uno de ellos. 9 megas de programa que harán las delicias de todos aquellos usuarios de Windows aficionados al dibujo digital.

Página oficial | Artweaver

Si actualmente te encuentras en esa situación, has llegado al artículo adecuado. Voy a recoger en diferentes categorías los programas básicos que necesitarás para empezar a trabajar en una página web sin que se te quede nada por el camino, así que toma muy buena nota de todos ellos.

Un editor web competente

Para mi gusto, la mejor opción que puedes encontrar en este terreno es Coda, una aplicación extraordinariamente versátil, completa y agradable de usar, aunque la pega para la gran mayoría de usuarios es que sólo está disponible en Mac. Si eres usuario de Windows, la mejor opción por la que puedes optar actualmente es un clásico como Dreamweaver, incluido en la suite creativa de Adobe. Es importante precisar que ambas opciones son de pago.

Sitio oficial | Coda | Dreamweaver

Un buen editor de imágenes

Con el programa para crear la web en sí no basta, pues hoy en día el diseño web exige bastante más que saber tratar el código (que no es poco). El toque de calidad definitivo lo dan unas buenas imágenes que acompañen los distintos elementos de la página, su fondo, la cabecera, etc. Para ello necesitamos un buen editor de imágenes, y para mi gusto la mejor opción en este terreno es Photoshop. Cuenta con el evidente inconveniente de su coste, por lo que si buscáis una opción libre e igualmente competente, optad por GIMP.

Sitio oficial | Photoshop | GIMP

Un servidor local para proyectos avanzados

Si queremos diseñar una página web que precise de un servidor Apache, PHP funcional o de bases de datos de cualquier tipo (por ejemplo un blog en WordPress), necesitaremos generar un servidor local para poder avanzar en el proceso de desarrollo. En este sentido, para Windows disponemos de una alternativa muy eficaz y a coste cero que es AppServ, mientras que en Mac encontramos la excelente oferta llamada MAMP.

Sitio oficial | AppServ | MAMP

Un cliente para las transferencias FTP

Una vez terminada nuestra obra, será necesario subirla a algún servidor para que todo el mundo pueda disfrutar de ella. Para esta tarea necesitaremos algún cliente FTP que nos permita gestionar la transferencia de los archivos desde nuestro ordenador a su emplazamiento definitivo, y para esta función no se me ocurre alternativa mejor que Filezilla. Eficaz, completo, cómodo y por supuesto completamente gratuito. ¿Se le puede pedir algo más?

Sitio oficial | FileZilla

Todos los navegadores posibles

Por último ya, queda la parte más desagradable para el diseñador web. Y es que por mucho que nos pese, cada navegador del mercado tiene la fea costumbre de mostrar las páginas a su antojo, provocando que nuestra obra se vea de manera diferente para cada visitante en función del navegador que use, pudiendo en algunos casos producirse errores verdaderamente graves. El más problemático y a la vez más extendido es Internet Explorer, por lo que será necesario tener instalado en nuestro equipo todas las versiones posibles (al menos, el 6, el 7 y el 8); si usamos Mac o Linux, habrá que optar por la virtualización de Windows. Naturalmente, también habrá que hacer pruebas en Firefox, Chrome, Opera y Safari como mínimo. ¡Y a armarse de paciencia!