Cómo hacer una página web

Jorge Baffa

Jorge Baffa

29-04-2020

Manual de WordPress

Aprende a usar y configurar todos los aspectos de WordPress.

Quizás en este momento te estés preguntando ¿qué es una página web? o ¿cómo puedo crear mi propia página web?

¿Qué es una página web? ¿Cómo hacer una página web?

Una página web es básicamente un conjunto de documentos que pueden contener textos, imágenes, videos, etc., y que están alojados en un servidor o hosting web para que sean accesibles desde cualquier computadora o dispositivos móviles con conexión a internet.

En el siguiente video te explico cada uno de los elementos necesarios para hacer una página web o crear un blog con WordPress.

Recursos mencionados en la presentación:

  • Namecheap. Para registrar tu dominio.
  • WordPress.org. El gestor de contenidos gratuito número uno en el mundo para crear tu página web.
  • Elegant Themes. Uno de los principales proveedores de plantillas premium para WordPress.
  • Divi. Constructor visual paa WordPress.
  • Beaver Builder. Page builder para WordPress.

1 . Comprar un dominio

Para crear tu página web con WordPress lo primero que necesitas es un dominio, por ejemplo tuempresa.com o tunombre.es.

El dominio es lo que identifica a tu página web en internet y sirve además para que podamos indicarle de forma sencilla al navegador (Chrome, Internet Explorer, Firefox, etc.) la dirección del servidor al que debe conectarse para mostrar los contenidos.

Existen muchas empresas que te permiten registrar dominios, yo te recomiendo que lo compres en Namecheap. Aunque primero te recomiendo mirar esta guía muy completa sobre cómo comprar un dominio .COM:  50

¿Cómo y dónde comprar un dominio .COM?

2 . Contratar un hosting para WordPress

El servicio de hosting o plan de alojamiento web podrías imaginarlo como una computadora de mucha capacidad (servidor) dentro de la cual te asignan una porción de espacio en el disco rígido para instalar WordPress y todos los contenidos de tu página web.

Digo que te asignan una porción del disco porque hablo de un plan de hosting compartido (significa que en un mismo servidor hay alojadas varias páginas web), ya que son los más accesibles y te va a ser más que suficiente cuando recién empiezas.

Existen muchos proveedores de hosting y, si no quieres tener problemas cuando tu blog o tu página web estén activos, te recomiendo leer esta guía antes de contratar uno:

¿Cuál es el mejor hosting para WordPress?

3 . Instalar WordPress en tu hosting y comenzar a crear

La duda que seguramente te va a surgir ahora es ¿Cómo instalar WordPress en mi hosting? Por eso, en el siguiente video vemos cómo instalar WordPress en español en tu cuenta de hosting. Es realmente muy fácil y rápido.

Este ejemplo lo hago con una cuenta de hosting con CPanel, el cual ya incluye un módulo instalador de WordPress. Te recomiendo que siempre contrates un hosting con este panel.

Otros conceptos importantes sobre páginas web

Antes de comenzar a transitar el camino del desarrollo de tu página web o de tu blog, es importante que tengas claros algunos conceptos básicos. Estos te van a orientar en la búsqueda de los elementos adecuados para tu sitio web y te van a ayudar a comprender rápidamente la información que vayas encontrando.

¿Sitio web o Página web?

La gran mayoría de las personas desconoce la diferencia entre estos dos conceptos. Sobre todo porque es muy común utilizar la expresión «página web» para referirse casi siempre, a un sitio web.

Para aclarar la diferencia podemos decir que un sitio web es un conjunto de páginas web, generalmente agrupadas bajo un mismo dominio. Por ejemplo: aventura.digital es un sitio web. Facebook.com, google.com, twitter.com, también son sitios web.

Ahora bien, si entramos en el sitio aventura.digital, lo primero que vemos es la página principal del sitio, y si recorremos el menú principal nos vamos a encontrar con varias páginas más, por ejemplo aventura.digital/plugins-wordpress.

Casi siempre un sitio web está conformado por varias páginas web y, algunas veces, por una sola.

¿Cómo funciona una página web?

Es importante entender básicamente el funcionamiento de una página web. Antes decíamos que se necesita de un servidor donde se encontrará instalado el sitio web.

El segundo elemento necesario es el navegador del usuario (Firefox, Chrome, etc.), que permitirá acceder al servidor y mostrar cada una de las páginas del sitio.

  1. Cuando ingresamos una url o hacemos clic en un enlace el Navegador se conecta al Servidor correspondiente y envía la url.
  2. El Servidor la recibe, genera la página correspondiente y la envía al navegador, siempre en forma de código HTML y Javascript.
  3. El Navegador recibe este código y lo traduce a lo que vemos en la pantalla.

Este proceso se repite cada vez que hacemos clic en un enlace o actualizamos la página actual.

HTML

HTML se llama el código en el que se escriben las páginas web. No se trata de un lenguaje de programación sino simplemente de un código con el que le indicamos al navegador lo que tiene que mostrar.

Nuestro sitio web estará conformado por un determinado código HTML que, al abrirlo con un navegador, será interpretado y traducido a textos de diversos tamaños, colores, imágenes, enlaces, fondos, etc.

