• 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

Herramientas

Extensiones para Visual Studio Code: Live Server y Five Server

Publicado el 30/04/2023 por Ada 4 Comments

¿Qué son Live Server y Five Server?

Live Server y Five Server son dos extensiones de Visual Studio Code que permiten crear un servidor web en tu equipo.

¿Pero qué es un servidor web?

Un servidor web permite servir contenido web a través de un puerto específico en el equipo local. Así el contenido estará accesible a través de un navegador. De este modo podemos utilizarlo para visualizar y probar aplicaciones web de manera sencilla y rápida.

Podemos abrir perfectamente un archivo HTML sin un servidor utilizando un navegador. Así vemos el contenido del archivo pero no necesariamente lo estamos sirviendo a través de un servidor web.

En cambio, si usamos Live Server, servimos el contenido a través de un servidor web local que ejecuta nuestro código en tiempo real y que, además, nos permite realizar cambios y ver los resultados inmediatos sin actualizar la página en el navegador cada vez que hacemos un cambio en el código, pudiendo interactuar con la aplicación de manera dinámica.

¿Qué características ofrecen?

Tal y como indica el desarrollador de Live Server, Ritwick Dey, en la página web oficial de la extensión, las características que ofrece son, entre otras:

  • Un servidor web de desarrollo rápido con recarga de navegador en vivo.
  • Iniciar y detener el servidor con un solo clic en la barra de estado.
  • Soporte para excluir archivos para detección de cambios.
  • Control de teclas de acceso rápido.
  • Número de puerto personalizable, raíz del servidor, navegador predeterminado.
  • Compatibilidad con cualquier navegador (p. ej., Firefox Nightly) mediante la línea de comandos avanzada.
  • Conexión remota a través de WLAN.
  • Soporte SVG, https, para proxy y para cualquier archivo, incluso páginas dinámicas, a través de Live Server Web Extension.
  • Admite espacio de trabajo multiroot.
  • Soporte https.

Por su parte, Yannick, en la página oficial de Five Server, cuenta que su extensión permite:

  • Actualizar archivos al instante mientras escribes en el teclado.
  • Resalta el código en el que estás trabajando en tu navegador.
  • Navega automáticamente a través del navegador al archivo de edición actual.
  • Incluye soporte PHP para server y recargar en vivo los archivos .php.
  • Admite toda las aplicaciones renderizadas del lado del servidor, como express.js.
  • Registros remotos visibles en la terminal.

Análisis a fondo de la extensión

Pero si lo que quieres es ver cómo funciona la extensión a fondo, en este videotutorial que he grabado para Garage de Ideas podrás verla en vivo y en directo:

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

Filed Under: Herramientas Tagged With: extensión, herramientas, visual studio code

Extensiones para Visual Studio Code: SFTP

Publicado el 31/01/2021 por Ada 2 Comments

¿Qué es SFTP?

SFTP es una extensión que permite sincronizar tu directorio local con el directorio de tu servidor remoto. Mediante un sencillo fichero de configuración (sftp.json), ofrece la posibilidad de configurar los ficheros que deseas sincronizar o ignorar, realizar la carga automática, establecer diferentes perfiles de producción, etc.

¿Qué características ofrece?

Tal y como indica su desarrollador, Liximomo, en la página web oficial de la extensión, las características que ofrece son las siguientes:

  • Explorador remoto del servidor.
  • Comprobación de las variaciones entre directorio local y remoto.
  • Sincronización de directorio.
  • Subida y bajada de ficheros de local a remoto y viceversa.
  • Subida de ficheros automática al guardar.
  • Configuración de watcher de directorios, ficheros o extensiones.
  • Creación de configuraciones múltiples.
  • Conmutación de perfiles.

Análisis a fondo de la herramienta

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

Filed Under: Herramientas Tagged With: extensión, herramientas, visual studio code

Descargar e instalar XAMPP en Windows y OS X

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

Si eres desarrollador web y trabajas en local es muy probable que necesites un servidor web instalado en tu ordenador. Y, sin duda, XAMPP es una excelente opción.

¿Qué es XAMPP?

XAMPP es un paquete de software libre que contiene un servidor web Apache, un gestor de bases de datos MariaDB/MySQL y los intérpretes para lenguajes de script PHP y Perl. De ahí las siglas de su nombre: XAMPP.

¿Y la X? Pues bien, la X indica que XAMPP está disponible para los diferentes sistemas operativos (Windows, OS X, Linux…); de hecho, podemos encontrar distribuciones WAMP (para Windows), MAMP (para Mac OS) y LAMP (para Linux).

¿Dónde podemos descargar XAMPP?

Como siempre digo, el mejor lugar para descargar un software es su página web oficial, y en este caso se trata de la página de ApacheFriends.org, donde no solo podréis encontrar el programa disponible para todos los sistemas operativos, sino también versiones anteriores, complementos (WordPress, Moodle, MediaWiki, etc.), enlaces a la comunidad, etc.

Descarga e instalación de XAMPP en Windows

En el siguiente videotutorial verás cómo descargar XAMPP para Windows de la página oficial, su instalación paso a paso y conocerás la interfaz del programa para empezar a trabajar con él.

Descarga e instalación de XAMPP en Mac OS X

A continuación también tienes el vídeo para la versión de XAMPP del sistema operativo OS X, en el que lo descargaremos, instalaremos y realizaremos las primeras configuraciones de la aplicación.

¿Tú también trabajas con XAMPP? ¿O utilizas otras herramientas?

¿No te ha quedado claro? ¿Quieres aportar tu punto de vista? ¡Deja tu comentario!

Filed Under: Herramientas Tagged With: herramientas, servidor, xampp

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

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

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 © 2023

¡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.