Forem: Santos Romero

Despliegue de página web

Santos Romero — Wed, 05 Jul 2023 04:00:11 +0000

En este capítulo, vamos a explicar, paso a paso, cómo desplegar nuestra página web en un hosting gratuito como Netlify o Vercel.

Crear repositorio remoto

Santos Romero — Wed, 05 Jul 2023 03:58:55 +0000

En el próximo capítulo, vamos a explicar paso a paso cómo crear un cuenta en GitHub y subir nuestro repositorio local Git que se trabajó en el capítulo anterior.

Crear repositorio local

Santos Romero — Wed, 05 Jul 2023 03:56:25 +0000

Git es un sistema de control de versiones distribuido que te permite registrar los cambios que haces en tus archivos y volver a versiones anteriores si algo sale mal. Fue diseñado por Linus Torvalds para garantizar la eficiencia y confiabilidad del mantenimiento de versiones de aplicaciones que tienen un gran número de archivos de código fuente — Platzi.

Proyecto web

Estructura del proyecto

En el disco c, crea la carpeta del proyecto en la siguiente ruta: c:\workspace\profile-card-component

Proyecto base

Instalación y configuración

Santos Romero — Wed, 05 Jul 2023 03:53:44 +0000

Git es un sistema de control de versiones distribuido que te permite registrar los cambios que haces en tus archivos y volver a versiones anteriores si algo sale mal. Fue diseñado por Linus Torvalds para garantizar la eficiencia y confiabilidad del mantenimiento de versiones de aplicaciones que tienen un gran número de archivos de código fuente — Platzi.

Descarga

Diríjase a la página oficial de Git: página oficial de Git

Haz clic en "Click here to download" para iniciar con la descarga (Ver imagen):

Instalación

Paso1: Haz doble clic en el instalador para iniciar con la instalación (ver imagen):

Paso 2: Haz clic en "Next" para continuar (ver imagen):

Paso 3: Haz clic en "Next" para continuar (ver imagen):

Paso 4: Haz clic en "Next" para continuar (ver imagen):

Paso 5: Haz clic en "Next" para continuar (ver imagen):

Paso 6: Haz clic en "Next" para continuar (ver imagen):

Paso 7: Haz clic en "Next" para continuar (ver imagen):

Paso 8: Haz clic en "Next" para continuar (ver imagen):

Paso 9: Haz clic en "Next" para continuar (ver imagen):

Paso 10: Haz clic en "Next" para continuar (ver imagen):

Paso 11: Haz clic en "Next" para continuar (ver imagen):

Paso 12: Haz clic en "Next" para continuar (ver imagen):

Paso 13: Haz clic en "Next" para continuar (ver imagen):

Paso 14: Haz clic en "Next" para continuar (ver imagen):

Paso 15: Haz clic en "Install" para instalar Git (ver imagen):

Configuración

Haz clic en "Finish" para iniciar la consola de Git (Git Bash es la consola predeterminada de Git).

Establece el nombre

Escribe el comando en la consola para establecer el nombre del propietario que usará Git.

Establece el correo

Escribe el comando en la consola para establecer el correo del propietario que usará Git.

Consulta la configuración

Escribe el comando en la consola para visualizar la configuración general realizada.

Conclusión

Este artículo explica cómo descargar e instalar Git para Windows, así como la configuración inicial necesaria para empezar a usarlo. También incluye imágenes detalladas de cada paso del proceso.

Hecho en Medellín 🚠

Agregar botón Buymeacoffe en tu Dev.to

Santos Romero — Sat, 24 Jun 2023 03:39:55 +0000

👋Hey developer,

En este artículo, mostraré y ayudaré a agregar el botón BUY ME A COFFE a vuestro blog en Dev.to, de una manera simple y en dos sencillos pasos.

Vamos al grano.

Paso 1: por favor, crea una cuenta en buymeacoffee y consigue el nombre de usuario
Paso 2: agrega la etiqueta <a> en la ubicación donde quieras que se muestre el botón BUY ME A COFFEE. Asegúrate de pegar el enlace en el atributo href: https://www.buymeacoffee.com/your_username

Ejemplo

<a href="https://www.buymeacoffee.com/capscode" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-blue.png" alt="Buy Me A Coffee" height="41" width="174"></a>

SI TE GUSTÓ EL POST, PUEDES COMPRARME MI PRIMER CAFÉ, GRACIAS DE ANTEMANO

Gracias por leer este artículo. Es una breve introducción sobre cómo agregar el botón BUY ME A COFFEE a un post en DEV.TO.

Comparte y comenta si encuentras útil este contenido.

Traducido desde Capscode

Day 03: HTML Basic

Santos Romero — Sat, 24 Jun 2023 02:47:17 +0000

En este artículo, mostraremos algunos ejemplos básicos de HTML.
No se preocupe si usamos etiquetas que aún no ha visto hasta el momento.

Documentos HTML

Todos los documentos HTML deben empezar con una declaración de tipo de documento: <!DOCTYPE html>.

El documento HTML por sí mismo empieza con una etiqueta de apertura <html> y termina con etiqueta de cierre </html>.

La parte visible del documento va entre <body> y </body>.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Información meta para el navegador -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titulo pagina</title>
</head>
<body>
  <!-- Información visible para el usuario -->
  <h1>Hola mundo HTML</h1>
  <p>Mi primer párrafo.</p>
</body>
</html>

La declaración `DOCTYPE`

La declaración <!DOCTYPE> representa el tipo de documento y ayuda a los navegadores a mostrar las páginas correctamente. Debería aparecer una sola vez en la parte superior de la página.

La declaración <!DOCTYPE> no es case-sensitive (sí diferencia entre minúsculas y mayúsculas).

<!DOCTYPE html> es la declaración para HTML5.

Ejemplo:

<!DOCTYPE html>

Encabezados

Los encabezados HTML se definen con las etiquetas <h1> hasta <h6>.

<h1> define el encabezado más importante. <h6> define el encabezado menos importante.

Ejemplo:

<h1>Notion for education</h1>
<h2>Trusted by thousands of students & schools</h2>
<h3>Encabezado h3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

Párrafos

Los párrafos HTML se definen con la etiqueta <p>.

Ejemplo:

<p>Your notes, research, tasks, and more — all in one place. Free for students and teachers, with discounts for teams and schools.<p>

Enlaces

Los enlaces HTML se definen con la etiqueta <a>.

Ejemplo:

<a href="/signup">Try Notion free</a>

El enlace de destino se especifica en el atributo href.

Los atributos se utilizan para proporcionar información adicional sobre los elementos HTML.

Imágenes

Las imágenes en HTML se definen con la etiqueta <img>.

El archivo fuente (src) y el texto alternativo (alt) son atributos:

Ejemplo:

<img src="imagen-notion.png" alt="Image for Notion">

¿Cómo ver la fuente HTML?

¿Alguna vez viste una página web y te preguntaste? "¡Guau! ¿Cómo hicieron eso?"

Ver el código fuente

En Google Chrome, haga clic derecho en una página y seleccione Ver código fuente de la página.

Inspeccionar un elemento

En Google Chrome, haga clic derecho y seleccione Inspeccionar.

Resumen

Un documento HTML siempre debe comenzar con la declaración <!DOCTYPE html>. HTML tiene muchas etiquetas como: <h1> -<h6>, <p>, <img>, <a>, etc. Para definir el encabezado más importante de la página, use la etiqueta <h1>.

Traducido con 💚 desde W3Schools.com

Day 02: HTML Editors

Santos Romero — Sat, 24 Jun 2023 02:41:48 +0000

Un simple editor de código es todo lo que necesitas para aprender HTML.

Aprende usando Notepad

Las páginas web se pueden crear y modificar utilizando editores HTML profesionales.

Sin embargo, para aprender HTML recomendamos un editor de texto simple como Notepad (Windows) o TextEdit (Mac).

Creemos que usar un editor de texto simple es una buena manera de aprender HTML.

Siga los pasos a continuación para crear su primera página web con Notepad.

Paso 1: Abre Notepad

Abre el editor de texto Notepad de Windows.

Paso 2: Escribe código HTML

Escriba o copie el siguiente código HTML en Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>Mi primer encabezado</h1>
<p>Mi primer párrafo.</p>

</body>
</html>

Paso 3: Guarda el archivo

Guarde el archivo en su computadora. Seleccione Archivo > Guardar como. Ejemplo de nombre del archivo index.html

Paso 4: Abre el documento en el navegador

Abra el archivo HTML guardado en su navegador favorito (haga doble clic en el archivo o haga clic con el botón derecho y elija "Abrir con").

El resultado se parecerá mucho a esto:

A modo personal, recomendamos los siguientes editores de código para aprender HTML, cuentan con más características que Notepad.

Visual Studio Code

Visual Studio Code es un editor de código fuente desarrollado por Microsoft. Es un software libre y multiplataforma, está disponible para Windows, Linux y macOS. VS Code tiene una buena integración con Git, cuenta con soporte para depuración de código, y dispone de un sin número de extensiones, que básicamente te da la posibilidad de escribir y ejecutar código en cualquier lenguaje de programación. Su instalación es bastante sencilla.

Codepen

Codepen es un editor de código en línea para probar y mostrar fragmentos de código HTML, CSS y JavaScript creados por el usuario. Funciona como un editor de código en línea y un entorno de aprendizaje de código abierto, donde los desarrolladores pueden crear fragmentos de código y probarlos.

Stackblitz

Stackblitz es un IDE en la nube que te permite crear aplicaciones web. Eso quiere decir que no tienes que instalar nada para crear tu aplicación.

Resumen

Los editores de texto simples son suficientes para aprender HTML. Visual Studio Code es un editor de código fuente libre y multiplataforma con integración con Git y soporte para depuración de código, que dispone de muchas extensiones y es fácil de instalar. CodePen es un editor de código en línea para probar y mostrar fragmentos de código HTML, CSS y JavaScript, mientras que Stackblitz es un IDE en la nube para crear aplicaciones web sin necesidad de instalar nada.

Traducido con 💚 desde W3Schools.com

Day 01: HTML Introduction

Santos Romero — Sat, 24 Jun 2023 02:21:42 +0000

HTML es el lenguaje de marcado estándar para crear páginas web.

Tabla de contenidos

¿Qué es HTML?
Un simple documento HTML
¿Qué es un elemento HTML?
Los navegadores
Estructura de una página web
Historia de HTML
Resumen

¿Qué es HTML?

HTML significa Lenguaje de Marcado de Hipertexto (Hyper Text Markup Language)
HTML es el lenguaje de marcado estándar para crear páginas web
HTML describe la estructura de una página web
HTML se compone de una serie de elementos
Los elementos HTML le dicen al navegador cómo debe mostrar el contenido
Los elementos HTML etiquetan piezas de contenido como: "este es un encabezado", "este es un párrafo", "este es un enlace", etc

Un simple documento HTML

Un documento HTML tiene la siguiente estructura:

<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Información meta para el navegador -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titulo pagina</title>
</head>
<body>
  <!-- Información visible para el usuario -->
  <h1>Mundo HTML</h1>
  <p>Mi primer párrafo.</p>
</body>
</html>

Ejemplo explicado:
La declaración <!DOCTYPE html> define que el documento es un documento HTML5.
El elemento <html> es el elemento raíz de un documento HTML.
El elemento <head> contiene información meta sobre la página HTML.
El elemento <title> especifica un título para la página HTML.
El elemento <body> define el cuerpo del documento, y es un contenedor de todo el contenido visible: encabezados, párrafos, imágenes, hipervínculos, tablas, listas, etc.
El elemento <h1> define un encabezado grande.
El elemento <p> define un párrafo.

¿Qué es un elemento HTML?

Un elemento HTML está definido por una etiqueta de inicio, su contenido y una etiqueta de cierre.

El elemento HTML es todo, desde la etiqueta de inicio, hasta la etiqueta de cierre.

<h1>Hola mundo HTML</h1>
<p>Mi primer párrafo.</p>

Etiqueta inicio	Contenido	Etiqueta cierre
`<h1>`	Hola mundo HTML	`</h1>`
`<p>`	Mi primer párrafo	`</p>`
`<br>`	Vacío	Vacío

Nota: Algunos elementos HTML no tienen contenido (como el elemento <br>). Estos elementos son llamados elementos vacíos. Los elementos vacíos no tienen una etiqueta de cierre.

Los navegadores

El propósito de un navegador web (Chrome, Edge, Firefox, Safari) es leer documentos HTML y mostrarlos correctamente.

Un navegador no muestra las etiquetas HTML, pero las usa para determinar cómo mostrar el documento:

Estructura de una página web

A continuación, se muestra una imagen de la estructura de una página HTML:

Nota: El contenido dentro de la sección <body> se mostrará en un navegador. El contenido dentro del elemento <title> se mostrará en la barra de título del navegador o en la pestaña de la página.

Historia de HTML

Año	Versión
1989	Tim Berners-Lee inventó la web (World Wide Web)
1991	Tim Berners-Lee inventó HTML
1993	Dave Raggett escribió HTML+
1995	Un grupo de trabajo en HTML definió HTML 2.0
1997	La W3C recomienda HTML 3.2
1999	La W3C recomienda HTML 4.01
2000	La W3C recomienda XHTML 1.0
2008	La WHATWG publica el primer borrador de HTML5
2012	Para la WHATWG, HTML5 se convierte en estándar
2014	La W3C recomienda HTML5
2016	La W3C recomienda al candidato HTML 5.1
2017	La W3C recomienda HTML 5.1 segunda edición
2017	La W3C recomienda HTML5.2

Resumen

HTML es el lenguaje de marcado estándar para crear páginas web, y se compone de una serie de elementos (etiquetas) que se usan para mostrar el contenido que los usuarios verán en el navegador.

Traducido con 💚 desde W3Schools.com

Aprende CSS: Crea el logo de Microsoft

Santos Romero — Fri, 13 Jan 2023 19:14:34 +0000

Una de las mejores formas de aprender CSS (o lo que sea) es creando algo mientras aprendes. En este artículo, vamos a crear el logo de Microsoft usando elementos HTML y propiedades CSS.

Setup

El editor de código que usaremos será Visual Studio Code. La instalación es muy sencilla y no requiere conocimientos avanzados.

Proyecto inicial

Puedes crear tu propia carpeta, o descargar el proyecto inicial desde GitHub y tener los mismos archivos que nosotros.

El proyecto inicial contiene:

carpeta css con el archivo style.css para las propiedades CSS
carpeta imagescon el ícono favicon.ico de Microsoft
archivo index.html para los elementos HTML
archivo README.md que describe el proyecto

HTML

HTML es el lenguaje de marcado estándar para crear la estructura de una página web, y la usaremos en nuestro archivo index.html para crear la estructura del logo de Microsoft.

Agrega el código HTML al archivo index.html dentro del elemento <body>, y debería verse de la siguiente forma 👇:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Estilos -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <!-- Titulo Página -->
    <title>Logo Microsoft</title>
</head>
<body>

    <!-- Logo inicio-->
    <div class="logo">
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
        <div class="yellow"></div>
    </div>
    <!-- Logo fin -->    

</body>
</html>

Explicación

El elemento padre <div>, con su atributo class="logo", contiene cuatro elementos hijo que darán forma al logo de Microsoft.

CSS

CSS nos permite mejorar la apariencia del diseño de un documento HTML, y la usaremos para darle una apariencia que se acerque lo más posible al logo de Microsoft.

Agrega las propiedades CSS y CSS Grid al archivo style.css 👇:

/* Restablece los estilos del navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: #f0ffff;
}

.logo {
    width: 300px;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 20px;
}

.red { background-color: #f25022; }
.green { background-color: #7fba00; }
.blue { background-color: #01a0e6; }
.yellow { background-color: #ffb900; }

Explicación

El selector universal * es la propiedad raíz de CSS
El selector tipo etiqueta body recibe los estilos vinculados al documento HTML
El selector de tipo clase .logo recibe los estilos vinculados al documento HTML
El selector de tipo clase .red recibe los estilos vinculados al documento HTML

CSS Grid

El módulo de diseño CSS Grid ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar propiedades CSS como float o position.

Investiga más sobre CSS Grid:

CSS Grid Layout - Developer Mozilla
A Complete Guide To CSS Grid - CSS Tricks
CSS Grid - Fazt

Conclusión

"Lo que realmente importa no es lo que sabes, sino lo que haces con lo que sabes"

Construir algo mientras aprendes es una forma inteligente de consolidar los conocimientos, y en este artículo, juntos hemos construido el logo de Microsoft usando propiedades CSS & CSS Grid, pero no te quedes solo con esto, investiga más sobre lo que puedes hacer con CSS Grid.

Un 💬comentario o un ☕café nos inspira a seguir compartiendo contenido todos los días.

Ver Proyecto

Glosario de términos en el desarrollo web

Santos Romero — Thu, 17 Nov 2022 19:11:20 +0000

Algunos términos más usados en el desarrollo web que pueden ser de utilidad para que te familiarices si estas iniciando.

Si pudieras dejarme un comentario para mejorar las próximas publicaciones.

El único modo de hacer un gran trabajo es amar lo que haces. Steve Jobs

404

Mensaje de error que se produce cuando no se ha podido encontrar lo solicitado. Los enlaces rotos o muertos a menudo causan esto.

AMPs (Accelerated Mobile Pages)

Son páginas web simplificadas con un mínimo de HTML, destinadas a optimizar los resultados de búsqueda en dispositivos móviles. Debido a su naturaleza mínima, los AMPs pueden ofrecer tiempos de carga más rápidos y menos uso de datos, lo que mejora la visibilidad en los dispositivos móviles.

Algoritmo

Un algoritmo es una serie autónoma de instrucciones para realizar una función.

En otras palabras, un algoritmo es un medio para describir una forma de resolver un problema para que pueda ser resuelto repetidamente, por humanos o máquinas. Los informáticos comparan la eficiencia de los algoritmos a través del concepto de "complejidad algorítmica" o notación "Big O".

Ejemplos:

Una receta de cocina es un algoritmo simple para humanos.
Un algoritmo de clasificación se usa a menudo en la programación de computadoras para explicarle a una máquina cómo clasificar los datos.

API (Application Programming Interface)

Una API (interfaz de programación de aplicaciones) es un conjunto de características y reglas que existen dentro de un programa de software (la aplicación) que permite la interacción con él a través del software, en contraposición a una interfaz de usuario humana. La API puede verse como un simple contrato (la interfaz) entre la aplicación que la ofrece y otros elementos, como software o hardware de terceros.

En el desarrollo web, una API es generalmente un conjunto de funciones de código (ej., métodos, propiedades, eventos y URL) que un desarrollador puede usar en sus aplicaciones para interactuar con los componentes del navegador web de un usuario u otro software/hardware en el usuario. computadora o sitios web y servicios de terceros.

Ejemplos:

getUserMedia: se puede usar para capturar audio y video de la cámara web de un usuario, que luego se puede usar de la forma que desee el desarrollador, por ejemplo, grabar video y audio, transmitirlo a otro usuario en una llamada de conferencia o capturar imágenes fijas. del video.
Geolocation API: se puede usar para recuperar información de ubicación de cualquier servicio que el usuario tenga disponible en su dispositivo (por ejemplo, GPS), que luego se puede usar junto con las API de Google Maps para, por ejemplo, trazar la ubicación del usuario en un mapa personalizado y mostrarle qué atracciones están en su área.

Aplicación

Un tipo de software que permite al usuario realizar diferentes tareas.

Ejemplos:

Notion: es un software de gestión de proyectos y para tomar notas. Está diseñado para ayudar a los miembros de una empresa u organización a coordinar plazos, objetivos y tareas en aras de la eficiencia y la productividad.
Figma: es un editor de gráficos vectorial y una herramienta de generación de prototipos, principalmente basada en la web, con características off-line adicionales habilitadas por aplicaciones de escritorio en macOS y Windows.

Atributo

Un atributo amplía un elemento HTML o XML, cambiando su comportamiento o proporcionando metadatos.

Un atributo siempre tiene la forma name="value"(el identificador del atributo seguido de su valor asociado).

AJAX (Asynchronous JavaScript And XML)

Ajax, que inicialmente significaba Asynchronous JavaScript And XML, es una práctica de programación que utiliza JavaScript para realizar solicitudes HTTP para enviar y recibir datos.

Ajax le permite recopilar datos para actualizar partes del DOM de una página HTML sin necesidad de actualizar la página completa. Ajax también le permite trabajar de forma asíncrona, lo que significa que su código continúa ejecutándose mientras la parte objetivo de su página web intenta recargarse (en comparación con la forma síncrona, que bloquea la ejecución de su código hasta que esa parte de su página termine de recargarse).

Con sitios web interactivos y estándares web modernos, Ajax se realiza utilizando funciones dentro de los marcos de JavaScript y el estándar Fetch API.

Accesibilidad

Accesibilidad web se refiere a las mejores prácticas para mantener un sitio web utilizable a pesar de las restricciones físicas y técnicas. La accesibilidad web se define y analiza formalmente en el W3C a través de la Iniciativa de Accesibilidad Web (WAI).

Adobe Flash

Flash es una tecnología obsoleta desarrollada por Adobe para ver aplicaciones web expresivas, contenido multimedia y transmisión de medios.

A partir de 2021, Flash ya no es compatible con Adobe ni con ninguno de los principales navegadores web.

Array

Un array es una colección ordenada de datos (ya sea primitivos u objetos, según el lenguaje). Las matrices se utilizan para almacenar múltiples valores en una sola variable. Esto se compara con una variable que puede almacenar solo un valor.

Cada elemento de un array tiene un número adjunto, llamado índice numérico, que le permite acceder a él. En JavaScript, las matrices comienzan en el índice cero y se pueden manipular con varios métodos.

ASCII (American Standard Code for Information Interchange)

ASCII (Código estándar estadounidense para el intercambio de información) es uno de los métodos de codificación más populares y utilizados por las computadoras para convertir letras, números, puntuación y códigos de control en forma digital. Desde 2007, UTF-8 lo reemplazó en la Web.

Apache

Apache es un popular servidor web multiplataforma de fuente abierta que, según los números, es el servidor web más popular que existe. Es activamente mantenido por Apache Software Foundation.

Algunas empresas de alto perfil que utilizan Apache incluyen a Cisco, IBM, Salesforce, General Electric, Adobe, VMware, Xerox, LinkedIn, Facebook, Hewlett-Packard, AT&T, Siemens, eBay y muchas más.

Back-end

Todo lo que sucede detrás de escena, impulsando lo que sucede en el front-end. Hay cuatro componentes principales de un stack de software de desarrollo back-end: el servidor, la base de datos, el sistema operativo y el software.

Bug

Un error o falla que impide que un sitio web o una aplicación funcione correctamente.

Bootstrap

Un framework front-end gratuito y de código abierto para diseñar sitios web y aplicaciones web, desarrollado por Mark Otto y Jacob Thornton en Twitter, para fomentar la coherencia entre las herramientas internas.

Base de datos

Una base de datos es una recopilación organizada de información o datos estructurados, que normalmente se almacena de forma electrónica en un sistema informático. Normalmente, una base de datos está controlada por un sistema de gestión de bases de datos (DBMS). En conjunto, los datos y el DBMS, junto con las aplicaciones asociadas a ellos, reciben el nombre de sistema de bases de datos, abreviado normalmente a simplemente base de datos.

Boolean

En informática, un booleano es un tipo de datos lógicos que solo puede tener los valores true o false.

Por ejemplo, en JavaScript, los condicionales booleanos a menudo se usan para decidir qué secciones de código ejecutar (como una condición if) o repetir (como en bucles for).

Cache

El almacenamiento de ciertos elementos para crear tiempos de carga más rápidos para los visitantes frecuentes del sitio web. Si se realiza un cambio en un sitio web, los usuarios deberán borrar el caché de su navegador para ver los cambios.

Código abierto

El software de código abierto es el software cuyo código fuente y otros derechos que normalmente son exclusivos para quienes poseen los derechos de autor, son publicados bajo una licencia de código abierto o forman parte del dominio público.

El código abierto es una filosofía de trabajo y colaboración seguida por los miembros de la comunidad de open source. Esta filosofía se basa en la libertad intelectual y los principios fundamentales: transparencia, colaboración, entrega, inclusión y comunidad.

CSS (Cascading Style Sheets)

CSS (hojas de estilo en cascada) es un lenguaje declarativo que controla cómo se ven las páginas web en el navegador.

El navegador aplica declaraciones de estilo CSS a los elementos seleccionados para mostrarlos correctamente. Una declaración de estilo contiene las propiedades y sus valores, que determinan el aspecto de una página web.

CSS es una de las tres tecnologías web centrales, junto con HTML y JavaScript. CSS generalmente diseña elementos HTML, pero también se puede usar con otros lenguajes de marcado como SVG o XML.

Cookies

Una cookie es una pequeña pieza de información que un sitio web deja en la computadora de un visitante, a través de un navegador web.

Las cookies se utilizan para personalizar la experiencia web de un usuario con un sitio web. Puede contener las preferencias o entradas del usuario al acceder a ese sitio web. Un usuario puede personalizar su navegador web para aceptar, rechazar o eliminar cookies.

CDN (Content Delivery Network)

Una CDN (red de entrega de contenido) es un grupo de servidores distribuidos en muchas ubicaciones. Estos servidores almacenan copias duplicadas de datos para que los servidores puedan cumplir con las solicitudes de datos en función de qué servidores están más cerca de los respectivos usuarios finales. Los CDN hacen que el servicio rápido se vea menos afectado por el alto tráfico.

Los CDN se usan ampliamente para entregar hojas de estilo y archivos JavaScript (activos estáticos) de bibliotecas como Bootstrap, Jquery, etc.

CMS (Content Management System)

Un CMS (Sistema de gestión de contenido) es un software que permite a los usuarios publicar, organizar, cambiar o eliminar varios tipos de contenido, no solo texto, sino también imágenes incrustadas, video, audio y código interactivo.

CRUD (Create, Read, Update, Delete)

CRUD (Crear, Leer, Actualizar, Eliminar) es un acrónimo de las formas en que uno puede operar en los datos almacenados. Es un mnemotécnico para las cuatro funciones básicas del almacenamiento persistente. CRUD generalmente se refiere a operaciones realizadas en una base de datos o almacén de datos, pero también puede aplicarse a funciones de nivel superior de una aplicación, como eliminaciones temporales donde los datos no se eliminan realmente, sino que se marcan como eliminados a través de un estado.

CRM (Customer Relationship Management)

Software y aplicaciones que se utilizan para recopilar, analizar y mantener información sobre clientes, donantes y prospectos.

DBMS (DataBase Management System)

Normalmente, una base de datos requiere un programa de software de bases de datos completo, conocido como sistema de gestión de bases de datos (DBMS). Un DBMS sirve como interfaz entre la base de datos y sus programas o usuarios finales, lo que permite a los usuarios recuperar, actualizar y gestionar cómo se organiza y se optimiza la información. Un DBMS también facilita la supervisión y el control de las bases de datos, lo que permite una variedad de operaciones administrativas como la supervisión del rendimiento, el ajuste, la copia de seguridad y la recuperación.

Ejemplos:

DNS (Domain Name System)

DNS (Sistema de Nombres de Dominio) es un sistema de nombres jerárquico y descentralizado para recursos conectados a Internet. DNS mantiene una lista de nombres de dominio junto con los recursos, como las direcciones IP, que están asociados con ellos.

La función más destacada de DNS es la traducción de nombres de dominio fáciles de usar (como mozilla.org) a una dirección IP numérica (como 151.106.5.172); este proceso de asignar un nombre de dominio a la dirección IP adecuada se conoce como búsqueda de DNS. Por el contrario, se utiliza una búsqueda inversa de DNS (rDNS) para determinar el nombre de dominio asociado con una dirección IP.

Debugging

Es el proceso de identificar y tratar errores de programación.

DOM (Document Object Model)

El DOM es un modelo de documento cargado en el navegador y que representa el documento como un árbol de nodos, donde cada nodo representa una parte del documento (por ejemplo, un elemento, una cadena de texto o un comentario).

El DOM es una de las API más utilizadas en la Web porque permite que el código que se ejecuta en un navegador acceda e interactúe con cada nodo del documento. Los nodos se pueden crear, mover y cambiar. Los detectores de eventos pueden agregarse a los nodos y activarse cuando ocurre un evento determinado.

Dominio

Un dominio es una autoridad dentro de Internet que controla sus propios recursos. Su "nombre de dominio" es una forma de dirigirse a esta autoridad como parte de la jerarquía en una URL, generalmente la parte más memorable, por ejemplo, una marca.

Un nombre de dominio completo (FQDN) contiene todas las partes necesarias para buscar esta autoridad por nombre sin ambigüedades utilizando el sistema DNS de Internet.

Deployment

El despliegue de software son todas las actividades que hacen que un sistema de software esté disponible para su uso. El proceso de implementación general consiste en varias actividades interrelacionadas con posibles transiciones entre ellas.

DevOps

Sistema que ayuda a mantener en sintonía a los departamentos de desarrollo, operaciones de TI y control de calidad para lograr mejores productos finales y colaboraciones.

Documentación

Esencialmente, el punto central de referencia para cualquier persona involucrada en la administración, el mantenimiento o el uso de un sitio web o una pieza de software. Puede proporcionar información sobre requisitos, arquitectura y diseño, propiedades técnicas, datos para el usuario o marketing.

ECMAScript

Estándar de JavaScript, para que los navegadores implementen el mismo lenguaje JavaScript.

Front-end

Un desarrollador frontend utiliza el código para implementar el diseño de un sitio web o de una aplicación.

Sus herramientas principales son HTML, CSS y JavaScript: HTML para la estructura general y el contenido del sitio web, CSS para el estilo y JavaScript para la interactividad avanzada.

Favicon

Un favicon (icono favorito) es un icono diminuto incluido junto con un sitio web, que se muestra en lugares como la barra de direcciones del navegador, las pestañas de página y el menú de favoritos.

Tenga en cuenta, sin embargo, que la mayoría de los navegadores modernos reemplazaron el favicon de la barra de direcciones por una imagen que indica si el sitio web usa HTTPS o no.

Por lo general, un favicon tiene un tamaño de 16 x 16 píxeles y se almacena en formato de archivo GIF, PNG o ICO.

Se utilizan para mejorar la experiencia del usuario y hacer cumplir la coherencia de la marca. Cuando se ve un ícono familiar en la barra de direcciones del navegador, por ejemplo, ayuda a los usuarios a saber que están en el lugar correcto.

Framework

El conjunto de programas utilizados en el desarrollo de sitios web o software, sienta las bases para el tipo de lenguaje de programación utilizado para el desarrollo de su sitio web o aplicación.

Firewall

Un firewall es un sistema que filtra el tráfico de la red. Puede dejarlo pasar o bloquearlo, de acuerdo con algunas reglas específicas. Por ejemplo, puede bloquear conexiones entrantes dirigidas a un puerto determinado o conexiones salientes a una dirección IP determinada.

Los firewalls pueden ser tan simples como una sola pieza de software, o más complejos, como una máquina dedicada cuya única función es actuar como un firewall.

Full-stack

Los desarrolladores full-stack trabajan en las tres capas: el front-end, el back-end y la base de datos.

Fork

Un fork es una copia de un proyecto de software existente en algún momento para agregar las modificaciones propias de alguien al proyecto.

Básicamente, si la licencia del software original lo permite, puedes copiar el código para desarrollar tu propia versión del mismo, con tus propias adiciones, que será una "bifurcación".

Los fork se ven a menudo en el desarrollo de software libre y de código abierto. Este es ahora un término más popular gracias al modelo de contribución que utiliza Git (y/o la plataforma GitHub).

FTP (File Transfer Protocol)

FTP (Protocolo de transferencia de archivos) es un protocolo inseguro para transferir archivos de un host a otro a través de Internet.

Durante muchos años fue la forma estándar de transferir archivos, pero como es inherentemente inseguro, ya no es compatible con muchas cuentas de hosting. En su lugar, debe usar SFTP (una versión cifrada y segura de FTP) u otro método seguro para transferir archivos como Rsync a través de SSH.

GulpJS

Gulp es un conjunto de herramientas JavaScript de código abierto creado por Eric Schoffstall, que se utiliza como un sistema de compilación de transmisión en el desarrollo web front-end.

GUI (Graphical User Interface)

La imagen de cómo se presenta un sitio web y cómo se pretende interactuar con él.

GIF (Graphics Interchange Format)

GIF (formato de intercambio de gráficos) es un formato de imagen que usa compresión sin pérdidas y se puede usar para animaciones. Un GIF usa hasta 8 bits por píxel y un máximo de 256 colores del espacio de color de 24 bits.

Grid

Una cuadrícula/grid CSS se define utilizando el valor grid con la propiedad display; puede definir columnas y filas en su cuadrícula utilizando las propiedades grid-template-rows y grid-template-columns.

GPU (Graphics Processing Unit)

La GPU (Unidad de procesamiento de gráficos) es un componente de la computadora similar a la CPU (Unidad central de procesamiento). Se especializa en el dibujo de gráficos (tanto 2D como 3D) en su monitor.

Git

Git es un sistema de gestión de código fuente (SCM) distribuido, gratuito y de código abierto. Facilita el manejo de bases de código con equipos de desarrollo distribuidos. Lo que lo distingue de los sistemas SCM anteriores es la capacidad de realizar operaciones comunes (ramificación, compromiso, etc.) en su máquina de desarrollo local, sin tener que cambiar el repositorio principal o incluso tener acceso de escritura.

Host

Un host es un dispositivo conectado a Internet (o una red local). Algunos hosts llamados servidores ofrecen servicios adicionales como servir páginas web o almacenar archivos y correos electrónicos.

El host no necesita ser una instancia de hardware. Puede ser generado por máquinas virtuales. El host generado por las máquinas virtuales se denomina "Hospedaje virtual".

HTML (Hypertext Markup Language)

HTML es un lenguaje descriptivo que especifica la estructura de una página web.

Un archivo HTML normalmente se guarda con una extensión .htm o .html, lo sirve un servidor web y cualquier navegador web puede procesarlo.

HTTP (Hypertext Transfer Protocol)

El Protocolo de transferencia de hipertexto (HTTP) es el protocolo de red subyacente que permite la transferencia de documentos hipermedia en la Web, generalmente entre un navegador y un servidor para que los humanos puedan leerlos. La versión actual de la especificación HTTP se llama HTTP/2.

Hyperlink

Los hipervínculos conectan páginas web o elementos de datos entre sí. En HTML, los elementos <a> definen hipervínculos desde un lugar en una página web (como una cadena de texto o una imagen) a otro lugar en otra página web (o incluso en la misma página).

IDE (Integrated Development Interface)

Un entorno de desarrollo integrado (IDE) es una aplicación de software que proporciona instalaciones integrales a los programadores de computadoras para el desarrollo de software. Un IDE normalmente consta de un editor de código fuente, herramientas de automatización de compilación y un depurador.

IP (Internet Protocol)

Una dirección IP es un número asignado a cada dispositivo conectado a una red que utiliza el protocolo de Internet.

"Dirección IP" generalmente todavía se refiere a direcciones IPv4 de 32 bits hasta que IPv6 se implemente de manera más amplia.

Java

Java es un lenguaje de programación compilado, orientado a objetos y altamente portátil.

Java está tipificado estáticamente y presenta una sintaxis similar a C. Viene con una gran biblioteca de funciones fácilmente utilizables, el kit de desarrollo de software (SDK) de Java.

Los programas se compilan solo una vez antes de tiempo en un código de bytes propietario y un formato de paquete que se ejecuta dentro de la máquina virtual Java (JVM). La JVM está disponible en muchas plataformas, lo que permite que los programas Java se ejecuten en casi todas partes sin necesidad de compilarlos o empaquetarlos nuevamente. Esto lo convierte en un lenguaje preferido en muchas grandes empresas con paisajes heterogéneos, pero puede percibirse como "pesado".

JavaScript

JavaScript (o "JS") es un lenguaje de programación que se usa con mayor frecuencia para scripts dinámicos del lado del cliente en páginas web, pero también se usa a menudo en el lado del servidor, usando un tiempo de ejecución como Node.js.

JavaScript no debe confundirse con el lenguaje de programación Java. Aunque "Java" y "JavaScript" son marcas comerciales (o marcas comerciales registradas) de Oracle en los Estados Unidos y otros países, los dos lenguajes de programación son significativamente diferentes en su sintaxis, semántica y casos de uso.

JavaScript se usa principalmente en el navegador, lo que permite a los desarrolladores manipular el contenido de la página web a través del DOM, manipular datos con AJAX e IndexedDB, dibujar gráficos con lienzo, interactuar con el dispositivo que ejecuta el navegador a través de varias API y más. JavaScript es uno de los lenguajes más utilizados en el mundo, debido al reciente crecimiento y mejora del rendimiento de las API disponibles en los navegadores.

JQuery

Una librería de JavaScript que simplifica la tarea de usar JavaScript en su sitio web al condensar varias líneas de código JavaScript en una sola línea.

JSON (Javascript Object Notation)

JSON es un formato de intercambio de datos. Aunque no es un subconjunto estricto, JSON se parece mucho a un subconjunto de la sintaxis de JavaScript. Aunque muchos lenguajes de programación admiten JSON, es especialmente útil para aplicaciones basadas en JavaScript, incluidos sitios web y extensiones de navegador.

JSON puede representar números, valores booleanos, cadenas, valores nulos, matrices (secuencias ordenadas de valores) y objetos (asignaciones de valores de cadena) formados por estos valores (o por otras matrices y objetos). JSON no representa de forma nativa tipos de datos más complejos como funciones, expresiones regulares, fechas, etc. Si necesita JSON para representar tipos de datos adicionales, transforme los valores a medida que se serializan o antes de que se deserialicen.

Lenguaje de programación

Es un conjunto de palabras, expresiones y símbolos que permiten escribir instrucciones que las máquinas pueden interpretar y ejecutar.

Linux

Sistema operativo de código fuente abierto basado en Unix inventado por Linus Torvalds, el cual en los últimos años ha tomado auge en el sector web. La mayoría de los sitios web están alojados en máquinas Linux.

Metadatos

Los metadatos son, en su definición más simple, datos que describen datos. Por ejemplo, un documento HTML son datos, pero HTML también puede contener metadatos en su elemento

que describe el documento, por ejemplo, quién lo escribió y su resumen.

Mobile First

Una forma de mejora progresiva, es un enfoque de desarrollo y diseño web que se centra en priorizar el diseño y desarrollo para tamaños de pantalla móviles, sobre el diseño y desarrollo para tamaños de pantalla de escritorio.

MVC (Model View Controller)

MVC (Modelo - Vista - Controlador) es un patrón en el diseño de software comúnmente utilizado para implementar interfaces de usuario, datos y lógica de control. Enfatiza una separación entre la lógica comercial y la pantalla del software. Esta "separación de intereses" proporciona una mejor división del trabajo y un mejor mantenimiento.

Las tres partes del patrón de diseño de software MVC se pueden describir de la siguiente manera:
Modelo: gestiona datos y lógica de negocio.
Vista: maneja el diseño y la visualización.
Controlador: enruta los comandos al modelo y las partes de la vista.

Método GET

Tipo de petición que quiere solicitar información al servidor web . También permite pasar parámetros por la URL, pero de manera visible, no como POST.

Método POST

Tipo de petición que permite enviar datos al servidor de manera transparente. Forma de paso de parámetros mediante formulario (normalmente).

MySQL

Es un sistema de gestión de bases de datos relacional desarrollado bajo licencia dual: Licencia pública general/Licencia comercial por Oracle Corporation y está considerada como la base de datos de código abierto más popular del mundo,12 y una de las más populares en general junto a Oracle y Microsoft SQL Server, todo para entornos de desarrollo web.

Navegador web

Cliente que permite consultar a servidores web y presentar la información HTML. Ejemplos: Firefox, Opera, Chrome, etc.

NodeJS

Node.js es un entorno de tiempo de ejecución de JavaScript multiplataforma que permite a los desarrolladores crear aplicaciones de red y del lado del servidor con JavaScript.

Nginx

Servidor web libre, dicho servidor es mucho más rápido que el servidor de Apache pero dispone de menos funcionalidades.

OOP (Object Oriented Programming)

OOP (Programación Orientada a Objetos) es un enfoque de programación en el que los datos se encapsulan dentro de objetos y se opera con el objeto en sí, en lugar de sus componentes.

JavaScript está muy orientado a objetos. Sigue un modelo basado en prototipos, pero también ofrece una sintaxis de clase para permitir paradigmas típicos de programación orientada a objetos.

OWASP (Open Web Application Security Project)

OWASP (Open Web Application Security Project) es una organización sin ánimo de lucro y red mundial que trabaja por la seguridad en el software libre, especialmente en la Web.

PostgreSQL

Sistema de Gestión de Bases de Datos profesional libre, de alto rendimiento y alta capacidad.

PHP (Hypertext Pre-Processor)

Es un lenguaje de secuencias de comandos del lado del servidor de código abierto que se puede incrustar en HTML para crear aplicaciones web y sitios web dinámicos.

PWA (Progressive Web Apps)

Las aplicaciones web progresivas es un término utilizado para describir el estado moderno del desarrollo de aplicaciones web. Esto implica tomar aplicaciones/sitios web estándar que disfrutan de las mejores partes de la Web, como la capacidad de descubrimiento a través de motores de búsqueda, la vinculación a través de URL y el trabajo en múltiples factores de forma, y potenciarlos con API modernas (como Service Workers y Push) y características que confieren otros beneficios comúnmente atribuidos a las aplicaciones nativas.

Estas características incluyen ser instalables, trabajar sin conexión y ser fáciles de sincronizar y volver a involucrar al usuario desde el servidor.

Plugin

Un complemento del navegador es un componente de software que los usuarios pueden instalar para manejar contenido que el navegador no puede admitir de forma nativa. Los complementos del navegador generalmente se escriben utilizando la arquitectura NPAPI (Interfaz de programación de aplicaciones de complementos de Netscape).

PNG (Portable Network Graphics)

PNG es un formato de archivo de gráficos que admite la compresión de datos sin pérdidas.

Prefetch

La obtención previa es cuando el contenido se descarga en segundo plano, esto se basa en la suposición de que es probable que se solicite el contenido, lo que permite que el contenido se cargue instantáneamente cuando el usuario lo solicite. El contenido se descarga y almacena en caché para un uso futuro anticipado sin que el usuario lo solicite explícitamente.

Prototipo

Un prototipo es un modelo que muestra la apariencia y el comportamiento de una aplicación o producto al principio del ciclo de vida del desarrollo.

Pseudocódigo

El pseudocódigo se refiere a la sintaxis similar a un código que generalmente se usa para indicar a los humanos cómo funciona alguna sintaxis de código, o ilustrar el diseño de un elemento de la arquitectura del código. No funcionará si intenta ejecutarlo como código.

Python

Python es un lenguaje de programación de propósito general de alto nivel. Utiliza un enfoque multiparadigma, lo que significa que admite construcciones de programación procedimentales, orientadas a objetos y algunas funcionales.

Responsive Web Design

Responsive Web Design (RWD) es un concepto de desarrollo web que se enfoca en hacer que los sitios se vean y se comporten de manera óptima en todos los dispositivos informáticos personales, desde computadoras de escritorio hasta dispositivos móviles.

Ruby

Ruby es un lenguaje de programación de código abierto. En un contexto web, Ruby se usa a menudo del lado del servidor con el framework Ruby On Rails (ROR) para producir sitios web/aplicaciones.

REST (Representational State Transfer)

REST (Representational State Transfer) se refiere a un grupo de restricciones de diseño de arquitectura de software que generan sistemas distribuidos eficientes, confiables y escalables.

La idea básica de REST es que un recurso, un documento, se transfiere a través de interacciones cliente/servidor reconocidas, independientes del idioma y confiablemente estandarizadas. Los servicios se consideran RESTful cuando se adhieren a estas restricciones.

Las API de HTTP en general a veces se denominan coloquialmente API RESTful, servicios RESTful o servicios REST, aunque no necesariamente se adhieren a todas las restricciones de REST. Los principiantes pueden suponer que una API REST significa un servicio HTTP al que se puede llamar utilizando herramientas y bibliotecas web estándar.

SSL (Secure Sockets Layer)

Secure Sockets Layer, o SSL, era la antigua tecnología de seguridad estándar para crear un enlace de red encriptado entre un servidor y un cliente, lo que garantiza que todos los datos transmitidos sean privados y seguros. La versión actual de SSL es la versión 3.0, lanzada por Netscape en 1996, y ha sido reemplazada por el protocolo Transport Layer Security (TLS).

SEO (Search Engine Optimization)

SEO (Search Engine Optimization) es el proceso de hacer que un sitio web sea más visible en los resultados de búsqueda, también denominado mejorar las clasificaciones de búsqueda.

Los motores de búsqueda rastrean la web, siguen los enlaces de una página a otra e indexan el contenido encontrado. Cuando busca, el motor de búsqueda muestra el contenido indexado. Los rastreadores siguen reglas. Si sigue esas reglas al pie de la letra al hacer SEO para un sitio web, le da al sitio las mejores posibilidades de aparecer entre los primeros resultados, aumentando el tráfico y posiblemente los ingresos (para el comercio electrónico y los anuncios).

SOAP (Simple Object Access Protocol)

SOAP (Simple Object Access Protocol) es un protocolo para transmitir datos en formato XML.

SPA (Single Page Application)

Una SPA (aplicación de página única) es una implementación de aplicación web que carga solo un documento web y luego actualiza el contenido del cuerpo de ese documento único a través de las API de JavaScript, como XMLHttpRequest y Fetch, cuando se muestra contenido diferente.

Por lo tanto, esto permite a los usuarios usar sitios web sin cargar páginas completamente nuevas desde el servidor, lo que puede resultar en ganancias de rendimiento y una experiencia más dinámica, con algunas desventajas de compensación como SEO, más esfuerzo requerido para mantener el estado, implementar la navegación y lograr un rendimiento significativo de vigilancia.

SVG (Scalable Vector Graphics)

Es un formato de imagen vectorial 2D basado en una sintaxis XML.

El W3C comenzó a trabajar en SVG a fines de la década de 1990, pero SVG solo se volvió popular cuando Internet Explorer 9 salió con soporte SVG. Todos los principales navegadores ahora son compatibles con SVG.

Basado en una sintaxis XML, SVG se puede diseñar con CSS y se puede hacer interactivo usando JavaScript. HTML permite la incrustación directa de etiquetas SVG en un documento HTML.

Servidor

Un servidor es un software o hardware que ofrece un servicio a un usuario, generalmente denominado cliente. Un servidor de hardware es una computadora compartida en una red, generalmente potente y alojada en un centro de datos. Un servidor de software (que a menudo se ejecuta en un servidor de hardware) es un programa que proporciona servicios a programas cliente o una interfaz de usuario a clientes humanos.

Los servicios se proporcionan generalmente a través de redes de área local o redes de área amplia como Internet. Un programa de cliente y un programa de servidor tradicionalmente se conectan pasando mensajes codificados utilizando un protocolo sobre una API.

SQL (Structured Query Language)

SQL (lenguaje de consulta estructurado) es un lenguaje informático descriptivo diseñado para actualizar, recuperar y calcular datos en bases de datos basadas en tablas.

TCP (Transmission Control Protocol)

TCP (Protocolo de control de transmisión) es un protocolo de red importante que permite que dos hosts se conecten e intercambien flujos de datos. TCP garantiza la entrega de datos y paquetes en el mismo orden en que fueron enviados. Vint Cerf y Bob Kahn, que eran científicos de DARPA en ese momento, diseñaron TCP en la década de 1970.

La función de TCP es garantizar que los paquetes se entreguen de manera confiable y sin errores. TCP tiene control de concurrencia, lo que significa que las solicitudes iniciales comienzan pequeñas y aumentan de tamaño hasta los niveles de ancho de banda que pueden admitir las computadoras, los servidores y la red.

URL (Uniform Resource Locator)

Localizador uniforme de recursos (URL), es una cadena de texto que especifica dónde se puede encontrar un recurso (como una página web, una imagen o un video) en Internet.

En el contexto de HTTP, las URL se denominan "dirección web" o "enlace". Su navegador muestra URL en su barra de direcciones, por ejemplo: https://developer.mozilla.org Algunos navegadores muestran solo la parte de una URL después de "//", es decir, el nombre de dominio.

Las direcciones URL también se pueden utilizar para la transferencia de archivos (FTP), correos electrónicos (SMTP) y otras aplicaciones.

UI (User Interface)

La interfaz de usuario (UI) es cualquier cosa que facilite la interacción entre un usuario y una máquina. En el mundo de las computadoras, puede ser cualquier cosa, desde un teclado, un joystick, una pantalla o un programa. En el caso del software de computadora, puede ser un indicador de línea de comandos, una página web, un formulario de entrada de usuario o el front-end de cualquier aplicación.

UX (User Xperience)

Es el estudio de la interacción entre los usuarios y un sistema. Su objetivo es hacer que un sistema sea fácil de interactuar desde el punto de vista del usuario.

El sistema puede ser cualquier tipo de producto o aplicación con el que un usuario final deba interactuar. Los estudios de UX realizados en una página web, por ejemplo, pueden demostrar si es fácil para los usuarios comprender la página, navegar a diferentes áreas y completar tareas comunes, y dónde dichos procesos podrían tener menos fricción.

Variable

Una variable es una referencia nombrada a un valor. De esa manera se puede acceder a un valor impredecible a través de un nombre predeterminado.

Viewport

Una ventana gráfica representa un área poligonal (normalmente rectangular) en gráficos de computadora que se está viendo actualmente. En términos de navegador web, se refiere a la parte del documento que está viendo y que actualmente está visible en su ventana (o en la pantalla, si el documento se está viendo en modo de pantalla completa). El contenido fuera de la ventana gráfica no es visible en la pantalla hasta que se desplaza a la vista.

La parte de la ventana gráfica que está actualmente visible se denomina ventana gráfica visual. Esto puede ser más pequeño que la ventana gráfica de diseño, como cuando el usuario ha hecho zoom con los dedos. La ventana gráfica de diseño sigue siendo la misma, pero la ventana gráfica visual se hizo más pequeña.

W3C (World Wide Web Consortium)

El World Wide Web Consortium (W3C) es un organismo internacional que mantiene marcos y reglas relacionadas con la Web.

Consta de más de 350 organizaciones miembro que desarrollan conjuntamente estándares web, ejecutan programas de divulgación y mantienen un foro abierto para hablar sobre la web. El W3C coordina a las empresas de la industria para asegurarse de que implementen los mismos estándares del W3C.

Cada estándar pasa por cuatro etapas de madurez: Borrador de trabajo (WD), Recomendación candidata (CR), Recomendación propuesta (PR) y Recomendación del W3C (REC).

WHATWG (Web Hypertext Application Technology Working Group)

El WHATWG (Grupo de trabajo de tecnología de aplicaciones de hipertexto web) es una comunidad que mantiene y desarrolla estándares web, incluidos DOM, Fetch y HTML. Los empleados de Apple, Mozilla y Opera establecieron WHATWG en 2004.

WWW (World Wide Web)

La World Wide Web, comúnmente conocida como WWW, W3 o la Web, es un sistema interconectado de páginas web públicas accesibles a través de Internet. La Web no es lo mismo que Internet: la Web es una de las muchas aplicaciones construidas sobre Internet.

Tim Berners-Lee propuso la arquitectura de lo que se conoció como la World Wide Web. Creó el primer servidor web, navegador web y página web en su computadora en el laboratorio de investigación de física del CERN en 1990. En 1991, anunció su creación en el grupo de noticias alt.hypertext, marcando el momento en que la Web se hizo pública por primera vez.

Web Performance

El rendimiento web es el tiempo objetivo desde que se realiza una solicitud de contenido hasta que el contenido solicitado se muestra en el navegador del usuario, los tiempos de procesamiento objetivos y la experiencia subjetiva del usuario del tiempo de carga y el tiempo de ejecución.

Objetivamente, es el tiempo medible, en milisegundos, que tarda la página web o la aplicación web en descargarse, pintarse en el navegador web del usuario y volverse receptiva e interactiva. Son los fotogramas por segundo y las veces que el hilo principal no está disponible para las interacciones del usuario. Subjetivamente, es la percepción del usuario de si el tiempo que transcurre entre el momento en que el usuario solicita el contenido y el tiempo hasta que el usuario siente que el contenido solicitado está disponible y utilizable, lento o rápido.

Web Server

Un servidor web es una pieza de software que a menudo se ejecuta en un servidor de hardware que ofrece servicio a un usuario, generalmente denominado cliente. Un servidor, por otro lado, es una pieza de hardware que vive en una sala llena de computadoras, comúnmente conocida como centro de datos.

WebAssembly

WebAssembly (abreviado Wasm) es un formato de programación binario abierto que se puede ejecutar en navegadores web modernos para mejorar el rendimiento y/o proporcionar nuevas funciones para las páginas web.

WebKit

WebKit es un marco que muestra páginas web con el formato adecuado en función de su marcado. Apple Safari depende de WebKit, al igual que muchos navegadores móviles (dado que WebKit es altamente portátil y personalizable).

WebKit comenzó como una bifurcación de las bibliotecas KHTML y KJS de KDE, pero desde entonces muchas personas y empresas han contribuido (incluidos KDE, Apple, Google y Nokia).

WebKit es una marca comercial de Apple y el marco se distribuye bajo una licencia de formato BSD. Sin embargo, dos componentes importantes se encuentran bajo la LGPL: la biblioteca de renderizado WebCore y el motor JavaScriptCore.

WebSockets

WebSocket es un protocolo que permite una conexión TCP persistente entre el servidor y el cliente para que puedan intercambiar datos en cualquier momento.

Cualquier aplicación cliente o servidor puede usar WebSocket, pero principalmente los navegadores web y los servidores web. A través de WebSocket, los servidores pueden pasar datos a un cliente sin solicitud previa del cliente, lo que permite actualizaciones dinámicas de contenido.

Wrapper

En lenguajes de programación como JavaScript, un wrapper es una función destinada a llamar a una o más funciones, a veces simplemente por conveniencia y, a veces, adaptándolas para realizar una tarea ligeramente diferente en el proceso.

XML (Extensible Markup Language)

El lenguaje de marcado extensible (XML) es un lenguaje de marcado genérico especificado por el W3C. La industria de la tecnología de la información (TI), utiliza muchos lenguajes basados en XML como lenguajes de descripción de datos.

Las etiquetas XML se parecen a las etiquetas HTML, pero XML es mucho más flexible porque permite a los usuarios definir sus propias etiquetas. De esta forma, XML actúa como un metalenguaje, es decir, se puede utilizar para definir otros lenguajes, como RSS. Además, HTML es un lenguaje de presentación, mientras que XML es un lenguaje de descripción de datos. Esto significa que XML tiene aplicaciones mucho más amplias que la Web. Por ejemplo, los servicios web pueden usar XML para intercambiar solicitudes y respuestas.

XHTML

XHTML es un término que históricamente se usó para describir documentos HTML escritos para cumplir con las reglas de sintaxis XML.

Referencias:

De cero a desarrollador web

Santos Romero — Wed, 22 Sep 2021 18:42:56 +0000

De cero a desarrollador web en nueve simples pasos.

Pero antes de comenzar, conozcamos su significado.

🤔¿Qué es el desarrollo web?

El desarrollo web es el trabajo que implica la creación de un sitio web o una aplicación web, puede ser bastante simple como una landing page, o una muy compleja como una red social como Facebook o Twitter. De cualquier manera, esta es una de las industrias más interesantes en este momento.

✋Quiero hacer un descargo de responsabilidad. Hay varios caminos que puedes tomar mientras aprendes desarrollo web. Este es solo uno de tantos, el que yo tomaría si tuviera que empezar de nuevo.

👌Estos pasos van desde cero, por lo que es adecuado para principiantes.

Resumen

Elige un editor
Aprende HTML
Aprende CSS
Aprende JavaScript
Construye proyectos
Aprende Git & GitHub
Elige un framework de JavaScript
Construye un portafolio
Postula

🚀vamos allá🚀

1. Elige un editor de código

Hay muchos editores de código disponibles como Visual Studio Code, Sublime Text, Atom, etc. Sugiero utilizar Visual Studio Code porque tiene múltiples extensiones y una gran comunidad.
Puedes obtenerlo aquí. Descarga VS Code

2. Aprende HTML

HTML (HyperText Markup Language) Lenguaje de Marcado de HiperTexto.

HTML permite estructurar/marcar el contenido de una página web. Piensa algo así como el esqueleto humano. Hay muchos recursos disponibles para aprender. Recomiendo ampliamente FreeCodeCamp y W3Sshools para empezar.

3. Aprende CSS

CSS (Cascading Style Sheets) Hojas de Estilo en Cascada.

CSS permite mejorar la apariencia de una página web. Piensa algo así como la piel del cuerpo humano. Recomiendo nuevamente FreeCodeCamp y W3Schools para empezar.

4. Aprende JavaScript

JavaScript es el lenguaje de programación de la web y más popular del mundo.

JavaScript permite programar el comportamiento de las páginas web. Imagina a una persona caminando, brincando. Nuevamente recomiendo FreeCodeCamp y W3Schools para empezar.

5. Construye proyectos

Mejora tus habilidades codificando proyectos reales. Si no tienes ideas, visita Frontend Mentor o Dev Challenges para comenzar, allí puedes elegir un desafío, descargar los archivos de diseño y empezar a codificar. Es perfecto para principiantes en desarrollo web.

Recomiendo documentar el proyecto. Frontend Mentor tiene un plantilla muy completa.
Hasta este punto, ya puedes postular a empleos.

6. Aprende Git y GitHub

Git es un software de control de versiones diseñado por Linus Torvalds, funciona en el computador local, y esta es la principal diferencia con GitHub.

GitHub es un repositorio en la nube para alojar proyectos utilizando el sistema de control de versiones Git.

Git y GitHub están relacionados. Git trabaja de forma local y GitHub trabaja en la nube donde se suben los repositorios de proyectos.
Estos recursos son ideales para comenzar.

7. Elige un framework de JavaScript

Framework es un marco de trabajo que abarca un proyecto completo bajo ciertas reglas.

Librería es un conjunto de funcionalidades que resuelven necesidades específicas de un proyecto.

React es la librería más popular de JavaScript en el momento.
Vue es el framework más popular de JavaScript.

Recomiendo empezar con cualquiera de estos (React, Vue) y después puedes aprender otro. Mira estos tutoriales de Traversy Media y The Net Ninja para comenzar.

8. Construye un portafolio

Un portafolio es la vitrina de tus mejores proyectos que has desarrollado a lo largo de tu aprendizaje. Si eres de las personas que busca crear un portafolio único, te sugiero algunas ideas de portafolio que puedes utilizar.

9. Postula

Hay muchos sitios disponibles para encontrar trabajo remoto. Recomiendo los siguientes sitios.

Conclusión

Hay muchos caminos que puedes tomar para convertirte en desarrollador web, puedes comprar un curso o puedes crear tu propia ruta de aprendizaje; de cualquier modo, si tienes claro lo que quieres lograr y la disciplina de aprender, sin duda conseguirás ser un desarrollador web competitivo.

Gracias por leer este artículo.
Siempre estoy dispuesto a ayudar, puedes seguirme en Twitter (xantosromero) para saludarme.

¿Estudias online?

Descarga la plantilla de estudio frontend gratis.

Forem: Santos Romero

Despliegue de página web

Crear repositorio remoto

Crear repositorio local

Proyecto web

Estructura del proyecto

Proyecto base

Instalación y configuración

Descarga

Instalación

Configuración

Establece el nombre

Establece el correo

Consulta la configuración

Conclusión

Agregar botón Buymeacoffe en tu Dev.to

SI TE GUSTÓ EL POST, PUEDES COMPRARME MI PRIMER CAFÉ, GRACIAS DE ANTEMANO

Day 03: HTML Basic

Documentos HTML

La declaración DOCTYPE

Encabezados

Párrafos

Enlaces

Imágenes

¿Cómo ver la fuente HTML?

Ver el código fuente

Inspeccionar un elemento

Resumen

Day 02: HTML Editors

Aprende usando Notepad

Paso 1: Abre Notepad

Paso 2: Escribe código HTML

Paso 3: Guarda el archivo

Paso 4: Abre el documento en el navegador

Visual Studio Code

Codepen

Stackblitz

Resumen

Day 01: HTML Introduction

¿Qué es HTML?

Un simple documento HTML

¿Qué es un elemento HTML?

Los navegadores

Estructura de una página web

Historia de HTML

Resumen

Aprende CSS: Crea el logo de Microsoft

Setup

Proyecto inicial

HTML

CSS

CSS Grid

Conclusión

Glosario de términos en el desarrollo web

404

AMPs (Accelerated Mobile Pages)

Algoritmo

API (Application Programming Interface)

Aplicación

Atributo

AJAX (Asynchronous JavaScript And XML)

Accesibilidad

Adobe Flash

Array

ASCII (American Standard Code for Information Interchange)

Apache

Back-end

Bug

Bootstrap

Base de datos

Boolean

Cache

Código abierto

CSS (Cascading Style Sheets)

Cookies

CDN (Content Delivery Network)

CMS (Content Management System)

CRUD (Create, Read, Update, Delete)

CRM (Customer Relationship Management)

DBMS (DataBase Management System)

La declaración `DOCTYPE`