¿Cómo crear una pagina web profesional?

Este tutorial está dirigido a personas que desean hacer una página web profesional o blog personal con WordPress. Que tienen poco o  ningún conocimiento de programación de sitios web, diseño y edición. No requieres lenguajes de programación, sólo voluntad y deseo de hacer tu sitio web.

Creo que todo tiene un costo: tiempo, dinero o esfuerzo. La mayoría de veces todos los recursos disponibles. Este tutorial es una guía gratuita para construir tu sitio. Se requiere de una inversión mínima en hosting, dominio y un tema (apariencia de tu página web).

Es posible implementar tu sitio gratuitamente en Wordpres.com o blogger.com. No es el objetivo de esta guía. Queremos resultados y tenemos un enfoque práctico. Te ayudaré a construir tú sitio paso a paso, con herramientas que son de fácil uso para personalizar tu página web con tu estilo. 

Antes de empezar

Es posible construir tu sitio web de forma fácil y sin ninguna experiencia previa. El tiempo estimado de desarrollo depende del tiempo dedicado. Te puede llevar entre dos  tres semanas. El blog que estás leyendo en este momento, es un ejemplo desarrollado con lo que aprenderás.

Esta guía está diseña para que emprendedores, profesionistas, independientes, estudiantes o simplemente para aquellos que desean tener presencia en Internet.  Este tutorial es para ti que no no sabes programar y que necesitas una guía que te lleve a un resultado concreto en le menor tiempo posible. 

Antes de empezar a programar tu página web

¿Qué es lo que necesitas para comenzar un blog o tu página web?

Estas entusiasmado, pues a comenzar. El tutorial está estructurado con tres recursos que te ayudarán a implementar cada tareas. Textos organizados para leer detalles. Imágenes para identificar objetos y secciones de manera visual. 

Cada paso es explicado a través de instrucciones sencillas y claras, y se refuerza con explicaciones y ejemplos en videos. También te pueden servir los comentarios y preguntas de otros usuario. Es importante leerlos, puede incluir alguna duda tuya.

Comencemos con la lista de pasos  para hacer tu blog:

  • ¿Cómo adquirir tu dominio gratis?
  • ¿Cómo elegir el mejor Hosting para su sitio web?
  • ¿Cómo Instalar WordPress?
  • ¿Cuál plantilla elegir para la apariencia de WordPress?
  •  ¿Cómo escribir el primer contenido (post)?
  • ¿Cómo personalizar tu sitio con plugins?
  • ¿Cómo Configurar SSL en tu sitio web?
  • ¿Cómo crear la página de inicio?
  • ¿Cómo añadir formulario de contacto?
  • ¿Cómo añadir el código se seguimiento de Google Analytics?
  • ¿Cómo preparar tu sitio para SEO?

¿Cómo adquirir el dominio gratis?

La buena sorpresa, es que la mayoría de proveedores de alojamiento web, incluyen el dominio en la compra del hosting. Algunos proveedores los venden por separado ¿cuál plan debo elegir? Si tu presupuesto es bajo, el que lo incluye. 

Sugerencias para elegir el nombre del dominio

  • Preferentemente que sea fácil de pronunciar
  •  Que sea corto
  • Fácil de recordar
  • Generalmente elige el .com o si es de orientado a una región el que corresponda, por ejemplo .mx
  •  Evita a toda costa nombres de marcas registradas

¿Cómo elegir el hosting?

Elegir hosting es una tarea compleja. Existen muchas compañías que ofrecen el servicio de alojamiento, todas tienen ventajas y desventajas. Podrás leer que existen diversas opiniones sobre el mismo proveedor, mismo producto. Todo depende de la percepción del comprador. Existen análisis serios que comparan características de hosting, lamentablemente tienen una vigencia corta, porque suelen escalar las tecnologías y quedar obsoletas otras.

Para mí, además de las características del servidor, es  importante la atención al cliente, el soporte. Decidí estar con 1&1 México y Godaddy México. He tenido la fortuna de ser atendido de manera profesional.

