Responsive Web Design (Media Query css3)

Diseño Web Sensible

La evolucion de las css es muy notable, se hacen cada dia mas potente en la demanda del usuario, en soluciones con interfaces adptativas a cualquier dispositivo, debido a la gran variedad que el mercado tecnologico presenta .

La tecnología CSS viene encargandose cada vez mas de procesos independientes de visualizacion, de los que los script javascript, eran los encargados. Ahora css3 se potencializa en html5 dandole mucha robustes y flexibilidad a nuestras paginas web personales o empresariales. Las css se convierten en la capa de presentacion unica de nuestras aplicaciones web.

En el mercado del diseño de software se encuentra de que no siempre el cliente desea grandes estructuras de software costosas,  solamente para mostrar la informacion de sus productos, ofertas etc. Ahora se hace necesario que estos diseños sean practicos pero sobre todo, que tengan los atributos necesarios para que integren tecnologias  y desarrollar diseños agiles, adaptativos a multiples resoluciones y plataformas. 
Es decir; que los usuarios puedan acceder a la informacion desde diferentes dispositivos sin perder la individualidad del caracter empresarial o personal. 

A partir de css3 se crean las llamadas Media query css3, donde se puede aplicar condicionantes y operadores en el interior de la sintaxis simple de css.

Es mediante esta tecnología que podemos validar en nuestra hoja de estilos css de la aplicación, la resolución que esta solicitando mi recurso de pagina web  y ejecutar las clases diseñadas para tal resolución.

            /***************************************************
            ----- CONDICIONALES DE MEDIA QUERIES -----
            Esta configuracion es la que permite ajustar 
            los componentes segun la resolucion del dispositivo
            donde se invoca la pagina
            ****************************************************/

            @media screen and (max-width: 980px) {
            }
            @media screen and (max-width: 650px) {
            }
            @media screen and (max-width: 480px) {

                html {
                    -webkit-text-size-adjust: none;
                }
            }

Igualmente existe en la actualidad la posibilidad de incrustar fuentes de texto personalizadas en nuestros proyectos y para determinada resolucion usando css3, una de estas alternativas,  tal vez la mas simple, es usar los repositorios de fuentes de http://www.google.com/webfonts 

Comparar fechas en un Sesion Bean con EJBQL

Las practicas de programación en EJBQL son muy parecidas a SQL, solo que en EJBQL todo es orientado a objetos, ya no tenemos una tabla sino un objeto construido (clase java)  referenciado a una tabla SQL que es comparada, alimentada y consultada a travez del motor de persistencia JPA. 

Esta practica permite comparar una fecha (java.util.date) que llega como parámetro para ser  identificada como una propiedad de un objeto. Cuando realizamos la comparación mediante la forma tradicional que se usa en SQL, no obtenemos un resultado optimo. es por eso necesario usar el .setParameter("nombre",valor) para que el tipo de dato que viene se mantenga y pueda ser identificado eficientemente.

.

Cuando son enteros o cadenas se pueden comparar mediante el método tradicional de 

propiedadEJB = '"  + campo+ "', pero, ya en fechas, hay que cambiar la forma según la notación EJBQL.

Ejemplo: 

@Override

public List findIdRhEmpleadoEnDisposicion(int idRhEmpleado, Date horaActual) {

        Query query;

            query = em.createQuery("select object(o) from ProduccionPlaneacionTurnoFecha as o where o.idRhEmpleado='" + idRhEmpleado + "' AND o.fechaInicio <= :start AND o.fechaFin >= :start ").setParameter("start", horaActual);

        return  query.getResultList();

    }

Una imagen para mas claridad.

Incompatibilidad de Código CSS3 en Templates Faces

Las experiencias adquiridas en el desarrollo de software y mas prioritariamente en la programación de las interfaces de las mismas, se convierten en una gran oportunidad de encontrarnos en momentos de mucho sosiego cuando de repente algunos mecanismos a artefactos tecnologicos generan incompatiblidad a la hora de su ejecución.

Es el caso mas reciente cuando con el animo de buscar apariencia touch similar a google en sus tonos planos con degrade, logre introducirme en un problema de alto calibre que me llevo días de analisis por la misma sencilles de su solucion.

Esta es la interfaz planteada en el caso de una validacion de usuario mediante lector de código de barras el cual genero conflicto luego de agregar las siguiente clase visual cs4.

/*Clase visual (jquery) general para los botones del paquete de widgets primefaces*/

.ui-button{ 
 text-transform: uppercase; 
 background-color: #4D90FE !important; 
/*Zona Roja*/
 background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED)); 
 background-image: -moz-linear-gradient(top,#4D90FE,#4787ED); 
 background-image: -ms-linear-gradient(top,#4D90FE,#4787ED); 
 background-image: -o-linear-gradient(top,#4D90FE,#4787ED); 
 background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED); 
 background-image: linear-gradient(top,#4D90FE,#4787ED); filter:
 progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed'); 
 border: 1px solid #3079ED; 
 -moz-border-radius: 2px; 
 -webkit-border-radius: 2px; 
 border-radius: 2px; 
 -moz-user-select: none; 
 -webkit-user-select: none; 
/*Fin zona Roja*/
 color: white; display: inline-block; 
 font-weight: bold; height: 29px; 
 line-height: 29px; 
 text-align: center; 
 text-decoration: none; 
 padding: 0 8px; margin: 0px auto; 
 font: 13px/27px Arial, sans-serif; 
 cursor:hand; 
 vertical-align: middle; 
 }

Interfaz obtenida después de aplicar la Clase.

Uno de los detalles para no llegar rapido al problema es que ni el servidor de j2ee ni el Ide y menos aun el firebug nos da un reporte del fallo ni la localización del mismo, es hay donde se entra en pánico programático. Te cuestionas. Pero si todo esta bien.! El navegador es incompatible? que hize ultimamente?, mejor comparto el problema con mi equipo de trabajo para que vean porque estoy bloqueado!, y lo  mas critico es que el servidor de App J2EE en mi caso glassfish solo me reportaba lo siguiente.

Algo ilógico porque ya venia trabajando con el controlador muy eficientemente y nada de lo que reportaba tenia sentido.

Por eso en los momentos de crisis ten calma. Pide a la espiritualidad que te guié para lograr una búsqueda eficiente de la solución a los inconvenientes y realiza siempre un testeo en base a los ultimos cambios realizados. No olvides el backups diario y sobre todo informa del impase a tu equipo de trabajo,siempre te Entenderan.

!OJO. en algunos momentos de ejecucion el navegador nos puede hacer una mala jugada en su almacenamiento de cache y podemos estar mucho rato con el problema sin darnos cuenta de ello.