Rutas absolutas independientes del protocolo en HTML

HTTPS

Básicamente tenemos dos maneras de designar URLs en una página web, sea para enlaces, referencias a archivos como scripts y hojas de estilo, etc…:

  1. De manera relativa: apuntando a archivos del propio sitio web. Se pueden poner rutas que partan del raíz (/) o que suban en el árbol (../). Más info sobre algunas sutilezas en el caso de archivos CSS.
  2. De manera absoluta: en este caso metemos la ruta completa a un recurso, en otro dominio o en el propio. Algo así por ejemplo:
<script type="text/javascript" src="http://www.jasoft.org/scripts/miScript.js"><script>

Bien, por regla general esto tan sencillo es lo único que debe preocuparnos.

Sin embargo existen varios casos en el que las rutas de carácter absoluto, expresadas de la manera habitual, nos pueden dar problemas:

  • Si hemos creado un script (o un recurso: CSS, gráficos…) que va a ser utilizado por otros sitios web sobre los que no tenemos control. Por ejemplo, un "plugin" o API JavaScript alojado en nuestro servidor. Piensa por ejemplo en el botón "Me gusta" de Facebook o de compartir en Twitter, por poner dos ejemplos cotidianos. Implica incluir un script en un sitio web ajeno (que puede ser cualquiera) que apunta al suyo.
  • Si necesitamos apuntar con un URL absoluto a un recurso propio o ajeno en nuestro sitio web y éste puede funcionar indistintamente con HTTPs o con HTTP.

¿Por qué?

Bien, imagina por ejemplo que tienes una página web que apunta a un script con una ruta absoluta como la del ejemplo anterior:

<script type="text/javascript" src="http://www.jasoft.org/scripts/miScript.js"><script>

Los usuarios pueden acceder a tu sitio web indistintamente a través de HTTP y de HTTPS, es decir, con protocolo seguro. ¿Qué ocurre cuando acceden a través de HTTPS y tienes un recurso enlazado con una ruta absoluta como la anterior?

Pues ocurre esto:

Bloqueo-No-HTTPS-IE

Internet Explorer

Bloqueo-No-HTTPS-Firefox

Firefox

Bloqueo-No-HTTPS-Chrome

Chrome

Es decir:

En la mayor parte de los navegadores, si cargamos una página a través de SSL, todos los recursos referenciados de manera absoluta con un protocolo no seguro (HTTP), se bloquean y no se descargan.

Eso significa que una parte importante de la página puede que no funcione. Y desde luego si el script o recurso que no se carga es el nuestro, la funcionalidad o característica que quisiésemos entregar no nos va funcionar.

Nota: Chrome es el único que carga igual el contenido, pero en su mensaje de aviso indica que puede ser potencialmente peligroso. Tanto IE como Firefox bloquean la descarga.

Así que hay que tener mucho cuidado con esto.

¿Cómo podemos solucionar el problema?

De dos formas diferentes:

…. CONTINUA….

Lee el post completo en JASoft.org: http://www.jasoft.org/Blog/post/Rutas-absolutas-independientes-del-protocolo-en-HTML.aspx

Escribiendo código JavaScript limpio: funciones anónimas auto-ejecutables

Funcion-Anonima-JavaScriptUn patrón muy utilizado a la hora de escribir código JavaScript son las funciones anónimas auto-ejecutables.

La idea es la siguiente: aprovechar las propiedades de ámbito de las variables de JavaScript y el uso de clausuras para escribir código más limpio que no interfiera con otro código JavaScript que pudiera haber en la página. De hecho es la técnica que utilizan muchas de las bibliotecas importantes para inicializarse.

Por ejemplo, consideremos el siguiente fragmento de código JavaScript:

var v1 = 0;

function miFunc1(){
	v1 = 5;
	alert(v1);
}

function miFunc2(){
	v1 = 10;
	alert(v1);
}

En este código tan sencillo estamos definiendo una variable y dos funciones. Dado que desde ambas funciones debemos poder acceder a la misma variable común "x", la declaramos de manera global, siendo accesible desde toda la página. Este código, si bien funcionará correctamente, tiene varios problemas, entre los que cabe destacar los dos siguientes:

  • La variable, siendo global, será accesible desde cualquier función de la página, no solo desde las dos que la necesitan y tampoco solo desde nuestras funciones. Otras funciones de otros scripts que incluyamos en la página también tendrán acceso.
  • Por mucho cuidado que tengamos, si los nombres de la variable o de las funciones coinciden con los de otras variables o funciones globales definidas en otro script, tendremos un conflicto y se producirán errores. Estamos polucionando innecesariamente el objeto global.

Lo que buscamos es la manera de poder definir funciones que compartan información entre sí, la almacenen para ejecución diferida y que no polucionen el código global de la página.

Obviamente podríamos definir una clase, la cual podríamos instanciar luego para ser utilizada. La clase nos permitiría definir miembros privados (aunque en JavaScript esto no es tan directo como en otros lenguajes) así como propiedades y métodos específicos de la misma. Posteriormente la instanciamos y hacemos uso de ella.

