HTML, XHTML y HTML5

HTML ha evolucionado de formas nuevas e inesperadas. Recientemente, la situación se ha complicado.

HTML es el lenguaje original de la Web. La última versión completada (4.01) se formalizó a fines de 1999.

En la última década ha sido reemplazado gradualmente por una versión similar pero modernizada denominada XHTML (Extensible HyperText Markup Language, Lenguaje Extensible de Marcado de Hipertexto).

NOTA:
Como XHTML es una variante de HTML y como éste fue el estándar original de la Web, suele decirse que todas las páginas están escritas en HTML. Al emplearse de este modo, el término, en realidad, significa cualquier versión de HTML o XHTML.

Veamos la parte complicada. La versión de XHTML usada actualmente es la 1.0 o (menos habitual) la 1.1.

Los programadores debían sustituir ambas por un estándar incluso más reciente denominado XHTML 2.

No obstante, los desarrolladores de XHTML 2 se perdieron en el intento.

"Crearon un estándar filosóficamente puro pero prácticamente inservible."

Los programadores Web y los fabricantes de los principales navegadores se asustaron del carácter estricto de XHTML 2 y del hecho de su falta de compatibilidad inversa con las páginas Web existentes.

Es decir, no se podía convertir una hecha en XHTML 1.0 a una nueva XHTML 2.

Es más, el estándar XHTML 2 carecía de las nuevas funciones que muchos programadores Web, incluidos los creadores de aplicaciones ultracomplejas, requerían.

El golpe final para XHTML 2 se produjo cuando un grupo de la competencia comenzó a presentar las versiones iniciales de un estándar denominado HTML5.

Aunque novedoso, diferente y sólo se admite en los navegadores más modernos, ha generado mucho interés.

De hecho, la W3C (la organización de estándares encargada oficialmente de HTML y XHTML) ha abandonado recientemente sus trabajos con el estándar XHTML 2 y ha comenzado a formalizar HTML5, convirtiéndolo en oficial:HTML5 es el futuro de la Web.

NOTA:
No hay espacio entre el HTML y el 5 en HTML5. Es un error del nombre del estándar.

Los diseñadores de HTML5 fueron inteligentes debido a que hicieron compatible todas las funciones que admite XHTML en la actualidad, lo que significa que puede crear documentos con este lenguaje ya mismo, sin necesidad de las nuevas prestaciones que los navegadores todavía no reconocen.

Todo funcionará a la perfección. Lo mejor de todo es que estará listo para un futuro no tan lejano, en el que nuevo navegadores colonizarán la Tierra y podrán empezar a usar las atractivas funciones exclusivas de HTML5.

NOTA:
HTML5 acepta todo lo que admite XHTML, sin necesidad de cambios. Sin embargo, la sintaxis de XHTML es más estricta que la de HTML5, por lo que éste acoge determinadas prácticas que XHTML no aceptaba. Los programadores Web no se ponen de acuerdo en si estas prácticas son apropiadas de un estilo inadecuado o simplemente útiles soluciones.

Familiarizarse con HTML5 puede resultar todo un reto. Parte del problema es que la palabra "HTML5" incluye la última versión del idioma HTML junto con numerosos estándares emergentes que siguen en fase de desarrollo.

Para que todo sea más interesante, algunos de ellos funcionan con los navegadores actuales más utilizados y otros todavía no se han implementado ni siquiera en las últimas versiones de HTML5.

Curiosamente, este lenguaje solo ofrece ciertas novedades a la familia estándar de etiquetas.

Muchas de ellas proporcionan a los navegadores Web motores de búsqueda y otras herramientas automatizadas, además de la información estructural sobre sus páginas Web. Por ejemplo, puede usarlas para indicar qué sección de su página contiene los enlaces de navegación.

HTML5 también ofrece una nueva forma de añadir elementos de vídeo a su página Web sin necesidad de un complemento, como sucede en muchos navegadores actuales.

El principal objetivo de HTML5 y de sus estándares relacionados es proporcionar  un conjunto de potentes instrumentos para desarrollar aplicaciones y páginas Web con las que interactuar.

Por ejemplo, incluye un lienzo para dibujar en dos dimensiones, una función para delimitar la ubicación geográfica de los visitantes y una técnica para que las páginas interactivas funcionen sin conexión.

Todas estas herramientas son la vanguardia del diseño Web y no son compatibles con versiones de Internet Explorer anteriores a 9.

Convertir tu web estatica a Ajax

com.bydust.ajax es una Clase Javascript que convierte tu pagina estática a un verdadero sitio web Ajax.

Como funciona?

