Tutoriales Cómo Crear Una Web en Pocos Pasos - Segunda Entrega

Inicio y Configuración

Existen varios recursos que facilitan a los usuarios la construcción de un sitio web, como Blogger, Wordpress o Joomla. Sin embargo, para sacarle el máximo partido, es imprescindible tener conocimientos de programación web y código HTML. Pero el objetivo de estos tutoriales es aprender a crear una web sin saber programar, en pocos pasos, por lo que utilizaremos la herramienta online Drimgoo. Durante este periodo de aprendizaje, usaremos la versión gratuita, que tiene una duración de 15 días y está libre de restricciones.

Date de alta en Drimgoo de forma gratuita

En primer lugar, debemos acceder al portal de Drimgoo. Una vez allí, en el menú superior entraremos en el apartado “Demo”.

Ahora estamos en la página donde se nos pide un correo electrónico. Introduciremos uno válido.

Al cabo de unos momentos, recibirás en la dirección que has proporcionado un correo de bienvenida a Drimgoo. En él, aparecerá la dirección de tu sitio en Drimgoo así como un nombre de usuario y una contraseña provisional.

Ve a tu sitio web a través del enlace que te proporcionamos. Una vez allí, vamos a familiarizarnos con los elementos de la página. En la parte superior a la derecha, tenemos el Menú Auxiliar; a continuación, el nombre del sitio y la cabecera junto con el menú principal; seguidamente, el cuerpo de la página, donde aparece un texto de prueba y junto a él, un menú lateral. Iremos viendo estos elementos más detenidamente a lo largo de los tutoriales y aprenderemos a configurarlos.

Ahora, ingresemos nuestros datos para empezar a personalizar nuestra web.

Accediendo al Panel de Control

Empecemos definiendo qué es el Panel de Control. Se trata del lugar donde gestionarás todo el contenido de la página, además de rediseñar su aspecto, cambiar tu configuración de usuario, etc. Esta parte nunca es accesible al público, solo aquella persona que posea tu nombre de usuario y tu contraseña podrá entrar.

Para entrar al Panel de Control, debes ir al botón de la esquina inferior izquierda de tu página. Al acceder a él se desplegará el menú en el que tienes que introducir tus datos. Ahora mismo, serán el nombre de usuario y la contraseña provisionales que Drimgoo te ha facilitado en el mail de bienvenida.

Una vez accedamos, veremos que en la parte superior de nuestra web ha aparecido el menú del Panel de Control.

Como podemos comprobar, este menú está dividido en 6 bloques. Los 5 primeros son los aspectos generales en los que se divide la gestión de nuestro sitio web. Al pasar el ratón por cada uno de estos apartados, se desplegará un submenú con los diferentes elementos que lo componen. El sexto bloque nos permite ver el sitio tal y como lo ve el público. De esta forma, podemos controlar cómodamente cómo van quedando nuestras actualizaciones. En esta parte también se encuentra el botón “Desconectar”, para salir del Panel una vez hayamos terminado de trabajar con él.

Configuración

Este es el menú de Configuración. Antes de detenernos paso a paso en él, es muy recomendable hacer tres ajustes previos.

En primer lugar, entramos en el apartado Mi Perfil. Las primeras opciones que nos ofrece son los cambios de usuario y contraseña. Es muy importante que esto sea una de las primeras cosas que hagamos y que no demos a conocer estos datos a nadie que no queramos que controle nuestra web. Cuando hayamos escrito el nuevo usuario y la nueva contraseña no podemos olvidarnos de guardar para que los cambios surtan efecto.

En segundo lugar, iremos a la sección Estructura del Portal. En la mitad inferior, tenemos la opción “Estado del Sitio”. Aquí podemos decidir si queremos dejar un mensaje informando al visitante de que el sitio está en construcción o no. También podemos personalizar dicho mensaje.

Para hacerlo, seleccionamos la opción “En construcción”, escribimos un mensaje personalizado en el recuadro (si queremos) y guardamos en el botón de abajo.

