Advertisement
  1. Business
  2. Templates

Cómo Elaborar Rápidamente un Sitio Web de Una Página: Desde una Plantilla Responsiva

by
Read Time:11 minsLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Tener tu sitio web publicado no tiene que ser complicado. De hecho, puedes crear un sencillo pero efectivo sitio de negocio con la ayuda de una plantilla para sitio web de una sola página. Usndo una plantilla de una página te permite dar a tu negocio una muy necesaria presencia online y presentar toda la información sobre los servicios o productos que ofreces.

Un beneficio añadido es el hecho de que las personas interesadas en tu negocio pueden ver inmediatamente todos los detalles que necesitan sin tener que hacer click en múltiples páginas. Y debido a que sitios de una sola página a menudo presentan múltiples llamadas a la acción, tienes una oportunidad mucho más grande de convertir visitantes en potenciales compradores.

En éste tutorial, recorreremos los pasos de configurar tu sitio web con una plantilla HTML de una sola página. Cubriremos las herramientas que necesitarás, los detalles técnicos de personalizar tu plantilla, y cómo subirla a tu servidor. También te daremos unos cuantos consejos importantes sobre cómo elaborar sitios web de una página que sean efectivos. ¡Comencemos!

Antes de Comenzar

Antes de que crees tu sitio web de una sola página, hay unas cuantas cosas que necesitarás. Conozcámoslas abajo.

1. Nombre de Dominio

La elección más obvia es usar el nombre de tu negocio para tu dominio. En el evento de que el nombre ya esté tomado, podrías intentar agregar palabras como compañía, agencia o estudio y luego comprar el nombre de dominio.

También se recomienda usar una extensión .com pues es una de las extensiones más antiguas y más creíbles. Sin embargo, si no puede obtener un nombre adecuado con la extensión .com, vale la pena considerar usa una extensión .net.

2. Compañía de Hosting

Encontrar una buena compañía de hosting podría parecer como una tarea imposible al principio. En general, quieres buscar un host que tenga buenas calificaciones en sitios web de terceros pues esos tienen más probabilidad de ser imparciales. Presta atención a lo que las personas dicen sobre el tiempo que están activos sus servidores, el soporte al cliente y facilidad de uso.

3. Plantilla HTML

El siguiente paso es encontrar una plantila para tu sitio web. Un buen lugar para comenzar tu búsqueda es el mercado de ThemeForest. Puedes elegir de entre cientos de plantillas profesionales de sitio web de una página que abastecen a una variedad de nichos, o explorar nuestra curada selección de algunas de las mejores:

4. Editor de Código y Cliente FTP

Ya que necesitarás editar la plantilla para reemplazar la información con la tuya, necesitas un editor de código. Resaltará la sintaxis del código y facilitará encontrar las partes del código que necesitan ser modificadas.

Para éste tutorial, estaré usando Sublime Text que puede ser usado en Mac, Windows y Linux y viene con una versión de prueba gratuita.

También necesitarás un cliente FTP como FileZilla para conectar con tu servidor y subir los archivos del sitio web sin tener que subirlos uno por uno. FileZilla es gratuito y disponible para todos los sistemas operativos.

Ahora veamos los detalles de cómo elaborar un sitio web de una página, comenzando con descargar y configurar la plantilla de tu sitio.

Cómo Editar el Contenido de la Plantilla para Tu Sitio Web

Después de que has recabado todos los archivos y herramientas que necesitarás, ahora es momento de modificar la plantilla HTML. Para éste tutorial, estaré usando la plantilla para sitio web Wander. Comienza por descargar los archivos de la plantilla desde tu página de Descargas en ThemeForest. Extrae los contenidos de la carpeta comprimida y abre la carpeta. Notarás que contiene un directorio de documentación así como todos los archivos de la plantilla para el sitio.

Wander website templateWander website templateWander website template
Cómo elaborar un sitio web de una sola página con la plantilla HTML Wander.

Ya que ésta es una plantilla multipropósito, tiene unos cuantos archivos adentro, Tu plantilla podría sólamente venir con un solo archivo HTML y directorios que contienen hojas de estilo, archivos script e imágenes.

Para editar la plantilla a tu gusto, necesitarás modificar el archivo HTML que generalmente es llamado index.html. En el caso de Wander, estaré editando el archivo llamado home-one-page.html, pues estamos haciendo un sitio web de una sola página.

Trabajando Con HTML

Si nunca has trabajado con una plantilla HTML antes, el archivo probablemente se verá intimidante si tratas de abrirlo en Sublime Text o cualquier otro editor. Mientras que un completo tutorial de HTML está fuera del alcance de éste artículo, cubramos las bases de lo que es y cómo es HTML.

