Curso de HTML5: Introducción

7 diciembre 2013
Categories: curso html5, Introducción HTML5

Introducción

HTML5 es la evolución del estándar HTML4 por lo que para poder entender este curso será necesario conocer la base de HTML4. 
Lo primero que debemos saber es que lo que se está definiendo con HTML5 es un nuevo estándar que se intenta dar solución a los actuales usos de HTML incluyendo en la especificación nuevas etiquetas y API’s Javascript que permitan solventar aquellos problemas típicos que nos daban las web HTML4. 
De cara a conocer las novedades de HTML5 veamos un pequeño listado:
  • Nuevas etiquetas: Semántica y estructuración de Contenido
  • Nuevos Campos de formulario
  • Etiquetas de Audio y Video, adios al FLASH para video.
  • Etiqueta Canvas, un lienzo en el que pintar lo que queramos
  • Websockets, comunicación bidireccional entre cliente y servidor sin peticiones XMLHTTPRequest
  • Comunicaciones, nuevas funciones para las peticiones web desde JS y mensajes entre páginas.
  • Aplicaciones Offline, o cómo hacer que la página funcione sin necesidad de tener conexión a internet
  • Almacenamiento Web: datos simples o bases de datos enteras manejadas desde Javascript
  • File: manejo de sistema de ficheros en local, carpetas y archivos.
  • WebWorkers, hilos de ejecución en JS
  • Geolocalización: o cómo consultar las coordenadas del equipo para hacer búsquedas más efectivas
  • Drag And Drop: desde el DOM básico, nuevos eventos para arrastrar y soltar elementos dentro del documento.
  • History: manejo del histórico de URL’s que se han visitado en la página
Todas esta novedades sobre el estándar están en algunos casos en plena definición y en otros ya completamente definidos.

Soporte por parte de los navegadores

Es importante conocer el soporte de estas funcionalidades por parte de los navegadores en sus distintas versiones. Para ellos disponemos de herramientas que nos van a permitir conocer de antemano o en tiempo de ejecución si el navegador soporta o no una funcionalidad en concreto.

Caniuse

Caniuse es una página en la que podemos consultar todas y cada una de las nuevas funcionalidades y nos indicará en que navegadores y versiones de cada navegador nos va a permitir realizar un uso total o parcial de una determinada funcionalidad.
En la caja de búsqueda indicaremos el nombre de la etiqueta el atributo o incluso el api y nos mostrará una tabla de soporte, muy útil para el análisis de requisitos al empezar o presupuestar un proyecto. 

Modernizr

Es una biblioteca JS que nos va a permitir realizar la consulta al propio navegador para saber si soporta una determinada funcionalidad de HTML5 o CSS3. de esta manera podemos disponer de un plan B por si el navegador no soporta una determinada funcionalidad. 
Página web de Modernizr: http://modernizr.com

Conclusiones

Con estos conocimientos de base podremos hacernos una idea sobre lo que puede y no puede hacer un navegador con soporte de HTML5 

Curso de Javascript: Debug con Eclipse y Firefox

7 diciembre 2013
Categories: curso de javascript, debug javascript, debug js firefox, depuración javascript

Una de las principales tareas del programador es realizar la depuración de un programa que está fallando e inicialmente se desconoce porqué.
En la presente unidad se expone una guía de instalación y configuración de las herramientas sobre eclipse y firefox que permiten realizar el debut.

Instalación de componentes

Componentes de Firefox

Componentes de Eclipse

Configuraciones

Configuración en Firefox

  • Abrir Firebug (F12)
  • Habilitar cada pestaña de Firebug
  • Arrancar el Servidor de Crossfire: Botón derecho en el botón de CrossFire (abajo a la derecha), Star Server.
  • En el diálogo: host: localhost, port: 5000
  • Pulsar Ok
  • Comprobar en la pestaña de Firebug/Remote que el servidor está arrancado.

Configuración en Eclipse

  • Menú: Window->Preferences
  • En el apartado: Run/Debug->Launching
  • Desmarcar: Build (if required) before launching
  • Pulsar Ok
  • Menú: Project
  • Desmarcar: Build Automatically

Lanzando del proyecto

  • En eclipse:
  • Abrir los ficheros del proyecto a depurar.
  • Abrir la Perspectiva de Debug: Window->Open Perspective-> Debug
  • En la barra de Iconos de acceso directo, Abrir el desplegable al lado del botón de Debug
  • Seleccionar Debug Configurations…
  • Selecionar el apartado Remote Javascript
  • Pulsar en el botón nuevo (Hoja en blanco, arriba a la izquireda)
  • Cambiar el nombre a: CrossFire
  • En el Connector: Seleccionar Remote Attach
  • Host: localhost
  • Port: 5000
  • Seleccionar todas las checkbox menos la última
  • En la pestaña Source, Añadir el proyecto: botón Add
  • Selecionar Proyecto
  • Pulsar en Ok
  • Seleccionar el proyecto a depurar
  • Pulsar Ok
  • Pulsar en Apply (abajo al a derecha)
  • Pulsar en Close
  • En Firefox:
  • Abrir el fichero html que se quiere depurar a través de la barra de navegación o el menú Archivo->Abrir Archivo
  • En el Firebug/Script
  • Añadir los Breakpoints que se quiera en el código JS, mediante dobleclick en las líneas que se desee
  • En eclipse:
  • Pulsar en el boton Debug
  • Aparecerán los procesos de debug
  • Recargar el HTML en Firefox
Tanto en el Eclipse como en Firebug aparecerá el código en la primera línea que tenga un BreakPoint.
Entonces ya podremos ver la ejecución del código paso a paso. 

Finalizando

Una vez finalizada la depuración podremos Terminar la ejecución, pulsando botón derecho sobre el proceso de Crossfire de la pestaña de debug-> Terminate
Y podemos sobre el mismo proceso eliminarlo pulsado botón derecho sobre él->Remove all terminated

Repitiendo la depuración

Una vez configurado todo simplemente pulsando en el desplegable al lado del botón de Debug, podremos seleccionar la opción Crossfire que configuramos en Debug Configurations.

Curso de Javascript: buenas prácticas

7 diciembre 2013
Categories: buenas prácticas Javascript, curso javascript

A la hora de realizar una serie de recomendaciones, os intento explicar lo que en la práctica mejor nos ha venido a lo largo del tiempo, o bien indicaciones que suelen incluir tanto los clientes de las soluciones desarrolladas, como por especificaciones a la hora de desarrollar los proyectos JS.

  • Documenta! en JS es muy importante documentar, como hemos visto la mayor parte de los objetos desconocemos su tipo, sobre todo en funciones o métodos que definimos para nuestras aplicaciones. Utiliza los comentarios sabiamente, para que así no te vuelvas loco cuando tengas que volver a tocar ese código o bien un compañero tenga que retocar lo que tú has hecho, cuesta al principio pero a la larga compensa y mucho.
  • Indenta el código: coloca siempre los espacios o las tabulaciones en el código que con sólo leerlo ya se sepa que parte va dentro de qué.
  • Utiliza las llaves siempre, es un poco lío al principio, pero ayuda a que la lectura del código e introducción de nuevo código sea más sencilla y comprensible. 
  • Utiliza JSON siempre que puedas, la definición de los objetos en JSON a la vez de cómoda es muy visible, una vez que te acostumbras, sale sólo.
  • Utiliza el onload y el DOMCotentLoaded siempre que puedas. Por internet encontrarás que la gestión de eventos puede realizarse de muchas maneras, incluyendo un atributo en el html con el callback de la función, etc… pero siempre intenta condicionar el código a que el contenido estañe cargado, te evitarás muchísimos fallos al intentar ejecutar un código JS sobre una etiqueta que el navegador no ha leído todavía. 
  • No asumas que siempre tenemos JS activado. En muchos entornos de despliegue por temas de seguridad, Js está desactivado. Esta técnica se denomina Javascript no intrusivo. Piensa todo tu código como que JS es opcional, una ayuda para el usuario en vez de algo imprescindible para que tu aplicación funcione. 
  • Disfruta! Esto no es tanto a las técnicas como a la actitud al a hora de programar pero disfrutar de lo que estás haciendo es muy importante.
Esto es to Esto es to Esto es todo amigos!

Curso de Javascript: Modificación del DOM

7 diciembre 2013
Categories: curso javascript, dom JS, manejo del DOM

Introducción

Una de las características principales de JS es la de poder modificar la página HTML que está cargada en ese momento en pantalla. Este proceso de modificar el DOM (Document Object Model) tiene una serie de conceptos que tenemos que tener en cuenta:

  • Documento: el objeto document que hemos visto previamente que es el que nos almacena la información de la página que está cargada, podría decirse que este es el DOM, aunque sería simplificarlo mucho. 
  • Elemento: El elemento es toda aquella etiqueta que hemos colocado en el documento, todos lo enlaces, las imágenes, los div, todos ellos son elementos. Lo primero que deberíamos saber es que dichos elementos tienen una estructura jerárquica, por lo que cualquier elemento salvo el html, tendrá padre y todos los elementos puede disponer de hijos. Al funcionar cómo un árbol podemos realizar las operaciones típicas de nodos en un árbol tales como el injerto, la poda y la substitución de una rama. 
  • Atributos: características el objeto, dichos elementos pueden tener o no un valor por defecto asociado, hay veces que los podemos crear, modificar o eliminar de cada etiqueta o conjunto de etiquetas-elementos. 
  • Nodos de texto: este tipo de nodos son especiales ya que no representan a una etiqueta sino a los textos que hay dentro de las etiquetas. Com por ejemplo los textos de un enlace (etiqueta a).
  • Eventos: los eventos son también atributos de los elementos y se pueden modificar como tales. 

Injertos

A la hora de realizar un injerto es necesario saber en que punto del árbol se va a realizar el injerto, esto en el DOM implica saber cual va a ser el padre del elemento que vayamos a insertar.
Por otra parte necesitaremos crear el elemento antes de realizar el injerto, con todo lo que ello conlleve, es decir hay que construir la rama entera antes de generar el injerto.
El método principal de hacer un injerto es mediante el método appendChild, dicho método se ejecuta sobre el padre y admite como parámetro el objeto del elemento que queremos injertar.
Pongamos un ejemplo completo del proceso insertando un nuevo hijo al final de todos los hijos de un padre…

                //Creación de elementos
      var enlace=document.createElement(“a”);
      enlace.href=“http://www.google.es/”;
      enlace.id=“enlace”;
      var texto=document.createTextNode(“Enlace a google”);
      //montaje de la rama
      enlace.appendChild(texto);
    //Localización del injerto
      var padre=document.getElementById(“padre”);
      //montaje del injerto

      padre.appendChild(enlace);

Como pude verse en el ejemplo, un injerto tiene un proceso:

  • Creación de los elementos y los nodos de texto como variables
  • modificación de las propiedades del elemento a insertar
  • Montaje de la rama con los appendChild
  • localización del punto del injerto, es decir el padre donde vamos a injertar el hijo
  • ejecución del método appendChild en el padre indicando que hijo queremos insertar
Es un proceso un poco laborioso pero efectivo a la hora de insertar nuevos nodos y elementos. En este caso al usar el appendChild insertamos un hijo, que sería el último hijo dentro del nodo padre, por lo que se mostraría al final, o después de todos los hermanos del nuevo nodo. 

Injerto antes de un hermano

Al igual que con appendChild insertamos un hijo, como el último de la lista, nos puede llegar a interesar insertarlo antes de otro hermano, en este caso necesitamos dos localizadores, uno el del padre y otro el del hermano para así saber el punto exacto dentro del árbol donde queremos realizar la inserción. Veamos un ejemplo…
                //inserción de un hermano
      var enlace3=document.createElement(“a”);
                //modificando las propiedades del elemento
      enlace3.href=“http://www.google.es/”;
      enlace3.id=“enlace3”;
      var texto3=document.createTextNode(“un enlace”);
                //montando la rama
      enlace3.appendChild(texto3);
                //insertando el elemento
                var enlace_en_dom=document.getElementById(“enlace”);
      document.getElementById(“padre”).insertBefore(enlace3,enlace_en_dom);

En este caso utilizamos el método insertBefore sobre el objeto padre, mediante el id=”padre” y lo intentamos introducir antes del elemento con el id=”enlace”. De esta manera el nuevo hijo que insertamos será hijo de padre y hermano de “enlace” pero estará colocado antes de “enlace”.

Reemplazar un hijo

Hay aveces que puede interesar substituir un hijo, es decir eliminar un hijo y realizar un injerto de otro, pero en JS este proceso es sencillo es simplemente substituir un contenido por otro a nivel de elemento. Veamos un ejemplo
                //reemplazar un hijo
      var enlace4=document.createElement(“a”);
      enlace4.href=“http://www.google.es/”;
      enlace4.id=“enlace3”;
      var texto4=document.createTextNode(“un enlace”);
      enlace4.appendChild(texto3);
      var enlace3_en_dom=document.getElementById(“enlace3”);
      document.getElementById(“padre”).replaceChild(enlace3,enlace3_en_dom);

Comp puede verse es como los anteriores ejemplos salvo porque utilizamos en método replaceChild sobre le padre y le indicamos en el primer parámetro el objeto del elemento que queremos insertar y en el segundo parámetro el objeto que queremos reemplazar. Muy simple 🙂
Este sencillo método permite realizar un swapping o intercambio de contenido en la página.

Eliminar una rama, poda

Hay veces que tenemos que eliminar una rama entera de la página, un contenido completo, un div es el caso típico.  Además es mucho más simple, porque lo único que necesitamos localizar es el nodo hijo de la rama a eliminar y el padre de dicho hijo. Veamos el ejemplo…
                //eliminación de una rama
      var enlace2_en_dom=document.getElementById(“enlace2”);
      document.getElementById(“padre”).removeChild(enlace2_en_dom);
En este caso se trata de eliminar toda la rama de lo que incluya el elemento cuyo id=”enlace2″, localizando también el padre. Muy simple 🙂

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies