• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉN SOY
  • FAQ
  • ACCEDER
  • CONTACTO

editor de código

Aprende desestructuración en 5 minutos

Publicado el 14/11/2023 por Ada Leave a Comment

Logotipo de Javascript

Si alguna vez has trabajado con Arrays y Objetos en Javascript es posible que hayas tenido que guardar parte de estos elementos en variables.

El proceso puede resultar un poco rollo si tenemos que ir elemento a elemento del array, objeto , función, etc. creando las variables correspondientes. Sin embargo, desde ES6 hay un nuevo concepto que nos permite hacer esto de una manera súper sencilla.

Se llama desestructuración, o destructuring y nos permite precisamente eso: descomponer un array u objeto en elementos independientes que podemos asignar a variables o constantes ¡en una única instrucción!

En el siguiente vídeo realizado en colaboración con Garage de Ideas te enseño en cinco minutitos qué es la desestructuración y los diferentes tipos:

Código fuente del ejemplo

En el siguiente código fuente puedes ver todo lo tratado en el vídeo:

const lenguajes = ["Javascript", "C++", "Ada", "Python"];
const [j, c] = lenguajes;
console.log(j);
console.log(c);

const[primero, ...rest] = lenguajes;
console.log(primero);
console.log(rest);

let d, s;
[d, s="Swift"] = ["Delphi", "Scala"];
console.log(d);
console.log(s);

const agencia = {
    nombre: "Garage de ideas",
    anio: 2015,
    verdad: true
}

/*const {nombre, verdad} = agencia;
console.log(nombre);
//console.log(anio);
console.log(verdad);*/

/*const {nombre, ...rest2} = agencia;
console.log(nombre);
//console.log(anio);
console.log(rest2);*/

const {nombre: n, anio: a} = agencia;
console.log(n + " " + a);

Si quieres aprender algunas de las características más importantes de Javascript Moderno, ¡pásate por el curso de Didacticode!

Filed Under: Herramientas, Tips & Tricks Tagged With: editor de código, extensión, php, visual studio code, vsc

Configura tu Visual Studio Code para trabajar con PHP

Publicado el 07/11/2023 por Ada Leave a Comment

¿Has tenido que trabajar alguna vez con PHP? Seguro que te has preguntado cuál es el mejor modo de configurar tu editor de Visual Studio Code para sacar todo el partido con este lenguaje.

Pues bien, en este vídeo en colaboración con Garage de Ideas te enseño la configuración básica de Visual Studio Code para PHP y algunos de los plugins que más me gustan para trabajar con este lenguaje:

Configuración de PHP

Lo primero que tenemos que hacer es revisar la configuración del VSC para ver cómo está configurado PHP. Para ello accedemos a Configuración y escribimos PHP. Veremos que hay varias opciones:

  1. Suggest: permite controlar si están habilitadas las sugerencias de PHP.
  2. Validate: habilita o deshabilita la validación integrada de PHP.
  3. Path ejecutable: permite configurar la ruta del ejecutable de PHP.

¿Que no sabemos dónde encontrar la variable? Es muy sencillo.

  • En Mac podemos escribir en el terminal: which php
  • En Windows podemos hacer clic con el botón secundario en Mi PC y, a continuación, hacer clic en Propiedades. Luego clic en la pestaña Opciones avanzadas y ahí en Variables de entorno.

Extensiones para PHP

Veamos ahora algunas de las extensiones más importantes para aprovechar a tope todas las características del lenguaje:

  • En primer lugar veremos PHP, de Devsense, que ofrece multitud de características:
    • Completado rápido de código con tooltips informativos, etc.
    • Creación de getters, setters, implementación de interfaces.
    • Generación de PHP Doc, etc.
  • Otra extensión que no puede faltar es PHP Debug, de Xdebug, un adaptador entre Xdebug y VSC que nos permite realizar depuración avanzada para scripts de PHP. La instalación tiene su aquel, así que os recomiendo que sigáis las indicaciones del pluggin.
  • Ben Mewburn nos ofrece PHP Intelephense, que permite trabajar de forma productiva con PHP ofreciendo un montón de características interesantes, como
    • completado de código (intellisense).
    • ayuda para la creación de métodos, funciones, etc.
    • búsquedas avanzadas.
  • También hablaremos de Intellisense for PHP, que además de permitir finalizar código, ofrece multitud de información en sugerencias contextuales mientras escribes código PHP.
  • Veamos ahora PHP Awesome Snippets, que genera código automáticamente a partir de pequeños atajos:
    • php
    • gss
    • eco
  • Y por último, PHP DocBlocker, que te ayuda a generar automáticamente bloques de documentación PHP con solo presionar un atajo de teclados.

¿Las conocías? ¿Qué te parecen? ¡Deja tus comentarios por ahí debajo y cuéntamelo!

Filed Under: Herramientas, Tips & Tricks Tagged With: editor de código, extensión, php, visual studio code, vsc

Comparativa de editores de código online

Publicado el 08/11/2020 por Ada Leave a Comment

JSFiddle
JSFiddle
Codepen
Codepen
JSBin
JSBin

Editores de código online

Un editor de código online es una estupenda alternativa a los editores de código instalados en nuestro equipo. Entre otras cosas, nos permiten trabajar desde cualquier equipo sobre nuestra cuenta solo con un navegador web, sin necesidad de instalar programas.

Pero no solo eso: la mayoría ofrecen una serie de características muy interesantes, como la posibilidad de compartir los proyectos fácilmente mediante una URL e incrustarlos en una página web. Algunos también permiten trabajar de manera colaborativa sobre el mismo código, compartirlo en comunidades de desarrolladores web, etc.

Editores de código analizados

