Best practices for organizing web pages

Francisco Imanol Suarez — Fri, 03 Jan 2025 20:26:15 GMT

Introduction

The proper organization of web pages is essential to ensure that content is accessible, understandable, and easy to navigate for all users. Appropriately using semantic elements like

, and

not only enhances the document structure but also facilitates its interpretation by assistive technologies, such as screen readers.

In this chapter, we will explore how to use these elements to create a solid and accessible document structure, establish a coherent heading hierarchy, and group related elements to improve the user experience.

Chapter objectives

Use of
,
, and
: You will learn to use these semantic elements to organize content logically and accessibly.
Creating a Solid Structure: We will establish a clear and coherent hierarchy of headings and sections.
Heading Hierarchy and Grouping Elements: We will see how to appropriately structure headings and how to group related elements to enhance accessibility and usability.

Importance of organizing a web application

The proper organization of applications brings multiple benefits:

Accessibility: It facilitates navigation and understanding of content for users with disabilities, improving interoperability with assistive technologies.
SEO: It enhances search engine optimization by providing a clear and semantic content structure.
Usability: It makes the site more intuitive and easier to use for all users.
Maintainability: It simplifies site updates and maintenance since a clear structure is easier to understand and modify.

Chapter content

1. Use of semantic elements

1.1

The

element is used to group related content. It is ideal for dividing the page into logical sections that facilitate navigation and understanding of the content. Each

should have a header (

, etc.) that describes its purpose, thus improving accessibility.

Example:

<section> 
  <h2>Recent Newsh2>
  <p>News content...p>
section>

1.2

The

element is used to define navigation sections on the page. It is essential for creating accessible navigation menus, as screen readers use this element to identify navigation areas.

Example:

<nav>
  <ul>
    <li><a href="#home">Homea>li>
    <li><a href="#services">Servicesa>li>
    <li><a href="#contact">Contacta>li>
  ul>
nav>

1.3

The

element represents independent and self-contained content that can be distributed independently, such as blog posts or news articles.

Example:

<article>
  <h2>Article Titleh2>
  <p>Article content...p>
article>

2. Creating a solid document structure

2.1 Heading hierarchy

A well-defined heading hierarchy enhances the accessibility and usability of the page. Use headings (

) consistently to establish the structure of the content. The

heading should be used once per page for the main title, while other headings (

, etc.) are used for subtitles and subsections.

Example:

<h1>Main Titleh1>
<h2>Subtitleh2>
<h3>Sectionh3>

Grouping related elements using semantic containers like

, and

improves the organization and accessibility of the content. This facilitates navigation and understanding for both users and assistive technologies.

Example:

<section>
  <h2>Servicesh2>
  <div>
    <h3>Consultingh3>
    <p>We offer consulting services...p>
  div>
  <div>
    <h3>Developmenth3>
    <p>We offer development services...p>
  div>
section>

3. Best practices for page organization

3.1 Consistency in structure

Maintain a consistent structure across all pages of your website to facilitate navigation and understanding. Consistency helps users become familiar with the layout, making navigation easier.

Example:


<header>
  <nav>
    <ul>
      <li><a href="#home">Homea>li>
      <li><a href="#services">Servicesa>li>
      <li><a href="#contact">Contacta>li>
    ul>
  nav>
header>
<main>
  <section>
    <h1>Welcome to Our Siteh1>
    <p>Welcome text...p>
  section>
main>
<footer>
  <p>© 2023 Company Namep>
footer>

3.2 Use of ARIA Roles

Use ARIA roles (Accessible Rich Internet Applications) when necessary to enhance the accessibility of semantic elements. ARIA roles provide additional information to assistive technologies.

Example:

<nav role="navigation">
  <ul>
    <li><a href="#home">Homea>li>
    <li><a href="#services">Servicesa>li>
    <li><a href="#contact">Contacta>li>
  ul>
nav>

3.3 Comments in code

Use comments in the code to explain complex or important sections, facilitating maintainability and collaboration among developers. They are especially useful in large projects.

Example:


<section>
  <h2>Servicesh2>
  ...
section>

3.4 HTML validation

Ensure that your HTML is valid and follows W3C standards. Use validation tools to check the accessibility and correctness of the structure.

Example: You can use the W3C Markup Validation Service to validate your HTML.

Conclusion

By the end of this chapter, you will have a solid understanding of how to properly organize the pages of your website using semantic elements and good HTML practices. This organization will not only improve the accessibility and usability of your site but also facilitate its maintenance and updates.

By following these practices and leveraging the right tools, you can create accessible websites for all users, regardless of their abilities, and provide a consistent and pleasant user experience.

Estructura Básica de un Sitio Web

Francisco Imanol Suarez — Mon, 30 Sep 2024 13:45:44 GMT

Introducción

La estructura básica de un sitio web es fundamental para el desarrollo de cualquier proyecto tecnologico. Es el esqueleto sobre el cual se construye todo el contenido y funcionalidades de un sitio. Una estructura bien organizada no solo facilita el trabajo de los desarrolladores, sino que también mejora la accesibilidad, la usabilidad y el rendimiento del sitio.

En este capítulo, exploraremos cómo configurar la etiqueta y cómo crear una estructura base en la etiqueta . Estos elementos son esenciales para definir aspectos globales del sitio, como metadatos, css y scripts, así como la organización inicial del contenido.

Objetivos del Capítulo

Configurar el : Aprenderás a incluir metadatos importantes, como el título de la página, la codificación de caracteres y enlaces a recursos externos, enfatizando metadatos relacionados con accesibilidad.
Crear una Estructura Base en : Estableceremos una estructura coherente y lógica para el contenido de tu página, utilizando elementos semánticos y buenas prácticas de HTML que promuevan la accesibilidad.

Importancia de la Estructura Básica

Una estructura bien definida ofrece múltiples beneficios:

Accesibilidad: Facilita la navegación para usuarios con algun tipo de discapacidad, permitiendo asi que tecnologías asistivas interpreten el contenido correctamente.
SEO: Mejora la optimización para motores de búsqueda al organizar el contenido de manera clara.
Mantenibilidad: Simplifica las actualizaciones y el mantenimiento del sitio, ya que una estructura clara es más comprensible.
Rendimiento: Contribuye a tiempos de carga más rápidos mediante una mejor organización de recursos.

Contenido del Capítulo

1. Elemento

1.1 Importancia y función

El es una sección crucial del documento HTML que contiene metadatos y enlaces a recursos externos. Estos elementos no son visibles directamente en la página web, pero son esenciales para su funcionamiento y optimización.

1.2 Inclusión de Metadatos

Los metadatos proporcionan información sobre la página web a los navegadores y motores de búsqueda. Algunos de los metadatos más importantes incluyen:

<title> Mi Página Web title>
<meta charset="UTF-8">
<meta name="description" content="Descripción de la página">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">

1.3 Enlaces a Recursos Externos

En este podemos enlazar hojas de estilo, scripts de JavaScript y fuentes externas.

<link rel="stylesheet" href="styles.css">
<script src="script.js">script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="manifest" href="/manifest.json">

1.4 Uso de etiquetas importantes

Además de los metadatos y enlaces, hay otras etiquetas importantes que pueden incluirse en este:

<base href="https://www.ejemplo.com/">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Ejemplos de Código Completos

Ejemplo de Código Completo

html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <title>Mi Página Webtitle>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="manifest" href="/manifest.json">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
head>
<body>
    
body>
html>

2. La estructura base en

2.1 Creación de una Plantilla Base

La etiqueta contiene todo el contenido visible de la página web. Crear una plantilla base estructurada te ayudará a mantener el orden y la coherencia en tu sitio. Asegúrate de que cada sección esté claramente definida y sea accesible.

2.2 Uso de Elementos Semánticos

Utilizar elementos HTML semánticos mejora tanto la accesibilidad como el SEO. Algunos de los elementos semánticos más importantes incluyen:

<header>: Contiene el encabezado de la página o sección, ideal para incluir navegación y títulos.
<main>: Define el contenido principal de la página y es crucial para la navegación de lectores de pantalla.
<footer>: Contiene el pie de página de la página o sección, incluyendo información de contacto y enlaces importantes.
<article>: Representa un contenido independiente que puede ser distribuido de forma independiente.
<section>: Agrupa contenido relacionado, ayudando a dividir la página en secciones lógicas.
<nav>: Contiene enlaces de navegación, facilitando el acceso a diferentes partes del sitio.

2.3 Organización Inicial del Contenido

Una buena práctica es organizar el contenido de tu página en secciones lógicas desde el principio. Esto no solo hace que tu página sea más fácil de entender y navegar, sino que también facilita futuras actualizaciones y modificaciones. Utiliza roles ARIA (Accessible Rich Internet Applications) cuando sea necesario para mejorar la accesibilidad.

2.4 Mejores Prácticas para una Estructura Limpia y Eficiente

Consistencia: Mantén una estructura consistente en todas las páginas de tu sitio web para facilitar la navegación.
Modularidad: Divide el contenido en módulos o componentes reutilizables, facilitando el mantenimiento y la escalabilidad.
Comentarios: Utiliza comentarios en el código para explicar secciones complejas o importantes.
Validación: Asegúrate de que tu HTML sea válido y siga las normas del W3C. Utiliza herramientas de validación para verificar la accesibilidad.

Ejemplos de codigo

Estructura base en

html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <title>Mi Página Webtitle>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
head>
<body>
    <header>
        <h1>Bienvenido a Mi Sitio Webh1>
        <nav>
            <ul>
                <li><a href="#home">Inicioa>li>
                <li><a href="#about">Acerca dea>li>
                <li><a href="#contact">Contactoa>li>
            ul>
        nav>
    header>
    <main>
        <section id="home">
            <h2>Inicioh2>
            <p>Contenido de la página de inicio.p>
        section>
        <section id="about">
            <h2>Acerca deh2>
            <p>Información sobre nosotros.p>
        section>
    main>
    <footer>
        <p>Contacto: info@ejemplo.comp>
    footer>
body>
html>

Desafío 1: Configuración del

Objetivo: Configurar correctamente la etiqueta con todos los metadatos esenciales y enlaces a recursos externos.

Instrucciones:

Crea un archivo HTML y asegúrate de incluir la etiqueta .
Añade los siguientes metadatos:
- Título de la página.
- Codificación de caracteres como UTF-8.
- Descripción breve de la página.
- Configuración de la ventana gráfica para hacer el sitio responsive.
- Color del tema del navegador móvil.
Enlaza una hoja de estilo CSS externa y una fuente de Google Fonts.

html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <title>Mi Página Webtitle>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
head>
<body>
    
body>
html>

Desafío 2: Creación de una Plantilla Base en

Objetivo: Establecer una estructura base coherente en la etiqueta utilizando elementos HTML semánticos.

Instrucciones:

Dentro de la etiqueta , crea una estructura básica utilizando los siguientes elementos semánticos:
- : Incluir un título y una barra de navegación.
- : Contenido principal de la página.
- : Una sección de contenido dentro del
  .
- : Pie de página con información de contacto.
Asegúrate de que la estructura sea lógica y fácil de entender.

html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Descripción de la página">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <title>Mi Página Webtitle>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
head>
<body>
    <header>
        <h1>Bienvenido a Mi Sitio Webh1>
        <nav>
            <ul>
                <li><a href="#home">Inicioa>li>
                <li><a href="#about">Acerca dea>li>
                <li><a href="#contact">Contactoa>li>
            ul>
        nav>
    header>
    <main>
        <section id="home">
            <h2>Inicioh2>
            <p>Contenido de la página de inicio.p>
        section>
        <section id="about">
            <h2>Acerca deh2>
            <p>Información sobre nosotros.p>
        section>
    main>
    <footer>
        <p>Contacto: info@ejemplo.comp>
    footer>
body>
html>

Recursos Adicionales

Para profundizar en los conceptos discutidos en este capítulo, te recomendamos consultar los siguientes recursos:

Ejercicios prácticos adicionales

Ejercicio 1: Implementación de ARIA Roles

Añade ARIA roles a un documento HTML existente para mejorar la accesibilidad.

Ejercicio 2: Validación HTML

Usa una herramienta de validación (como W3C Validator) para verificar el código HTML de tu sitio y corrige los errores encontrados.

Sección de Preguntas Frecuentes (FAQ)

P: ¿Qué son los metadatos y por qué son importantes?

R: Los metadatos proporcionan información adicional sobre la página web a navegadores y motores de búsqueda. Son importantes para hacer que la página sea accesible y optimizada para SEO.

P: ¿Qué es el atributo `alt` en las imágenes y por qué es importante?

R: El atributo alt proporciona un texto alternativo para las imágenes, lo cual es crucial para usuarios que utilizan lectores de pantalla. Tambien podemos encontrarnos casos en los cuales este atributo esta vacio dado que nos encontramos en un caso de imagen decorativa

Aca tenes un post sobre la importancia del atributo ALT en las imagenes

Imágenes y Diagramas

Mapa de la Estructura de un Sitio Web

Incluir diagramas que ilustren la estructura básica de un sitio web puede ayudar a los lectores a visualizar la información discutida.

    
    ├── 
    │   ├── 
    │   ├── 
    │   └── 
    └── <body>
        ├── <header>
        ├── <main>
        │   ├── <section>
        │   └── <article>
        └── <footer>
</code></pre>
<h3 id="heading-comentarios-en-el-codigo">Comentarios en el Código</h3>
<p>Si queres podes crear comentarios en el codigo para identificar cada seccion como lo hacemos aca abajo</p>
<pre><code class="lang-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-meta-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"es"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
    <span class="hljs-comment"><!-- Meta datos de la página --></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Descripción de la página"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"theme-color"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"#000000"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Mi Página Web<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"styles.css"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://fonts.googleapis.com/css?family=Roboto"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-comment"><!-- Encabezado del sitio --></span>
    <span class="hljs-tag"><<span class="hljs-name">header</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Bienvenido a Mi Sitio Web<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
        <span class="hljs-comment"><!-- Barra de navegación --></span>
        <span class="hljs-tag"><<span class="hljs-name">nav</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#home"</span>></span>Inicio<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#about"</span>></span>Acerca de<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#contact"</span>></span>Contacto<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">nav</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">header</span>></span>
    <span class="hljs-comment"><!-- Contenido principal --></span>
    <span class="hljs-tag"><<span class="hljs-name">main</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"home"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Inicio<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Contenido de la página de inicio.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">section</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"about"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Acerca de<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Información sobre nosotros.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">section</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">main</span>></span>
    <span class="hljs-comment"><!-- Pie de página --></span>
    <span class="hljs-tag"><<span class="hljs-name">footer</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Contacto: info@ejemplo.com<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</code></pre>
<p>Al incorporar estas sugerencias, no solo mejorarás la accesibilidad y usabilidad de la web, sino que también facilitarás el aprendizaje de tus lectores con ejemplos claros, recursos adicionales y ejercicios prácticos.</p>

