domingo, 28 de octubre de 2012

CSS3 Transformando elementos.


Una de las nuevas funcionalidades de css3 es que podemos transformar elementos directamente desde el css, las transformaciones que podemos hacer son: escalar, rotar, mover y deformar.

  • rotate(grados): nos permite hacer rotar elementos, en grados.
  • translate(X,Y): nos permite mover un elemento a partir de su posición original, debemos especificar cuanto se debe mover en el eje de las x y en el eje de las y. 
  • scale(x,y): nos permite modificar el tamaño de un elemento, con los argumentos que le pasemos, multiplicara el numero por el tamaño original. 
  • skew(grados-x,grados-y): el elemento se gira en un angulo dado, en función a los parámetros dados.

Soporte en los Navegadores:
Esta característica es soportada por Chrome, firefox, ie 9+, opera, pero todos con sus respectivos prefijos.

Ejemplo: http://bomba1990.pythonanywhere.com/sosinformatico/js/css3transform
GITHUB: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/css3/transform.html

martes, 23 de octubre de 2012

Formularios en HTML5

En HTML5 uno de los más grandes avances que se an incluido son las nuevas características de los formularios para hacerlos más potentes y útiles para nuestras aplicaciones.



Nuevos inputs de HTML5:

El estándar html4 solo contaba con inputs de tipo text, radio, checkbox, Password, submit, reset y button, aparte de textarea, select, que son también dos tipos de elemento de formulario.

Con la llegada de HTML5, hay soporte para todos los formularios de html4, y ahora tenemos a disposición estos otros formularios:
  • Color: el input de color es usado para campos que tienen un color, lo que hace es generar el numero hexadecimal de un color que le seleccionemos de la paleta de colores. 
  • Date: permite al usuario agregar una fecha. 
  • Datetime: permite al usuario agregar fecha y hora. 
  • Email: este tipo de campo almacena lo que sería una dirección de correo. 
  • Month: es para que el usuario pueda seleccionar mes y año. 
  • Number: con este input el usuario va a colocar números pueden ser enteros o decimales 
  • Range: este tipo de formulario muestra un pequeño campo donde el usuario selección un numero de un rango. 
  • Search: es para campos de búsqueda. 
  • Tel: es para colocar números de teléfonos 
  • Time: para colocar horas y minutos. 
  • url: Para colocar direcciones web. 
  • Week: Para seleccionar semanas del año.
  •  x-webkit-speech: que es un formulario para reconocimiento de vos que solo funciona con chrome.

Los nuevos formularios por supuesto no son soportado por todos los navegadores, solo lo más modernos navegadores empiezan a añadir soporte, aquí si cabe destacar que los navegadores de los teléfonos inteligentes, están sumamente avanzado en este sentido y soportan la mayoría de los campos, inclusive mejor que los navegadores de escritorio. Y muestran un teclado de acuerdo al tipo de input, por ejemplo en tel muestra puros números.

Para los navegadores que no soportan alguno de los formularios no hay problema porque se mostraran simplemente como un tipo text, y después con librerías javascript podemos hacer que funcionen en esos navegadores donde no hay soporte nativo.

Ejemplo de todos los formularios Formularios HTML5
GIT: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/form/form.html

lunes, 22 de octubre de 2012

DATALIST: HTML5 Autocomplete.


En HTML5 hay nuevas etiquetas que se an añadido para trabajar con formularios la etiqueta datalist, es una lista predefinida de opciones para un input, este elemento es usado para proveer una función de auto completado nativa para elementos de tipo input. 

<input list="navegadores">

<datalist id="navegadores ">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>


Este elemento solo funciona en chrome, firefox y opera, para una lista detallada:  http://caniuse.com/datalist


OJO: esto no es como e leído en algunos libros o artículos que es para reemplazar el tipo de campo select, esto es solamente para ofrecer un autocomplete
Ejemplo: http://bomba1990.pythonanywhere.com/sosinformatico/js/datalist
GIT: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/form/DATALIST.html

lunes, 15 de octubre de 2012

Joomla 3.0 Responsive Web Design

A salido la nueva versión de Joomla, la cual trae consigo muchos cambios mas que todo en el diseño. Ahora Joomla por completo a pasado a tener diseño web responsable, en este nuevo formato de Joomla ademas de tratar de ser mas amigable para el usuario también Joomla va a poder ser visualizado efectivamente desde cualquier tipo de teléfono celular inteligente o Tablet.

Entre los cambios que le hicieron están los siguientes:

  • La incorporación de Twitter Bootstrap en un paquete jui para multimedia. 
  • Una nueva plantilla para dispositivos móviles para la administración (backend) - Isis - y su interfaz. 
  • Una nueva plantilla para el sitio (frontend) - Protostar - construida usando Bootstrap de Twitter. 
  • Plantilla actualizada accesible llamada Beez3. 
  • Simplificación en 3 pasos de la instalación. 
  • Controlador PostgreSQL que permitirá ejecutar Joomla 3.0 utilizando la base de datos PostgreSQL. 
  • Controlador PHP Memcached. 
  • Uso de JFeed para la gestión de Feeds en lugar de SimplePie. 
  • La instalación de paquetes de idiomas directamente desde el gestor de extensiones. 
  • Grupo de usuarios "Invitados" está presente por defecto. 
  • Almacenamiento de artículos en blanco permitido. 
  • Nuevo módulo de estadísticas en el backend. 
  • Actualización de TinyMCE a la versión 3.5.6. 
  • Continúa la limpieza de código antiguo no utilizado, archivos y campos de la base de datos y tablas y la estandarización de tablas. 
  • Mejoras en las Búsquedas Inteligentes. 
  • Un amplio trabajo sobre la normalización de código de estilo y coherencia de este. 
  • Unidad de Pruebas en el CMS. 
  • Actualización del sistema de pruebas en el CMS. 
  • Elemento del menú activo personalizable para el módulo de menús. 
  • Permitir que el plugin SEF añada la url canónica en el encabezado. 
  • Versión 12.2 de Joomla! Platform. 
En teoría no hay ningún cambio a profundidad en el sistema como tal por lo cual deberían funcionar todos los componentes y extensiones que tuviésemos antes, pero como siempre es recomendable probar en una versión local para después subir a un servidor.

Cambios buenos para los Desarrolladores (desde mi punto de vista):

Uno de las cuestiones mas importantes para cualquier dessarrollador que trabaje con joomla, es que en esta nueva versión se incluyen los siguientes frameworks: Bootstrap y Jquery.

A Jquery no le hace falta presentación, pero Bootstrap es un framework css/javascript para el diseño o desarrollo de paginas Web responsables, lo cual quiere decir que se vean correctamente en cualquier tipo de dispositivo sin mayores cambios ni necesidad de crear una aplicación aparte.

Bootstrap framework aporta a Joomla la ventaja de tener ya una cantidad de herrameintas pre echas a nuestra mano, como css y javascripts para menus, carrusel de fotosthumbnail, etc...  sin necesidad de incluir nada externo. por ejemplo los botones e inputs ya tienen el estilo que trae bootstrap asi que ya no es necesario crear un css para el estilo de los formularios sino que el framework se encarga de ello. Esto nos puede ahorrar muchas lineas de código y ademas si seguimos los lineamientos del framework nuestro plugin, extensión o template se va a ver como es debido en cualquier tipo de dispositivo.

Ahora para incluir el framework de Bootstrap y jquery dentro de nuestro codigo debemos usar:


JHtml::_('bootstrap.framework');


Pantallas del Proceso de Instalación, en tres pasos:









Pantallas Del Front End, Movil 




 Pantallas del Backend, Login y panel de control, móvil también