En esta lección vamos a ver tres de los editores de código más interesantes que nos podemos encontrar hoy en día en Internet. Podéis ver sus características en detalle en cada uno de los siguientes enlaces:

  1. JSFiddle: permite probar y compartir fragmentos de código HTML, CSS y Javascript creados por el usuario o colaborativos sin necesidad de login. Además puede realizar llamadas AJAX simuladas, inclusión de fuentes externas, librerías y frameworks, etc.
  2. Codepen: a diferencia de JSFiddle, no dispone de la posibilidad de trabajar simultáneamente sobre el mismo código ni compartir de manera anónima; pero ofrece una comunidad de desarrolladores muy potente con la que colaborar.
  3. JSBin: aunque es el más limitado de los tres y dispone una interfaz bastante minimalista, ofrece una gran cantidad de opciones de personalización.

Comparativa

Y tú, ¿con cuál te quedas? ¿Conoces otras alternativas interesantes? ¡Déjame un comentario y cuéntamelo!

Filed Under: Herramientas Tagged With: codepen, editor de código, herramientas, jsfiddle

Herramienta: JSBin

Publicado el 25/10/2020 por Ada Leave a Comment

¿Qué es JSBin?

JSBin es otra fantástica herramienta online que, al igual que Codepen y JSFiddle permite a los usuarios editar y ejecutar código HTML, JavaScript y CSS en una sola página. Además, permite incluir fácilmente librerías con solo seleccionarlas en un desplegable.

Las posibilidades de configurar la interfaz son más limitadas porque solo permite descubrir u ocultar las diferentes columnas, que no solo incluyen los lenguajes de programación y el resultado, sino también una columna de consola.

¿Qué características ofrece?

  1. Distintos lenguajes de programación web: HTML, XHTML, Markdown, CSS, SCSS, SASS, Processing, Javascript, Typescript, Coffeescript, etc.
  2. Guardado y compartición de código de manera pública (es necesario tener cuenta y estar logueado) y privada (versión premium).
  3. Bifurcación de código (fork) y control de snapshots.

Análisis a fondo de la herramienta

Web oficial

JSBin.com

Versiones

Sólo online

Precio

Versión gratuita
Versión de pago (12,99£/mes o 99,99£/año)

Y tú, ¿la has probado? ¿Qué te parece? ¿Conoces alternativas interesantes? ¡Déjame un comentario y cuéntamelo!

Filed Under: Herramientas Tagged With: editor de código, herramientas

Herramienta: Codepen

Publicado el 17/10/2020 por Ada 2 Comments

¿Qué es Codepen?

Codepen es un IDE online que permite a los usuarios editar y ejecutar código HTML, JavaScript y CSS en una sola página. Además, es posible utilizar alternativas a estos lenguajes como SCSS o SASS, Typescript, Coffeescript, etc.
Tiene una interfaz minimalista dividida en cuatro marcos principales correspondientes con los tres lenguajes citados anteriormente y un cuarto marco que muestra el resultado del proyecto ejecutado.

¿Qué características ofrece?

  1. Distintos lenguajes de programación web: HTML, XHTML, CSS, SCSS, SASS, Javascript, Typescript, Coffeescript, Vue, React, etc.
  2. Guardado y compartición de código de manera pública (es necesario tener cuenta y estar logueado) y privada (versión premium).
  3. Bifurcación de código (fork).
  4. Opciones de edición de código: verificación de sintaxis, sangría automática, autocompletar, etc.
  5. Opciones de formateo de código, análisis, maximización y minimización, etc.
  6. Comunidad de desarrolladores que comparten su código, con posibilidad de filtrar, guardar como favoritos, participar en retos, etc.

Análisis a fondo de la herramienta

Web oficial

codepen.io

Versiones

Sólo online

Precio

Versión gratuita
Versión de pago (8€/mes o 96€/año)

Y tú, ¿la has probado? ¿Qué te parece? ¿Conoces alternativas interesantes? ¡Déjame un comentario y cuéntamelo!

Filed Under: Herramientas Tagged With: codepen, editor de código, herramientas

Herramienta: JSFiddle

Publicado el 10/10/2020 por Ada 2 Comments

JSFiddle
IDE online

JSFiddle

Hoy analizaremos a fondo JSFiddle, una herramienta genial no solo para probar código web de manera online. También nos permitirá compartirlo, trabajar de manera colaborativa, etc.

¿Qué es JSFiddle?

JSFiddle es un IDE online que permite a los usuarios editar y ejecutar código HTML, JavaScript y CSS en una sola página. Además, es posible utilizar alternativas a estos lenguajes como SCSS o SASS, Typescript, Coffeescript, etc.
Tiene una interfaz minimalista dividida en cuatro marcos principales correspondientes con los tres lenguajes citados anteriormente y un cuarto marco que muestra el resultado del proyecto ejecutado.

¿Qué características ofrece?

  1. Distintos lenguajes de programación web: HTML, XHTML, CSS, SCSS, SASS, Javascript, Typescript, Coffeescript, Vue, React, etc.
  2. Guardado y compartición de código de manera pública (sin necesidad de login) y privada (versión premium).
  3. Incrustación de código con script o iframe.
  4. Edición de código colaborativa y simultánea con chat y micrófono.
  5. Bifurcación de código (fork).
  6. Opciones de edición de código: verificación de sintaxis, sangría automática, autocompletar, etc.

Análisis a fondo de la herramienta

Web oficial

jsfiddle.net

Versiones

Sólo online

Precio

Versión gratuita
Versión de pago (8€/mes o 90€/año)

Y tú, ¿la has probado? ¿Qué te parece? ¿Conoces alternativas interesantes? ¡Déjame un comentario y cuéntamelo!

Filed Under: Herramientas Tagged With: editor de código, herramientas, jsfiddle

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2026

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los .

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.