</article>
<article>
<h1>El Atributo alt en Imágenes | Accesibilidad</h1>
<p>Francisco Imanol Suarez — Sun, 01 Sep 2024 01:12:26 GMT</p>
<h2 id="heading-introduccion">Introducción</h2>
<p>El atributo alt ha estado presente desde los inicios del HTML y la creación de aplicaciones web. En este post, exploraremos la importancia del mismo asi como tambien cuales son sus beneficios para mejorar la <strong>accesibilidad</strong>, y algunos conceptos esenciales como <strong>SEO</strong>, <strong>SSR</strong> y <strong>CSR</strong>.</p>
<h2 id="heading-que-es-el-atributo-alt-y-para-que-sirve">¿Qué es el atributo alt y para qué sirve?</h2>
<p>El atributo alt son descripciones textuales que se añaden a las imágenes en el código HTML de un sitio web. Tienen un papel crucial en la accesibilidad, ya que permiten a los lectores de pantalla describir el contenido de las imágenes a las personas con algun tipo de discapacidad visual. Por otro lado, también pueden ser útiles en situaciones donde la conexión a internet es deficiente y las imágenes no cargan correctamente.</p>
<h2 id="heading-tipos-de-formatos">Tipos de formatos</h2>
<p>La forma en que se escriben estos atributos puede variar según el propósito de la imagen y el contexto en el que se utiliza.</p>
<h3 id="heading-formato-descriptivo">Formato "Descriptivo"</h3>
<p>Este proporciona información específica y detallada sobre el contenido de la imagen.</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"carro.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Coche de carreras rojo en pista de competición pasando la línea de meta"</span> /></span>
</code></pre>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"ciudad.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Vista panorámica de la ciudad de Nueva York desde el mirador del Empire State Building al atardecer"</span> /></span>
</code></pre>
<p>Este tipo de descripciones son utiles cuando la información visual de la imagen es esencial para la comprensión del contenido de la página.</p>
<h3 id="heading-formato-emocional">Formato "Emocional"</h3>
<p>Las descripciones emocionales capturan el sentimiento o la atmósfera que se quiere transmitir con la imagen.</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"playa.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Familia disfrutando de un día soleado y alegre en la playa"</span> /></span>
</code></pre>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"celebracion.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Grupo de amigos celebrando enérgicamente una victoria en el estadio"</span> /></span>
</code></pre>
<p>Este tipo de descripciones es útil cuando la imagen se utiliza para evocar una emoción específica que complementa el contenido escrito.</p>
<h3 id="heading-formato-decorativo">Formato "Decorativo"</h3>
<p>Las imágenes decorativas son aquellas que no aportan información esencial al contenido de la página y se utilizan principalmente para mejorar la estética visual del sitio. Dado que estas imágenes no son cruciales para la comprensión del contenido, no es necesario proporcionar descripciones en el atributo, es decir, debemos dejar el mismo vacio.</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"bg.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"presentation"</span> /></span>
</code></pre>
<h3 id="heading-por-que-usar-un-atributo-alt-vacio-y-rolepresentation">¿Por qué usar un atributo <code>alt</code> vacío y <code>role="presentation</code>"?</h3>
<ol>
<li><p><strong>Accesibilidad</strong>: Al usar un atributo alt vacío (<code>alt=""</code>) y el atributo <code>role="presentation"</code>, se le indica a los lectores de pantalla que ignoren estas imágenes. Esto evita que los usuarios de Screen reader, reciban información innecesaria que podría distraerlos del contenido principal.</p>
</li>
<li><p><strong>Mejora de la experiencia del usuario</strong>: Al no sobrecargar a los usuarios con descripciones de imágenes que no son relevantes, se mejora la experiencia de la navegación, haciendo que el contenido sea más fácil de seguir y entender.</p>
</li>
<li><p><strong>SEO</strong>: Aunque las imágenes decorativas no contribuyen directamente al SEO, el uso adecuado del atributo alt y roles asegura que los motores de búsqueda se centren en el contenido relevante, mejorando así la calidad general del sitio.</p>
</li>
</ol>
<h3 id="heading-ejemplo-de-implementacion">Ejemplo de Implementación</h3>
<p>Aquí tienes un ejemplo de cómo se puede implementar una imagen decorativa en HTML:</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"bg.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"presentation"</span> /></span>
</code></pre>
<h3 id="heading-beneficios-adicionales">Beneficios Adicionales</h3>
<ul>
<li><p><strong>Carga de Página</strong>: Las imágenes decorativas suelen ser de menor importancia en términos de carga. Al no requerir descripciones detalladas, se puede optimizar el tiempo de carga y la eficiencia del sitio.</p>
</li>
<li><p><strong>Mantenimiento del Código</strong>: Mantener este atributo vacío e implementar <code>role="presentation"</code> simplifica el mantenimiento del código, ya que no es necesario actualizar descripciones que no aportan valor al contenido principal.</p>
</li>
</ul>
<p>En resumen, el uso de un atributo alt vacío seguido de el atributo <code>role="presentation"</code> para imágenes decorativas es una práctica recomendada para mejorar la accesibilidad y la experiencia del usuario, sin comprometer la calidad del contenido ni la eficiencia del sitio web.</p>
<p>Es un error común pensar que este atributo debe optimizarse únicamente para SEO. Aunque pueden influir en este, su principal propósito es la accesibilidad.</p>
<p>Este atributo bien escrito no solo mejorarán la usabilidad de tu sitio para personas con algun tipo de discapacidad, sino que también mejorarán tu ranking en buscadores al proporcionar contenido relevante y de calidad para los usuarios.</p>
<h3 id="heading-optimizacion-para-screen-readers-no-para-motores-de-busqueda">Optimización para Screen Readers, no para motores de busqueda</h3>
<p>Más que enfocarse en palabras clave, el atributo alt debe describir la imagen de la manera más clara y precisa posible. Google valorará más el contenido útil y relevante que cualquier intento de manipulación de SEO.</p>
<h2 id="heading-tipos-de-imagenes-y-equiparacion-de-atributo-alt">Tipos de imágenes y equiparación de atributo alt</h2>
<p>El atributo alt se aplica de la misma manera a diferentes formatos de imágenes, como <strong>SVG</strong>, <strong>PNG</strong> y <strong>JPG</strong>. No importa el formato de la misma; siempre es importante proporcionar una descripción adecuada para garantizar la accesibilidad.</p>
<h3 id="heading-lectura-en-un-screen-reader">Lectura en un Screen Reader</h3>
<p>Cuando un screen reader encuentra este atributo, lee su contenido en voz alta. Por ejemplo:</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"gato.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Gato dormido en una hamaca"</span> /></span>
</code></pre>
<p>Un lector de pantalla anunciará algo como: <em>"Imagen, Gato dormido en una hamaca."</em> Esto ayuda a los usuarios a comprender el contenido de la imagen presente.</p>
<h2 id="heading-ssr-server-side-rendering-y-csr-client-side-rendering">SSR (Server-Side Rendering) y CSR (Client-Side Rendering)</h2>
<h3 id="heading-que-es-ssr">¿Qué es SSR?</h3>
<p>SSR (Server-Side Rendering) es un método en el que el servidor genera el HTML completo de una página antes de enviarlo al navegador. Esto significa que el contenido, incluyendo el atributo alt de las imágenes, ya está presente cuando el HTML llega al navegador del usuario, garantizando que los lectores de pantalla tengan acceso inmediato a las descripciones de las imágenes asi como tambien a cualquier otro contenido.</p>
<h3 id="heading-que-es-csr">¿Qué es CSR?</h3>
<p>CSR (Client-Side Rendering) es cuando el contenido de la página se genera dinámicamente en el navegador utilizando JavaScript. Es vital asegurarse de que el atributo se incluya en el contenido dinámico para mantener la accesibilidad integral del sitio.</p>
<h2 id="heading-implementacion-en-nextjs-y-react">Implementación en Next.js y React</h2>
<p>Next.js es un framework popular para React que admite tanto SSR como CSR. Aquí un ejemplo básico de cómo manejar este atributo:</p>
<pre><code class="lang-jsx"><span class="hljs-keyword">import</span> Image <span class="hljs-keyword">from</span> <span class="hljs-string">'next/image'</span>;

<span class="hljs-keyword">const</span> MyComponent = <span class="hljs-function">() =></span> (
  <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">Image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/static/cat.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Gato dormido en una hamaca"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">{500}</span> <span class="hljs-attr">height</span>=<span class="hljs-string">{500}</span> /></span>
  <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
);

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> MyComponent;
</code></pre>
<p>En Next.js, el componente <code>Image</code> automáticamente se asegura de que las imágenes sean accesibles y esten bien optimizadas.</p>
<h3 id="heading-implementacion-en-react">Implementación en React</h3>
<p>En una aplicación de React sin Next.js, puedes usar el componente estándar <code>img</code> para manejar las etiquetas alt:</p>
<pre><code class="lang-jsx"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;

<span class="hljs-keyword">const</span> MyComponent = <span class="hljs-function">() =></span> (
  <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path-to-image/cat.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Gato dormido en una hamaca"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">{500}</span> <span class="hljs-attr">height</span>=<span class="hljs-string">{500}</span> /></span>
  <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
);

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> MyComponent;
</code></pre>
<p>En ambos ejemplos, asegúrate de proporcionar una descripción significativa y precisa para mejorar la accesibilidad.</p>
<h2 id="heading-enlaces-a-recursos-adicionales">Enlaces a Recursos Adicionales</h2>
<p>Para aquellos interesados en aprender más sobre accesibilidad web y SEO, aquí hay algunos recursos útiles:</p>
<ul>
<li><p><a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/">W3C Web Content Accessibility Guidelines (WCAG)</a></p>
</li>
<li><p><a target="_blank" href="https://developers.google.com/search/docs/beginner/seo-starter-guide">Google's Introduction to SEO</a></p>
</li>
<li><p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">Mozilla Developer Network (MDN) Web Docs on <code></code></a></p>
</li>
</ul>
<p>Tambien te dejo unos recursos para que puedas testear la accesibilidad de tu aplicacion web:</p>
<ul>
<li><p><a target="_blank" href="https://www.deque.com/axe/">AXE Core</a></p>
</li>
<li><p>Google Lighthouse</p>
</li>
</ul>
<h2 id="heading-conclusion">Conclusión</h2>
<p>En resumen, el atributo alt es esencial para la accesibilidad web y no debe ser considerado una simple práctica para mejorar el SEO. Al redactar estos debemos ser claros y descriptivos, no solo estamos mejorando la experiencia de los usuarios de Screen Reader, sino también alineándonos con las mejores prácticas de los motores de busqueda, para contenido relevante y de calidad.</p>

</article>
<article>
<h1>La importancia de los encabezados en la accesibilidad web: cómo utilizarlos correctamente</h1>
<p>Francisco Imanol Suarez — Sun, 12 Mar 2023 17:34:24 GMT</p>
<p>La estructura adecuada de encabezados es una de las formas más importantes de asegurar la accesibilidad web y facilitar la navegación de los usuarios.</p>
<p>Estos son elementos importantes de HTML que nos permiten marcar la jerarquía del contenido en una página. La estructura adecuada implica utilizar estos en orden consecutivo y de manera lógica.</p>
<p>Un ejemplo de una estructura de encabezados adecuada sería la siguiente:</p>
<pre><code class="lang-xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Título principal<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Subtítulo 1<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Sub-subtítulo 1.1<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Texto de ejemplo<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Sub-subtítulo 1.2<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Texto de ejemplo<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Subtítulo 2<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Sub-subtítulo 2.1<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Texto de ejemplo<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Sub-subtítulo 2.2<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Texto de ejemplo<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
</code></pre>
<p>En este ejemplo, el encabezado <code><h1></code> se utiliza para el título principal de la página, mientras que los encabezados <code><h2></code> y <code><h3></code> se utilizan para los subtítulos,los encabezados se utilizan en orden consecutivo y de manera lógica, y cada encabezado se utiliza solo una vez.</p>
<blockquote>
<p>En general, se recomienda que las páginas web tengan un solo encabezado de nivel 1 <code><h1></code>, salvo en casos excepcionales, para indicar de manera clara y precisa el inicio del contenido principal.</p>
</blockquote>
<p>Es una buena práctica comenzar el contenido principal de una página web con un encabezado de nivel 1 ( <h1>), sin incluir otros encabezados previos a este nivel superior. Las subsecciones deben indicarse como encabezados de nivel 2 ( <h2>) y, si hay subsecciones adicionales dentro de ellas, se deben marcar como nivel 3 ( <h3>) y así sucesivamente.</p>
<p>El uso incorrecto de los encabezados puede tener un impacto negativo en la accesibilidad web y dificultar la navegación de los usuarios. Por ejemplo, si se utiliza un encabezado <code><h2></code> después de un encabezado <code><h3></code>, esto puede confundir a los usuarios que dependen de la estructura de encabezados para navegar por la página. Además, el uso inapropiado de los encabezados puede dar una impresión falsa de la estructura del contenido y confundir a los usuarios de lectores de pantalla.</p>
<p>Un ejemplo de mal uso de los encabezados sería el siguiente:</p>
<pre><code class="lang-xml"><span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Título principal<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Subtítulo 1<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Sub-subtítulo 1.1<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Texto de ejemplo<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Sub-subtítulo 1.2<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Texto de ejemplo<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Subtítulo 2<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Sub-subtítulo 2.1<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Texto de ejemplo<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Sub-subtítulo 2.2<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Texto de ejemplo<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
</code></pre>
<p>En este ejemplo, el encabezado <code><h2></code> se utiliza para el título principal en lugar de <code><h1></code>, lo que puede causar una confusion a los usuarios de Screen Readers. Además, estos no se utilizan en orden consecutivo y lógico, lo que dificultara la navegación y la comprensión del contenido.</p>
<blockquote>
<p>Es importante recordar que la estructura de encabezados adecuada es solo una parte de la accesibilidad web, y existen otras pautas importantes a seguir.</p>
</blockquote>
<p>En conclusión, utilizar los encabezados correctamente es fundamental para garantizar la accesibilidad de los sitios web y mejorar la experiencia del usuario.</p>
<p>Al seguir las pautas de uso de los encabezados en HTML, podemos crear una estructura lógica y fácil de seguir que permita a los usuarios navegar y comprender el contenido de la página de manera efectiva. Además, utilizar los encabezados adecuadamente también puede mejorar el posicionamiento en los motores de búsqueda y hacer que el contenido sea más fácil de encontrar para los usuarios.</p>
<p>Además de seguir la estructura adecuada, existen otras pautas importantes a seguir para mejorar la accesibilidad del sitio. Algunas de estas pautas incluyen:</p>
<ul>
<li><p>Proporcionar alternativas textuales para el contenido no textual, como imágenes y videos</p>
</li>
<li><p>Asegurarse de que los colores de fondo y texto tengan suficiente contraste para ser legibles</p>
</li>
<li><p>Utilizar etiquetas semánticas adecuadas para identificar el tipo de contenido, como los elementos de lista para listas y los elementos de tabla para tablas</p>
</li>
<li><p>Proporcionar una navegación clara y consistente a través de la página y el sitio web en su conjunto</p>
</li>
</ul>
<p>Al seguir estas pautas y utilizar los encabezados adecuadamente, podemos mejorar significativamente la accesibilidad web y garantizar que el contenido de nuestra página sea accesible para todos los usuarios.</p>
<p>Para comprobar si los encabezados de su sitio web están semanticamente correctos, puede seguir los siguientes pasos:</p>
<ol>
<li><p>Inspeccionar los encabezados en el código fuente HTML de su sitio web y asegurarse de que los encabezados estén estructurados adecuadamente con las etiquetas HTML correctas. Los encabezados deben estar organizados de forma jerárquica, desde <strong>H1</strong> hasta <strong>H6</strong>, siendo H1 el encabezado más importante y H6 el menos importante.</p>
</li>
<li><p>Utilizar una herramienta de validación HTML como el validador de W3C (<a target="_blank" href="https://validator.w3.org/"><strong>https://validator.w3.org/</strong></a>) para comprobar si su sitio web cumple con los estándares HTML.</p>
</li>
<li><p>Utilizar una herramienta de accesibilidad web como AChecker (<a target="_blank" href="https://achecker.achecks.ca/checker/index.php"><strong>https://achecker.ca/checker/index.php</strong></a>) o Wave (<a target="_blank" href="https://wave.webaim.org/"><strong>https://wave.webaim.org/</strong></a>) .</p>
</li>
</ol>
<p>Fuentes:</p>
<ul>
<li><p>Web Content Accessibility Guidelines (WCAG) 2.1: <a target="_blank" href="https://www.w3.org/TR/WCAG21/"><strong>https://www.w3.org/TR/WCAG21/</strong></a></p>
</li>
<li><p>WebAIM: Headings: <a target="_blank" href="https://webaim.org/techniques/semanticstructure/"><strong>https://webaim.org/techniques/semanticstructure/</strong></a></p>
</li>
</ul>

</article>
<article>
<h1>Fake API JSON-Server</h1>
<p>Francisco Imanol Suarez — Tue, 10 May 2022 12:10:17 GMT</p>
<p>Cómo desarrollador Frontend muchas veces tenemos la tarea de simular algún servicio REST para entregar o recibir datos en formato JSON y así asegurarnos que todo funcione como esperamos antes de enviar algo a producción.</p>
<p>Si bien cuando programamos solemos trabajar con un equipo con gente dedicada a armar estos servicios, nosotros como desarrolladores Frontend para no retrasar los proyectos debemos implementar estos de manera temprana y con una complejidad mínima para poder realizar las diferentes operaciones.</p>
<p>Por supuesto, podríamos sentarnos a configurar un Backend completo utilizando Node.js, Express, Mongo o PostgreSQL pero tardaremos mucho tiempo y retrasamos todas nuestras tareas.</p>
<p>Hoy en día contamos con herramientas como <strong>JSON Server</strong> la cual nos permite configurar e implementar una API REST con todas las operaciones <strong>CRUD</strong> en cuestión de minutos, y si… en minutos literalmente.</p>
<p>Ahora… ¿Que es esta gran herramienta?, ellos se describen como la manera de crear una API REST en 30 segundos sin la necesidad de configurar nada.</p>
<blockquote>
<p><a target="_blank" href="https://github.com/typicode/json-server">Enlace al proyecto json-server GitHub</a></p>
</blockquote>
<p>Vamos a lo que vinimos, lo primero que debemos hacer es crear una carpeta para nuestro proyecto y abrir una terminal en ella, luego instalaremos la herramienta de manera global en nuestra computadora, eso lo hacemos con el siguiente comando</p>
<pre><code>npm <span class="hljs-keyword">install</span> -g <span class="hljs-keyword">json</span>-<span class="hljs-keyword">server</span>
</code></pre><p>Puede ser que te de un error de acceso, eso lo solucionamos agregando la palabra <code>sudo</code> antes de npm, quedaría de la siguiente manera <code>sudo npm install -g json-server</code>.</p>
<p>Una vez que este proceso esté listo crearemos un archivo JSON llamado db.json, este archivo nos servirá como una base de datos la cual podremos modificar mediante las diferentes operaciones a lo largo de la vida de nuestro proyecto.</p>
<blockquote>
<p>A modo ejemplo implementaremos un archivo con datos de personas.</p>
</blockquote>
<pre><code>{
 <span class="hljs-attr">"people"</span>: [
   {
     <span class="hljs-attr">"id"</span>: <span class="hljs-number">1</span>,
     <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Leanne Graham"</span>,
     <span class="hljs-attr">"username"</span>: <span class="hljs-string">"Bret"</span>,
     <span class="hljs-attr">"email"</span>: <span class="hljs-string">"Sincere@april.biz"</span>,
     <span class="hljs-attr">"address"</span>: {
       <span class="hljs-attr">"street"</span>: <span class="hljs-string">"Kulas Light"</span>,
       <span class="hljs-attr">"suite"</span>: <span class="hljs-string">"Apt. 556"</span>,
       <span class="hljs-attr">"city"</span>: <span class="hljs-string">"Gwenborough"</span>,
       <span class="hljs-attr">"zipcode"</span>: <span class="hljs-string">"92998-3874"</span>,
       <span class="hljs-attr">"geo"</span>: {
         <span class="hljs-attr">"lat"</span>: <span class="hljs-string">"-37.3159"</span>,
         <span class="hljs-attr">"lng"</span>: <span class="hljs-string">"81.1496"</span>
       }
     },
     <span class="hljs-attr">"phone"</span>: <span class="hljs-string">"1-770-736-8031 x56442"</span>,
     <span class="hljs-attr">"website"</span>: <span class="hljs-string">"hildegard.org"</span>,
     <span class="hljs-attr">"company"</span>: {
       <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Romaguera-Crona"</span>,
       <span class="hljs-attr">"catchPhrase"</span>: <span class="hljs-string">"Multi-layered client-server neural-net"</span>,
       <span class="hljs-attr">"bs"</span>: <span class="hljs-string">"harness real-time e-markets"</span>
     }
   },
   {
     <span class="hljs-attr">"id"</span>: <span class="hljs-number">2</span>,
     <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Ervin Howell"</span>,
     <span class="hljs-attr">"username"</span>: <span class="hljs-string">"Antonette"</span>,
     <span class="hljs-attr">"email"</span>: <span class="hljs-string">"Shanna@melissa.tv"</span>,
     <span class="hljs-attr">"address"</span>: {
       <span class="hljs-attr">"street"</span>: <span class="hljs-string">"Victor Plains"</span>,
       <span class="hljs-attr">"suite"</span>: <span class="hljs-string">"Suite 879"</span>,
       <span class="hljs-attr">"city"</span>: <span class="hljs-string">"Wisokyburgh"</span>,
       <span class="hljs-attr">"zipcode"</span>: <span class="hljs-string">"90566-7771"</span>,
       <span class="hljs-attr">"geo"</span>: {
         <span class="hljs-attr">"lat"</span>: <span class="hljs-string">"-43.9509"</span>,
         <span class="hljs-attr">"lng"</span>: <span class="hljs-string">"-34.4618"</span>
       }
     },
     <span class="hljs-attr">"phone"</span>: <span class="hljs-string">"010-692-6593 x09125"</span>,
     <span class="hljs-attr">"website"</span>: <span class="hljs-string">"anastasia.net"</span>,
     <span class="hljs-attr">"company"</span>: {
       <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Deckow-Crist"</span>,
       <span class="hljs-attr">"catchPhrase"</span>: <span class="hljs-string">"Proactive didactic contingency"</span>,
       <span class="hljs-attr">"bs"</span>: <span class="hljs-string">"synergize scalable supply-chains"</span>
     }
   },
]
}
</code></pre><blockquote>
<p>Te dejo el ejemplo la base de datos completa en
https://jsonplaceholder.typicode.com/users</p>
</blockquote>
<p>Ahora abriremos el archivo <code>package.json</code> y modificaremos el comando <code>test</code> por <code>server</code> seguida de la instrucción <code>json-server --watch db.json</code></p>
<pre><code><span class="hljs-string">"scripts"</span>: {
   <span class="hljs-string">"server"</span>: <span class="hljs-string">"json-server --watch db.json"</span>
 },
</code></pre><p>Automáticamente veremos en nuestra consola un mensaje como el siguiente</p>
<p></p>
<p>Distinguimos dos títulos, el primero <strong>Resources</strong> y <strong>Home</strong> de momento ingresamos a la pestaña de resources para que nos liste toda la información que tenemos en la dirección people.</p>
<p>Al ingresar a Home nos mostrara una pagina que se crea de manera automática por json-server seguido de las rutas disponibles.</p>
<h1 id="heading-operaciones-crud">Operaciones CRUD</h1>
<h2 id="heading-get">GET</h2>
<p>En este caso abriremos <a target="_blank" href="https://www.postman.com/">Postman</a> para poder ejecutar las diferentes consultas a nuestra Fake API REST.</p>
<p>Lo primero sera realizar la operaciones READ la cual nos permite obtener/leer los datos.</p>
<p></p>
<blockquote>
<p>La operación la ejecutamos sobre la ruta http://localhost:3000/people</p>
</blockquote>
<h2 id="heading-post">POST</h2>
<p>A la hora de ejecutar la operación POST el archivo db.json sufrirá cambios, en este caso agregaremos una nueva persona y esto se escribirá en el archivo anteriormente mencionado </p>
<p>En este caso lo primero que haremos en Postman es cambiar la operación de GET a POST e ingresamos a la pestaña <strong>Headers</strong> agregando como <strong>KEY</strong> <code>Content-Type</code> VALUE <code>application/json</code>.</p>
<p>Seguido de esto ingresamos a la pestaña Body y cambiaremos el valor <strong>none</strong> por <strong>raw</strong>, aca es donde ingresamos la información a agregar en nuestra base de datos.</p>
<p>En este caso copiamos un valor y modificamos simplemente el id seguido de <code>name</code> y <code>username</code>.</p>
<pre><code>{
       <span class="hljs-attr">"id"</span>: <span class="hljs-number">11</span>,
       <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Mr Post"</span>,
       <span class="hljs-attr">"username"</span>: <span class="hljs-string">"Man"</span>,
       <span class="hljs-attr">"email"</span>: <span class="hljs-string">"postman@april.biz"</span>,
       <span class="hljs-attr">"address"</span>: {
           <span class="hljs-attr">"street"</span>: <span class="hljs-string">"Kulas Light"</span>,
           <span class="hljs-attr">"suite"</span>: <span class="hljs-string">"Apt. 556"</span>,
           <span class="hljs-attr">"city"</span>: <span class="hljs-string">"Gwenborough"</span>,
           <span class="hljs-attr">"zipcode"</span>: <span class="hljs-string">"92998-3874"</span>,
           <span class="hljs-attr">"geo"</span>: {
               <span class="hljs-attr">"lat"</span>: <span class="hljs-string">"-37.3159"</span>,
               <span class="hljs-attr">"lng"</span>: <span class="hljs-string">"81.1496"</span>
           }
       },
       <span class="hljs-attr">"phone"</span>: <span class="hljs-string">"1-770-736-8031 x56442"</span>,
       <span class="hljs-attr">"website"</span>: <span class="hljs-string">"hildegard.org"</span>,
       <span class="hljs-attr">"company"</span>: {
           <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Postman-inc-fake"</span>,
           <span class="hljs-attr">"catchPhrase"</span>: <span class="hljs-string">"Multi-layered client-server neural-net"</span>,
           <span class="hljs-attr">"bs"</span>: <span class="hljs-string">"harness real-time e-markets"</span>
       }
   }
</code></pre><p>Luego de hacer clic en el botón “send” ingresaremos al archivo db.json para así poder ver al final de este a Mr Post.</p>
<blockquote>
<p>Ahora, en nuestro caso pusimos el atributo ID pero…, si no sabemos cual es el id? ¡No hay drama! automáticamente el servidor agrega este atributo respetando los valores siguientes, te invito a que ejecutes una consulta como la anterior quitando el atributo ID y luego revises db.json para que veas esto.</p>
</blockquote>
<h2 id="heading-patch">PATCH</h2>
<p>En este caso actualizaremos el correo de nuestro amigo Mr Post, para realizar esta acción en la URL agregaremos una barra diagonal seguido del ID de Mr Post quedando así</p>
<p></p>
<blockquote>
<p>Al enviar y revisar el archivo vemos que automáticamente el correo electronico es @gmail en este caso.</p>
</blockquote>
<h2 id="heading-delete">DELETE</h2>
<p>Para realizar la acción de DELETE o eliminar simplemente utilizaremos el ID pero con la operación DELETE automáticamente elimina el elemento que coincida con el ID que nosotros especificamos.</p>
<p></p>
<p>Json-server nos permite realizar diferentes acciones como listar en rangos, filtrar, obtener archivos estáticos y más, es por eso que te invito a visitar su repositorio y puedas implementar estas operaciones dentro de nuestra simple API.</p>
<p>¡Espero que este tutorial te haya servido ! </p>

</article>
<article>
<h1>Qué son los Pipes en Angular</h1>
<p>Francisco Imanol Suarez — Fri, 04 Mar 2022 12:15:54 GMT</p>
<p>Los pipes son <strong>tuberías</strong> o <strong>canales</strong> los cuales son denotados con el carácter <code>**|**</code>, una de las ventajas de utilizarlas es que se pueden usar en toda la aplicación. En estos tenemos un flujo de información como el siguiente ejemplo.</p>
<p></p>
<p><strong>Input:</strong> Hace referencia al valor de entrada, el cual va a ser sometido a un proceso de transformación.</p>
<p><strong>Transform:</strong> Es el proceso al cual sometemos esta información, por ejemplo convertir un string a mayúsculas o minúsculas</p>
<p><strong>Output:</strong> Es el valor resultante de la transformación</p>
<blockquote>
<p>Una característica de estos es que podemos pasar el output de un Pipe a otro</p>
</blockquote>
<p>Los pipes son operadores que se utilizan dentro de las llaves de interpolación, estos deben ser utilizados en las plantillas HTML de nuestro proyecto.</p>
<pre><code>{{ nombre <span class="hljs-operator">|</span> uppercase }}
</code></pre><p>Angular ya cuenta con algunos Pipes incorporados para realizar diferentes transformaciones, desde una fecha hasta generar internacionalización (i18n), si queremos usar una funcionalidad la cual no está incorporada podemos generar pipes personalizados o que se adapten a estas necesidades.</p>
<blockquote>
<p>Algunos Pipes mas conocidos o usados en Angular</p>
</blockquote>
<h3 id="heading-uppercasehttpsangularioapicommonuppercasepipe"><a target="_blank" href="https://angular.io/api/common/UpperCasePipe">Uppercase</a></h3>
<p>Uppercase recibe un string y nos retorna el mismo valor en mayúsculas.</p>
<p></p>
<pre><code>{{ nombre <span class="hljs-operator">|</span> uppercase }}
</code></pre><h3 id="heading-lowercasehttpsangularioapicommonlowercasepipe"><a target="_blank" href="https://angular.io/api/common/LowerCasePipe">LowerCase</a></h3>
<p>En el caso de LowerCase nos permite convertir el string completamente en minúsculas.</p>
<p></p>
<pre><code>{{ nombre <span class="hljs-operator">|</span> lowercase }}
</code></pre><h3 id="heading-currencyhttpsangularioapicommoncurrencypipe"><a target="_blank" href="https://angular.io/api/common/CurrencyPipe">Currency</a></h3>
<p>En este caso nos permite dar el signo o convertir un valor numérico en un <strong>string</strong> con la moneda que especifiquemos.</p>
<p></p>
<pre><code>{{ moneda <span class="hljs-operator">|</span> currency:<span class="hljs-string">'ARS'</span> }}
</code></pre><h3 id="heading-datehttpsangularioapicommondatepipe"><a target="_blank" href="https://angular.io/api/common/DatePipe">Date</a></h3>
<p>Este es posiblemente uno de los más usados o conocidos, como su nombre lo indica es para manipular fechas, si bien podemos usar los “preestablecidos” por el framework como ‘<strong>short</strong>’ también podemos generar personalizados.</p>
<p></p>
<pre><code>{{ today <span class="hljs-operator">|</span> date }}  
{{ today <span class="hljs-operator">|</span> date:<span class="hljs-string">'short'</span>}}  
{{ today <span class="hljs-operator">|</span> date:<span class="hljs-string">'yyyy-dd-MM}} //Personalizado</span>
</code></pre><h3 id="heading-titlecasehttpsangularioapicommontitlecasepipe"><a target="_blank" href="https://angular.io/api/common/TitleCasePipe">TitleCase</a></h3>
<p>Uno de los pipe que más vidas va a salvar, nos puede servir tanto para nombres como para títulos, su función es poner la primer letra del string en mayúscula y el resto a minúscula.</p>
<p></p>
<pre><code>{{ titulo <span class="hljs-operator">|</span> titlecase }}
</code></pre><p>Para nuestra suerte estos no son los únicos disponibles en la API de Angular, es por eso que te recomiendo revisar la documentación en la cual encontraras todos los PIPES que tenemos disponibles hoy en día.</p>
<p><a target="_blank" href="https://angular.io/api/common#pipes"><strong>Angular</strong><br /><em>Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers…</em>angular.io</a><a target="_blank" href="https://angular.io/api/common#pipes"></a></p>
<p>Ahora también veamos cómo crear los nuestros, para así realizar la acción que necesitemos, para ello vamos a generar uno que realiza la concatenación de un mensaje y retornarlo.</p>
<h3 id="heading-creando-nuestro-propio-pipe">Creando nuestro propio Pipe</h3>
<p>Para crear uno debemos correr un simple comando del <strong>CLI de Angular</strong> en este caso lo llamaremos <strong>concatMessage</strong></p>
<pre><code><span class="hljs-string">`ng g p`</span> pipes/concatMessage
</code></pre><p>El flag <code>p</code> hace referencia a pipe, también creamos una carpeta <strong>pipes</strong> en la cual guardaremos todos los que generemos nosotros mismos.</p>
<p>Este comando nos retornará la creación de dos archivos.</p>
<ul>
<li><strong>concat-message.pipe.spec.ts</strong></li>
<li><strong>concat-message.pipe.ts</strong></li>
</ul>
<p>En nuestro caso usaremos <strong>concat-message.pipe.ts</strong> en el cual escribiremos toda la lógica de nuestro custom pipe.</p>
<pre><code><span class="hljs-operator">*</span><span class="hljs-operator">*</span><span class="hljs-comment">// Archivo concat-message.pipe.ts**</span>
</code></pre><pre><code><span class="hljs-keyword">import</span> { <span class="hljs-title">Pipe</span>, <span class="hljs-title">PipeTransform</span> } <span class="hljs-title"><span class="hljs-keyword">from</span></span> <span class="hljs-string">'@angular/core'</span>;
</code></pre><pre><code>@Pipe({  
  name: <span class="hljs-string">'concatMessage'</span>,  
})  
export <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ConcatMessagePipe</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">PipeTransform</span> </span>{  
  transform(value: <span class="hljs-keyword">string</span>): <span class="hljs-keyword">string</span> {  
    <span class="hljs-keyword">return</span> value + <span class="hljs-string">'Cree un Pipe'</span>;  
  }  
}
</code></pre><p>Para fines prácticos acudiremos al archivo <strong>app-component.html</strong> en el cual usaremos este pipe que nosotros mismos creamos.</p>
<pre><code><span class="hljs-operator">*</span><span class="hljs-operator">*</span><span class="hljs-comment">// Archivo app-component.html**</span>
</code></pre><pre><code><span class="hljs-operator"><</span>h2<span class="hljs-operator">></span> {{<span class="hljs-string">'Soy Francisco y '</span> <span class="hljs-operator">|</span> concatMessage }} <span class="hljs-operator"><</span><span class="hljs-operator">/</span>h2<span class="hljs-operator">></span>
</code></pre><p>Como resultante obtenemos el siguiente mensaje 👇👇👇</p>
<blockquote>
<p>Soy Francisco y Cree un Pipe</p>
</blockquote>
<p>Revisemos que puse a modo ejemplo una cadena <strong>‘Soy Francisco y ’</strong> en este caso podemos usar una cadena directamente, lo importante es mantener consistencia entre los tipos de datos.</p>
<p>Como podemos notar los pipes nos simplifican muchas tareas por lo cual como programadores nos va a ayudar mucho. La documentación de Angular es muy buena en este tema y siempre que necesitemos algo vamos a poder recurrir a ella.</p>
<p>Seguire creando contenido relacionado a Angular por lo cual Espero que les sea de ayuda y espero su Feedback.</p>
<p>Sigueme en <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter</a> para estar en contacto y saber que les gustaria ver🐧</p>

</article>
<article>
<h1>Funciones en Go</h1>
<p>Francisco Imanol Suarez — Sun, 26 Dec 2021 23:20:50 GMT</p>
<p>Las funciones tanto en Golang como en otros lenguajes, son bloques de codigo que podemos utilizar/reutilizar a lo largo del programa.</p>
<p>Por ejemplo en Go contamos con librerías que traen funciones predefinidas y son usadas para realizar diferentes acciones, tal vez la mas conocida y mas usada es <code>fmt</code> la cual nos permite imprimir o consumir datos desde la consola.</p>
<p>El dia de hoy veremos cómocrear funciones propias, antes que nada tenemos que distinguir dos tipos de estas, <strong>funciones con parámetros</strong> los cuales nos permiten realizar envio de información hacia la función y <strong>sin parámetros</strong> las cuales nos permite ejecutar procesos entre otras cosas mas<strong>.</strong></p>
<h3 id="heading-definir-funciones-en-golang">Definir funciones en Golang</h3>
<p>Para comenzar lo primero que tendremos que hacer es crear un archivo <code>main.go</code>con su correspondiente package y la función main o función principal.</p>
<blockquote>
<p>Recuerden lo siguiente <strong>función main</strong></p>
</blockquote>
<p>package main</p>
<p>import "fmt"</p>
<p>func main() {</p>
<p>}</p>
<p>Por sobre la función <strong>main</strong> empezaremos a declarar nuestras funciones, para esto lo que haremos es usar la palabra reservada <code>func</code>seguida del nombre que queremos darle a la función, más parentesis y llaves.</p>
<blockquote>
<p>En general la estructura básica de una función sin parámetros es la siguiente</p>
</blockquote>
<p>func NOMBRE () {</p>
<p>}</p>
<p>En este tutorial crearemos una función llamada <strong>saludarMundo</strong> la cual imprimirá la conocida frase <strong>Hola Mundo</strong>!</p>
<p>func saludarMundo(){<br />   fmt.Println("Hola mundo!")<br />}</p>
<p>Una vez esta función procederemos a llamarla dentro de nuestro main, y pasaremos a tener un código igual al siguiente.</p>
<p>package main</p>
<p>import "fmt"</p>
<p>func main() {<br />   saludarMundo()<br />}</p>
<p>func saludarMundo(){<br />   fmt.Println("Hola mundo!")<br />}</p>
<p>Luego de tener todo esto y guardar nuestro archivo, procederemos a ejecutar el mismo, para ello usaremos el siguiente comando.</p>
<p>go run main.go</p>
<p>Obteniendo como resultado por la consola.</p>
<p>Hola mundo!</p>
<p>Si observamos el código completo, nos daremos cuenta que tenemos una función llamada <code>main()</code>la misma es la encargada de decirle al compilador que aqui es donde inicia el programa, es la función que busca el compilador para iniciar el proceso de compilación.</p>
<p>Ahora si recordamos, mas arriba dijimos que las funciones tienen parámetros,pero, ¿Que son los parámetros?, un parámetro básicamente es un dato que le proveemos a la función para que lo utilice y haga algo, por ejemplo podríamos pasarle un nombre y que en lugar de decir <strong>Hola mundo</strong> diga <strong>Hola Juan</strong> o cualquier otro nombre que nosotros indiquemos.</p>
<p>func saludar(nombre string) {<br />  fmt.Print("Hola ", nombre)<br />}</p>
<p>Llamando esta función en el main y pasando por parámetroun <strong>string</strong> obtendremos como resultado en la consola el mensaje.</p>
<p>package main</p>
<p>import "fmt"</p>
<p>func main() {<br />   saludar("Fran")<br />   saludar("Pedro")<br />}</p>
<p>func saludar(nombre string) {<br />  fmt.Print("Hola ", nombre)<br />}</p>
<p><strong>Salida</strong></p>
<p>Hola Fran<br />Hola Pedro</p>
<p>El hecho de poder recibir valores por parámetros nos hace tener una mayor versatilidad a la hora de programar, dado que podemos armar una función que reciba N cantidad de valores y los manipule, como por ejemplo sumar dos o más valores.</p>
<p>Ahora bien, en estos casos tenemos que especificar un valor de retorno, algo que la función debe devolver, ahí es donde ingresa la palabra return.</p>
<p>func sumar(n1 int, n2 int) int {<br /> return n1 + n2<br />}</p>
<p>Notemos que con el <strong>return</strong> la estructura cambia un poco.</p>
<p>func NOMBRE(PARAMETROS) <strong>TIPO_DE_RETORNO</strong>{<br />   CUERPO/RETURN<br />}</p>
<p>Entonces ahora podremos, guardar el valor en una variable o directamente imprimir por consola desde el main.</p>
<p>func main() {<br /> fmt.Println(sumar(10, 10))<br /> resultado := sumar(10, 23)<br /> fmt.Println(resultado)<br />}</p>
<p><strong>Salida</strong></p>
<p>20<br />33</p>
<p>De esta manera, podremos ejecutar <strong>sumar()</strong> miles de veces en diferentes partes del código sin la necesidad de estar repitiendo la operación de suma y así poder reutilizar código a lo largo del programa.</p>
<p>Espero que les sirva y puedan seguir aprendiendo Go/Golang!</p>
<p>Muchas gracias por leer!</p>
<p><a target="_blank" href="https://www.instagram.com/dscpatagonia/">Instagram</a> | <a target="_blank" href="https://twitter.com/GDSCPatagonia">Twitter GDSC Patagonia</a> | <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter Francisco</a></p>

</article>
<article>
<h1>Tipos de datos en Go</h1>
<p>Francisco Imanol Suarez — Wed, 03 Nov 2021 21:33:54 GMT</p>
<p>Los tipos de datos nos permiten especificar el contenido que se puede almacenar en una variable o constante así como también saber que operaciones podemos hacer con estas.</p>
<p>Dando un paso atrás y yendo a nuestro día a día, nosotros interactuamos con tipos de datos constantemente, desde el momento que estamos realizando un pago y este se denota con una coma o por ejemplo cuando llamamos a alguien por su nombre, este es un dato el cual solo tiene permitido letras.</p>
<p>Antes de entrar a ver tipos tenemos que hablar de un tema que es muy importante, las arquitecturas sobre las cuales queremos que el valor se base, esto nos ayuda a optimizar nuestros sistemas y así obtener una mejor performance a la hora de ejecutarlos.</p>
<p>Tenemos la posibilidad de usar una de las siguientes arquitecturas:</p>
<ul>
<li><code>8 bits</code></li>
<li><code>16 bits</code></li>
<li><code>32 bits</code></li>
<li><code>64 bits</code></li>
</ul>
<p>Si nosotros no especificamos una, automáticamente Go nos asigna la que tengamos en nuestro sistema operativo, es decir que si tenemos una computadora con una arquitectura de <code>64 bits</code> automáticamente nos asignara esta para todas las variables o constantes a usar.</p>
<blockquote>
<p>Pensemos en que los tipos de datos no solo influye en las operaciones que podemos realizar con cada uno de ellos, sino tambien en la velocidad de procesamiento.</p>
</blockquote>
<p>En esta guía veremos los cuatro tipos de datos más básicos:</p>
<ul>
<li>Integer (enteros)</li>
<li>Float (números reales)</li>
<li>Booleanos (true, false)</li>
<li>String (cadenas)</li>
</ul>
<h3 id="heading-enteros-integer">Enteros (Integer)</h3>
<p>Como en las matemáticas los números enteros son valores en los cuales pertenecen valores negativos, positivos y el numero cero. En Go así como en otros lenguajes de programación denotamos estos con la palabra reservada <code>int</code> este tipo de dato no permite el uso de valores con una coma dentro.</p>
<p>A modo ejemplo:</p>
<p>fmt.Println(10)</p>
<p><strong>Salida</strong></p>
<p>10</p>
<p>Si bien de esta manera nosotros estamos mostrando un mensaje con un valor de tipo entero, lo que podemos hacer también y tiene mucho más uso es almacenar este valor en una variable o constante para luego poder manipularlo o usarlo.</p>
<p>var diez int = 10<br />fmt.Println(diez)</p>
<p><strong>Salida</strong></p>
<p>10</p>
<p>Ahora volviendo al tema de la arquitectura podríamos utilizar cualquiera de los siguientes tipos.</p>
<p>int8  //Desde -128 a 127<br />int16 //Desde -32768 a 32767<br />int32 //Desde -2147483648 a 2147483647<br />int64 //Desde -9223372036854775808 a 9223372036854775807<br /><br />unint8 //desde 0 a 255<br />unint16 //desde 0 a 65535<br />unint32 //desde 0 a 4294967295<br />unint64 //desde 0 a 18446744073709551615<br /></p>
<h3 id="heading-ejemplo">Ejemplo</h3>
<p>var edad unint8 = 22</p>
<h3 id="heading-numeros-reales-o-punto-flotante">Números reales o punto flotante</h3>
<p>Estos al igual que los números enteros ocupan valores negativos y positivos pero con la unica diferencia es que podemos obtener valores con punto, a diferencia de los enteros con estos números obtenemos una precision mayor.</p>
<p>fmt.Println(15.4)</p>
<h4 id="heading-salida">Salida</h4>
<p>15.4</p>
<p>Algo a tener en mente con estos valores es la diferencia, <code>1.0</code> es totalmente diferente a <code>1</code> asi como también <code>20.0</code> es diferente a <code>20</code>, recordemos que los valores que incluyen un punto <code>.</code> es un numero real y los que no lo tienen son valores enteros.</p>
<p>Al igual que en los enteros tenemos diferentes tamaños en los float.</p>
<p>float32 // Desde -2147483648 a 2147483647<br />float64 // Desde -9223372036854775808  a 9223372036854775807</p>
<p>Dado que es casi imposible aprenderse estos rangos de valores permitidos, Go nos brinda una forma de poder recordarlos en cualquier momento.</p>
<p>package main<br /><br />import (<br />    "fmt"<br />    "math"<br />)<br /><br />func main() {<br />    fmt.Println(math.MaxFloat32) //Float32<br />    fmt.Println(math.MaxFloat64) //Float64<br />}</p>
<h3 id="heading-booleanos">Booleanos</h3>
<p>No solo tenemos datos que nos permiten realizar operaciones con números, sino que tambien tenemos valores logicos o booleanos. Este se usa mediante la palabra reservada <code>bool</code> el cual le indica a la variable o constante que vamos a trabajar con dos tipos de valores posibles <code>true</code> o <code>false</code>.</p>
<p>var estado bool = true<br />var estadoDeCompra bool = false</p>
<p>Vamos a usar este tipo de dato cuando trabajemos con flujos de datos y necesitemos tomar una decisión basada en un estado puntual.</p>
<h3 id="heading-string-o-cadena">String o Cadena</h3>
<p>Este tipo de dato es el más usado o más común en el día a día de cualquier persona que programe en Go o en algún otro lenguaje. Las cadenas se crean mediante la palabra reservada <code>string</code>, el valor se define mediante comillas dobles <code>"valor"</code>o simples <code>'v'</code> en el caso de estas ultimas las usamos para caracteres individuales.</p>
<p>var nombre string := "John"<br />var apellido string := "Doe"<br />fmt.Println(nombre, apellido)</p>
<p>Podemos usar <code>\n</code> para generar un salto de linea entre variables o textos <code>\'</code> para comillas simples o <code>\"</code> para comillas dobles.</p>
<h3 id="heading-predeterminados">Predeterminados</h3>
<p>En la programacion muchas veces tenemos que declarar variables sin ningun valor dado que en un futuro podriamos asignarle uno. Para estos casos es bueno saber los valores preterminados que tienen los tipos de datos dado que pueden afectar el flujo de nuestro problema.</p>
<ul>
<li>Para tipos enteros: <code>0</code></li>
<li>Para tipos float: <code>0.000000</code></li>
<li>Para tipos boolean: <code>false</code></li>
<li>Para tipos string: <code>""</code> valor vacio</li>
</ul>
<p><strong>Fuentes</strong>:</p>
<p><a target="_blank" href="https://docs.microsoft.com/en-us/learn/paths/go-first-steps/">https://docs.microsoft.com/en-us/learn/paths/go-first-steps/</a></p>
<p><a target="_blank" href="https://www.geeksforgeeks.org/data-types-in-go/">https://www.geeksforgeeks.org/data-types-in-go/</a></p>
<p><a target="_blank" href="https://golangbyexample.com/all-data-types-in-golang-with-examples/">https://golangbyexample.com/all-data-types-in-golang-with-examples/</a></p>
<p><a target="_blank" href="https://tour.golang.org/basics/11">https://tour.golang.org/basics/11</a></p>
<p>Espero que les sirva y puedan seguir aprendiendo Go/Golang!</p>
<p>Muchas gracias por leer!</p>
<p><a target="_blank" href="https://www.instagram.com/dscpatagonia/">Instagram</a> | <a target="_blank" href="https://twitter.com/GDSCPatagonia">Twitter GDSC Patagonia</a> | <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter Francisco</a></p>

</article>
<article>
<h1>Variables y constantes en Go/Golang</h1>
<p>Francisco Imanol Suarez — Wed, 22 Sep 2021 20:33:50 GMT</p>
<p>Las variables son un concepto clave en la programación, estas nos permiten almacenar información y poder hacer que cambien a lo largo del programa.</p>
<p>Mirando la parte mas técnica, decimos que estas tienen asignada una posición de memoria de almacenamiento y esta vinculada a un nombre, este ultimo es el que nosotros como programadores usamos para hacer referencia a la variable y poder usarla.</p>
<p>Pensemos en que tenemos que contar las personas que ingresan y salen de un aeropuerto, para eso podríamos tranquilamente generar una variable contador e incrementarla cada vez que contemos una persona y decrementarla cada vez que salen.</p>
<p>contadorPersonas := 0</p>
<p>Podemos pensar que el valor <strong>“0”</strong> esta vinculado a un nombre que es <strong>contadorPersonas</strong>, si nosotros llamamos a <strong>contadorPersonas</strong> automáticamente nos mostrara <strong>0</strong>.</p>
<blockquote>
<p><strong>:=</strong> es la forma corta de declarar y asignar valor a una variable.</p>
<p>Go automáticamente infiere el tipo de dato y le asigna en este caso un tipo <code>int</code></p>
</blockquote>
<p>Miremos como podemos imprimir el valor 0 por consola.</p>
<p><strong>Código</strong></p>
<p>package main<br />import "fmt"<br /><br />func main() {<br /> contadorPersonas := 0<br /> fmt.Println(contadorPersonas)<br />}</p>
<p><strong>Salida</strong></p>
<p>0</p>
<p>Si bien veremos expresiones matemáticas mas adelante, podemos realizar cualquiera de ella a la hora de imprimir algo por consola, por ejemplo sumemos uno al <strong>contadorPersonas.</strong></p>
<p><strong>Código</strong></p>
<p>package main<br />import "fmt"<br /><br />func main() {<br /> contadorPersonas := 0<br /> fmt.Println(contadorPersonas + 1)<br />}</p>
<p><strong>Salida</strong></p>
<p>1</p>
<p>Otra forma de realizar la misma operación seria directamente en la declaración de la variable, es decir declarar y asignar un valor al mismo tiempo/linea y que este sea el resultado de la operación.</p>
<p><strong>Código</strong></p>
<p>package main<br />import "fmt"<br /><br />func main() {<br /> contadorPersonas := 0 + 1<br /> fmt.Println(contadorPersonas)<br />}</p>
<p><strong>Salida</strong></p>
<p>1</p>
<p>Las variables no solo almacenan valores enteros, podemos utilizarlas para guardar nombres o cualquier tipo de información que consideremos necesaria y que vaya a cambiar a lo largo del tiempo.</p>
<p>package main<br />import "fmt"<br /><br />func main() {<br /> nombre := "Francisco" // String<br /> edad := 22 // Integer<br /> peso := 80.25 // Float<br /> estado := 10 > 5 // Boolean<br /> // Y mas...<br />}</p>
<ul>
<li>String</li>
<li>Integer</li>
<li>Float</li>
<li>Boolean</li>
</ul>
<p>Son tipos de datos, al final de la lectura les dejo un articulo donde podrás encontrar todos los tipos de datos disponibles en Go.</p>
<h3 id="heading-declaremos-variables">Declaremos variables</h3>
<p>Si bien arriba declaramos y asignamos valores a las variables, tenemos casos en los cuales el tipo de dato de una variable debe ser <strong>ESTRICTAMENTE</strong> uno, por ejemplo la <strong>edad</strong>, nadie puede tener una edad de tipo <strong>Float</strong>.</p>
<p>Esto es muy simple de hacer, siempre que necesitemos declarar un tipo de dato tenemos que poner el mismo seguido al nombre de la variable.</p>
<p>var edad int //Variable edad de tipo Integer<br />var edad int = 22 // Variable tipo Integer con asignación </p>
<p>También podemos asignarle un valor a esta variable mediante el signo igual.</p>
<p>edad = 22</p>
<blockquote>
<p>Recordemos algo importante, si nosotros no indicamos un tipo de dato a la variable, automáticamente Go lo decide por nosotros.</p>
</blockquote>
<p>Ahora miremos que pasa si nosotros tratamos de asignar un tipo de dato que no coincide con el de la variable, nosotros en el código de arriba tenemos declarada la variable <strong>edad</strong> de tipo <strong>Integer</strong> y vamos a tratar de asignarle un valor <strong>String</strong>.</p>
<p><strong>Código</strong></p>
<p>edad = "Juan"</p>
<p><strong>Salida</strong></p>
<p>cannot use "Juan" (type untyped string) as type int in assignment</p>
<p>Estos errores son producidos en tiempo de compilación, por lo cual tenemos que tener cuidado con los valores a la hora de trabajar con ellos.</p>
<p>Todos los tipos de datos que tenemos en Go tienen un valor llamado <strong>Zero Value</strong> o valor por defecto.</p>
<p><strong>Código</strong></p>
<p>package main<br /><br />import "fmt"<br /><br />func main() {<br /> var nombre string<br /> var edad int<br /> var dinero float64<br /> var estadoCivil bool<br />}</p>
<p>Si nosotros imprimimos estas variables por consola obtendremos su Zero Value.</p>
<p><strong>Salida</strong></p>
<p>var nombre string = ""<br />var edad int = 0<br />var dinero float64 = 0<br />var estadoCivil bool = false</p>
<p>Si venimos del mundo de JavaScript estos valores serian el famoso <strong>undefined</strong> o valor no definido.</p>
<p>Dentro de todo este mundo de las variables, es bueno saber las reglas y los estilos que se acostumbran en Go:</p>
<ul>
<li>Las variables <strong>SIEMPRE</strong> son una sola palabra, es decir no podemos tener espacios en el nombramiento de las mismas.</li>
<li>Nunca podemos empezar el nombre de una variable con un numero pero si pueden contener uno en el nombramiento.</li>
<li>Podemos separar nombres mediante guiones bajos o nombrar con <strong>camelCase.</strong></li>
<li>nombre es distinto que NOMBRE, es decir Go distingue <strong>mayúscula</strong> de <strong>minúscula</strong>.</li>
<li>Si declaramos una variable con su primera letra en <strong>Mayúscula</strong> indicamos a Go que esta es accesible por fuera del <strong>package</strong> en el cual esta declarada, es decir podríamos acceder a ella desde cualquier otro <strong>package</strong>.</li>
</ul>
<h3 id="heading-asignacion-multiple-en-una-linea">Asignación múltiple en una linea</h3>
<p>Go nos permite ahorrar tiempo y líneas de código, permitiendo declarar y asignar en la misma linea múltiples variables y valores.</p>
<p><strong>Código</strong></p>
<p>edad,nombre,apellido = 22, "Francisco", "Suarez"<br />fmt.Println(edad)<br />fmt.Println(nombre)<br />fmt.Println(apellido)</p>
<p><strong>Salida</strong></p>
<p>22<br />Francisco<br />Suarez</p>
<h3 id="heading-alcance-de-variables">Alcance de variables</h3>
<p>Dentro de la programación tenemos variables que son <strong>locales</strong> y otras que son <strong>globales</strong>, esto hace referencia donde podemos usar una variable y desde donde podemos acceder a ella.</p>
<p>package main<br /><br />import "fmt"<br /><br />var variableGlobal = "Alcance global"<br /><br />func holaMundo(){<br /> mensaje := "Hola mundo"<br /> fmt.Println(mensaje)<br />}<br /><br />func main() {<br />  holaMundo()<br />  fmt.Println(variableGlobal)<br />}<br /></p>
<p>En este caso <strong>variableGlobal</strong> es accesible desde cualquier parte del programa, y mensaje solo es accesible dentro de la función <strong>holaMundo</strong>.</p>
<h3 id="heading-constantes">Constantes</h3>
<p>Las constantes son y cumplen las mismas reglas que las variables, solo que como su nombre indica no pueden cambiar es algo constante.</p>
<p>Para declarar una constante usamos la palabra reservada <code>const</code> seguido del nombre un signo igual y el valor de la constante.</p>
<p>const dni = 41999222<br />fmt.Println(dni)</p>
<p>// Salida<br />41999222</p>
<p>En el caso que nosotros quisiéramos modificar una constante nos marcara por consola un error diciendo.</p>
<pre><code>cannot <span class="hljs-keyword">assign</span> to dni (declared <span class="hljs-keyword">const</span>)
</code></pre><p>Por defecto una constante es de tipo <strong>untyped</strong>, para solucionar esto podemos especificar un tipo como hacemos con las variables.</p>
<p>const dni int = 41999222</p>
<p><strong>🕹Recursos:</strong></p>
<p><a target="_blank" href="https://www.geeksforgeeks.org/data-types-in-go/"><strong>Data Types in Go - GeeksforGeeks</strong><br /><em>Data types specify the type of data that a valid Go variable can hold. In Go language, the type is divided into four…</em>www.geeksforgeeks.org</a><a target="_blank" href="https://www.geeksforgeeks.org/data-types-in-go/"></a></p>
<p>Espero que les sirva y puedan seguir aprendiendo Go/Golang!</p>
<p>Muchas gracias por leer!</p>
<p><a target="_blank" href="https://www.instagram.com/dscpatagonia/">Instagram</a> | <a target="_blank" href="https://twitter.com/GDSCPatagonia">Twitter GDSC Patagonia</a> | <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter Francisco</a></p>

</article>
<article>
<h1>Primeros pasos con Go/Golang</h1>
<p>Francisco Imanol Suarez — Fri, 03 Sep 2021 20:22:45 GMT</p>
<p>Go es un lenguaje de programación compilado y estáticamente tipado. Este lenguaje fue creado por <a target="_blank" href="https://en.wikipedia.org/wiki/Robert_Griesemer">Robert Griesemer</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/Rob_Pike">Rob Pike</a> y <a target="_blank" href="https://en.wikipedia.org/wiki/Ken_Thompson">Ken Thompson</a> dentro de Google. Fue anunciado en noviembre del 2009 y lanzaron la primera versión en Marzo 2012.</p>
<p>Cuando hablamos de un lenguaje de programación compilado hacemos referencia a que el código escrito en el debe pasar por el proceso de compilación para ser ejecutado en nuestra maquina.</p>
<p>Estáticamente tipado indica que le tenemos que dar/indicar el tipo a las variables o constante para poder almacenar algo en ellas.</p>
<p>Este lenguaje fue creado con el principal objetivo de crear procesos pesados, el mismo tiene el poder de C pero una sintaxis mas al estilo Python.</p>
<p>Podemos detallar muchas ventajas a la hora de decir porque usar este lenguaje, entre ellas se destacan:</p>
<ul>
<li>Gran velocidad de compilación.</li>
<li>Soporte nativo para concurrencia.</li>
<li>Alto rendimiento.</li>
<li>Lenguaje con una gran comunidad detrás.</li>
<li>Nos obliga a usar buenas practicas.</li>
</ul>
<p>Hoy en día Go es muy usado en empresas o startups, por lo cual el nicho de uso es muy grande. Entre estas encontramos a Google, MercadoLibre, Twitter, Twitch, entre otras.</p>
<h3 id="heading-todo-muy-linda-la-historia-pero-vamos-a-armar-nuestro-primer-programa-en-go"><em>Todo muy linda la historia, pero vamos a armar nuestro primer programa en Go.</em></h3>
<p></p>
<p>Lo primero que tenemos que hacer es descargar e instalar Go en nuestra computadora.</p>
<p>Para este paso puntualmente, vamos a recurrir a la comunidad y a la documentación oficial dado que es clara y tiene un caso para cada sistema operativo.</p>
<p><a target="_blank" href="https://golang.org/doc/install"><strong>Download and install</strong><br /><em>Download and install Go quickly with the steps described here. For other content on installing, you might be interested…</em>golang.org</a><a target="_blank" href="https://golang.org/doc/install"></a></p>
<p>Lo primero que vamos a hacer es crear un archivo con extensión <code>.go</code>, en este archivo vamos a colocar todo nuestro código. Como nombre vamos a poner <code>main.go</code> dado que es buena practica llamar así al punto de inicio o entrada de la aplicación.</p>
<p>Dentro de <code>main.go</code> lo primero que tenemos que hacer es definir <strong>package,</strong> en nuestro caso caso será main.</p>
<p>package main</p>
<p>Dado que nuestro programa va a ser un programa de ejecución en consola, llamaremos un paquete de Go para poder imprimir en la misma. Este paquete se llama <a target="_blank" href="https://pkg.go.dev/fmt"><strong>fmt</strong></a><strong>.</strong></p>
<p>import "fmt"</p>
<p>Seguido de esto crearemos nuestra función principal, esta se encargara de ejecutar todo el código.</p>
<p>func main() {<br />  fmt.Println("Hola Mundo");<br />}</p>
<ul>
<li><strong>func</strong> es la manera en la cual le decimos a Go, crea una función llamada main.</li>
<li><strong>fmt</strong> es el paquete que se encarga de imprimir en consola.</li>
<li><strong>Println</strong> indica que imprima algo y luego haga un salto de linea.</li>
</ul>
<p>Una vez que escribamos esto vamos a guardar el archivo y pasaremos a compilar y ejecutar el mismo, tenemos dos maneras de realizar este proceso.</p>
<h4 id="heading-compilando-con-go-build">Compilando con go build</h4>
<p>Una vez posicionado en la carpeta que se encuentra <code>main.go</code> ejecutaremos el siguiente comando.</p>
<p>go build main.go</p>
<p>De manera mas genérica el comando seria así:</p>
<p>go build RUTA_AL_ARCHIVO</p>
<p>Una vez finalizada la ejecución del comando, proseguiremos a ejecutar nuestro programa.</p>
<p>./main</p>
<p>Automáticamente deberíamos ver un mensaje por consola diciendo, “Hola Mundo”.</p>
<p>La otra manera de ejecutar un proceso de compilación y ejecución de nuestro archivo es usando <strong>go run ARCHIVO,</strong> este comando resume los dos comandos anteriores a uno solo.</p>
<p>Internamente crea una carpeta temporal en la cual se encuentra la compilación del archivo y una vez finalizado este proceso procede a ejecutar el archivo compilado y a eliminar la carpeta temporal.</p>
<p>Este comando es recomendable usarlo en momento de desarrollo dado que nos ahorra unos segundos de tiempo, a la hora de usar cualquier aplicación escrita en Go en producción es necesario usar <code>go build</code></p>
<blockquote>
<p><strong>VSCode Extensión recomendada</strong></p>
<p>Si estas usando Visual Studio Code, contamos con una extensión para poder trabajar mas rápido y sin errores, la misma se llama <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=golang.Go">Go y es creada por el Team de Golang</a> .</p>
</blockquote>
<p>Otra forma de ejecutar un programa Go es usando el <a target="_blank" href="https://play.golang.org/p/MAohLsrz7JQ">Playground</a> que nos brinda la pagina oficial de Golang o el IDE de <a target="_blank" href="https://www.jetbrains.com/go/">JetBrains</a> , tenemos una prueba gratuita, pero si somos estudiantes podemos acceder completamente al IDE de manera gratuita en la siguiente pagina <a target="_blank" href="https://www.jetbrains.com/community/education/#students">Free Educational Licenses</a>.</p>
<p>En los próximos días seguiremos hablando de Go y comenzaremos con sus variables y constantes.</p>
<h4 id="heading-fuentes-y-links-de-interes">Fuentes y links de interés:</h4>
<p>Sitio oficial de Go/Golang</p>
<p><a target="_blank" href="https://golang.org/"><strong>The Go Programming Language</strong><br /><em>Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.</em>golang.org</a><a target="_blank" href="https://golang.org/"></a></p>
<p>JetBrains Free Educational Licenses</p>
<p><a target="_blank" href="https://www.jetbrains.com/community/education/#students"><strong>Free Educational Licenses - Community Support</strong><br /><em>Learn or teach how to code with best-of-industry tools from JetBrains. Free Educational Licenses for JetBrains' tools.</em>www.jetbrains.com</a><a target="_blank" href="https://www.jetbrains.com/community/education/#students"></a></p>

</article>
<article>
<h1>Aprende sobre Truthy o Falsy🤓</h1>
<p>Francisco Imanol Suarez — Mon, 01 Mar 2021 14:21:56 GMT</p>
<p>En Javascript a la hora de escribir funciones o condicionales estos nos retornan un valor booleano para saber que esta pasando, por defecto contamos con un listado de valores los cuales tienen un valor de verdad o falsedad.</p>
<p>Estos son mayormente conocidos como valores <strong>Truthy</strong> o <strong>Falsy.</strong></p>
<blockquote>
<p>En estos casos usaremos la palabra reservada <strong>Boolean()</strong> para saber el valor de cada expresion.</p>
</blockquote>
<p>Esto sucede dado que JavaScript utiliza algo llamado <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion">Convercion de datos</a>, basicamente esto es el pasaje de un tipo de dato a otro en el proceso de compilacion.</p>
<p>A modo ejemplo:</p>
<ul>
<li>Sumamos el numero 10 que es de tipo entero</li>
<li>Sumamos el numero 2.50 que es de tipo flotante</li>
<li>El resultante es tipo flotante</li>
</ul>
<p>10 + 2.5 = 12.5</p>
<p>Otro ejemplo mas visual:</p>
<p>"10" + 2 = 12</p>
<ul>
<li>Sumamos una cadena (string) que contiene el valor 10.</li>
<li>☝ No leiste mal dice cadena</li>
<li>Ahora agregamos el operador suma seguido del valor 2</li>
<li>☝ PERO EL 2 EN TIPO ENTERO</li>
<li>El resultante es un tipo entero</li>
</ul>
<p>Luego de entender lo basico sobre la Convercion de datos, vamos a ver los valores para los que algo es Falsy o Truthy.</p>
<h3 id="heading-falsy">Falsy</h3>
<h4 id="heading-string-vacio">String vacio</h4>
<p>Retornara falso tanto para dobles comillas <code>"”</code> comillas simples <code>'’</code> o comillas invertidas <code>`` </code></p>
<h4 id="heading-null">Null</h4>
<h4 id="heading-nan">NaN</h4>
<h4 id="heading-0-cero">0 Cero</h4>
<h4 id="heading-undefined">Undefined</h4>
<h4 id="heading-false">False</h4>
<h3 id="heading-truthy"><strong>Truthy</strong></h3>
<h4 id="heading-numero">Numero</h4>
<p>Para cualquier valor mayor a cero retornara True</p>
<h4 id="heading-string">String</h4>
<p>Para cualquier caracter o espacio en blanco retornara True</p>
<h4 id="heading-array">Array</h4>
<p>Aunque el Array se encuentre vacio, nos retornara True. En caso que tenga contenido de igual manera retorna True</p>
<h4 id="heading-objeto">Objeto</h4>
<p>Igual que en el Array, por mas que el objeto se encuentre vacio o con contenido nos devolvera True</p>
<h4 id="heading-function">Function</h4>
<p>Cualquier funcion va a devolver True</p>
<p>Es bueno saber que esto puede pasar, no es necesario tener memorizados estos casos, pero siempre ante una duda saber que puede ser este el problema.</p>
<h3 id="heading-si-el-articulo-te-gusto-o-te-parecio-interesante-por-favor-ayudame-con-puedes-seguirme-en-twitterhttpstwittercomsuarezimanol-o-encontrarme-en-githubhttpsgithubcomfranciscoimanolsuarez-visitando-mi-sitio-web">Si el articulo te gusto o te pareció interesante por favor ayúdame con 👏 🤓 Puedes seguirme en <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter</a> o encontrarme en <a target="_blank" href="https://github.com/FranciscoImanolSuarez">GitHub</a> visitando mi sitio web.</h3>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
<article>
<h1>#CodeBeer Invertir una Matriz en JavaScript</h1>
<p>Francisco Imanol Suarez — Fri, 26 Jun 2020 16:10:02 GMT</p>
<p>Photo by <a target="_blank" href="https://unsplash.com/@liveauthentic?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Razvan Horhat</a> on <a target="_blank" href="/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>
<p>En JavaScript hay un método llamado <code>reverse()</code> el cual nos permite invertir los elementos de un Array mutando el valor del mismo. Suponiendo que tenemos un Array <code>**a**</code> la cual contiene el valor <strong>[‘A’, ‘B’, ‘C’]</strong> aplicando este método el mismo quedaría invertido y cambiaría su orden al siguiente <strong>[‘C’, ‘B’, ‘A’]</strong>, esto se haría de la siguiente manera.</p>
<p></p>
<p>Si preferís verlo en vídeo te dejo un vídeo que cree en Youtube explicando este ejemplo.</p>


<h3 id="heading-si-el-articulo-te-gusto-o-te-parecio-interesante-por-favor-ayudame-con-puedes-seguirme-en-twitterhttpstwittercomsuarezimanol-o-encontrarme-en-githubhttpsgithubcomfranciscoimanolsuarez-visitando-mi-sitio-web">Si el articulo te gusto o te pareció interesante por favor ayúdame con 👏 🤓 Puedes seguirme en <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter</a> o encontrarme en <a target="_blank" href="https://github.com/FranciscoImanolSuarez">GitHub</a> visitando mi sitio web.</h3>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
<article>
<h1>👀ARIA — Accesibilidad Web🐱‍🚀</h1>
<p>Francisco Imanol Suarez — Sat, 30 May 2020 18:51:51 GMT</p>
<p>Para muchas personas, la tecnología facilita las cosas. Para las personas con discapacidad, la tecnología hace que las cosas sean posibles</p>
<p></p>
<p>A la hora de generar una nueva aplicación web, nosotros como desarrolladores tenemos que tener en cuenta muchas cosas, entre ellas la accesibilidad para personas ciegas o que utilicen algún tipo de lector de pantallas.</p>
<blockquote>
<p>Para muchas personas, la tecnología facilita las cosas. Para las personas con discapacidad, la tecnología hace que las cosas sean posibles. La accesibilidad significa desarrollar contenido para que sea lo más accesible posible sin importar las habilidades físicas y cognitivas de un individuo y sin importar cómo accedan a la web. <a target="_blank" href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></p>
</blockquote>
<p>Uno de los estándar mas conocidos o utilizados es ARIA, este nos permite hacer mucho mas accesible nuestro sitio web. Este estándar es también conocido como WAI-ARIA (“Accessible Rich Internet Applications”), <strong>ARIA</strong> define una variedad de atributos generalmente en <strong>HTML5</strong>, que se pueden agregar a los elementos para brindar a todos los <strong><em>lectores de pantalla</em></strong> mas información sobre el elemento, y así ayudar a los usuarios a comprender mejor la pagina web.</p>
<p>Por ejemplo, un atributo útil es el <code>role</code>, cuando se agrega a un elemento, este proporcionará al lector de pantalla un contexto adicional sobre cuál es la función de ese elemento en el contexto de una página. Por ejemplo, un humano entiende fácilmente el siguiente código HTML como un menú:</p>
<p></p>
<p>Para un lector de pantalla, sin embargo, no es tan simple. Para remediar esto, podemos agregar el atributo <code>role</code> con valor <code>navigation</code>:</p>
<p></p>
<p>Ahora, el lector de pantalla sabrá que este es un menú y presentará las opciones al usuario en consecuencia.</p>
<p>Si bien ARIA no mejora nada del comportamiento del elemento,es decir no generara un gestos o eventos en teclado,si que nos va a permitir modificar el árbol de accesibilidad de cualquiera de ellos.</p>
<blockquote>
<p>Es importante comprender que para usar ARIA no tenemos que modificar ninguna semántica o alguna etiqueta del HTML estándar, simplemente agregar el atributo <code>role=""</code> a los <code>tags</code> habituales. <a target="_blank" href="https://developers.google.com/">https://developers.google.com/</a></p>
</blockquote>
<p>Al día de hoy ARIA tiene muchas funcionalidades, como informar al usuario el estado de un formulario o de las casillas de verificación, e incluso generar eventos particulares. En el siguiente documento podrás encontrar diferentes atributos de <code>role</code> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">Mozilla</a></p>
<h3 id="heading-si-el-articulo-te-gusto-o-te-parecio-interesante-por-favor-ayudame-con-puedes-seguirme-en-twitterhttpstwittercomsuarezimanol-o-encontrarme-en-githubhttpsgithubcomfranciscoimanolsuarez-visitando-mi-sitio-web">Si el articulo te gusto o te pareció interesante por favor ayúdame con 👏 🤓 Puedes seguirme en <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter</a> o encontrarme en <a target="_blank" href="https://github.com/FranciscoImanolSuarez">GitHub</a> visitando mi sitio web.</h3>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
<article>
<h1>Hola Deno!</h1>
<p>Francisco Imanol Suarez — Thu, 14 May 2020 16:51:07 GMT</p>
<p>El día de hoy hablaremos de Deno y crearemos nuestro primer Hola Mundo.</p>
<p>Pero primero, que es Deno? Deno es un entorno de ejecución para JavaScript/TypeScript seguro y con una excelente experiencia en desarrollo. El mismo esta escrito completamente en V8, Rust y Tokio.</p>
<p>Sus principales características son:</p>
<ul>
<li>Seguro por defecto, sin acceso a archivos, red o entorno de trabajo, a menos que esto este habilitado.</li>
<li>Soporte para TypeScript</li>
<li>Se envía un solo ejecutable <code>(deno)</code></li>
<li>Cuenta con utilidades integradas como por ejemplo, un inspector de dependencias <code>(deno info)</code> y un formateo de codigo <code>(deno fmt)</code></li>
<li>Tiene un conjunto de módulos estándar previamente auditados los cuales están garantizados para trabajar con Deno</li>
<li>Si se quiere los Scripts pueden ser agrupados en un solo archivo <code>Javascript</code></li>
</ul>
<h3 id="heading-filosofia">Filosofía</h3>
<p>Deno pretende ser un entorno productivo y seguro de secuencias de comandos para el programador moderno.</p>
<p>Deno siempre se distribuirá como un solo ejecutable. Dada una URL en un programa Deno, este ya se podría ejecutar. Deno asume explicitamente el rol de tiempo de ejecución y administrador de paquetes. Utiliza un protocolo estándar compatible con el navegador para la carga de módulos <code>(URL)</code></p>
<p>Entre otras cosas, Deno es un gran remplazo para los <code>scripts</code> de utilidad que pueden haber sido escritos históricamente con <code>bash</code> o <code>Python</code></p>
<h3 id="heading-objetivos">Objetivos</h3>
<ul>
<li>Solo envié un ejecutable único <code>(deno)</code></li>
<li>Provee valores predeterminados seguros. A menos que se permita específicamente, los scripts no pueden acceder a los archivos, el entorno o a la red.</li>
<li>Compatibilidad con el Navegador: El subconjunto de programas Deno que estén escritos completamente en Javascript pero que no utilicen el espacio global de <code>Deno</code>, deberán poder ejecutarse en un navegador web moderno sin cambios</li>
<li>Proporciona herramientas integradas como pruebas unitarias, formateo de código y linting para mejorar la experiencia del programador.</li>
<li>No filtrar los conceptos de V8 en el área de usuarios.</li>
<li>Ser capaz de servir HTTP de manera eficiente.</li>
</ul>
<h3 id="heading-comparacion-con-nodejs">Comparación con Node.js</h3>
<ul>
<li>Deno no utiliza <code>npm</code></li>
<li>Utiliza módulos referenciados por URL´s o rutas de archivos</li>
<li>Deno no utiliza <code>package.json</code> en el modulo de resolución de algoritmos.</li>
<li>Todas las acciones asíncronas en Deno devuelven una promesa. Por lo tanto, Deno provee diferentes API´s a las que provee Node.</li>
<li>Deno requiere permisos explícitos para el acceso a archivos, redes y entornos.</li>
<li>Deno siempre muere por error no detectados.</li>
<li>Utiliza “Módulos de ES (EcmaScript)” y no admite require(). Los módulos de terceros se importan a través de URL.</li>
</ul>
<h3 id="heading-otros-comportamientos-clave">Otros comportamientos clave</h3>
<ul>
<li>El código remoto se recupera y almacena en cache en la primera ejecución, y nunca se actualiza hasta que se ejecuta con el indicador <code>--reload</code>. (Hasta entonces, esto seguirá funcionando)</li>
<li>Los <strong>módulos/archivos</strong> cargados desde URL remotas están destinados a ser inmutables y almacenables en cache.</li>
</ul>
<h3 id="heading-instalacion-de-deno">Instalación de Deno</h3>
<p>Deno es muy simple de instalar, lo primero que haremos es escribir en una terminal lo siguiente.</p>
<p>Una vez que termine ese proceso ejecutaremos el siguiente comando</p>
<p>Eso nos retornara en consola</p>
<p>Si quisiéramos crear un un ejemplo un poco mas complejo podríamos ejecutar el siguiente ejemplo que nos proporciona Deno.</p>
<p>Crearemos un archivo index.ts y luego desde un terminal ejecutaremos <code>deno run index.ts</code></p>
<p>El día de hoy Deno se encuentra en versión 1.0, creo que tiene mucho futuro ! y es una excelente Herramienta. Actualmente me encuentro traduciendo su documentación al Español en mi <a target="_blank" href="https://github.com/FranciscoImanolSuarez/deno_documentacion">Github</a>. Cualquier recomendación o ayuda es mas que bienvenida, puedes igual chequear toda la documentación oficial en su <a target="_blank" href="https://deno.land/manual">web</a>, te invito que intentes aprenderlo.</p>
<h4 id="heading-referencias">Referencias</h4>
<p><a target="_blank" href="https://deno.land/manual"><strong>Deno</strong><br /><em>Deno, a secure runtime for JavaScript and TypeScript.</em>deno.land</a><a target="_blank" href="https://deno.land/manual"></a></p>
<p><a target="_blank" href="https://deno.land/"><strong>Deno</strong><br /><em>Deno, a secure runtime for JavaScript and TypeScript.</em>deno.land</a><a target="_blank" href="https://deno.land/"></a></p>
<h3 id="heading-si-el-articulo-te-gusto-o-te-parecio-interesante-por-favor-ayudame-con-puedes-seguirme-en-twitterhttpstwittercomsuarezimanol-o-encontrarme-en-githubhttpsgithubcomfranciscoimanolsuarez-visitando-mi-sitio-web">Si el articulo te gusto o te pareció interesante por favor ayúdame con 👏 🤓 Puedes seguirme en <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter</a> o encontrarme en <a target="_blank" href="https://github.com/FranciscoImanolSuarez">GitHub</a> visitando mi sitio web.</h3>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
<article>
<h1>👀Funciones en Javascript 🐱‍👤</h1>
<p>Francisco Imanol Suarez — Sun, 03 May 2020 20:37:02 GMT</p>
<p>Las funciones son uno de los fragmentos de código mas usados en Javascript. Una <em>función</em> es un conjunto reutilizable de declaraciones para realizar una tarea especifica.</p>
<p>A las funciones se le pueden pasar uno o más valores por parámetros y utilizar estos para devolver un valor al finalizar la ejecución de la misma. Para utilizar una función,debemos primero definirla, para poder definir una función utilizamos la palabra reservada <code>function</code> todas las funciones tienen un aspecto parecido a este.</p>
<p></p>
<p>Tienen un <strong>nombre</strong>, aunque también pueden ser <strong>anónimas</strong> y también pueden <strong>recibir datos por parámetros</strong>. Por ejemplo, definiremos una función para realizar una operación de suma entre 2 valores que serán recibidos por parámetro.</p>
<p></p>
<h3 id="heading-parametros"><strong>Parámetros</strong></h3>
<p>Las entradas a las funciones se conocen como <em>parámetros,</em> cuando una función se declara o se define podemos brindarle valores por parámetros estos valores serán como variables dentro del cuerpo de la función.</p>
<p>Cuando se llama a esta función, estos parámetros tendrán el valor de lo que se <em>pase</em> como argumentos. Aunque también podemos definir funciones sin ningún tipo de parámetro.</p>
<p></p>
<h3 id="heading-return-que-es-eso">🤔😢 Return? Que es eso?</h3>
<p>Las funciones <strong>devuelven un resultado</strong>, este resultado es <strong>retornado</strong> o <strong>devuelto</strong> por una palabra reservada llamada <code>return</code> . Esta palabra finaliza la ejecución de la función y retorna un valor, un dato a tener en cuenta es que si olvidamos la palabra <code>return</code> la función nos arrojara un <code>undefined</code> por defecto.</p>
<p></p>
<h3 id="heading-funciones-anonimas">Funciones ANONIMAS🐱‍🚀🐱‍👤</h3>
<p>Javascript nos permite realizar funciones anónimas, es decir sin mombre, para realizar esto simplemente tenemos que asignar la función a una variable o constante, por ejemplo.</p>
<p></p>
<p>En la edición de <strong>ES6</strong> de Javascript, nos encontramos con algo muy particular, las <strong>Arrow Functions</strong> o <strong>Funciones de flecha</strong>, estas funciones son limpias y concisas. Para declarar una <strong>Arrow Function</strong> no necesitamos de la palabra <code>function</code> si no que utilizamos una flecha <code>=></code> para separar los parámetros del cuerpo.</p>
<p>Otra característica a tener en cuenta es que, si solo tenemos un solo parámetro no necesitamos utilizar <code>()</code> al rededor de las listas de parámetros.</p>
<p>Y si solo tiene una expresión nos podemos olvidar de la palabra <code>return</code> y todo va a funcionar bien!</p>
<p></p>
<h3 id="heading-si-el-articulo-te-gusto-o-te-parecio-interesante-por-favor-ayudame-con-puedes-seguirme-en-twitterhttpstwittercomsuarezimanol-o-encontrarme-en-githubhttpsgithubcomfranciscoimanolsuarez-visitando-mi-sitio-web">Si el articulo te gusto o te pareció interesante por favor ayúdame con 👏 🤓 Puedes seguirme en <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter</a> o encontrarme en <a target="_blank" href="https://github.com/FranciscoImanolSuarez">GitHub</a> visitando mi sitio web.</h3>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
<article>
<h1>🐱‍🏍Método slice para eliminar caracteres ✨</h1>
<p>Francisco Imanol Suarez — Sat, 02 May 2020 20:25:42 GMT</p>
<p>Suponiendo que tenemos una cadena de caracteres y quisiéramos eliminar un fragmento de la cadena, o eliminar un carácter en una posición especial podríamos simplemente emplear el método <code>slice()</code> el cual cuenta con dos parámetros (<strong>INICIO,FIN</strong>).</p>
<p>Suponiendo que tenemos una variable con el valor “<strong>Medium</strong>” y sabiendo que en programación empezamos a contar desde el valor cero hasta infinito tendríamos una cadena dividida de la siguiente manera.</p>
<p></p>
<p>M = [0] E = [1] D = [2] I = [3] U = [4] M = [5]</p>
<p>Lo primero que haremos sera eliminar una porción de la cadena para dejarla de la siguiente manera <code>DIUM</code> , es decir eliminaremos los caracteres <strong>M</strong> y <strong>E.</strong></p>
<p></p>
<p>En este caso le dijimos a <em>slice</em> que de la posición 2 en adelante siga, y de la posición 2 hacia atrás elimine.</p>
<p>Ahora eliminaremos todo el texto menos los caracteres <strong>M</strong> y <strong>E</strong>.</p>
<p></p>
<p>Aquí le damos 2 parámetros, 0 es la posición inicial y 2 es la posición final.</p>
<p>Tendremos que tener en cuenta que <code>slice</code> NO modifica la variable actual, si no que genera una nueva, por eso la definición y asignación de una nueva llamada <code>textoModificado</code> en la cual se guarda el valor retornado por el método.</p>
<p>Ahora veremos un ejemplo con el valor negativo, tomaremos la misma cadena y eliminaremos SOLO las ultimas 2 posiciones de la cadena.</p>
<p></p>
<p>Este método puede ser empleado en muchos casos puntuales, como eliminar un carácter puntual o eliminar un fragmento para luego convertir esa nueva cadena con el primer carácter en mayúsculas.</p>
<h3 id="heading-si-el-articulo-te-gusto-o-te-parecio-interesante-por-favor-ayudame-con-puedes-seguirme-en-twitterhttpstwittercomsuarezimanol-o-encontrarme-en-githubhttpsgithubcomfranciscoimanolsuarez-visitando-mi-sitio-web">Si el articulo te gusto o te pareció interesante por favor ayúdame con 👏 🤓 Puedes seguirme en <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter</a> o encontrarme en <a target="_blank" href="https://github.com/FranciscoImanolSuarez">GitHub</a> visitando mi sitio web.</h3>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
<article>
<h1>Configuración de Nodemon en un servidor Node.js</h1>
<p>Francisco Imanol Suarez — Tue, 28 Apr 2020 18:36:16 GMT</p>
<h4 id="heading-estar-constantemente-reiniciando-manualmente-una-aplicacion-de-nodejs-es-un-trabajo-muy-tedioso-y-tambien-agotador-pero-para-evitar-tener-que-realizar-este-trabajo-una-y-otra-vez-existe-nodemon-que-se-encarga-de-reiniciar-automaticamente-el-servidor-de-aplicaciones-nodejs-en-modo-desarrollo">Estar constantemente reiniciando manualmente una aplicación de Node.js es un trabajo muy tedioso y también agotador, pero para evitar tener que realizar este trabajo una y otra vez, existe Nodemon que se encarga de reiniciar automáticamente el servidor de aplicaciones Node.js en modo desarrollo.</h4>
<p>En los siguientes pasos le enseñare como instalar y configurar Nodemon en su proyecto y como poner a correr un servidor Node.js.</p>
<h3 id="heading-paso-1">Paso 1</h3>
<p>Organizar el directorio de origen <code>src</code> y iniciar el servidor en un archivo <code>server.js,</code> el archivo puede llevar cualquier convención que se utilice para arrancar un servidor Node.js (<code>index.js</code> o <code>app.js</code> )</p>
<p>Actualizar el <code>package.json</code> agregando un script <code>start</code></p>
<p></p>
<h3 id="heading-paso-2">Paso 2</h3>
<p>Agregar <code>express</code> el cual nos va a permitir arrancar un mínimo servidor para realizar esta prueba</p>
<p></p>
<p>server.js</p>
<p>Inicie una terminal nueva en la cual iniciaremos el servidor corriendo el script <code>npm start</code> luego de ejecutarlo nos retornara un mensaje como el siguiente <code>node src/index.js</code></p>
<p>Abrir una nueva terminal y ejecutaremos el siguiente código <code>curl -X GET [http://localhost:3000/](http://localhost:3000/)</code> el cual nos permitirá comprobar que la API este funcionando de manera correcta.</p>
<p></p>
<p>Si nos retorna el mensaje <code>La API funciona correctamente</code> quiere decir que vamos bien!</p>
<p>Ahora, si cambiamos el mensaje de respuesta en el archivo <code>server.js</code>, debo reiniciar el servidor para obtener el resultado deseado:</p>
<p></p>
<p>Utilizar <code>Ctrl + C</code> para detener el servidor que se está ejecutando actualmente y volver a iniciarlo usando el mismo comando antes: <code>npm run start</code>.</p>
<p>Usando el comando curl nuevamente desde la ventana de terminal obtenemos el resultado deseado:</p>
<p></p>
<h3 id="heading-paso-3">Paso 3</h3>
<p>Agrega nodemon como <code>devDependency</code>:</p>
<p></p>
<p>Revisaremos el <code>package.json</code></p>
<p></p>
<h3 id="heading-paso-4">Paso 4</h3>
<p>Agregar el comando <code>dev</code> en el archivo package.json</p>
<p></p>
<p>Ahora ejecute <code>npm run dev</code> y solicite el uso nuevamente del comando curl, y veremos que el mensaje es el mismo que teníamos antes:</p>
<p></p>
<p>Si cambio nuevamente el mensaje en el archivo <code>server.js</code> por cualquier otro, ya esta vez no tendré que reiniciar el servidor dado que Nodemon esta observando los cambios usando el directorio <code>src</code>, mediante su parámetro <code>--watch.</code></p>
<p>Vera que se actualiza solo sin tener que reiniciar el servidor, para cortarlo presionar <code>CTRL + C</code></p>
<h4 id="heading-fuentes">Fuentes:</h4>
<h3 id="heading-node">Node</h3>
<p><a target="_blank" href="https://nodejs.org/es/"><strong>Node.js</strong><br /><em>Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.</em>nodejs.org</a><a target="_blank" href="https://nodejs.org/es/"></a></p>
<h3 id="heading-express">Express</h3>
<p><a target="_blank" href="https://expressjs.com/es/"><strong>Express - Infraestructura de aplicaciones web Node.js</strong><br /><em>Express es una infraestructura de aplicaciones web Node.js mínima y flexible que proporciona un conjunto sólido de…</em>expressjs.com</a><a target="_blank" href="https://expressjs.com/es/"></a></p>
<h3 id="heading-nodemon">Nodemon</h3>
<p><a target="_blank" href="https://nodemon.io/"><strong>nodemon</strong><br /><em>Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect…</em>nodemon.io</a><a target="_blank" href="https://nodemon.io/"></a></p>
<p>Gracias por leer 💻</p>
<h3 id="heading-si-el-articulo-te-gusto-o-te-parecio-interesante-por-favor-ayudame-con-puedes-seguirme-en-twitterhttpstwittercomsuarezimanol-o-encontrarme-en-githubhttpsgithubcomfranciscoimanolsuarez-visitando-mi-sitio-web">Si el articulo te gusto o te pareció interesante por favor ayúdame con 👏 🤓 Puedes seguirme en <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter</a> o encontrarme en <a target="_blank" href="https://github.com/FranciscoImanolSuarez">GitHub</a> visitando mi sitio web.</h3>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
<article>
<h1>🧐🤓Operaciones con cadenas 👀</h1>
<p>Francisco Imanol Suarez — Sat, 25 Apr 2020 19:15:16 GMT</p>
<p>Veremos las operaciones mas usadas con Cadenas en Javascript, <code>toUpperCase()</code> <code>toLowerCase()</code> <code>charAt()</code> <code>slice()</code></p>
<p>El dia de hoy aprenderemos a realizar 4 acciones fundamentales como convertir una cadena completamente en mayúsculas o minúsculas, copiar un fragmento de una cadena saber dimensiones y devolver caracteres.</p>
<p>Métodos cubiertos en esta publicación:</p>
<ul>
<li><code>toUpperCase()</code></li>
<li><code>toLowerCase()</code></li>
<li><code>charAt()</code></li>
<li><code>slice()</code></li>
</ul>
<h3 id="heading-metodo-touppercase">Método toUpperCase()</h3>
<p>Este método es utilizado para poder convertir toda una cadena a mayusculas, este método no modifica el valor de la cadena si no que retorna una cadena nueva modificada.</p>
<p></p>
<p></p>
<p>Como podemos notar el resultado no es modificado, es decir que por mas que encontremos una constante o cadena que tenga un valor totalmente diferente el mismo no va ser modificado.</p>
<p>Otra cosa que debemos tener en cuenta a la hora de utilizar este método es que si lo intentamos utilizar con otros tipos de datos como <code>null</code>, <code>number</code> o <code>undefined</code> se devolverá un <code>TypeError</code> es recomendable controlar el tema de los tipos de datos a la hora de utilizar el método dado que puede bloquear la aplicación.</p>
<p></p>
<p>Ahora tu dirás muy bueno todo pero yo quiero realizar esto a la inversa, es decir convertir la cadena completa a minúsculas, lo cual también es muy útil, para realizar esto es lo mismo nada más que cambiamos el método <code>toUpperCase()</code> por el método <code>toLowerCase()</code> .</p>
<h3 id="heading-metodo-charat">Método charAt()</h3>
<p>Este método lo que hace es retornar el carácter en el indice solicitado de una cadena el valor predeterminado del indice es cero.</p>
<p></p>
<blockquote>
<p>Recordar que en programación empezamos a contar desde ‘cero’</p>
</blockquote>
<p>Vamos a realizar un par de ejemplos para poder saber e identificar diferentes operaciones en las cuales podemos utilizar este método.</p>
<p></p>
<blockquote>
<p>Si nosotros pasáramos un carácter diferente a un numero el método remplazara ese carácter por el valor preestablecido (0)</p>
</blockquote>
<p>Podemos encontrar que otros programadores utilizan una notación de [] es decir en lugar de utilizar <code>charAt()</code> utilizan <code>chartAt[]</code> básicamente el resultado es el mismo, aunque la diferencia se encuentra en el soporte de navegadores, dado que <code>charAt()</code> viene desde ECMAScript en su versión 1 podemos encontrar soporte en todos los navegadores para la utilización de <code>charAt()</code> el método <code>charAt[]</code> no es compatible con Internet Explorer 7 en adelante. Esta información es muy importante a la hora de realizar proyectos grandes o para clientes que aun trabajan con navegadores viejos.</p>
<h3 id="heading-metodo-slice">Método slice()</h3>
<p><code>slice</code> es un método que nos permite hacer cosas como copiar una cadena o retornar una letra especifica, volvemos a lo mismo que en los métodos anteriores el valor preestablecido es 0, aunque si nosotros queremos obtener el ultimo carácter de la cadena lo podemos hacer pasando en los argumentos el valor -1.</p>
<p></p>
<p>Algo muy interesante de este método es que nosotros podemos pasarle 2 parámetros un inicio y un final y poder extraer una parte de la cadena.</p>
<p></p>
<p>Diferencia con <code>charAt()</code> es que si pasamos un indice de inicio fuera del rango es decir que sea mayor a la longitud de la cadena, simplemente nos devolverá una cadena totalmente vacía, y si nosotros en lugar de pasar un indice positivo fuera de rango le pasamos un indice negativo que excede la longitud nos retorna la cadena completa.</p>
<h3 id="heading-si-el-articulo-te-gusto-o-te-parecio-interesante-por-favor-ayudame-con-puedes-seguirme-en-twitterhttpstwittercomsuarezimanol-o-encontrarme-en-githubhttpsgithubcomfranciscoimanolsuarez-visitando-mi-sitio-web">Si el articulo te gusto o te pareció interesante por favor ayúdame con 👏 🤓 Puedes seguirme en <a target="_blank" href="https://twitter.com/suarez__imanol">Twitter</a> o encontrarme en <a target="_blank" href="https://github.com/FranciscoImanolSuarez">GitHub</a> visitando mi sitio web.</h3>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
<article>
<h1>🐱‍🏍Operadores en Javascript👀</h1>
<p>Francisco Imanol Suarez — Tue, 21 Apr 2020 20:44:43 GMT</p>
<h3 id="heading-aritmeticos">Aritméticos</h3>
<p>Estos operadores toman los valores numéricos y aplican una operación para devolver un único resultado, contamos con diferentes tipos de operadores como por ejemplo:</p>
<p></p>
<p><em>Estos operadores funcionan como en la mayoría de los lenguajes de programación como por ejemplo “Python, Ruby, Java, C”</em></p>
<p>El operador de suma también puede utilizarse para realizar una acción llamada concatenación de dos o más Strings como por ejemplo.</p>
<p><code>"Hola " + "Mundo"</code></p>
<p>Lo cual nos mostrara por consola o pantalla el resultado de</p>
<p><code>"Hola Mundo"</code></p>
<p>En JavaScript también nos encontramos con los operadores de Incremento y decremento, que añaden uno o restan uno a la variable numérica en la que sean aplicados</p>
<h3 id="heading-incremento">Incremento</h3>
<p></p>
<h3 id="heading-decremento">Decremento</h3>
<p></p>
<h3 id="heading-operador-typeof">Operador typeOf</h3>
<p>Este operador es especial dado que nos permite a nosotros conocer el tipo(number, boolean, undefined) que tiene la variable sobre la cual vamos a realizar una acción</p>
<p></p>
<p>Esto nos va a permitir a nosotros saber los tipos de datos y así prevenir errores en el desarrollo.</p>
<h3 id="heading-operadores-booleanos">Operadores Booleanos</h3>
<p>Este tipo de operador solo tiene dos posibles valores:<code>true</code>lo cual significa verdadero y <code>false</code>lo cual es falso, pero disponemos de ciertos operadores los cuales nos van a permitir transformar estos valores.</p>
<h3 id="heading-negacion">Negación:</h3>
<p>Como su nombre lo dice convierte el valor en el contrario, es representado con el signo <code>!</code></p>
<blockquote>
<p><em>“Si utilizamos este valor dos veces !! nos va a devolver el valor original”</em></p>
</blockquote>
<p></p>
<p>Identidad o igualdad</p>
<p>El operador de comparación realiza la acción de comparar sus operandos y devolver un valor lógico (true o false). Estos operadores pueden ser numéricos, Strings, lógicos o de objetos. En el caso de las cadenas de caracteres(Strings) son comparadas basándose en el orden lexicográfico estándar. En los casos que los operandos no sean del mismo tipo JavaScript intenta convertirlos en el tipo apropiado para permitir la comparación, generalmente esta conversión se realiza de manera numérica. Esta conversión tiene como excepción la utilización de los operadores ===(igualdad) y !==(desigualdad) de manera estricta.</p>
<p></p>
<h3 id="heading-comparacion">Comparación</h3>
<p>Podemos comparar si dos valores son menores, iguales, mayores y mas con los operadores de comparación, representados con los signos <code><</code>, <code>></code>,<code><=</code>, <code>≥=</code>. El resultado de la comparación nos devuelve <code>true</code> o <code>false</code> dependiendo si la comparación es correcta o no</p>
<p></p>
<h3 id="heading-operadores-logicos">Operadores lógicos</h3>
<h3 id="heading-operador-and">Operador AND</h3>
<p>Es un operador lógico que devuelve true siempre que TODOS los valores comparados sean verdaderos. Si UNO de ellos es falso devuelve false. El operador AND es representado con el simbolo<code>&&</code></p>
<p></p>
<h3 id="heading-operador-or">Operador OR</h3>
<p>Es otro de los operadores lógicos funciona a la inversa que AND, devuelve false si los valores comparados son falsos. En el caso que UNO de los valores sea <code>true</code> retornara verdadero. Es representado con el simbolo <code>||</code>.</p>
<p></p>
<p>Tambien es utilizado para asignar valores por defecto en las funciones, la logica es la siguiente:</p>
<blockquote>
<p><em>Si el PRIMER valor es VERDADERO devuelvo ese valor</em></p>
</blockquote>
<p></p>
<p>En ese ejemplo la variable port contendrá el valor de process.env.PORT siempre que esa variable este declarada si no su valor sera 5000</p>
<p>Gracias por leer 💻</p>
<p>🤓 Puedes seguirme en Twitter o encontrarme en GitHub visitando mi sitio web</p>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
<article>
<h1>🧐🤓Tipos de datos y valores en Javascript💻</h1>
<p>Francisco Imanol Suarez — Sun, 12 Apr 2020 21:46:28 GMT</p>
<p>El tipo de dato es una propiedad de un valor que determina valores que puede tomar, que tipos de operaciones podemos realizar sobre este y cómo su representación interna.</p>
<p>En JavaScript encontramos diferentes tipos de valores y tipos de datos para almacenar en variables.</p>
<h3 id="heading-valores-y-tipos">💡 Valores y tipos</h3>
<p><em>Tipo principales (primitivos)</em></p>
<blockquote>
<p><em>string number boolean</em></p>
</blockquote>
<p><em>Tipo compuesto</em></p>
<blockquote>
<p><em>Objeto</em></p>
<p><em>Matriz</em></p>
</blockquote>
<p><em>Tipo especiales</em></p>
<blockquote>
<p><em>Null</em></p>
<p><em>Undefined</em></p>
</blockquote>
<p>En el caso de ES6 se presenta un nuevo tipo de este tipo de denominación como <code>symbol</code>este tipo de datos cuyos valores son únicos y no pueden ser alterados.</p>
<p>JavaScript proporciona un operador llamado <code>typeof</code>este operador que puede examinar un valor y decirle qué tipo es:</p>
<p>Como les comentaba en el capitulo <a target="_blank" href="https://medium.com/@imanol_suarez/javascript-diferentes-operadores-6840ba8cf29">anterior</a> JavaScript presenta un operador llamado <code>typeof</code> este operador nos permite a nosotros como desarrolladores saber de que tipo es la variable:</p>
<p></p>
<p>Este operador es especial dado que nos permite a nosotros conocer el tipo(number, boolean, undefined,object,) que tiene la variable sobre la cual vamos a realizar una acción.</p>
<h3 id="heading-string">💡 String</h3>
<p>Un valor de cadena es un conjunto de caracteres Unicode(letras,digitos,signos de puntuación y mas),este tipo de dato es el encargado de representar texto en JavaScript</p>
<p></p>
<h3 id="heading-number">💡 Number</h3>
<p>En JavaScript, no se distingue entre los valores enteros y de punto flotante; un número de JavaScript puede ser cualquiera de ellos (internamente, JavaScript representa todos los números como valores de punto flotante).</p>
<p></p>
<h3 id="heading-boolean">💡 Boolean</h3>
<p>Este tipo de dato almacena 1 bit puede ser <code>true</code> o <code>false</code> son utilizados para registrar un estado (VERDADERO O FALSO)</p>
<p></p>
<h3 id="heading-objetos">💡 Objetos</h3>
<p>Dado que JavaScript esta diseñado en un paradigma basado a objetos. Decimos que un objeto es una colección de propiedades, estos objetos se pueden comparar con objetos de la vida real objetos tangibles.</p>
<p></p>
<p>Otra manera de acceder a las propiedades de estos objetos es de la siguiente manera:</p>
<p></p>
<p>Acceder (por índice) a un elemento Array</p>
<p></p>
<p>Ahora si nos ponemos a pensar la posición nombre[1] debería ser Mariano, bueno al comenzar a programar esto puede sonar un poco raro, pero en programación arrancamos a contar desde el numero cero(0).</p>
<p>Otro ejemplo</p>
<p></p>
<p>Este array(marcasDeComputadoras) esta compuesto por 5 elementos arrancando por HP y finalizando en Acer</p>
<p></p>
<h3 id="heading-undefined">💡 Undefined</h3>
<p>Este tipo de dato se utiliza cuando no sabemos el contenido de una variable o todavía no fue definido.</p>
<p></p>
<h3 id="heading-null">💡 Null</h3>
<p>El tipo de dato <code>null</code> tiene solamente el valor <code>null</code>. La palabra clave reservada <code>null</code> no puede ser utilizada como nombre de una función o una variable</p>
<p>Una variable que contiene <code>null</code> no contiene ningún tipo de numero, cadena o valor booleano ni una matriz u objeto. Este tipo de dato no es 0 como en otros lenguajes como C o C++, declarando una variable de tipo <code>null</code> y utilizando el operador typeof interpreta el valor como Object no como tipo <code>null</code></p>
<p>Gracias por leer 💻</p>
<p>🤓 Puedes seguirme en Twitter o encontrarme en GitHub visitando mi sitio web</p>
<p><a target="_blank" href="https://about.me/franciscoimanol"><strong>Francisco Imanol Suarez on about.me</strong><br /><em>I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.</em>about.me</a><a target="_blank" href="https://about.me/franciscoimanol"></a></p>

</article>
</main></body></html>

Francisco Imanol Suarez

Best practices for organizing web pages

Introduction

3. Best practices for page organization

3.1 Consistency in structure

3.2 Use of ARIA Roles

3.3 Comments in code

3.4 HTML validation

Conclusion

Estructura Básica de un Sitio Web

Introducción

Objetivos del Capítulo

Importancia de la Estructura Básica

Contenido del Capítulo

1. Elemento

1.1 Importancia y función

1.2 Inclusión de Metadatos

1.3 Enlaces a Recursos Externos

1.4 Uso de etiquetas importantes

Ejemplos de Código Completos

Ejemplo de Código Completo

2. La estructura base en

2.1 Creación de una Plantilla Base

2.2 Uso de Elementos Semánticos

2.3 Organización Inicial del Contenido

2.4 Mejores Prácticas para una Estructura Limpia y Eficiente

Ejemplos de codigo

Estructura base en

Desafío 1: Configuración del

Desafío 2: Creación de una Plantilla Base en

Recursos Adicionales

Ejercicios prácticos adicionales

Ejercicio 1: Implementación de ARIA Roles

Ejercicio 2: Validación HTML

Sección de Preguntas Frecuentes (FAQ)

P: ¿Qué son los metadatos y por qué son importantes?

P: ¿Qué es el atributo alt en las imágenes y por qué es importante?

Imágenes y Diagramas

Mapa de la Estructura de un Sitio Web

P: ¿Qué es el atributo `alt` en las imágenes y por qué es importante?