Cuando un usuario entra a tu sitio web, la clase realiza una comprobación del navegador . Si es capaz de soportar Ajax la clases se activa y convierte tu web automáticamente, si no, la secuencia de comandos se desactivara y el usuario navegara en tu web sin hacer peticiones Ajax.

Características

• Es fácil de implementar y quitar
• Filtra información necesaria que traera con Ajax
• Puede añadir reglas para algunos enlaces
• Animaciones personalizables
• Permite retroceder de Pagina

Implementación

Primero que nada, bajarnos el .zip con los dos archivos Javascript (Descargar) , luego debemos incluir estos archivos en el head de cada pagina que deseamos convertir.

<head>
<script  src="js/com.bydust.array.js"></script>
<script  src="js/com.bydust.ajax.js"></script>
</head>

El Segundo paso sera especificar el contenido que debera recargar con Ajax, para esto clasificamos las secciones con divs y un identificador, el siguiente código sera guardado como
demo.html y como demo2.html con otro contenido en el div content, esto resultara dos paginas estaticas sin ninguna función Ajax.

<div id="page">

  <div id="content">
  <!-- begin content -->
  Contenido Demo 1*
  <!-- end content -->
  </div>

  <div id="sidebar">
  <!-- begin sidebar -->
  <a href="demo.html" >demo 1</a> -
  <a href="demo2.html" >demo 2</a>
  <!-- end sidebar -->
  </div>

</div>

Para finalizar incluiremos esta rutina en todas la paginas que se requieran con Ajax y con ella nuestras paginas estaticas tendrán ahora funcionalidad Ajax.

window.onload = function(){
var refreshed_content = Array('!content','sidebar');
bda.start(refreshed_content); 
}

Aunque paresca mentira, su pagina ahora esta Ajaxificada, pruebenla y verán la funcionalidad. Aquí puedes ver una demostración de una dos paginas estaticas Ajaxificadas.

Recursos

• Ver Demo
• Web Oficial
• Descarga Script
• Ejemplo Avanzado

Generar Captura de pantalla con Ajax

PageGlimpse es un servicio que proporciona la captura de pantalla de una web.
Funciona consultando una pagina mandando como parametro la url y el tamaño.

Ejemplo

http://images.pageglimpse.com/v1/thumbnails?url=http://google.com&size=large&devkey=*****&nothumb=http://web.com/noimage.gif

Parametros:

url es la web que se desea capturar.
size es el tamaño estandar del thumbnail (small, medium, large).
devkey es el código que te darán al momento de registrarte en PageGlimpse.
nothumb es un parametro opcional para mostrar una imagen en caso todavía no se halla generado la captura de pantalla de la web.

Utilizandola con Javascript

Thumbnails.js es una librería Javascript que utiliza la API de PageGlimpse para traer la captura de pantalla con una funcion en Javascript el cual utiliza los mismos parametros que la url.

Para utilizar esta librería primero incluiremos el Javascript Thumbnails.js dentro del "head".
Luego crearemos la siguiente funcion

var getScreenShot= function(caja,size){

 var container = document.getElementById('container'),
  thumbs = Thumbnails({
   devkey:'bf3ec081beb6d6af0ff9e43e6f77771e',
   size:size,
   nothumb:'noimage.gif'
  });

 thumbs.get(caja, function(url, img) {
  var link = document.createElement('a');
  img.style.border = 'none';
  link.href = url;
  link.appendChild(img);
  container.innerHTML = '';
  container.appendChild(link);
 });
}

Insertamos un div con id “container” dentro del "body":

<div id="container"></div>

Y despues llamaremos a la pagina de esta manera:

<script type="text/javascript">
getScreenShot('http://google.com','small');
</script>

Recursos

• Ver Demo

Detectar peticiones Ajax con PHP

Cuando desarrollamos aplicaciones Web, una de las ventajas que ahora tenemos es de utilizar Ajax para ciertas secciones donde es conveniente, y también es necesario restringir peticiones que no sean tipo XMLHttpRequest.

Para filtrar solo peticiones Ajax bastara con colocar este simple script.

if(isAjax()){
    die('Es una peticion Ajax.');
}else{
    die('Acceso denegado!');
}

function isAjax(){

    $xhr = strtolower($_SERVER['HTTP_X_REQUESTED_WITH']);
    if( !empty($xhr) &&
        $xhr == 'xmlhttprequest'){ 

        return true;
    }else{

        return false;
    }

}

Nota: algunos servidores Web no proporcionan esta variable, de modo que tendrás que probar antes de implementarlo.

Instalar un acortador de URL en WordPress

Le petite url es un plugin para WordPress muy bueno que permite tener un sistema propio de acortamiento de url para nuestros Post.

Existen otros plugins con la misma funcionalidad, probándolos me di cuenta que este era mas completo, ¿Porqué? Pues este plugin nos da automáticamente la url corta al crear el Post, y nos brinda una función para ponerla en nuestro theme actual y de esta manera promocionarla.