¿Qué quiere decir esto? El mensaje “en construcción” se utiliza cuando una web aún no está terminada o se están haciendo remodelaciones importantes en cuanto a diseño o a contenido. No significa que cada vez que vayamos a publicar una noticia, imagen o similar tengamos que ponerlo. Pero sí puede ser aconsejable que mientras no haya suficiente contenido usemos este recurso para que nadie se encuentre nuestra página vacía o a medio hacer, pues puede dar la impresión de que no nos preocupamos por ella.

Si activamos la opción “En construcción” y vemos nuestro sitio, nos encontraremos lo siguiente. Es el mismo mensaje que se encontrará cualquier usuario que visite nuestra página mientras tengamos activada la opción “En construcción”.

Por último lugar, nos dirigimos al último apartado del menú Configuración: Idiomas. En él, debemos elegir el idioma o idiomas en los que va a trabajar nuestro portal, tanto en la parte pública abierta a todos los internautas, como en nuestra zona privada de administración.

También debemos seleccionar cuál va a ser el idioma por defecto en el que va a trabajar nuestro sitio. Para tomar esta decisión, debemos tener en cuenta qué tipo de actividad vamos a desarrollar y a qué público nos queremos dirigir principalmente. De cualquier forma, puede ser que en el transcurso de nuestra actividad queramos cambiar esto. Es posible que en un principio pensáramos que íbamos a tener más éxito en España, pero con el tiempo nos damos cuenta de que nos visitan más desde Inglaterra. En ese caso, podríamos seleccionar el inglés como idioma por defecto.

Siempre hay que tener presente que habrá que configurar nuestro contenido según los idiomas en los que trabajemos. Veremos esto más adelante.

Una vez listo todo esto, vamos a detenernos paso a paso en todo el bloque de Configuración.

Mi Cuenta

Este apartado es meramente informativo. En él podremos comprobar el espacio que tenemos ocupado, las características de nuestra cuenta, etc.

En este sentido, lo más importante es tener en cuenta que una versión gratuita de Drimgoo cuenta con 5Mb de capacidad. Es decir, podemos subir archivos a nuestra web hasta que ocupemos esos 5Mb (si quieres saber cómo ampliar la capacidad de tu sitio, infórmate en nuestro portal). La barra de Control de Espacio, situada arriba a la izquierda y presente en todo momento dentro del Panel de Control, nos informa de cuánto de ese espacio hemos consumido. La parte verde es la que ya hemos ocupado y la gris la que aún tenemos libre.

Por su parte, la Gráfica de Consumo, nos informa del espacio libre, del espacio ocupado y también por qué tipo de información está ocupada, si ficheros (imágenes, documentos, etc.) o por bases de datos.

 

Mi Perfil

Ya hemos estado antes aquí para cambiar el nombre de usuario y la contraseña. Ahora podemos pararnos más detenidamente. En esta sección estableceremos nuestros datos según los campos que nos piden, tal y como se muestra en la tabla. 

Como podéis comprobar, tiene puntos especialmente pensados para las empresas, de forma que podamos usar Drimgoo para gestionar nuestro negocio en Internet. Cuando terminemos de rellenar los datos, le damos a guardar y listo.

Datos del contacto

Los datos que fijemos aquí aparecerán en la sección de Contacto de nuestro sitio, situada en el Menú Auxiliar, en la esquina superior derecha de la web (es decir, la web fuera del Panel de Control). 

Los datos mostrados son los que están establecidos en la tabla. Introducir el e-mail, el teléfono, el fax y la dirección no tiene complicación. Pero vamos a explicar cómo establecer el Mapa de Localización con Google Maps. Comprobaréis que es una tarea sencilla, pero la primera vez quizá resulte algo confusa. Vamos a aclararlo todo.