Observaciones para 1&1 son: a finales de mes sueles esperar más tiempo de contacto debido al sistema de facturación. Si eres de los que trabaja de noche, el soporte después de las 00:00 horas con frecuencia es dado en inglés. El correo electrónico está limitado a 2 gigas de espacio por correo (todo depende del plan elegido). La interfaz del correo electrónico es hecha en casa y bastante buena. Para servidores compartidos no es posible instalar certificados de seguridad (SSL) externos. La velocidad del servidor es excelente. Cuenta con suficiente memoria RAM. La ocultación de los datos es gratuita.

Por otro lado, Godaddy, su servidor es de menor rendimiento que 1&1, cuenta con menos memoria en planes semejantes. Las cuentas de correo electrónico tienen espacio “ilimitado”, se pueden instalar certificados de seguridad SSL externos. La interfaz del correo no me convence. El soporte es totalmente en español. Si cuentas con tu PIN a la mano, la atención es rápida. Algo que me desagrada es el envío de correos de venta y sus advertencias/sugerencias en cpanel de incrementar tus características o hacer una actualización a un plan mayor.

En ambos el precio del hosting está a mitad de precio el primer año. El dominio está incluido en el costo del hosting del primer año. Las renovaciones son automáticas. AMbos emiten facturas.

He trabajado varios años con ambos proveedores de forma continúo sin ninguna complicación. Este tutorial está basado en ellos. Elige el que más te agrade. Considera también, que si te encuentras fuera de México, y vas a realizar tu sitio web orientado a una área geográfica especifica, podría valer más optar por un servicio Nacional. 

Instalación de WordPress

Después de haber adquirido el hospedaje y el nombre del domino, lo que sigue es instalar WordPress. Brevemente, WordPress es un Sistema Administrador de Contenidos (CMS por sus siglas en inglés). En la mayoría de los planes de hosting, está incluido para su instalación fácil. Basta con hacer unos clics. 

En el siguiente video, se muestra cómo realizar la instalación en 1&1, el plan contratado es  UNLIMITED PLUS en México. Elegí este plan porque permite alojar varios sitos, cuenta hasta 6 GB RAM,  1 dominio gratuito por un año, cuentas ilimitadas de email y un certificado de seguridad SSL. Soporte en español las 24 horas.

Instalación de WordPress en 1&1

Reproducir vídeo

La instalación de WordPress se ha hecho tan sencilla que la puedes hacer prácticamente en cualquier hosting en pocos minutos, por lo que si has optado por otro proveedor, diferirá levemente. En el segundo ejemplo mostramos cómo hacerlo, ahora con Godaddy, comprueba lo semejante que son ambas instalaciones de WordPress.

Instalación de WordPress en Godaddy

Configura la seguridad de tu página web

 

Los sitios seguros, crean en los usuarios confianza, así que será nuestro siguiente paso. Actualmente los proveedores de alojamiento, cuentan con certificados de seguridad, de instalación sencilla, con soporte. Requieres preguntar si cuentas con ello y cómo hacerlo.

Si no incluye los certificados tu alojamiento, te diré cómo hacerlo con Cloudflare, en tan sólo cinco minutos. La configuración se hace con algunos clics, sin embargo, se requiere esperar alrededor de 24 horas para que los DNS se propaguen y alrededor de otras 24 horas de espera para que se cree el certificado (la versión gratuita). En mi experiencia, es menor el tiempo de espera. 

Cabe mencionar, que al configurar el DNS (ver video), existen ciertas restricciones y consideraciones. Hay ocasiones que tarda entre 8 y 10 días la propagación. Si comprar el dominio con el proveedor 1, luego el hosting con el proveedor dos, y finalmente quieres hacer uso de Cloudfalre, el tiempo de espera para la propagación completa, dura hasta los 20 días. Se paciente. En la mayoría de casos se puede seguir trabajando.

Configuración Cloudflare

Con el siguiente video haces la configuración correspondiente a Cloudflare. Los pasos son relativamente sencillos. Creas una cuenta con tu correo, de forma gratuita. Suelo utilizar un correo del dominio. Se añade el sitio a través del panel de control de Cloudflare. La confirmación de esta acción puede tardar hasta 24 horas. En ocasiones, entre cinco y diez minutos son suficientes. Para finalizar se tendrá que activar las opciones de SSL, y añadir una regla. La directriz (regla), forzará el sitio a que se muestre como https.

