Cómo crear una página simple en html

Introducción al HTML

En el siguiente artículo te mostraremos la manera en la que te puedes familiarizar con el lenguaje de marcado HTML que es el utilizado para estructurar el contenido en los sitios web.

[wp_ad_camp_1]
Primer Paso

Lo primero que debes hacer, es tener a la mano el contenido que deseas utilizar en este ejercicio, pero si no lo quieres hacer puedes tomar el siguiente texto como referencia.

Le Panzerotti Delicious

El Restaurante

Le Panzerotti Delicious ofrece a sus clientes un almuerzo y cena casual envuelta en una atmósfera natural. El menú cambia regularmente con los ingredientes más frescos del mercado.

Servicio a domicilio

Sólo diviértete… nosotros nos encargaremos de cocinar. Le Panzerotti Delicious con su servicio a domicilio, puede manejar eventos como refrigerios para grupos pequeños hasta todo lo relacionado con las comidas en el lanzamiento de una corporación.

Ubicación y Horarios

Los horarios en el restaurante son flexibles dado que sabemos que hay muchas personas que tienen horarios extendidos.

Paso dos

Crea una nueva carpeta en tu escritorio y llámala ejemplo, acontinuación, abre un nuevo documento de texto, copia y pega el contenido anterior o el de tu preferencia.

Algunos comandos HTML para empezar

Todos los documentos o páginas en HTML tiene una estructura en la cual deben ser escritos, los definiremos como siguen:


Este comando se usa para hacerle saber al navegador que el documento que creaste es de tipo HTML y siempre irá al inicio de tu documento o página web.


Esta etiqueta se usa al inicio de la página web para definir que en dicha página se está usando el lenguaje de marcado HTML.


Dentro del inicio de la estructura de tu página web hay una serie de partes claves, esta por ejemplo hace referencia al encabezado, el cual es un elemento descriptivo que contiene la información correspondiente tanto al tipo codificación de caracteres usada () en la página web como también que palabras o frases (tu título) que se mostrarán en la pestaña del navegador cuando se despliegue la página web.

Ahora veamos el paso uno y dos funcionado en un ejemplo.





Le Panzerotti Delicious 


Le Panzerotti Delicious

El Restaurante

Le Panzerotti Delicious ofrece a sus clientes un almuerzo y cena casual envuelta en una atmósfera natural. El menú cambia regularmente con los ingredientes más frescos del mercado.

Servicio a domicilio

Sólo diviértete... nosotros nos encargaremos de cocinar. Le Panzerotti Delicious con su servicio a domicilio, puede manejar eventos como refrigerios para grupos pequeños hasta todo lo relacionado con las comidas en el lanzamiento de una corporación.

Ubicación y Horarios

Los horarios en el restaurante son flexibles dado que sabemos que hay muchas personas que tienen horarios extendidos.

Paso Tres
extensión

Modifica tu documento de texto hasta tenerlo como se mostró anteriormente, y guarda tu archivo de texto con la siguiente extensión .html

Paso Cuatro

Abre tu navegador, ya sea Chrome o Firefox, haz click en Archivo o File, luego de eso busca la opción Abrir archivo u Open, luego de eso escoge el archivo que hemos estado trabajando, y ábrelo para que puedas ver cómo va tu progreso.

Tu página web debe lucir muy similar a esta:

como hacer una pagina simple con html

Notarás que el texto aún no tiene un estilo ni hay saltos de línea para diferenciar entre los párrafos y títulos pero eso lo haremos en el siguiente artículo.

Problema Límite de Archivos Servidor

¿Alguna vez has recibido una notificación por parte de tu proveedor de hosting, donde te hace saber que tu plan “ilimitado” tiene límite de archivos? Esto me pasó hace poco, debido a que tengo decenas de sitios alojados en el mismo servidor y además de esto uno de mis sitios principales es una tienda en línea que usa WooCommerce, el problema con esto es que tenemos miles de productos y por ende miles de fotos, mi proveedor de Hosting es BlueHost y hasta ese día no tenía ninguna queja de ellos, el problema fue cuando superé los 200.000 archivos en mi servidor y recibí este mensaje.

[wp_ad_camp_1]

Aviso Account file count

NOTICE: Your account file count is over the excessive usage limit. Your account is in danger of becoming deactivated. Please visit our Terms of Service page for information.

Para los que no saben o no quieren leer inglés lo que me quisieron decir fue algo como:

AVISO: El número de archivos en tu cuenta está por encima del límite de uso excesivo. Tu cuenta está en peligro de ser desactivada. Por favor visita nuestra página de Términos y Condiciones para más información.

Soluciones para el problema del límite de archivos

Lo primero que traté de hacer fue hablar con el soporte, la única respuesta que obtuve fue que si quería podía aumentar ese límite de archivos a 300000 por la módica suma de 2 o 3 dólares el mes, lo cual me pareció absurdo ya que sólo solucionaba el problema temporalmente, seguramente en un par de meses me vería en la misma situación.

