domingo, 25 de septiembre de 2016

¿Cómo poner una web en marcha?

Qué encontrarás en esta entrada?
  • ¿Cómo diseñar una página web sin partir de cero?
  • ¿Cómo alojarla para compartirla con el mundo?
  • Cambios en Astaroth's Photography siguiendo estas indicaciones. 

Recientemente he querido modernizar mi website de fotografía, Astaroth's Photography. Más adelante, en esta misma entrada, os hablaré de ello, pero ahora quería abordar el tema de cómo poner en marcha un web de forma rápida y sencilla.


Evidentemente, hay muchas respuestas válidas a lo anterior, dependiendo del grado de profesionalidad que queramos y del dinero que estemos dispuestos a gastarnos en ello, pero aquí vamos a hablar de una solución sencilla y gratuita para poner en marcha una pequeña web de manera rápida y satisfactoria.

Antes de empezar, agradecer a Altair·Mikoto el soporte que me ha prestado con este tema.


¿Cómo poner una web en marcha?

Paso 1: diseñar la web

Para ello, no vamos a empezar desde cero, sino que vamos a partir de los ejemplos de Bootstrap.


Lo primero que haremos será acceder a la página de Bootstrap y descargárnoslo donde pone "Download Bootstrap". Esta acción descarga una serie de archivos que serán necesarios para los pasos siguientes.

En la misma carpeta donde se han descargado los archivos anteriores, guardamos el código HTML de alguna de las páginas de ejemplo que nos gusten de Bootstrap. Una forma de hacer esto es meternos en una de estas páginas, mostramos el código HTML (en Firefox se hace con la combinación "Ctrl+u"), lo copiamos y pegamos en un archivo en nuestra carpeta de trabajo llamado, por ejemplo, "index.html".

Ejemplos en Bootstrap

En el código veremos que se hace una llamada a un archivo ".css". Será necesario también descargar este archivo, porque incluye la información sobre el diseño de la página.

Después, modificamos al gusto el código para adaptarlo a nuestras necesidades. Este paso puede ser complicado para alguien que, como yo, tiene unos conocimientos muy básicos o nulos sobre HTML/css, pero en Internet hay millones de webs que te ayudan en lo que necesites: basta con recurrir al buscador de Google.

Supongamos que, al final de este paso, tenemos diseñada nuestra web en local. Ahora hay que ponerla en Internet.


Paso 2: Hosting/dominio

Aquí hay una gran variedad de alternativas para todos los gustos y carteras. La que mejor se adaptaba a mis necesidades es el plan gratuito de Hostinger. Este servicio nos soluciona dos problemas de una vez y de manera gratuita:

  • Hostig: nos permite alojar los archivos que ya teníamos funcionando en local al final del paso 1.
  • Dominio: nos proporciona una dirección gratuita a través de la cual la gente pueda acceder a estos archivos.

Como es lógico, al ser un plan gratuito presenta sus limitaciones, pero en principio no son  limitaciones relevantes de cara a montar una pequeña web personal. Quizás lo que más me ha fastidiado a mi sea la elección del dominio gratuito: pocas opciones y no demasiado atractivas, pero... ¡es gratis! Al final me decanté por ".esy.es".

Si queremos superar estas limitaciones deberemos acceder a un plan de pago.

Una vez que nos hemos registrado en el plan gratuito de Hostinger, sólo tenemos que ir a las herramientas que nos proporcionan y seleccionar "Importar sitio".


Se comprimen los archivos que habíamos generado en local en un ".zip", y se arrastran directamente a la herramienta de importación. ¡Ya está! Así de sencillo: lo que teníamos en local ya estaría en Internet accesible a todo el mundo.


Astaroth's Photography

A continuación os hablaré un poco de Astaroth's Photography.

Algunos a lo mejor recordáis aquel primer intento en Winx. El 15 de mayo de 2010 veía la luz mi primer porfolio fotográfico, aunque la navegación era pesada y el diseño bastante mejorable.

Astaroth's Photography en Winx (15/05/2010)

El 12 de junio de 2011 creé un Google site con mi nuevo porfolio. Éste incluía nuevas funcionalidades y presentaba mayor flexibilidad en el diseño, aunque terminó quedando con un aspecto bastante poco amigable y algo recargado.

Astaroth's Photography en Google Sites (12/06/2011)

El mantenimiento era también bastante complicado, porque dependía de aplicaciones externas que dejaron de funcionar a lo largo del tiempo.

Ayer, 24 de septiembre de 2016, presenté mi nuevo intento, en este caso desarrollado tal y como se cuenta en la primera parte de esta entrada.

Astaroth's Photography basado en Bootstrap (24/09/2016)

Creo que en esta ocasión presenta un estilo más sencillo, limpio y de fácil lectura, sin renunciar a mostrar toda la información y enlaces que se deseaba.

Si quieres, puedes echar un vistazo en:

No hay comentarios:

Publicar un comentario

Querido astarothista!,

Si te ha gustado la entrada y quieres dejar constancia de ello, tienes alguna sugerencia para completarla o corregirla, quieres mostrar tu opinión respecto a algo de lo que se haya hablado en esta entrada (con respeto) o simplemente quieres dejarme un mensaje a mi o a la comunidad, no dudes en comentar ;)!

Recuerda que también estamos en Facebook y en Google+.