Los Temas más visitados de JavaScript

Explica como agregar eventos genéricos a un componente, también genérico, creado en videos anteriores. EL componente PUBLICA un evento al cual se SUSCRIBE el componente padre mediante un método de atención, para ser informado de las novedades que ocurren en el componente hijo y pueda actuar en consecuencia. Para el ejemplo la novedad será una selección sobre un ítem de la lista por parte del usuario, de ahí el nombre del evento creado, OnSelect.

Los datos en la mayoría de los casos provienen de servicios web que no son instantáneos, por lo cual nuestro listador genérico debe comportarse mostrando una espera que indique al usuario el inicio y el fin de la carga. En este video mostraremos como desarrollar ese comportamiento.

Aprenderás como hacer un formulario con el famoso estilo de google conocido como Material Design.

Puedes utilizar este diseño de formulario para cualquier cosa, ya sea un formulario para registrar usuarios o un formulario de contacto, ademas este formulario es adaptable a dispositivos móviles por lo que es una buena alternativa a los formularios tradicionales y aburridos.

El principal objetivo es garantizar que los datos enviados a través de un formulario sean completos, precisos, seguros y consistentes. Esto se logra a través de controles de validación de datos y reglas que se comprueba al validar el formulario.

Índice de Contenidos:
1.- ¿Para qué sirve validar campos de un formulario?
2.- Ejemplo práctico
2.1.- Principales restricciones
2.2.- Formulario de origen
3.- Validar campos en HTML5
4.- Validar campos en JavaScript
4.1.- Funciones utilizadas
5.- Validar campos en jQuery
6.- Validar campos en PHP
7.- Consejos

Watermark es una librería jquery que nos permite crear marcas de aguas para nuestras imágenes de forma muy sencilla, y que utiliza para ello el nuevo concepto de Canvas que incluye HTML.

Compañeros de convirtiéndote.pro este día les traigo un ejemplo sencillo de cómo crear nuestra primera librería en JS como les comento es algo sencillo para ir aprendiendo solo serian los primeros pasos de una librería extensa en un futuro.
¿De qué trata?, vamos a realizar nuestra primera librería que su tarea será validar formularios… de echo es un proyecto a futuro que me gustaría concretar y liberarla en forma, pero por falta de tiempo mejor tomare un poco de código y lo convertimos en un tutorial para ustedes.

Todo lo necesario para entender el objeto Array en JavaScript lo encontrarás en este artítulo. Creación, longitud, concatenación, inserción y eliminación de elementos, modificar el orden de los elementos, convertir en cadena de texto y rango de los elementos. Realizado por Francisco J. Martín Mateos, Universidad de Sevilla

Hoy os traemos otro post-receta para Google Tag Manager: una solución completa y configurable para medir vídeos HTML5 incrustados directamente en una página; es decir, con etiquetas <video> en lugar de mediante reproductores de terceros.

Si hablamos de mapas en la web, sin duda la referencia más conocida es Google Maps. En su momento revolucionó la forma en que los mapas podían ser vistos en internet. Hoy en día mantiene su liderazgo en muchas cuestiones, como los servicios de geolocalización, datos de tráfico, cálculo de rutas…y además con cobertura global.

Google es la marca comercial más reconocida en el mundo. Esto contribuye, sin duda a la popularidad y extensión de Google Maps, pero es que además dispone de Maps JavaScript API que permiten visualizar, y publicar nuestros mapas en la web.

En este artículo veremos paso a paso cómo crear un mapa web con la API de Google Maps, analizamos sus ventajas e inconvenientes y lo comparamos con otras librerías de mapas open source.

Índice de Contenidos:
1.- Como crear un mapa web con la API JavaScript de Google Maps
1.1.- Carga de la librería Javascript de la API de Google Maps
1.2.- Añadiendo un marcador
2.- Ventajas e inconvenientes de la API de Google Maps
3.- Comparativa con las librerías OpenSource

Como ya sabes, hemos cubierto React y Angular.js en anteriores artículos, pero existe una nueva librería frontend que de seguro te interesará. Se llama Vue.js y cuenta con una gran comunidad de entusiastas desarrolladores detrás.

La filosofía de Vue.js es proporcionarnos una API lo más simple posible para crear proyectos de tal manera que la vista (HTML) y el modelo (Javascript) fluyan en perfecta sincronía. Como verás en los siguientes ejemplos, la librería se mantiene fiel a esa idea y es por eso que es muy sencillo trabajar con ella, sin comprometer ninguna otra funcionalidad.

Los Framework Javascript y Ajax más conocidos, utilizados para webs 2.0.

Desarrollar aplicaciones en Javascript puede convertirse en todo un desafío una vez que empieza a crecer tanto la aplicación como el equipo, originalmente se pensó como un lenguaje para hacer efectos sencillos en la páginas estáticas, y estamos intentándolo usar para hacer aplicaciones mucho más complejas de lo que se pensó originalmente posible.

Aunque Javascript está avanzando a pasos agigantados, la compatibilidad con navegadores antiguos es todavía un problema, por ello la gente de Microsoft creó Typescript, un lenguaje Open Source basado en Javascript y que se integra perfectamente con otro código Javascript, solucionando algunos de los principales problemas que tiene Javascript

Debido a la ubicuidad de la web, hasta los menores retardos en la entrega de datos resulta irritante para los usuarios. Quieren que los datos se actualicen de forma inmediata. Desafortunadamente, la tecnología web aun no ha podido afrontar totalmente esta demanda de acceso en tiempo real. Si bien el acceso a los datos se está estandarizando rápidamente en varias clases de Object-Relational Mapping (ORM), la comunicación en tiempo real no tiene esa solución. Este artículo habla sobre Meteor, una nueva y fascinante infraestructura de JavaScript que tiene como objetivo resolver este problema.

Lodash.js es una de las librerías de referencia en JavaScript a la hora de trabajar con colecciones de objetos. Lodash fue en su momento un fork de Underscore.js pero con el paso del tiempo se ha rediseñado por completo y añadido mayor funcionalidad. Vamos a abordar en este artículo las funciones de filtrado.

Cada día tenemos más ficheros de JavaScript en nuestras aplicaciones. Frameworks como Angular.js han ayudado a modularizar el código y organizarlo. Esto es un avance, sin embargo nos encontramos con nuevos problemas. Uno de los problemas más importantes que tenemos hoy en día con este tipo de aplicaciones es la fragmentación de los ficheros de JavaScript y la carga de estos por parte del Navegador. Webpack es una herramienta que puede ayudarnos a empaquetar nuestro código.

En este artículo vamos a utilizar el API de Custom elements (Elementos HTML personalizados) para crear nuevas etiquetas y utilizarlas en nuestro código HTML, en futuras publicaciones explicaremos como se usan en conjunto con los otros 3 estándares.

Hace algún tiempo, revisamos en este blog algunos de los patrones de ordenación más utilizados en programación: el bubble sort, selection sort, insertion sort… Javascript ha cambiado mucho desde aquel 2011, por lo que quizá, ha llegado la hora de actualizarlos a los nuevos tiempos y su nueva sintaxis.

Aparecer y desaparecer un div no es muy dificil, solo un poco de CSS una llamada y listo!!, pero tampoco es elegante ¿No creen?, la aparición abrupta de un div no es lo más vistoso del mundo, asi que porque no mejorarlo, haciendole un efecto de fading algo simple y sencillo con javascript.

Existen varios obstáculos que evitan que las aplicaciones interesantes se extrapolen (es decir, de implementaciones principalmente de servidor) a JavaScript del cliente. Algunas de estas aplicaciones incluyen compatibilidad de navegadores, escritura estática, accesibilidad y rendimiento. Afortunadamente, el rendimiento se está convirtiendo rápidamente en algo del pasado, pues los desarrolladores de navegadores mejoran con gran rapidez la velocidad de los motores JavaScript de estos.

De hecho, uno de los obstáculos que aún se mantienen en JavaScript es el lenguaje en sí. JavaScript es un entorno de subproceso único, es decir, que no se pueden ejecutar varias secuencias de comandos al mismo tiempo. Por ejemplo, imagina un sitio que necesite gestionar eventos de interfaz de usuario, solicitar y procesar grandes cantidades de datos de API y manipular los DOM. Algo muy común, ¿verdad? Desafortunadamente, todo esto no puede realizarse de forma simultánea debido a las limitaciones en el tiempo de ejecución de los navegadores de JavaScript. La ejecución de secuencias de comandos se realiza en un único subproceso.

Los desarrolladores imitan la "simultaneidad" utilizando técnicas como setTimeout(), setInterval() y XMLHttpRequest, así como gestores de eventos. Sí, todas estas funciones se ejecutan de forma asíncrona; sin embargo, que no se bloqueen unas a otras no significa necesariamente que tengan lugar de forma simultánea. Los eventos asíncronos se procesan después de haber generado la secuencia de comandos que se esté ejecutando en ese momento. La buena noticia es que HTML5 nos ofrece algo mejor que este tipo de trucos de hacker.