Después de buscar soluciones y hablar con expertos llegó a mi la mejor solución hasta hoy, Amazon S3, tan sencillo como hacer que la galería del WordPress no se aloje en mi servidor sino por el contrario en los servidores de Amazon.

Ventajas de Usar Amazon S3 con WordPress

  1. La primera ventaja que se me viene a la mente es la escalabilidad, sin importar que tanto crezca nuestro negocio Amazon podrá soportarlo, por nombrar un ejemplo Netflix es uno de los mejores clientes de Amazon.
  2. El precio es algo que atrae mucho, comenzamos con un año gratuito con un plan básico (5GB de almacenamiento, 20000 peticiones Get y 2000 Put) y luego nos cobraran mensualmente por el almacenamiento (0.03 dólares por 1GB), las peticiones (0.004 dólares por 10000 peticiones GETs) y las transferencias (0.090 dólares después de 10TB), para conocer los precios a fondo pueden visitar la página de precios.
  3. Debemos recordar que Amazon es una compañía muy grande y si nuestros archivos multimedia están en sus servidores podremos dormir tranquilos sabiendo que no van a dejar de estar disponibles, el único problema que podríamos tener es por el lado de nuestro servidor pero nuestros videos e imagienes siempre van a estar disponibles.

Desventajas de Usar Amazon S3 con WordPress

  • En este punto solo encuentro una desventaja y es que no existe una forma sencilla (la desconozco en todo caso) de migrar nuestros archivos existentes a Amazon S3, por lo que tenemos dos opciones, usar Amazon S3 para los archivos que vayamos a subir desde ahora o por otro lado subir nuevamente todos nuestros archivos, lo cual puede resultar un poco tedioso si son miles de archivos como en mi caso.

Configurar Amazon S3 y WordPress

Para comenzar necesitamos 3 cosas:

  1. Crear una cuenta de Amazon S3, usar el botón Try Amazon S3 for free, para tener el año gratis.
  2. Instalar el plugin Amazon Web Services
  3. Instalar el plugin Amazon S3 and Cloudfront

Credenciales de Seguridad de Amazon S3

Una vez hayas creado tu cuenta (cosa que no explicaré ya que es bastante sencillo), inicias sesión con tus datos y vas a ver una interfaz de herramientas como esta:

Amazon Management Console

Aquí seleccionarás S3:

Area de Administración de Amazon S3

Lo que vemos arriba es básicamente un sistema de archivos, los Buckets son directorios raíz, los cuales pueden contener archivos y directorios ilimitados, el nombre debe ser único, por ejemplo el nombre que use para el Bucket de CastiTec es castitec, es por esto que si das click derecho y miras la ubicación de una de las imagenes de arriba verás el enlace: castitec.s3.amazonaws.com… Debido a esto no podrás usar nombres muy genéricos o comunes para los buckets. Como no tienes ningún Bucket creamos uno nuevo con el botón Create Bucket, yo voy a crear uno nuevo para efectos de pruebas llamado castitest.

Ahora sí, vamos a obtener las credenciales de seguridad, para esto hacemos click en nuestro nombre, en la parte superior derecha, seleccionas la tercer opción > Security Credentials, allí das click en Users en el menú de la izquierda:

Lista de Usuarios Amazon S3

Luego de esto damos click en Create New Users, puedes crear hasta 5 usuarios al mismo tiempo, das click en el botón Create y tendrás las credenciales de seguridad como te lo muestro en la siguiente imagen, tienes que tener en cuenta que no volverás a ver esas credenciales, así que debes guardarlas en un lugar seguro para los siguientes pasos.

Credenciales de Seguridad Amazon S3

Después de esto tenemos que hacer un paso más en Amazon, vas a la lista de usuario creados, y das click sobre su usuario, en mi caso test-user, bajas a el área de Permissions, das click en la flecha en frente de Inline Policies y finalmente en Click Here:

Permisos de Usuario Amazon S3

Luego de esto seleccionamos Custom Policy y damos click en el botón Select, ponemos un nombre cualquier a nuestra nueva política y en Policy Document ponemos el siguiente código, teniendo en cuenta que mi bucket se llama castitest, así que deben reemplazar castitest por el nombre de su bucket.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1424006167000",
            "Effect": "Allow",
            "Action": [
                "s3:DeleteObject",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:ListBucket",
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetBucketLocation"
            ],
            "Resource": [
                "arn:aws:s3:::castitest",
                "arn:aws:s3:::castitest/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": "s3:ListAllMyBuckets",
            "Resource": "*",
            "Condition": {}
        }
    ]
}

Si no añades esta política en los permisos verás el siguiente error en WordPress cuando intentes continuar:

Error saving bucket: Failed to retrieve bucket region.

Configuración de Plugins en WordPress

Para esto debemos editar nuestro archivo wp-config.php y añadir dos línea de código al final. Debes usar tus propias credenciales, a continuación doy un ejemplo con las mías.

