Crear una web, ¿por dónde empiezo? (I)

Hay personas con poca experiencia en programación, que nos preguntan por dónde empezar, qué deben aprender para poder crear ellos mismos páginas web.

En nuestra respuesta tratamos de orientarles según sus conocimientos técnicos y objetivos. Algunos solo quieren crear un sitio web personal o para su negocio para presentar información con texto, imágenes, videos o presentaciones. Otros en cambio, desean desarrollar aplicaciones web interactivas de una cierta complejidad.

En este primer artículo nos centraremos en el objetivo más básico. Para ello,  existen muchas soluciones que permiten publicar ese tipo de información en formato web sin necesidad de instalar nada ni aprender ningún lenguaje informático específico. Vamos a ver algunas de las más utilizadas:

Página en Redes Sociales

La opción más básica de publicación en la Web pasa posiblemente por darte de alta un perfil en algunas de las redes sociales más populares e incorporar allí tu información personal. Además, te ofrecen la posibilidad de crear una página específica para tu empresa, cómo se explican por ejemplo en estos enlaces de Facebook o Linkedin.

Con esta opción no tenemos un dominio propio y según la red, pueden estar bastantes limitadas las posibilidades que tenemos, pero si somos una empresa y queremos iteractuar con los clientes y obtener nuevos contactos, debemos estar en aquellas que frecuentan nuestros usuarios. Hoy en día es un complemento necesario a nuestra propia web y debe plantearse con una estrategia integral tal como analizamos en nuestro curso de Community Manager

Servicios de alojamiento: Blogs y Webs

La siguiente posibilidad, muy utilizada, es dar de alta un blog en servicios como WordPress.com o Blogger y convertirlo en tu web, con la facilidad que te ofrecen sus gestores de contenidos para publicar información.

WordPress.com da muchas posibilidades de configuración, empezando por más de 200 themes (temas o plantillas de estilo) que te permiten tener un web con un diseño muy atractivo y funcional, pero en la opción gratuita no tienes dominio propio y pueden llegar a incluirte publicidad sin que tengas control sobre ella. No obstante ofrecen paquetes de pago que te permiten hacer un upgrade y obtener funcionalidades avanzadas y resolver esas cuestiones si te son importantes.

Otra posibilidad es crear tu sitio web con servicios gratuitos que ofrecen un sistema de plantillas predefinidas y un interfaz gráfico que permite configurarlas y personalizarlas según tus necesidades y publicarlas bajo un subdominio suyo, como son Webnode, Bligoo, Site123 o Google Sites. En este último servicio puedes tener además tu dominio propio de primer nivel y asignar esa URL a tu sitio Google, con lo que tendrías dirección propia con un hosting gratuito. Se puede montar una web ‘decente’ en poco tiempo, pero si tienes conocimientos, con un poco más de esfuerzo puedes crear sitios bastantes interesantes ya que puedes acceder al código fuente de las páginas. De hecho hay compañías de diseño web que se especializan en este entorno. No llega a las posibilidades que ofrece WordPress.com, con su enorme comunidad de desarrolladores y gran cantidad de themes o plugins pero es una solución gratuita sin publicidad.

 

 

También te proporcionan este tipo de herramienta muchos servicios de hosting (alojamiento web) que te incluyen además dominio propio de nivel superior (.es, .com…). Si no quieres invertir mucho al inicio, quizás puedas encontrar algunas ofertas gratuitas o a precios muy bajos (menos de 1 €/mes) con regalo de dominio, como en 1&1 o One.com, aunque las ofertas varían mucho y pueden haber cambiado y suelen estar limitadas al primer año solo.

Estos web ‘prefabricados’ pueden tener funcionalidades como un blog, formularios de contacto y otras varias que funcionan de manera integrada. No obstante, si necesitamos tener un sistema de blog avanzado como WordPress.org  o una Tienda Virtual para comercio electrónico como Prestashop o Zen Cart por citar algunas, es probable que nuestro servicio de hosting nos proporcione una herramienta para instalar este tipo de aplicaciones automáticamente como Simple Scripts, Fantástico o Softacolous.

De hecho, una opción muy usual es generar íntegramente nuestra Web con estos CMS (gestores de contenido), destacando especialmente WordPress, el más usado a nivel mundial. Este software libre y gratuito es fácil de operar y nos ayuda a crear webs con funcionalidades avanzadas y una presentación profesional. Si quieres animarte a probarlo, con nuestros contenidos y curso «Aprende a crear sitios web con WordPress» sabrás desarrollar y publicar tu propia web, personal o profesional (y si los costes son muy importantes para tí, te mostramos cómo hacerlo utilizando solo servicios y herramientas gratuitas). Eso sí, para sacar todo el partido a este CMS, es conveniente estar familiarizados con HTML y CSS para tener un mayor control en el diseño de las páginas. Y si además conocemos algo de JavaScript y PHP, ese control en el diseño y la gestión del sitio será aún mayor.

Para aquellos que todo este tipo de soluciones y conceptos les resultan nuevos y necesitan una introducción para entenderlos mejor, diseñamos nuestro curso de Alojamiento Web-Publicación en Internet . En él, los alumnos practican y aprenden a elegir la solución que más le puede interesar al mismo tiempo que descubren sus funcionalidades y comprenden los términos básicos (DNS, TLD, subdominio, CPanel, FTP, instalador aplicaciones…) que aún siendo sencillos, pueden hacer que una persona que no esté familiarizado con ellos se pierda antes de empezar.

Aprender HTML y CSS

Pero aún teniendo todas estas opciones, en muchos casos fáciles de poner en marcha y gratuitas, aconsejamos que aprendas al menos dos lenguajes básicos para la Web: HTML y CSS. ¿Por qué? Pues por varias razones que te exponemos a continuación:

• Las posibilidades que te dan un interfaz gráfico y unas plantillas acaban teniendo limitaciones. Si conoces estos lenguajes y te permiten acceder al código, puedes ajustar y personalizar mucho mejor, según tu gusto y necesidades. (Ojo! los CMS que hemos citados generan la mayor parte del HTML con PHP, por lo que necesitarías saber de este último como veremos en artículos posteriores).
• HTML es un lenguaje de marcado con etiquetas y CSS son reglas de estilos de presentación, es decir, no son lenguajes de programación. Nuestra experiencia después de enseñar HTML y CSS a numerosos alumnos con conocimientos a nivel de usuario informático es que los entienden con fácilidad y son capaces de utilizarlos enseguida. Si no sabes nada de ellos, aquí te ofrecemos una Guía de introducción a HTML y CSS para hacerte una idea.
• El aprendizaje de estos lenguajes te amplia tu visión a la hora de crear contenidos y distribuirlos en diferentes formatos. Aprendes a tratar de forma diferenciada el contenido de su presentación, a estructurar semánticamente la información, y en definitiva a ver las diferencias entre el diseño y la publicación enfocada a medios impresos respecto a la Web, con diversidad de dispositivos, pantallas, navegadores o aplicaciones donde se puede llegar a visualizar el contenido que has creado.
• El conocer estos lenguajes te abre la puerta para crear tus propias páginas web sin depender de ningún entorno o sistema. Puede que muchos no entiendan esa necesidad existiendo servicios cómo los que hemos presentado, pero puede haber varias razones para ello, cómo el querer tener el control total sobre lo que creas o realizarlo como ejercicio de aprendizaje para ir adquiriendo una base sólida de conocimientos en el campo del diseño y programación web.

 

Si te convencen estos argumentos, puedes empezar con lo más sencillo, una simple página creada con un editor online como Thimble de Mozilla que permite publicación instantánea.

Si quieres avanzar e iniciar la creación de tu sitio, te aconsejamos que te instales en tu equipo un editor especializado para este tipo de tareas. Hay decenas de ellos, con un gran rango de funcionalidades. Opciones interesantes, de código abierto y gratuitas son Geany (Linux) y Notepad++  (Windows), si quieres editar el código directamente (muchísimo más potente que el simple Notepad, con el que no tiene nada que ver) o KompoZer si quieres tener también funcionalidades WYSIWYG (edición en modo gráfico), aunque sin versiones nuevas desde hace tiempo. En cualquier caso busca entre las numerosas alternativas, prueba y elige el que más te guste.

Aunque te hayas formado en los fundamentos y buenas prácticas del diseño web (estándares, accesibilidad,…)  crear una web desde cero es complicado si no se tiene experiencia. Una opción que te ahorraría tiempo y te ayudará a crear mejores sitios es basarte en diseños-plantillas con licencias abiertas, que puedes descargar gratuitamente de sitios como  Open Source Web Design o Open Designs . Por un lado aprenderás del trabajo de personas con más conocimiento en este campo, estudiando y personalizando su código HTML y CSS, y además, si no tienes experiencia en el diseño gráfico y de interfaces, conseguirás una presentación más accesible y profesional.

El diseño de una web, como concepto integral, es un aspecto que muchas veces descuidamos (la adecuada selección de colores, tipografías, división en secciones, navegación y distribución de la información…) y es fundamental para que nuestra web no solo sea atractiva, sino cómoda y fácil de visitar. Además, una buena accesibilidad y cumplir los estándares nos ayudará en lo que conocemos como SEO, es decir, la optimización en buscadores. Hay más aspectos implicados, y no vamos a hablar de ello ahora, pero sí que los factores on-page relativos al diseño de las páginas los debemos tener en cuenta desde el inicio de nuestro desarrollo.

Para más avanzados…

Si adquieres más experiencia en el diseño web puedes utilizar los tan de moda ‘front-end frameworks‘ , como Bootsptrap de Twitter o HTMLKick Start que facilitan un desarrollo rápido, utilizando las mejores prácticas, diseño adaptativo y otras características muy interesantes, aunque creemos que deberías estar familiarizado con el lenguaje de programación Javascript, que sería el siguiente paso a dar en tu aprendizaje.

Esta es una primera contestación, pero la iremos ampliando en nuevos artículos, donde hablaremos de las posibilidades del nuevo HTML5 con el citado Javascript (y librerias como jQuery), de lenguajes que se ejecutan en el servidor web y que permiten el desarrollo de sitios dinámicos y aplicaciones web como PHP o Pyhton utilizando bases de datos, y de otra serie de herramientas, entornos y conceptos que quizás hayas oído nombrar pero no tengas claro qué son o para qué se utilizan.