…. CONTINÚA….

Lee el post completo en JASoft.org: http://www.jasoft.org/Blog/post/Escribiendo-codigo-JavaScript-limpio-funciones-anonimas-auto-ejecutables.aspx

Off-Topic: Nuevo curso de programación profesional con JavaScript

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Off-Topic-Nuevo-curso-de-programacion-profesional-con-JavaScript.aspx

Curso-Online-JavaScriptLos que seguís con asiduidad este blog habréis notado que he estado un poco ausente durante las últimas semanas. Aparte de que he estado creando mucho material para nuestro blog para programadores de campusMVP, el principal motivo ha sido que durante los meses de verano y hasta finales de la semana pasada he estado trabajando duramente en crear un nuevo curso para campusMVP:

JavaScript profesional para desarrolladores y diseñadores web

Ha sido un trabajo bastante duro a pesar de que ya he escrito varios libros sobre el tema, principalmente porque he tratado de crear un curso muy práctico, y al mismo tiempo que sirviera para el mayor número de programadores posible. Para ello, aparte de la teoría correspondiente (que es mucha) he grabado más de 13 horas de vídeos prácticos y muchos ejemplos Esto que puede parecer relativamente poco, es mucho para un curso como este que tiene además gran cantidad de material teórico escrito (que también es muy necesario). Y es que además, entre preparación previa, grabación y postproducción (que la hace cada autor también, o sea, en este caso yo), cada hora de vídeo final supone como mínimo 4 o 5 horas de trabajo real. Es decir, que para esas 13 horas de vídeo habré invertido alrededor de 60 horas de trabajo como mínimo. Luego está la parte teórica, revisiones, montaje, diseño de prácticas, recursos relacionados y, no menos importante por el trabajo que da, las preguntas de examen (he creado cientos de ellas para poder evaluar lo mejor posible a los alumnos). Total que son muchísimas horas de trabajo que, sumadas al trabajo habitual aunque sea en verano, hace que no me haya quedado tiempo para casi nada. Y eso se ha notado en el blog. 

A partir de ahora ya se puede comprar el nuevo curso y además seré yo también el que esté ahí para contestar las dudas de los alumnos en cuanto las planteen.

Estoy muy orgulloso del resultado y espero que me proporcione tantas satisfacciones como el curso de HTML5 y CSS3 que hice el año pasado y que está teniendo unas valoraciones altísimas de manera consistente. La gente sale encantada y creo que de este curso de JavaScript saldrá encantada igualmente. No es una «vendida de moto», es que es la verdad y estoy muy contento de ver como los alumnos salen aprendiendo un montón y preparados para el trabajo profesional con esas tecnologías.

Oye, ¿y tanta cosa para un lenguaje tan sencillo como JavaScript?

Bueno, pues es que la principal virtud de JavaScript es al mismo tiempo su mayor problema: es sencillo en apariencia, pero a la hora de la verdad hay mucho en lo que profundizar.

JavaScript engancha mucho a los programadores cuando empiezan porque en muy poco tiempo puedes estar ya haciendo cosas con él. El problema que tiene esto es que esa facilidad inicial engaña mucho y la gente se confía y se cree que sabe, cuando la triste realidad es que un porcentaje muy alto de los programadores de JavaScript que hay por ahí trabajando tienen unas carencias muy importantes de conocimientos. El problema de esto es que, aunque puedas ir trabajando en las cosas más comunes sin demasiado problema, cuando aparecen problemas de verdad les falta la base conceptual que sería necesaria para poder entender qué está pasando y encontrar la mejor solución.  Ocurre lo mismo a la hora de plantear soluciones en código a algunos problemas que debamos programar. Al carecer de ciertos conocimientos es imposible plantear soluciones óptimas, y muchas veces se plantean «apaños» que a la larga traen como consecuencia más problemas a medida que la aplicación crece.

Por otro lado están los programadores de jQuery que solamente conocen jQuery pero van muy justitos de JavaScript. Esta biblioteca  es estupenda, no cabe duda, pero a veces facilita tanto las cosas que se matan moscas a cañonazos, sin saber muy bien las implicaciones que tiene lo que se está haciendo. Y esto es peligrosísimo. Además, muchas veces para hacer cosas muy sencillas que se podrían arreglar con cuatro líneas de JavaScript puro se introduce una dependencia absurda de jQuery que lo único que hace es conseguir páginas más pesadas y lentas.

Por todo eso lo que he intentado con este curso es dar una visión global y muy completa de JavaScript como lenguaje. Aunque hay una parte importante dedicada a la programación web, la mayor parte del contenido vale para usar JavaScript en cualquier entorno: NodeJS, administración de sistemas, Flash, etc…

¿Qué hay dentro del curso?

La única base de la que parto es que el alumno tiene unos mínimos conocimientos de HTML y CSS. Nada avanzado, pero si lo más básico y habitual. Y por supuesto que está acostumbrado a usar Internet y un navegador. Por lo demás no hay más requisitos. Puede trabajar desde Windows, Linux o Mac indistintamente.

