Cursos online y materiales digitales para estudiantes y desarrolladores web

Ada

Boleticode #08 – F***ing React (y feliz año)

Publicado el por Leave a Comment

¡Hola! ¡Feliz año!

¿Me echabas de menos? ¡Normal! 😉 He pasado unas Navidades de desconexión digital y ahora pasa lo que pasa… que se acumula el trabajo. En primer lugar, disculpas a tod@s los que habéis tenido problemas al suscribiros a la web: el problema con el servicio ya está solucionado y debería dejaros 😊

Sigamos. ¿Sabes lo que es procrastinar? Básicamente es dejar para mañana lo que puedes hacer hoy.

Es decir, lo que estaba haciendo yo con el p******o curso de React.

Pues bien, que sepas que… ¡la maquinaria está en marcha! Primeras lecciones redactadas, primeros scripts horneándose…

El caso es que antes de tirarme a la piscina sin flotador, necesito un@s conejill@s de indias interesad@s en el curso. Si te ves con cara de cobaya y te apetece echarme un cable solo tienes que hacer clic en el siguiente botón. De momento te ofrezco agradecimiento infinito, ¡que no es poco!

¡Quiero ser una cobaya! 🐹

Y ahora al lío: aquí tienes las últimas novedades de la web desde el último boleticode (que ya llovió):

⚒️ Herramientas

🚀 Retos de la semana:

¡La sección evoluciona! Y creo que os va a gustar… ¡pero os lo contaré la semana que viene!

🧙 Tips&Tricks:

En proceso esta mini serie de vídeos de seguridad en páginas web para dummies.

Empezamos con la eterna pregunta… ¿es seguro validar un formulario con Javascript? (¿Aún estamos así? ¡Ayyyyy…!).

📓 Cursos en proceso:

Minicurso de Javascript Moderno (ES6 Esencial) ¡1 lección cada viernes!

  • Javascript ES6 – #16. Destructuring o desestructuración
  • Javascript ES6 – #17. Objeto Map
  • Javascript ES6 – #18. Objeto Set
  • Javascript ES6 – #19. Bucle for…of
  • Javascript ES6 – #20. Nuevos métodos del objeto Number

¡EMPEZADO Y TERMINADO!
Curso de Javascript V: Interacción con el usuario. Eventos, formularios, cookies y WebStorage (¡2 lecciones semanales!)

  • Javascript – #5.01. DOM. Acceso y modificación de elementos. Texto y atributos
  • Javascript – #5.02. DOM. Creación, sustitución y borrado de elementos
  • Javascript – #5.03. DOM. Acceso y navegación por elementos

Para finalizar, te recuerdo que puedes hacerme llegar tus comentarios, propuestas, dudas o reflexiones a través de la sección de Contacto. ¡Estaré encantada de responder!

Un abrazo, desde el confinamiento (esta vez por municipios… 😒):

Laura, Ada… ¡y Edu!

Cómo deshabilitar Javascript en todos los navegadores

Publicado el por Leave a Comment

A estas alturas ya tenemos claro que realizar una validación de un formulario únicamente utilizando HTML5 y Javascript no es seguro, y que la finalidad de este tipo de validación es otra.

Y de hecho, hemos aprendido a saltarnos la validación HTML5 de un formulario únicamente con un par de palabras reservadas en el código HTML de la página mediante la consola del navegador.

Pues bien, en este post le toca el turno a Javascript. Y es que podemos evitar toda ejecución de código Javascript deshabilitándolo en el navegador.

¿Quieres saber cómo hacerlo en Mozilla Firefox, Chrome, Safari o Edge? ¡Te lo cuento!

Y tú, ¿conoces otras maneras de saltarte la validación de un formulario del lado del cliente?

Cómo saltarse la validación HTML5 de un formulario

Publicado el por Leave a Comment

En un post anterior explicaba lo poco seguro que es realizar la validación de un formulario únicamente utilizando HTML5 y Javascript.

De hecho, saltarse la validación HTML5 es tan sencillo como introducir un par de palabras reservadas en el código HTML utilizando la consola del desarrollador de nuestro navegador.

¿No te lo crees? ¡Echa un ojo al vídeo!

Y tú, ¿conoces otras maneras de saltarte la validación de un formulario del lado del cliente?

¿Es seguro validar un formulario con Javascript?

Publicado el por 6 Comments

A veces pensamos que con hacer una buena validación con HTML5 e incluso con Javascript es suficiente para hacer un formulario seguro… ¡nada más lejos de la realidad!

En el vídeo de esta lección podrás ver con detalle por qué es necesario validar del lado del cliente, y por qué no es suficiente.

Tipos de validación

En primer lugar tenemos que tener en cuenta que hay dos tipos de validación:

  • Validación del lado del cliente: podemos realizarla, a su vez, con la validación incorporada de las etiquetas HTML5, y personalizarla a nuestro gusto con Javascript.
  • Validación del lado del servidor: que debemos hacerla desde el lenguaje de programación de servidor (PHP, ASP, JSP, etc.) y desde las propias restricciones de la base de datos.

Por qué validar desde el lado del cliente

Hay dos razones básicas por las que la validación del lado del cliente es necesaria:

  • Mejora la experiencia de usuario, algo esencial en el desarrollo web. (¿Que qué es eso? ¡Echa un ojo al vídeo y te lo explico!).
  • Evita los retrasos de la comunicación entre el cliente y servidor.

Estamos rodeados de buenos y malos ejemplos de experiencia de usuario todos los días. En el vídeo vemos cómo Amazon y el Ministerio de Educación y Formación Profesional son dos muestras de ello… ¿cuál es cuál?

Por qué NO solo validar desde el lado del cliente

Ya está claro por qué la validación del lado del cliente es necesaria. Ahora debemos saber que la validación solo desde el lado del cliente es una práctica muy arriesgada porque evitarla es tan fácil como hacer un par de clicks.

En este vídeo verás en qué consisten cada una de las validaciones que he mencionado, las razones por las que la validación del lado del cliente es necesaria y por qué es insegura. ¿Quieres verlo? ¡A qué esperas! 😊

Descargar e instalar XAMPP en Windows y OS X

Publicado el por 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!

Boleticode #07 – Y tú, ¿de quién eres? (¿de naranja o de limón)

Publicado el por Leave a Comment

¡Hola!

Voy a ir al grano: ¿ya has actualizado tu perfil? ¿No? Pues sería genial que lo hicieras, de verdad. Más que nada porque así me puedo saber “de quién eres“. ¿De FP o de Universidad? ¿Desarrollador/a o programador/a por amor al arte?

Y, de paso, comentarte alguna idea para que, si te animas, te conviertas en el conejillo de indias de mis perversos planes (leer con voz distorsionada de malvado de la película 😈). Tranquil@, no hay que inyectarse lejía en vena… ni probar las alcachofas con jamón de Edu. Palabra.

Así que, lo primero, si tienes un minuto y te apetece, entra en Mi cuenta > Editar Perfil y pon un par de datos. Me conformo con saber si eres estudiante, desarrollador…; y ya si pones el país te invito a un/a –introduzca aquí su bebida favorita-. Hombre, también puedes mentirme y poner que eres estudiante de FP afincado en Zimbabwe. Pero haré como que no lo he visto.  ¡Ah! De antemano, mil gracias 😊

¡Quiero editar mi perfil!

Y dicho esto, te comento las últimas novedades de la web desde la última vez… que te las conté.

⚠️ Cinco consejos para empezar a aprender Javascript

En respuesta a las recomendaciones que much@s me pedís a través de correo electrónico, te dejo este pequeño vídeo con cinco consejos que, desde mi punto de vista, deberías conocer antes/durante/siempre que trabajes con Javascript.

🔍 ¡Habemus buscador!

Incorporación en la barra de menú (con vistas de mejora) gracias a la propuesta de nuestro codelover David S. ¡Mil gracias, David, por todo tu feedback!

⚒️ ¡Inauguramos la sección de Herramientas!

En ella te iré hablando de programas, extensiones de navegador, aplicaciones web, etc. interesantes para tu día a día como desarrollador/a o técnico/a. Estos son los tres primeros analizados y comparados. ¡Se admiten sugerencias!):

🚀 Retos de la semana:

Seguimos resolviendo retos: despacito pero sin pausa.

🧙 Tips&Tricks:

Como novedad, resuelvo una duda planteada en Youtube con un pequeño snippet de código. ¿Será la primera de muchas?

📓 Cursos en proceso:

Minicurso de Javascript Moderno (ES6 Esencial) ¡1 lección cada viernes!

  • Javascript ES6 – #10. Clases
  • Javascript ES6 – #11. Clases. Herencia
  • Javascript ES6 – #12. Clases. Métodos get y set
  • Javascript ES6 – #13. Clases. Métodos estáticos (static)
  • Javascript ES6 – #14. Template strings. Plantillas de cadena de texto
  • Javascript ES6 – #15. Módulos. Import y export

 

¡EMPEZADO Y TERMINADO!
Curso de Javascript IV: Interacción con el usuario. Eventos, formularios, cookies y WebStorage (¡2 lecciones semanales!)

  • Javascript – #4.01. Modelo de eventos en línea
  • Javascript – #4.02. Modelo de eventos tradicional
  • Javascript – #4.03. Modelo de eventos del W3C
  • Javascript – #4.04. Modelo de eventos de Microsoft
  • Javascript – #4.05. Obtención de información de un evento
  • Javascript – #4.06. Validación básica de formularios con Javascript
  • Javascript – #4.07. Validación básica de formularios con HTML5
  • Javascript – #4.08. Validación avanzada de formularios con HTML5 y Javascript
  • Javascript – #4.09. Cookies. Introducción
  • Javascript – #4.10. Cookies. Ejemplo sencillo
  • Javascript – #4.11. Cookies. Ejemplo avanzado
  • Javascript – #4.12. Web Storage. Introducción
  • Javascript – #4.13. Web Storage. Ejemplo completo

Para finalizar, te recuerdo que puedes hacerme llegar tus comentarios, propuestas, dudas o reflexiones en voz baja a través de la sección de Contacto. ¡Estaré encantada de responder!

Un abrazo, desde el confinamiento:

Laura, Ada… ¡y Edu!

PD. Lo sé. Sé que los “menos jóvenes”, al leer el asunto del e-mail, habéis recordado este anuncio de Fanta del 99… 😉