define( 'AWS_ACCESS_KEY_ID', 'AKIAIEYJYEQVC2ZHGWWQ' );
define( 'AWS_SECRET_ACCESS_KEY', 'EFtrs...ReemplazarportuKEY' );

Luego de esto desde nuestro Dashboard en WordPress vamos a AWS > Amazon S3 and CloudFront y seleccionamos nuestro bucket, en mi caso seleccionaré castitest.

Amazon S3 and CloudFront Interfaz

Luego de esto el plugin nos dará unas opciones para personalizar, en realidad me parece que todo está bien excepto por una opción en las opciones avanzadas, ya que por defecto el plugin sube los archivos al servidor y luego al bucket, si cambiamos a ON Remove Files From Server, eliminaremos los archivos del servidor una vez subidos al bucket.

Opciones Avanzadas Amazon S3 Plugin

Eso sería todo por este tutorial, para comprabar que todo quedó funcionando bien pueden subir una imágen y ver su ubicación, verán que ya no se encuentra alojada en su servidor lo que trae muchas ventajas. Para los que se les hace tedioso leer tanto, haré un vídeo mostrando cómo se hace, no toma más de 10 minutos tener todo configurado y corriendo.

Si has implementado Amazon S3 o ya lo usabas, no dudes en compartir tu experiencia en los comentarios.

Testimonios CSS

Una petición muy común que tienen los clientes es la implementación de una página de testimonios, tener testimonios en la página de inicio o algo similar, si estamos trabajando con WordPress podríamos hacer uso de algún plugin de testominios, sin embargo, para efectos de velocidad y optimización de una página todos sabemos que es recomendable evitar al máximo el uso de plugins, por esto, me vi en la obligación de encontrar un método para poder tener testimonios sin plugins. Cabe resaltar que si no estás trabajando con WordPress te servirá igualmente.

[wp_ad_camp_1]

Este método para tener testimonios CSS usa los pseudo-elementos CSS :before y :after, también algunas propiedades simples de CSS3 para hacer lucir mejor a los testimonios.

Resultado Testimonios CSS

Esto no es un testimonio falso de esos que nos encontramos todos los días en Internet, esto es un testomonio falso con un agradable estilo CSS!

Alan Turing | Computer scientist

Como podemos apreciar, básicamente tenemos un blockquote con fondo de color B7EDFF, en la esquina superior izquierda e inferior derecha tenemos unas comillas y por último en la parte inferior del bloque tenemos el nombre del autor y un título de profesión o algo similar.

Cómo implementar los testimonios CSS

Testimonios CSS

En esta sección voy a asumir que estás trabajando con WordPress, sin embargo si quieres tener testimonios con CSS usando otro CMS o una página que estés desarrollando desde cero lo puedes hacer sin ningún problema.

Básicamente tenemos que hacer dos cosas

  1. Desde nuestro escritorio de administración vamos a Apariencia y editamos nuestra Hoja de estilo (style.css). Aunque también se puede incluir el CSS en cada elemento es recomendable hacerlo en la hoja de estilos que esté cargardo nuestro sitio. Incluimos el siguiente código CSS:
  2. .autor-testimonio {
        margin: 0 0 0 25px;
        font-family: Arial, Helvetica, sans-serif;
        color: #999;
        text-align:left;
    }
    .autor-testimonio span {
        font-size: 12px;
        color: #666;
    }
    .fecha-abajo {
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #B7EDFF;
        margin: 0 0 0 25px;
    }
    .testimonio {
        margin: 0;
        background: #B7EDFF;
        padding: 10px 50px;
        position: relative;
        font-family: Georgia, serif;
        color: #666;
        border-radius: 5px;
        font-style: italic;
        text-shadow: 0 1px 0 #ECFBFF;
        background-image: linear-gradient(#CEF3FF, #B7EDFF);
        text-align: justify;
    }
    
    .testimonio:before, .testimonio:after {
        content: "\201C";
        position: absolute;
        font-size: 80px;
        line-height: 1;
        color: #999;
        font-style: normal;
    }
    
    .testimonio:before {
        top: 0;
        left: 10px;
    }
    .testimonio:after {
        content: "\201D";
        right: 10px;
        bottom: -0.5em;
    }
  3. Lo único que nos falta es agregar el código HTML en el lugar donde queremos mostrar nuestro testimonio.
<blockquote class="testimonio">Aquí debes poner lo que quieras que salga en el testimonio.</blockquote>
<div class="fecha-abajo"></div>
<p class="autor-testimonio">Nombre del Autor del Testimonio | Profesión o título del personaje anterior</p>

Una vez que realicemos estos dos pasos tendremos testimonios usando CSS como lo mostré al inicio de este artículo en Resultado Testimonios CSS, si deseas cambias el color de fondo deberás cambiar el atributo background en .testimonios, también podrás cambias bordes, tipo de letra, la alineación del texto, etc.

Si tienes sugerencias para hacer que los testimonios luzcan incluso mejor espero comentarios.