En una primera parte del curso he partido de cero absoluto, para que la gente que se inicia en la programación no tenga dificultad alguna para seguir el curso. Además la idea es que poco a poco vayan practicando y cogiendo confianza, de modo que la experiencia que acumulen les sirva para cualquier otro lenguaje que quieran aprender más adelante. Esta primera parte del curso, más básica, está basada sobre todo en vídeo, pero sin una sola  «slide» de PowerPoint y por supuesto sin verme el careto 😉 Lo que pretendo es que los alumnos vean todo el rato trabajo con código y así les sea más fácil perderle el miedo. Dado que todos los pequeños ejemplos de esta parte se pueden descargar para practicar, y además se ofrece al final de cada módulo diversos ejercicios prácticos que se le proponen al alumno, le perderán el miedo a escribir código los más novatos. Hay también auto-evaluaciones de vez en cuando para ir comprobando que se han asentado bien los conocimientos más importantes.

Los que no sean novatos muchas cosas de esta parte ya las conocerán, pero los contenidos están salpicados de detalles y conceptos interesantes que seguramente no les vendrá mal repasar a muchos programadores que ya trabajan con JavaScript.

Entre otras muchas cosas esta primera parte de fundamentos incluye:

  • Introducción a JavaScript. Herramientas de trabajo.
  • Variables, tipos de datos, funciones básicas…
  • Funciones, ámbitos, operadores.
  • Estructuras de control de flujo.
  • Matrices
  • Cadenas (incluyendo expresiones regulares y ejemplos bastante chulos de cosas que se pueden hacer con todo lo anterior).
  • Fechas, tiempo y temporizadores.

En función de la experiencia previa esta parte se puede pasar más o menos rápido.

La segunda parte entra ya en materia práctica más avanzada, y tiene material que le interesará tanto a programadores nuevos como experimentados. Trata entre otros temas:

  • Programación orientada a objetos con JavaScript vista muy a fondo
  • Uso avanzado de funciones, clausuras y ámbito avanzado de variables
  • Desarrollo para la Web: el BOM y el DOM, vistos con mucho detalle y con soporte para todos los navegadores del mercado, tanto actuales como antiguos, viendo sus diferencias.
  • Gestión de eventos en navegadores, incluyendo navegadores antiguos y todos los actuales. De hecho desarrollamos un modelo unificado que permite gestionar los eventos de manera sencilla de modo que funcionen en todos los navegadores, actuales y antiguos.
  • Trabajo con AJAX, JSON, JSONP, CORS…
  • Depuración de aplicaciones JavaScript. Aunque se tocan de refilón todos los navegadores, se ve a fondo el trabajo con Google Chrome por ser el más extendido, multiplataforma y con las herramientas más avanzadas de serie.

En esta segunda parte, como se dice coloquialmente, hay mucha «tela que cortar» y estoy seguro de que los alumnos van a aprender un montón, incluso los que ya llevan tiempo trabajando con JavaScript. Mezcla teoría (es indispensable para entender bien algunos conceptos) con multitud de vídeos prácticos. También se sugieren prácticas al final de cada módulo para que los alumnos puedan profundizar por su cuenta (se les hace pensar en mucha de ellas) así como algunas pruebas de auto-evaluación.

Como ves no es un curso de jQuery, ni falta que le hace. Para eso tenemos ya uno estupendo: jQuery de principio a fin. Este es JavaScript puro y duro, yendo a la esencia del lenguaje y aprendiendo a exprimirlo para luego poder trabajar con garantías precisamente con jQuery, AngularJS y otras bibliotecas que se usan por encima de JavaScript.

Como el curso es online lo puede hacer cualquiera desde cualquier parte del mundo, empezando hoy mismo. Además de tenerme a mi como tutor para responder a las dudas y consultas, desde campusMVP también están pendientes del progreso de todos los alumnos, para asegurarse de que no se quedan atrás o no terminan. Ello es debido a que junto con el curso he diseñado un ritmo de estudio que le va marcando a los alumnos hitos que deben alcanzar. Si alguno se hace el remolón, se queda muy atrás o lo que sea, desde campusMVP están atentos, y yo mismo me encargaré de darle «toques» al que no vaya a buen ritmo según me vayan informando. Esto es muy importante porque en eLearning, como siempre lo puedes dejar para mañana, mucha gente acaba por no terminar los cursos, y es una verdadera pena. Gracias a este sistema, que empleamos en todos los cursos de campusMVP, tenemos unas tasas de finalización apabullantes, cercanas al 90%, algo fuera de lo común en este ámbito. Por que a nosotros nos importa que aprendas, no que pagues el curso y luego olvidarnos de ti.

En fin, no quiero aburrirte más con el asunto, pero es que estoy tan contento de haber terminado que tenía que gritarlo 🙂

Ya sabes, si conoces a alguien que le pueda interesar aprender en serio JavaScript, HTML5 y CSS3 u otras materias de programación, háblale de este curso o de nuestro catálogo.

¡Gracias!