Para empezar, nos vamos a Google. Una vez allí, nos dirigimos a la pestaña “Mapas”, que está situada en el menú que hay en la esquina superior izquierda. Cuando accedamos a ese apartado, veremos un mapa y sobre él una barra de búsqueda. Ahí debemos introducir la dirección que queremos que aparezca en nuestro contacto. Separaremos los elementos de la dirección (nombre de la vía, número, ciudad, etc.) por comas. Resultará más fácil encontrar el lugar en la medida de lo específicos que hayamos sido al introducir la dirección. Así, si nuestro negocio estuviese, por ejemplo, en el número 20 de la Calle Sierpes de Sevilla, escribiríamos “Calle Sierpes, 20, Sevilla”. Una vez realizada la búsqueda, el mapa te señalará el lugar con una especie de chincheta.

En la esquina superior derecha del mapa podemos elegir verlo a través de imágenes del satélite o como un plano normal.

Una vez hayamos decidido, nos dirigimos a la parte superior derecha del mapa: justo encima del botón que nos permite cambiar a plano o satélite, hay una pestaña que pone “Enlazar”. Al acceder a ella, se despliega una pequeña ventana. En la parte inferior de dicha ventana, hay un enlace en el que puede leerse “Personalizar y obtener vista previa del mapa que se va a insertar”. Abrimos este vínculo y aparecerá una ventana emergente en la que se nos permite elegir el tamaño del mapa y qué parte del mismo va a verse. Comprobamos que de forma predeterminada nos aparece una vista del mapa muy alejada, lo que puede dificultar su lectura. Para acercarnos más y movernos por él utilizaremos los botones que hay a la izquierda del mapa que estamos personalizando, aunque también podemos hacer click sobre él y, sin soltar el botón, mover el ratón en la dirección que queramos.

Una vez lo tengamos como nos gusta, vamos al código que hay debajo del mapa (siempre dentro de esta ventana emergente). Lo seleccionamos entero y lo copiamos. Es muy importante que no falte absolutamente nada de ese código y que no cambiemos nada.

Cuando ya lo tengamos copiado, volvemos a nuestro Panel de Control de Drimgoo, al apartado Datos del Contacto dentro de Configuración. En el espacio dedicado al Mapa de Localización, borramos el código que hay escrito y pegamos el nuestro. Lo guardamos y ya podemos verlo en nuestro sitio.

Visualización de módulos

En nuestro sitio web, tanto en la parte inferior de la cabecera como en la parte derecha de la pantalla, podemos ver los módulos o secciones que componen el contenido de la web. Algunos aparecen en ambos lugares y otros solo en uno de ellos.

En este apartado podemos configurar cómo van a aparecer estos módulos. Recordemos que tendremos que configurar la visualización tantas veces como idiomas tengamos. Es decir, si hemos elegido trabajar en español e inglés, tendremos que configurarlo dos veces.

¿Cómo lo hacemos? En el menú desplegable superior elegimos uno de los idiomas. Configuramos los módulos según la tabla. Primero, los nombres; después, el lugar de visualización (puede ser en el menú, en el lateral, en ambos, o bien podemos eliminarlos); finalmente, podemos decidir el orden en el que queremos que aparezcan asignándoles a cada uno un número del 1 al 6. Cuando terminemos, guardamos los cambios, seleccionamos otro idioma y repetimos los mismos pasos, teniendo en cuenta que debemos cambiar los nombres de los módulos en función del idioma en el que estemos trabajando. Y así sucesivamente hasta tener cubiertos todos los idiomas en los que vaya a aparecer nuestro sitio.

Estilos y Colores Base

Al entrar en este apartado, es posible que quien no esté familiarizado con los códigos de color se desconcierte en un principio, pero no hay motivo para ello.

Para empezar, Drimgoo nos da la opción de seleccionar el color para varios elementos. Para elegir cada color no nos tenemos que saber de memoria los códigos, ni siquiera tenemos que buscar una lista donde aparezcan. Basta simplemente con que hagamos click sobre el color que queremos cambiar y se desplegará una ventana donde podremos elegir el color y el tono deseado para el elemento que estamos personalizando. Como siempre, una vez tengamos todos los colores definidos, debemos guardar para que los cambios surtan efecto.