HMTL es un lenguaje de marcado que consiste de etiquetas como <h1>, <p>, <li> y otras. Las etiquetas vienen en pares, cada una de ellas tienen una apertura y un cierre. Ayudan al navegador a entender cómo debería mostrar lo que está entre esas etiquetas.

Un párrafo en un documento HTML se verá así: <p>This is my paragraph.</p>. Un encabezado será rodeado por una etiqueta h acompañada de un número del 1 al 6 que significa encabezado nivel 1 hasta encabezado nivel 6.

Cuando estás editando una plantilla HTML, no tienes que editar ninguna de las etiquetas, solo el texto entre ellas. Sin embargo, si deseas copiar una parte del código o eliminarlo, necesitarás seleccionar toda la parte desde la etiqueta de apertura hasta la etiqueta de cierre, y luego copiarla o eliminarla.

La manera más fácil de editar tu plantilla es abrirla en un navegador y luego inspeccionar el código. Primero, haz doble click en el archvo HTML para abrirlo en tu navegador predeterminado. De inmediato, verás que necesitas editar el texto en la sección del header. Haz click derecho en la oración que se lee We Make BRANDS Shine y selecciona Inspeccionar.

Inspecting HTMLInspecting HTMLInspecting HTML
Inspeccionando HTML en un navegador web.

Un panel surgirá en la parte inferior que te mostrará el código HTML de nuestra plantilla. La línea que tiene la oración seleccionada estará en el lado izquierdo del panel Inspector. Verás que la oración está encerrada en una etiqueta <h1> con la clase de large mt20.

Ahora, abre la plantilla en tu editor de código al hacer click-derecho en el nombre de la plantilla y selecciona Abrir con Sublime Text. Encuentra la misma línea de código que viste en el panel Inspector, selecciona el texto entre las etiquetas y reemplázala con el lema de tu compañía.

Editing HTML codeEditing HTML codeEditing HTML code
Editando código HTML.

Para editar el párrafo directamente debajo del encabezado que acabas de reemplazar, regresa a tu navegador, haz click derecho en el párrafo y selecciona Inspeccionar elemento. Ésta vez, la oración está encerrada entre etiquetas <p> con la clase de white. Regresa a tu editor de código, encuentra la correspondiente línea de código, haz click entre las etiquetas y agrega tu información.

Continúa con éstos pasos hasta que hayas reemplazado todo el contenido de ejemplo con el tuyo. Elimina las secciones no deseadas al seleccionar todo desde la etiqueta de apertura hasta la etiqueta de cierre de una sección de código particular.

De un modo similar, si quieres duplicar una parte de la plantilla, encuentra el código que contiene esa sección y selecciona todo incluyendo las etiquetas de apertura y de cierre, luego cópialo y pégalo donde quieres que aparezca el contenido.

En la captura de pantalla de abajo, quería agregar otro testimonial, así que seleccioné el código para el tercer testimonial y lo copié inmediatamente abajo.

Nota que en la mayoría de los casos, las secciones del código serán encerradas en etiquetas <div> antes de ejecutar cualquier etiqueta de encabezado y párrafo. Si quieres duplicar o eliminar esa sección, tienes que seleccionar también las etiquetas <div>; de otra manera, tu contenido no se mostrará correctamente.

Después de que termines de editar el contenido, necesitas reemplazar las imágenes. La manera más conveniente de cambiarlas es tomar nota de los nombres de las imágenes en el directorio de tu plantilla y luego nombrar tus imágenes de la misma forma. Una vez que tus imágenes sean nombradas adecuadamente, cópialas en el directorio de imágenes.

Cómo Aplicar Estilo a Tu Plantilla para Sitio Web de Una Sola Página

Queda una cosa más por hacer antes de subir los archivos a tu servidor, y es aplicar estilo a la plantila para que combine con tu marca existente. Los estilos se localizan en el directorio CSS. En el caso de Wander, hay varias hojas de estilo junto con el directorio llamado Colors.

Para comenzar a editar el archivo CSS, puedes seguir los mismo pasos que hicimos para editar el archivo HTML. Para descubrir cómo se le aplica estilo a un elemento particular, haz click-derecho en él en tu navegador y haz click en Inspeccionar. Ésta vez, mira el lado derecho, y notarás el estilo correspondiente para ese elemento. El mismo panel también tendrá el nombre del archivo del estilo que necesitas editar junto con la línea donde se localiza el código.

Inspecting CSSInspecting CSSInspecting CSS
Inspeccionando CSS en un navegador web.

Abre el archivo en tu editor de código. En éste caso es theme.css. Ya que quiero editar el color de fondo de la segunda sección que tiene todas las características, necesito encontrar la línea 5378 en el archivo theme.css. Cambiémoslo a negro:

Editing CSSEditing CSSEditing CSS
Rápidamente ajusta el color de fondo en CSS.
Si quieres ajutar rápidamente el color, solo necesitas reemplazar la hoja de estilos en el head del archivo HMTL con el nombre de tu archivo CSS preferido.

Busca la línea de código que diga:

<link href="css/colors/blue.css" id="color-scheme" rel="stylesheet" type="text/css">

Cambiando el nombre a green.css cambiará los colores de los botones, enlaces e íconos.

Changing the CSS fileChanging the CSS fileChanging the CSS file
Cambiando los colores de los botones en el archivo CSS.

Para cambiar las fuentes, inspecciona cualquier texto y observa la parte de la derecha del panel Inspector. Verás el nombre de la fuente que está usando el texto, así como la línea de código donde puedes cambiarla a una fuente que prefieras.

CSS code for fontsCSS code for fontsCSS code for fonts
Localizando el código CSS para las fuentes.

Cómo Subir la Plantilla para Tu Sitio al Servidor

Ahora que has modificado y aplicado estilo a la plantilla para tu sitio web de una página, puedes subirla al servidor de tu hosting. Tu host te proporcionará el nombre de usuario y contraseña necesaria para usar la conexión FTP.

Para comenzar el proceso de subir la plantilla, abre FileZilla e ingresa el nombre del servidor, el nombre de usuario y constraseña en la barra superior, luego haz click en Conexión Rápida.

Localiza el directorio con tu plantilla en tu computadora en el lado izquierdo de la pantalla, y haz click en él. En el lado inferior izquierdo, selecciona todos los archivos y directorios y arrástralos al lado derecho de la pantalla hacia el directorio raíz del servidor de tu hosting localizado en el directorio public_html.

Transferring your one page website template via FTPTransferring your one page website template via FTPTransferring your one page website template via FTP
Transfiriendo la plantilla para tu sitio web de una página vía FTP.

5 Importantes Consejos para Mejores Sitios Web de Una Página

Ahora que tu sitio web está publicado, aquí están unos cuantos consejos para considerar.

1. Manten Tu Mensaje Conciso

A diferencia de un sitio tradicional, una plantilla de una sola página tiene un espacio disponible limitado, eso significa menos espacio para transmitir tu mensaje. Por eso es crucial eliminar todo tecnicismo y detalles innecesarios, dejando sólamente la información más relevante. Explica claramente lo que tienes para ofrecer y los beneficios que brinda tu producto o servicio.

2. Usa Sólidas Llamadas a la Acción

Dado el espacio limitado, tu llamada a la acción necesita ser sólida y convincente. Tambien necesitas incluirla varias veces para el efecto máximo. Por defecto, la mayoría de las plantillas para sitios web de una sola página vienen con secciones múltiples que incorporan una llamada a la acción, así que saca el mayor provecho de ellas. Dirige a los visitantes a una sección que tenga los planes de precios o a un formulario de contacto donde pueden tener contacto contigo.

3. Manten la Navegación Accesible y Sencilla

Establece tu navegación para saltar a diferentes secciones de tu sitio web. Estarás un paso adelante del juego si optas por una plantilla que ya tenga una navegación fija que permanezca en su lugar mientras un visitante se desplaza hacia abajo. Incluye únicamente los enlaces a las secciones de tu sitio web y evita colocar cualquier enlace externo pues ello sacará a los visitantes de tu sitio web.

4. Utiliza Elementos Visuales

Usar imágenes o video te ayudará a contar tu historia y compartir más sobre lo que tienes que ofrecer sin ocupar demasiado espacio. En el caso de sitios web de una sola página, los elementos visuales son tus mejores amigos.

5. Manten la Jerarquía

Coloca la información más importante en la parte superior de tu sitio y luego guía lentamente al usuario hacia abajo en la página para una información más específica que soporte tu mensaje principal. Ésto te ayudará a mantener la jerarquía y presentar la información de una manera lógica.

Comienza Con Tu Propio Sitio Web de Una Página

Si has seguido éste tutorial, ahora tienes el conocimiento para crear rápidamente un sitio web de una sola página usando una plantilla responsiva. Comienza tu viaje con la adecuada plantilla para sitio web y consulta éste tutorial para ayudar a configurarla rápido.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.