Este es el primero de dos videos. En el segundo, explicaré las configuraciones que se hacen en tu sitio, en WordPress para que no aparezca un mensaje de que se han bloqueado objetos porque pueden ser maliciosos.

SSL video primera parte

En el siguiente video, se explica la segunda parte de las modificaciones en tu sitio, en WordPress. Con el objetivo de eliminar los objetos no seguros, se utilizará un complemento. También se incluye la instalación de los plugins que nos permitirán personalizar la apariencia de nuestro sitio.

SSL video segunda parte

Marcos Gonzalez suscriptor de mi canal de Youtube, pregunta qué hacer en caso del que el archivo .htaccess 

Se puede crear a través del bloc de notas, al abrir nuevo, en el menú archivo, seleccionar  guardar cómo, seleccionar el tipo: todos. escribes tal cual .htaccess y guardas. En mi sitio hecho en html está configurado el siguiente código:

Options +FollowSymLinks
RewriteCond %{HTTP_USER_AGENT} libwww-perl.*
RewriteCond %{HTTPS} off
RewriteRule (.*) https://cotizamudanzasyfletes.com/$1 [R=301,L,QSA]
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.cotizamudanzasyfletes.com [NC]
RewriteRule ^(.*)$ https://cotizamudanzasyfletes.com/$1 [L,R=301]

Volver a guardar, cerrar el bloc de notas y subir el archivo al directorio principal en nuestro hosting.

La plantilla (tema) de tu WordPress

Después de haber instalado los plugins, es necesario activar Generatepress Premium, que nos dará todas las funciones para personalizar la platilla. También, configuramos Yoast SEO, para tener cierto control de las palabras clave, la modificación de metadatos y los mapas del sitio XML. Para ello deberás tener habilitada tu cuenta de Google Analytics y haber adquirido Generatepress Premium, si no lo has hecho, lo puedes hacer a través de este vínculo de afiliado (gracias). Puedes usar otra plantilla para tu WordPress si así lo deseas.  Es tu decisión.

Los colores de tu página web

En la construcción de tu web site, es importante determinar los colores que utilizarás. Suelo elegir los colores antes de generar cualquier contenido. Porque serán una guía para añadir imágenes, objetos y definir que títulos (H1, H2…) tendrán color, ente otras características. 

Al elegir los colores desde el principio, como parte de tu estilo, en los sucesivo no te preocuparás si debes o no colocar algún color. Eso lo has hecho desde un principio. ¿Qué ocurre si no te gusta la apariencia? En cualquier momento puedes cambiarlos. 

Utilizaremos herramienta Web gratuita  Adobe Color para seleccionar la combinación de colores que más nos agrade, y principalmente que tenga alguna relación con la temática de nuestra página. 

Existen varias formas de utilizarla, la más sencilla es explorar las paletas existentes y seleccionar alguna. Obtenemos los códigos RGB o Hexadecimales y los colocaremos en los parámetros de la personalización de Generatepress. Otra es buscar un sitio web que nos agrade, obtener el color principal y usar la paleta, o simplemente copiar los colores. 

Si nos agrada alguna imagen, la seleccionamos, colocamos en el creador de paletas y obtenemos la gama de colores en ella. 

¿Dónde conseguir las imágenes para mi sitio?

Las imágenes, desde mi punto de vista crean la mayor parte del atractivo de una página web.  En Google puedes obtener imágenes aparentemente gratuitas, aunque en mi experiencia hay muchas con derechos. Para evitar temas legales, prefiero o hacer las fotos con mi equipo, o descargarlas de un repositorios de fotos. Existen bastantes, bancos de fotografías,  si deseas conseguir aquellas que puedes utilizar sin problemas legales, en flickr, aplicas el filtro de licencias y seleccionas Creative Commons, o también el filtro se permite su uso comercial

El sitio que más utilizo es pixabayPixabay es una comunidad de creativos, que comparte imágenes y videos libres de derechos de autor. Todos los contenidos se publican bajo Creative Commons CC0, lo que los hace seguros de usar sin pedir permiso o dar remuneración al artista – incluso con fines comerciales. Maravillo.Aún así, si deseas puedes invitarle un café, al artista que te ha facilitado su foto.

 

¿Cómo crear una pagina web profesional?
5 (100%) 4 votes

¿Conoces a alguien que le sirva está información?

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.