Uno de los primeros desafíos con los que me encontré al comenzar a programar con NodeJS es el conocido Callback Hell, antes de explicarlo a detalle, lo ilustraré en un ejemplo práctico…
Sea cual sea el framework que prefieras usar para Node.js (Hapi.js, Sails.js, Express.js, Total.js), si tu proyecto es complejo y necesitas validar, buscar, procesar y guardar información en una misma llamada. casi siempre te encontrarás con el mismo problema donde requerirás el resultado de funciones asíncronas previas para seguir procesando los resultados y eventualmente puedes terminar con algo parecido a esto…

Javascript nos provee de una API que es muy simple de utilizar que nos permite obtener la ubicación del usuario. Solamente cuenta con 2 métodos: getCurrentPosition y watchPosition. La información retornada de estos métodos es muy fácil de leer y utilizar. Esta información nos puede servir para implementar mapas y, así, poder crear aplicaciones más complejas.

En tanto tú puedes siempre validar datos en tu servidor, el tener validación adicional de datos en la página web tiene múltiples beneficios. En muchas formas, a los usuarios les molestan los formularios. Si validamos los datos de un formulario mientras el usuario lo llena, el usuario puede saber inmediatamente si ha cometido algún error; esto le ahorra tiempo de espera a una respuesta HTTP y le evita al servidor lidiar con entradas incorrectas en el formulario. Este artículo cubre la validación de datos de formulario dentro del contenido Web de un formulario.

Hace un par de días llegó a CódigoFacilito una pregunta acerca de web. La pregunta iba algo por el estilo. Con input, ¿Cómo puedo llamar a una función en Go cuando se haga clic sobre un botón y de esta forma pintar el resultado en pantalla?, en otras palabras, lo que se desea es un buscador simple, un buscador que no necesite recargar la página para mostrar el resultado.

Lo primero que se vino a mi mente fue, utiliza Ajax, sin embargo, después de un par de segundos caí en cuenta que existen diferentes formas en las cuales desde el cliente, con Javascript, es posible realizar peticiones a un servidor. Así que me di a la tarea de escribir este pequeño post para todas aquellas personas que se encuentran comenzando con el desarrollo web, esto con la finalidad que tengan un panorama más amplio y sepan elegir qué forma se adapta mejor a sus necesidades; Espero les sea de ayuda.

Las cadenas de texto de JavaScript han sido desde siempre muy limitadas, sobre todo comparadas con las cadenas de lenguajes como PHP, Python o Ruby. Las Template Strings del estándar EcmaScript 6 (que están disponibles a partir de Google Chrome 41) eliminan todas estas limitaciones y permiten incluso definir DSLs (domain-specific languages) en tus aplicaciones JavaScript.

Los proxies de ES2015 proporcionan una API para capturar o interceptar cualquier operación realizada sobre un objeto y para modificar cómo se comporta ese objeto. Qué son y cómo funcionan.

Uno de los errores más comunes que observamos en las herramientas de análisis de optimización web como GTMetrix, Pingdom Tools o Google PageSpeed es el denominado “Defer Parsing JavaScript“, que traducido vendría a ser algo así como “Aplazar la carga de JavaScript“.

Índice de Contenidos:
1 ¿Qué es eso de Defer Parsing JavaScript?
2 ¿Por qué es importante aplazar la carga de JavaScript?
3 Cómo aplazar la carga de JavaScript (Defer Parsing Javascript) en WordPress
4 Más maneras de aplazar la carga de JavaScript en WordPress
4.1 Añade el atributo ‘defer’ a tus JavaScripts
4.2 Cambiar la ubicación por defecto de JavaScripts de WordPress
4.3 Crea un JavaScript aparte
4.4 Lo que de verdad importa

En ocasiones necesitamos saber la ubicación de un usuario que visita una página web. Aquí te mostraremos como hacer una función mediante la API de geolocalización del W3C.

La API de geolocalización permite al usuario compartir su ubicación a las aplicaciones web si así lo desea. Por razones de privacidad, al usuario se le pide que confirme el permiso para proporcionar información de ubicación.

Esta recopilación permite que usen Javascript incluso aquellos que no tienen un profundo conocimiento técnico del tema. Mediante un simple copia/pega podrás insertar efectos Javascript en tu sitio Web.

Articulo que te detalla todos los eventos relacionados con una imagen.

Articulo que te explica como coger variables desde JavaScript.