Antes de continuar, vamos a aclarar algo. La mayoría de los elementos que se personalizan aquí no necesitan explicación, pero el concepto “migas de pan” puede resultar desconocido para quien no tenga amplios conocimientos web. Es muy sencillo. Las “migas de pan”, que en Drimgoo se sitúan bajo la cabecera, muestran el rastro que indica en qué parte del sitio está el usuario, por ejemplo:

Cabecera y Logotipo

Lo primero que hay que decidir es si en la cabecera queremos que aparezca un logotipo o simplemente nuestro el nombre de la web. Esto lo especificamos en la tercera opción, “Mostrar en la cabecera”. Una vez hayamos aclarado esto, debemos escribir el nombre de la web. Aunque hayamos decidido sustituirlo por un logo, es importante que lo tengamos escrito pues esa información es leída por los buscadores como Google, por lo que es bueno facilitarles el trabajo.

A continuación, vamos a ver cómo incluir el logotipo. Lo primero a tener en consideración es que el alto del logo no debe exceder los 65 píxeles, mientras que para el ancho tenemos más libertad. Lo segundo, que el logotipo aparecerá sobre la cabecera, a la izquierda.

En el apartado “Logotipo del Sitio”, le damos a Examinar. Se abrirá una ventana del explorador del sistema operativo en el que trabajemos (puede ser Windows, Linux, etc.). Buscamos la imagen entre nuestros archivos, la seleccionamos y le damos a Aceptar. Entonces veremos que en el hueco en blanco de este apartado se ha añadido una ruta. La ignoramos y le damos al botón Enviar. Guardamos y cuando veamos nuestro sitio ya estará nuestro logotipo visible. Si quisiéramos cambiar la imagen, bastaría con darle al botón Eliminar y repetir el proceso anterior.

En cuanto a la cabecera, vemos qua aparece una por defecto. Para cambiarla tenemos dos posibilidades. Podemos elegir una entre las que Drimgoo nos ofrece o podemos poner una propia.

Para elegir una cabecera realizada por Drimgoo:

En el apartado “Imagen de la Cabecera”, le damos al botón Eliminar. Entonces veremos que aparece un nuevo botón, “Galería”.

Pulsamos en Galería y accedemos a más de 40 cabeceras que Drimgoo pone a nuestra disposición para que las usemos libremente. Buscamos entre las categorías la que más nos guste, la seleccionamos y le damos a Aceptar.

Ahora veremos el nombre la imagen en el menú, le damos a Guardar y ya la tenemos en nuestro sitio.  

Para elegir una cabecera propia:

Para colocar como cabecera una imagen propia, no debemos olvidar que aquella que elijamos debe tener 1002 píxeles de ancho. Una vez la tengamos preparada, volvemos a Eliminar la cabecera que tengamos previamente y repetimos los mismos pasos que hicimos para el logotipo: vamos a "Examinar"; exploramos y seleccionamos nuestra imagen, aceptamos, pulsamos "Enviar" y finalmente guardamos para poder ver los cambios.

Por último, en la sección Cabecera y Logotipo tenemos una opción más: la de elegir qué enlaces se van a mostrar en el Menú Auxiliar, que como ya se ha señalado está en la parte superior derecha de nuestra página. Es muy recomendable tener siempre disponible el botón de Inicio, para que los usuarios puedan volver en cualquier momento al principio de nuestro sitio, y el de Contacto, para facilitar la comunicación con nuestros clientes potenciales.

Estructura del Portal

En este punto, Drimgoo nos permite seleccionar cómo queremos que se organice nuestro sitio, colocando el panel lateral a la izquierda, a la derecha, o eliminándolo directamente.

A continuación, nos encontramos con la posibilidad de hacer que nuestro sitio se muestre "en construcción". Como ya lo hemos visto antes, no volveremos a detenernos aquí.

De igual forma, el apartado Idiomas también ha sido explicado, por lo que podemos dar por terminado esta entrega del tutorial Cómo Crear Una Web en Pocos Pasos. En la próxima ocasión nos adentraremos en el módulo de Contenidos.

¡Hasta pronto!