Autor: RasenFx

Template HTML5 básico

El siguiente Template HTML5 básico contempla los principales elementos que debemos colocar en nuestra hoja para tener un optimo desempeño.

<!Doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bloque de identidad -->
  <title>Template HTML5 básico</title>
  <meta name="description" content="Template HTML5 básico para proyectos">
  <meta name="author" content="RasenFx">

<!-- Bloque de imágenes -->
  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- The Open Graph protocol (facebook-twitter-linkedin,etc) -->
  <meta property="og:title" content="Template HTML5 básico">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.rasenfx.com/code/template-html5-basico/">
  <meta property="og:description" content="Template HTML5 para proyectos">
  <meta property="og:image" content="images/ogimage.png">

<!-- llamados de CSS -->
  <link rel="stylesheet" href="css/styles.css?v=1.0">

<!-- Llamados de Scripts del head -->
  <script src="js/head-scripts.js"></script>

</head>

<body>
  <div>Contenidos de la hoja</div>

<!-- Llamados de scripts del body -->
  <script src="js/foot-scripts.js"></script>
</body>
</html>

A continuación las descripciones de cada uno de los elementos de la hoja:

Doctype

El Doctype nos permite informar al navegador el tipo de documento que estamos cargando, a diferencia de las tecnologías anteriores en HTML5 no necesitamos declarar una gran cantidad de información difícil de recordar, únicamente necesitamos colocar:

<!Doctype html>

Es importante recalcar que esta etiqueta puede ser escrita en minúsculas, mayúsculas o de forma mixta.

Elemento <html>

El elemento <html> debe ir después del Doctype, este nos permite informar al navegador que el documento es un HTML, se puede utilizar el atributo lang para definir el idioma de la hoja.

Al final de la hoja se debe cerrar la etiqueta con </html>

<!Doctype html>
<html lang="es">

</html>

La sección <head>

La sección <head> contiene la metadata (titulo de la hoja, metas, estilos, links, scripts), en general es información de la hoja que no verá el usuario.  Si bien el orden de los elementos en esta sección no afectan el funcionamiento es mejor tener cierto orden para que sea mas fácil leerlo.

<head>
  <!-- elementos -->
</head>

Meta <meta>

El elemento <meta> se utiliza para especificar la metadata e información técnica que utilizarán los buscadores y navegadores para desplegar la hoja.

charset

El atributo charset nos permite definir el tipo de encoding que se utiliza en la hoja, por defecto es el UTF-8

<meta charset="utf-8">
viewport

El viewport es uno de los elementos mas importantes en nuestra hoja HTML5. Este permite que nuestra hoja tenga responsiva y se ajuste al tamaño de los dispositivos móviles.

<meta name="viewport" content="width=device-width, initial-scale=1">
description

El elemento description se utiliza para dar una descripción de la hoja que será utilizado por los buscadores.

<meta name="description" content="Template HTML5 básico para proyectos">
author

El elemento author nos permite dar el crédito al autor de la hoja, está información tambien es utilizada por los buscadores.

<meta name="author" content="RasenFx">

Title <title>

Nos permite definir el título de la hoja.

<title>Template HTML5 básico</title>

Link <link>

El elemento <link> nos permite establecer la relación entre la hoja y recursos externos como pueden ser CSS e imágenes.

Los atributos que requiere <link> son: rel, href y opcional type

stylesheet

Permite llamar los archivos CSS que vamos a utilizar en nuestra hoja.

<link rel="stylesheet" href="/css/styles.css?v=1.0">
icon

Permite llamar a los iconos que se mostrarán en el tab del navegador

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
apple-touch-icon

Esta imagen es utilizada por los dispositivos de Apple (iPhone- iPad – iPod), y tambien por los bookmarks y home screen

<link rel="apple-touch-icon" type="text/css" href="/apple-touch-icon.png">

Script <script>

El elemento <script> nos permite llamar scripts a la hoja, es importante tener en cuenta que los scripts pueden hacer que nuestro sitio cargue mas lento, ya que cuando un navegador carga la hoja y encuentra un script no continuara la carga hasta terminar de procesar el script, por eso se recomienda que los scripts sean colocados al final de la hoja, pero hay casos en los que necesitaremos cargar ciertos scripts en el head por lo que se recomienda que estos scripts no sean muy pesados.

<script src="/js/head-scripts.js"></script>

The Open Graph protocol: link »

Los elementos og: son utilizados para compartir el contenido a las redes sociales, esto favorece al SEO y Social Media Marketing del sitio web.

<meta property="og:title" content="Template HTML5 básico">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.rasenfx.com/code/template-html5-basico/">
<meta property="og:description" content="Template HTML5 para proyectos">
<meta property="og:image" content="images/ogimage.png">

Adicionalmente para Twitter podemos agregar los datos de Twitter Cards: link »

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />

En el siguiente post extiendo un poco más este punto: link »

Body <body>

El <body> nos permite mostrar el contenido de la hoja (imágenes, textos, videos, etc.)

<body>
  <div>Contenidos de la hoja</div>

<!-- Llamados de scripts del body -->
  <script src="/js/foot-scripts.js"></script>
</body>

Es recomendable que todos los scripts que podamos sean llamados justo antes de la etiqueta </body>

Testeo de latencia a servidores AWS

El poder determinar cual región es la que menos latencia tiene a nuestro país o al target al que queremos llegar es muy importante para un proyecto.

Hace algún tiempo me tocó hacer un deploy a producción de un aplicativo y necesitaba encontrar la región con menor latencia, en ese tiempo encontré una lista de IP’s de AWS y me di el trabajo de testear una por una y ver que región me quedaba mejor.

Hoy encontré esta herramienta que en unos minutos nos da testeando la latencia a cada una de las regiones de AWS

https://ping.psa.fun/

 

Ejemplos realizados en Ecuador

 

 

 

 

Sourcetree con Bitbucket error de autenticación «App Passwords»

Contexto: Bitbucket descontinuo el utilizar el usuario y contraseña con el que se logea a su plataforma para validar la conexión a los repositorios.
Ahora recomiendan utilizar la «App Passwords» para generar una contraseña con la cual puedes acceder a los repositorios por medio de programas como Sourcetree.

Como es de costumbre hice unos cambios en un repositorio e intente hacer push y en ese momento salto un error de autenticación… como es de costumbre en fase de negación uno dice «talvez moví algo, intentemos de nuevo» y no funciono, actualicé el programa y nada, en ese momento empece a buscar por internet y encontré algunos post que recomendaban todo lo que ya había realizado, hasta que hoy encontré un post con la solución.

Vamos paso por paso para que no te suceda lo mismo (aunque si estás leyendo esto es posible que ya te haya pasado).

  1. Actualizar Sourcetree a la ultima versión
  2. Ingresa en Bitbucket a los Settings Personales y luego a Apps Passwords > https://bitbucket.org/account/settings/app-passwords/ aquí puedes crear las credenciales necesarias para conectar a tus repositorios.
  3. Edita las credenciales de acceso en Sourcetree con las credenciales creadas en Apps Passwords (el usuario es el mismo de tu cuenta), cambia el tipo de Autentificación a Basic,
    en esta parte si o si te va a salir que ha logrado validar la cuenta en el caso de que las credenciales sean correctas.

Hasta aquí en la mayoría de casos que leí ya les funcionaba, haces un push o pull y debería funcionar… en mi caso no funcionó, algunos recomendaban reinstalar el programa y tampoco me funciono.

¿Que lo soluciono?

Sourcetree tiene un cache de contraseñas y esto es parte del problema (o en mi caso lo fue) debes buscar y borrar un archivo:

Ingresa en la siguiente ruta: C:\Users\TUUSUARIO\AppData\Local\Atlassian\SourceTree busca el archivo «passwd» y borralo.

Reinicia Sourcetree y el momento de hacer un push o pull el programa te solicitará ingresar nuevamente la contraseña del App Passwords y listo he vuelto a tener mis repositorios funcionando con Sourcetree.

Espero esto les sea de ayuda, déjame saber en los comentarios si te funciono.

 

 

 

Cómo limpiar la memoria Swap en Linux

La memoria Swap es una parte de nuestro espacio de almacenamiento el cual es utilizado por el sistema de memoria virtual, es utilizado para almacenar datos inactivos de la RAM y liberar espacio para ser utilizado en otros programas.

Ahora, hay ocasiones en las que estos datos inactivos no son regresados a la memoria RAM y pueden acumularse hasta saturar el Swap, en estos casos es necesario realizar un borrado manual.

Cuidado: es importante revisar que tengamos suficiente RAM libre para recibir los datos alojados en el Swap, EJ: 400M en Swap requieren mínimo 400M libres en RAM

Puedes revisar los comandos para ver el espacio libre aquí

Una vez que estamos seguro de tener el espacio necesario vamos a limpiar la memoria Swap prendiendola y apagandola.

Para apagarlo debemos utilizar el siguiente comando:

swapoff -a

Para reactivarlo utilizaremos el siguiente comando:

swapon -a

Para ver el estado del Swap podemos utilizar el siguiente comando:

swapon --show

 

De ésta forma podremos limpiar el Swap de nuestros servidores, ahora es importante acotar que si este problema es recurrente es recomendable aumentar la cantidad de RAM de nuestro servidor.

Cambiar de Key a Contraseña en AWS EC2

Hay ocasiones en las que necesitaremos cambiar de Key a contraseña en AWS EC2 para esto debemos realizar los siguientes pasos:

Editar el archivo de configuración cloud-init

Edita el siguiente archivo:

/etc/cloud/cloud.cfg

Busca las siguientes lineas y asegúrate que tenga éstos datos:

disable_root: false
ssh_pwauth:   true

Éste proceso nos permite habilitar el login del root por medio de contraseña en el cloud-init. Son necesarias para poder asignar la contraseña por medio del user-data.

Editar el archivo authorized_key

Edita el siguiente archivo

.ssh/authorized_key

En el archivo authorized_keys, si existe remueve el prefijo del comando y deja el ssh-rsa, Ejemplo:

no-port-forwarding,no-agent-forwarding,no-X11-forwarding,command="echo 'Please login 
as the user \"ec2-user\" rather than the user \"root\".';echo;sleep 10" 
ssh-rsa <contenido de la sshkey>

El contenido debe quedar así:

ssh-rsa <contenido de la sshkey>

Edita el archivo sshd_config y genera la contraseña nueva para el root de tu Amazon EC2

Edita el siguiente archivo:

/etc/ssh/sshd_config

Actualiza las siguientes lineas

PasswordAuthentication yes
PermitRootLogin yes

Cambia la contraseña del root

passwd root

Reinicia el servicio sshd

sudo service sshd restart

¿ Para que sirve cambiar de Key a contraseña en AWS EC2 ?

En mi caso especifico necesitaba habilitar la Migración & Transferencia de Plesk, para realizar una migración de paquetes de hosting de un servidor a otro pero la key que proporciona AWS no me funcionaba en el Plesk receptor, por ese motivo me vi obligado a cambiar de Key a contraseña para poder logear al SSH por medio de contraseña.

©RasenFx 2022 - Powered by NK

Enable Notifications OK :D No gracias :(