Mediante su panel de configuración este plugin nos brinda ciertas particularidades que nosotros queremos, por ejemplo la url puede estar conformada por diferentes grupos de caracteres (letras minúsculas, mayúsculas, números).

Para una mejor explicación de la configuración, aquí un Video creado con Screenr.

ScreenCast

[SWF]http://screenr.com/Content/assets/screenr_0817090731.swf,540,350,i=9984[/SWF]

Recursos

• Descargar Plugin
• Página Oficial

Android studio

Hola hoy vamos a ver el nuevo IDE para desarrollar en Android que ha lanzado Google esta semana en su evento Google I/O 2013, su nombre es  Android Studio esta basado en un IDE para Java muy conocido llamado IntelliJ IDEA.
Este nuevo entorno nos proporciona herramientas para el desarrollo en android al igual que en Eclipse si utlizamos el plugin ADT.

Este nuevo entorno nos proporciona herramientas para el desarrollo en android al igual que en Eclipse si utlizamos el plugin ADT.
Segun la documentacion oficial tambien nos ofrece:

• Soporte para Gradle
• Refactorizacion especifica para Android y soluciones rapidas.
• Herramientas para medir el rendimiento, usabilidad, compatibilidad de versiones y otros problemas.
• ProGuard y capacidad para firmar apps
• Asistentes basados ??en plantillas para crear diseños y componentes en Android.
• Un editor rico en cuanto a diseño, que le permite realizar drag and drop a los componentes de la UI,
• vista previa de los layouts en múltiples configuraciones de pantalla en simultaneo(a mi opinion algo super util), y mucho más

Como siempre Google nos ofrece sus soluciones para diferentes plataformas, yo particularmente lo he probado solamente en Linux Ubuntu 12.04 64 bits .

La instalación es muy simple y no voy a explayarme sobre ya que para cada OS varia pero lo pueden descargarlo de aqui.

Creando un proyecto:

Una vez que lo abrimos podemos ver algunas cosas,muestra una ventana para crear un proyecto importarlo, etc.

Para crear un proyecto nuevo es de lo mas simple:

1- Seleccionamos New Project,

luego la ventana que veremos es muy parecida a la del Eclipse.

2- Podemos seleccionar el icono para la app y su tamaño:

 3-Seleccionar algun diseño ya predeterminado para la UI.

4- Por ultimo ingresamos el nombre de la Activity y Finish

Una vez q abre el e  podemos ver que tal vez su UI no sea del todo bonita si lo comparamos con el eclipse o algún otro  (lo compensa en rendimiento)

La estructura del proyecto es muy parecida a la de eclipse, a continuación muestro una comparativo con los ide e sombreado algunas areas con color para facilitar la comparación.

Al intentar lanzar el emulador tuve el siguiente problema:

Algunos de los emuladores que habia creado no tenian seleccionado una version en el campo Targe, esto se debe a que el ide trae por defecto la version 4.2.2 y en mi caso usaba 2.3, para corregir esto tuve que seleccionar para el proyecto la ubicacion del SDK que tenia instalado.

Deben hacer lo siguiente:

File->Project Structure

Luego clickera Edit como vemos en la img.

Luego en el campo Android SDK Home Path cambiarlo a donde uds tengan instalado su SDK.

Luego de esto deberan volver a la ventana con los emuladores dar click en el emulador que muestra fail, clickear edit y veran que en el campo target en su listado figuran todos las versiones que tenian instaladas.

Editor de UI:

Una de las caracteristicas mas interesantes que incluye es un poderoso de editor visual para poder crear arrastrando los componentes nuestras vistas.

También nos permite ver nuestra vista en diferente dispositivos.

Cambiar Theme:

Si son de los que les gusta usar el IDE en colores oscuros al estilo SublimeText2 pueden cambiar el color de la sig. forma
File->Settings->Appeareance->Theme
El actual es IDEA 4.5 deberan cambiarlo a “Darcula“, luego deberan reiniciar el ide.
Luego se vera de la siguiente forma;

Probar App en Telefono en vez de Emulador:

Pude observar que el IDE por defecto ejecuta la aplicación en el emulador y por mas que tengamos nuestro telefono conectado lo seguirá haciendo, para poder correrlas directamente en nuestro telefono debemos hacer lo siguiente:

Dar click al lado de la flecha verde de RUN en el campo de seleccion y clickear en “Edit Configuration” como muestra la imagen.

Luego nos abrira la siguiente ventana en el cual debemos buscar en la sección Target Device y marcar “Show chooser dialog” y luego  OK.

Una vez modificado esto al volver a correr nuestra App nos mostrara la ventana para seleccionar si correr en el emulador o en nuestro dispositivo Android.

Importar Proyecto de Eclipse:

 Documentacion oficial sobre esto aqui.

Debemos hacer lo sig.

Primer ver si el plugin ADT en eclipse esta al dia version 22 o superior
Si no recuerdan como actualizarlo miren este link

Luego en Eclipse, seleccionar File > Export.
En la ventana que aparece seleccionar Android and Generate Gradle build files.

Seleccionar el proyecto you want y click Finish.

Para importarlo en Android Studio:

En Android Studio, seleccionar File > Import Project.

Ubicar el proyecto y seleccionar ok

Seleccionar crear proyecto de una fuente existente, seguir el asistente como si estuviesemos creando un proyecto.

Android Studio nos ofrece mucho mas de lo que mostre en este post solamente comente algunas, con el tiempo iremos conociendo mas sobre este IDE.

Les dejo un video oficial de Google sobre este

Conclusion:

El ide promete mucho ya que esta diseñado especificamente para el desarrollo en Android, es mucho mas rapido y liviano que Eclipse, esto es un punto
muy importante a favor, tambien para lo que es el diseño de UI es mucho mejor.
Recuerden que al ser una version Preview de seguro debe haber muchos bugs que iran corrigiendo con el tiempo·
Los invito a que lo prueben y dejen algun comentario de que les parecio o si quieren compartir alguna funcionalidad que hallan encontrado y les parece importante.

Crear una Página Web HTML5 utilizando Responsive Design

Responsive Design es la técnica de tener un sitio web que se adapte a los dispositivos móviles como Smartphones o Tablets, y también a las diferentes cialis for saleia.com/infografia-sobre-las-tendencias-en-resolucion-de-pantallas-y-navegadores/” target=”_blank”>resoluciones de pantalla para computadoras.

Gracias a @LeonidasEsteban y Mejorando.la podemos ver el siguiente

VideoTutorial donde nos enseñan a crear una Página Web en HTML5 utilizando Responsive Design, el ejemplo que realizan es la de un portafolio digital, dentro de los temas que tiene el video están CSS3, nuevos tags HTML5, meta tags para móviles.

El código del ejemplo lo podemos encontrar en github.com.
Podemos también probar la web desde nuestros diferentes dispositivos en http://mejorando.la/responsive-design/#contacto

3 herramientas en línea para estudiar antes de un examen

Las metodologías de los estudiantes para prepararse antes de tomar sus exámenes son diversas ya que cada persona aprende y retiene el conocimiento de diferentes formas. Para quienes implementan en su táctica de estudio las aplicaciones y herramientas en línea te comparto 3 que pueden ser de mucha ayuda.

Study Blue Flashcards

Las tarjetas de memoria o “flashcards” son herramientas de estudio para memorizar que consisten en colocar una imagen o palabra de una lado de la tarjeta y por el otro lado su definición o el concepto que se necesita ser memorizado. Study Blue Flashcards es una herramienta web y aplicación que trabaja bajo ese mismo concepto.

Su uso es gratuito en la versión básica dónde puedes crear tus propias tarjetas, tomar cuestionarios y subir imágenes en un lado de la tarjeta. La versión pro permite agregar imágenes, audio y fórmulas en ambos lados, además de enviarte recordatorios de estudio a tu correo electrónico. Puedes descargar la aplicación para Android y iPhone.

En Study Stack puedes crear tus propias tarjetas pero también encuentras una colección extensa que otros usuarios han publicado, si consideras que te lleva mucho tiempo realizar las propias tiene una diversidad de temas. Todas se encuentran en inglés, si conoces el idioma no tendrás problema pero considera el tiempo que tardarás en traducir si no conoces ciertas palabras.

Clipix

Es una herramienta que puedes utilizar al buscar información o materiales de apoyo para estudiar. Funciona a través de un botón que instalas en tu navegador, cada vez que leas sobre algo interesante solamente debes darle “click” y automáticamente se guarda en tu clipboard. Su visualización es similar a Pinterest o Rebelmouse, puedes crear varios para administrar tu información y acceder a ella cuando quieras.

Dicta Note

Si tomaste notas en clase o quieres repasar un lección, Dictanote es una sencilla herramienta que integra un micrófono para transcribir lo que leas. Soporta varios idiomas así que el primer paso será configurarlo para que reconozca el español.

La versión gratuita te permite trabajar sobre un documento a la vez, la versión de pago te permite crear múltiples documentos y se habilita la opción de guardarlos. En ambas versiones puedes subir imágenes, agregar enlaces y sus herramientas de edición son similares a las de Word o Google Drive. ¿Qué herramientas recomiendas para estudiar?