Dentro de cada página el código HTML se compone con las etiquetas <html> y </html>, que indican el inicio y fin del código HTML.

Dentro de éstas etiquetas vienen las etiquetas <head> </head> y <body> </body>.

Dentro de head va información general relativa a la página y dentro de body va el contenido propio de la misma. Por ejemplo, la estructura de una página estandar sería la siguiente: <html> <head> </head> <body> Hola <b>mundo</b>.<br />Bienvenidos. </body> </html>

La mejor manera de entender cómo funciona el código HTML es ir al Bloc de Notas, crear un archivo de texto nuevo copiando el código anterior y guardarlo con extensión .html. Luego podrías abrirlo con un navegador y ver qué pasa.

Todos los navegadores tienen una opción en sus menús para ver el código fuente de la página en la que estamos. En Firefox y Chrome se puede ver tecleando Ctrl+U.

CSS

CSS es el nombre que se le da a la hoja de estilos de una página web. Generalmente es un archivo de texto con extensión .css que se enlaza al .html de la página.

En el CSS se indican todas las cuestiones de diseño de los elementos de la página. Por ejemplo: tamaño de las cajas de texto, de las imágenes, colores de fondo y de bordes, color y tamaño de texto, familia de fuentes, etc.

Toda esta información se coloca aparte del HTML, para separarla de la estructura de la página y facilitar y hacer más claro el diseño.

Javascript

Javascript es un lenguaje de programación que se ejecuta en el navegador y se utiliza para agregar funcionalidades a las páginas, ya que el código HTML por si solo no nos permite interactuar mucho.
Hoy en día todos los navegadores soportan Javascript y la gran mayoría de los sitios web lo utilizan. Si exploramos el código fuente de alguna página es muy probable que, dentro del HTML, nos topemos con las etiquetas <script type=’text/javascript’> y </script>, éstas indican el inicio y fin respectivamente, del código Javascript.

PHP

PHP es también un lenguaje de programación, quizás el más utilizado hoy en día para desarrollar sitios web dinámicos e interactivos.

A diferencia de Javascript, que se ejecuta en tu navegador, PHP trabaja en el servidor donde está instalada la página. Esto brinda unas posibilidades interesantes.

Pensemos en un sitio periodístico donde se publican diariamente decenas de noticias. Si quisiéramos hacerlo solo con HTML y Javascript cada noticia necesitaría de un archivo .html para guardar su contenido, con lo cual en pocos días tendríamos en nuestro servidor cientos de archivos .html que serían muy complicados de administrar.

En cambio, utilizando PHP podemos guardar todas las noticias en una base de datos. Cuando el usuario hace clic en un enlace, PHP busca esa noticia en la base de datos, genera el código HTML de la página y lo envía al navegador.

Podríamos incluir en cada noticia un formulario para que el usuario exprese su opinión. Al enviar el formulario, el navegador manda los datos ingresados al servidor donde los recibe PHP, los procesa y los guarda en la base de datos.

Luego al recargar la página, además de la noticia se muestran los comentarios asociados a la misma. PHP nos permite trabajar con una gran cantidad de información y manjearla con facilidad, además de permitirle al usuario interactuar con el sitio web.

MySQL

MySQL es la base de datos más utilizada en sitios web interactivos o que manejan gran cantidad de información. La base de datos se encuentra en el servidor y es el lugar donde se guarda el contenido del sitio web.

Luego se accede al mismo utilizando un lenguaje de programación que se ejecute en el servidor, como PHP. Básicamente se trata de un conjunto de tablas, cada tabla es cómo si fuera una planilla de Excel con filas (registros) y columnas (campos).

De esta forma se pueden almacenar toda clase de información como ser Noticias, Entradas de un Blog, Usuarios, Productos, etc.

CMS

Un Gestor de Contenidos o CMS (sus siglas en inglés) es un sistema que se instala en el servidor y permite generar un sitio web sin tener que programar ni escribir código HTML.

El sistema permite manejar de manera independiente el contenido y el diseño. Así, es posible darle en cualquier momento un diseño distinto al sitio web sin tener que tocar el contenido de nuevo. Además permite la fácil y controlada publicación a varios editores.

Es la mejor opción para crear sitios web institucionales, comerciales, de servicios profesionales o blogs personales, para personas sin grandes conocimientos y experiencia en desarrollo web. Incluso para desarrolladores profesionales los CMS brindan una base muy poderosa sobre la cual comenzar a trabajar sin tener que hacer todo desde cero.

El gestor de contenidos más utilizado es WordPress. Luego le siguen otros como Joomla y Drupal, y para sitios de comercio electrónico se utilizan también OpenCart, PrestaShop, Magento, etc. Estos CMS son gratuitos y se descargan de la web de cada uno de ellos, que también ofrecen instructivos para su instalación.

SEO

El SEO (Search Engine Optimization) estudia todas las cosas que podemos mejorar en la estructura HTML y en el contenido de una página para que aparezca más arriba en los resultados de un buscador.

Es importante entonces investigar y tener algunos conocimientos sobre SEO ya que de esta manera lograremos que más personas ingresen a nuestro sitio solamente mejorando el código.

Manual de WordPress

Aprende a usar y configurar todos los aspectos de WordPress.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

WordPress es Mejor con Divi

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *