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 

Modelado de Software mediante UML2

Aplicación WEB para el Control en Línea de Reservas de Salas del Departamento de TICS en la I.E. Los Pinos.

Este proyecto es desarrollado como trabajo final en la asignatura de Ingenieria de Software II  bajo la supervicion del Ingeniero Edwardo Millan a quien agradezco profundamente por las enseñanzas brindadas en clase.

Propósito del sistema

Sistema de información en línea (Aplicación Web), que permite llevar a cabo el control general para un departamento de TIC (Tecnologías de la información y la comunicación), en la Institución Educativa Los Pinos de la Ciudad de Florencia.

Sistema propuesto

Se Propone el desarrollo de un sistema de control orientado a la web para el control de un Departamento de Tecnologías de la Información y la Comunicación permitiendo realizar gestión de recursos, usuarios y control de salas de sistemas. Como el proyecto abarca gran tiempo en el desarrollo de sus módulos se desarrollara para esta primera versión solo el modulo de reserva de salas en línea.

Requerimientos funcionales 

• ·         Consultar Horario de Disponibilidad de las Salas. 
• ·         Ver historiales de reservas y ver reserva actual en servicio. 
• ·         Realizar reservas en línea. 
• ·         Un administrador de salas debe aprobar o rechazar la solicitud de una reserva y enviar por correo electrónico un mensaje de aprobación o rechazo al solicitante. 
• ·         Ingresar novedades por parte del administrador o ingresar recomendaciones de parte del usuario servido, si existen, al terminar cada uso de sala (reserva). 
• ·         Gestionar Inventarios de salas de sistemas (Hardware y Software) y actualizar inventarios a medida que vallan surgiendo novedades durante el préstamo de las salas. (Pendiente por falta de tiempo)
• ·         Gestionar usuarios del Sistema (Listar, editar, eliminar, agregar, actualizar). 
• ·         Entregar y Recibir salas por parte del administrador de las salas y el usuario que usa el servicio de reserva. 
• ·         El Administrador deberá Generar Reportes en .PDF de forma mensual para cada sala.

Requerimientos no funcionales 

• ·         El software debe estar desarrollado (construido) en una herramienta libre (NetBeans 6.8) y con almacenamiento de datos en un motor libre (mysql). 
• ·         Desarrollo en lenguaje Java (JSP) en combinación con tecnología ajax usando el Framework Ext.js de Sencha. 
• ·         Debe estar Desarrollado aplicando una arquitectura J2EE
• ·         Uso de la metodología de desarrollo de software RUP 
• ·         Uso de la herramienta Visual Paradigm para modelamiento UML.

Div con Esquinas redondeadas hechas con puro CSS

CSS es uno de los lenguajes mas usados en el desarrollo de paginas web dinamicas con estilos visuales atractivas, las Cascading Style Sheets (CSS) son archivos que contienen clases visuales para aplicar a componentes html.

Ejemplo

<style>
.texto{
  text-aling:center; /*texto centrado*/
  font-size:15px;/*tamaño del texto*/
  color:#000000;
  border-bottom:1px solid gray; 
  /*Borde inferior de grosor 1px solido y de color gris*/
}
</style> 

Ahora para aplicar este estilo a un elemento simplemente lo aplicamos en el atributo class del elemento. La mayor ventaja de usar CSS es que se puede reutilizar la clase en varios elementos html.

Ejemplo:

<div class="texto">
Este es un texto de prueba con un estilo visual aplicado.
</div>

Despues de esta breve introduccion ahora si vamos a ver tres ejemplos de Cajas (div) con bordes redondeados hechos solo con css y algunas imagenes en el caso del 3 ejemplo.

Informacion de Ayuda.

Ver Ejemplo 1 en Linea.
Ver Ejemplo 2 en Linea.
Ver Ejemplo 3 en Linea.

Mostrar y Ocultar elementos HTML en una JSP con JQuery

Ahora y Desde hace mucho, Mediante la libreria jquery podemos realizar efectos especiales en los componentes html (input,select,checkbox,etc) de nuestras jsp, este es un ejemplo basico para ocultar y mostrar un campo de texto al seleccionar una casilla de verificacion.

<html>
<head>
<title>Mostrar Ocultar</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script> 
     $(document).ready(function(){
     $("#mayoria_edad").click(function(evento){
        if ($("#mayoria_edad").attr("checked")){
       $("#formulariomayores").css("display", "block");
       }else{
       $("#formulariomayores").css("display", "none");
     }
});
});
</script>
</head>

<body>

<form>
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="mayor_edad" value="1" id="mayoria_edad"> Soy mayor de Edad
<br>
<div id="formulariomayores" style="display: none;">
Solo mayores de Edad: <input type="text" name="mayores_edad">
</div>
</form>
</body>
</html>

Informacion de Ayuda.

Ver Ejemplo en Linea.

Efectos Sobre Etiquetas DIV usando Mootols y su funcion FxTween

Mootools es una libreria ajax que nos permite realizar una gran variedad de efectos especiales sobre componentes html como div, span, a, etc.

En esta ocasion vamos a ver la utilidad de la funcion Fx.Tween y para ello vamos a ver dos pequeños ejemplos. El primero consite en aplicar transparencia en capas a una div, el segundo consiste en cambiar el color de fondo de una div al dar click sobre un enlace.

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Cambiar Fondo DIV</title>
<script src="libreria/mootools-1.js" type="text/javascript"></script>
<script>
function CambiarColorDiv(){
efecto = new Fx.Tween("micapa1");
efecto.start("background-color", "#ffffff");
efecto.start("color", "#ffffff");

efectoColorTexto = new Fx.Tween("micapa2", {
property: 'background-color',
duration: 'long',
fps: 200
});
efectoColorTexto.start("#ff8800"); 
};
</script>
</head><body>
<div id="micapa1" style="padding: 5px; background-color: rgb(120, 166, 0); width: 160px; font-size:11px; color:#FFFFFF;">
cambiando el color de una div usando librerias javascript MOOTOLS y la Super funcion Fx.Tween
</div>
<div id="micapa2" style="padding: 5px; background-color: rgb(120, 166, 0); width: 160px; font-size:11px; color:#FFFFFF;">
cambiando el color de una div usando librerias javascript MOOTOLS y la Super funcion Fx.Tween
</div>

<a onClick="CambiarColorDiv();">Click Aca para Cambiar el Fondo de la Div</a>
</body></html>

• Ver Primer ejemplo en linea.
• Ver Segundo Ejemplo en Linea.
  

Aplicaciones JSP (Java Orientado a la Web)

Bien, en esta publicacion hablare un poco sobre el desarrollo de aplicaciones web alojadas bajo servidores java (resin, tomcat), explicare como configurar los archivos para el resin y como enlazar la base de datos. Como se que muchos lo estaban esperando, lo he organizado de la mejor manera para que sea lo mas entendible posible. No apto para cardiacos.

Nuestros Requerimientos.

1. Sitio Web para la Gestion de Imagenes Fotograficas (Galeria Fotografica).
2. Arquitectura J2EE.
   
3. Patron de diseño MVC.
4. Metodologia XP (Programacion Extrema).
5. Modelado de Datos.
   
6. Modelado UML.

Nuestras Herramientas.

1. Motor de Base de datos Access.
2. Servidor de Aplicaciones Resin (Caucho Tecnology)
3. IDE Netbeans
4. IDE Dreamweaver
5. IDE TopStyle
6. Acces de Microsoft Oficce
7. Configurar Conexion ODBC
   

Nota.

1.  Si desea conectarse a POSTGRES o MYSQL Pegar el driver de postgresql-8.4-701.jdbc3.jar y el de mysql en el directorio c:archivos de programa/java/jdk6/jre/lib/ext.
   
2. Crear la odbc con windows desde herramientas administrativas con el nombre ConectToAcces
   y seleccionando la bd acces de nombre contacto, porque asi esta referenciado en el bean conexion de nuestro proyecto web.
3. Si se conecta con postgres arrancar Postgrest para que cuando se use la opcion de conectar con postgrest este este activado.
4. Copiar y pegar el contenido sql del archivo sqlcontactoPostgrestoMysql.sql, anexo en esta carpeta.
5. Si se conecta con postgres arranque el servicio de postgres desde herramientas administrativas, servicios. (No olvidar) para que no presente problemas de conexion.

Mediante un ejemplo para descargar, se muestra este pequeño proyecto web realizado a bajo costo, pero en el que al principio tuve que invertir mucho tiempo en lecturas y practicas para entender la verdadera usabilidad de este tipo de aplicaciones.

Explorando NetBeans

(IDE) Entorno de Desarrollo Integrado. NetBeans es una de las plataformas para desarrollo de software mas robustas y faciles de usar que existen en la actualidad al igual que el IDE eclipse, son software libre o de libre distribucion y utilizacion. en su mas reciente version la 6.0.1 nos da la posibilidad de poder diseñar entornos web de la manera mas eficiente con la nueva serie de componentes J2EE, componentes que nos permiten mejores interfaces graficas para el Desarrollo web.

El desarrollo de aplicaciones a venido girando entorno al ambiente web, los programas de escritorio ya caducaron, se encuentran en proceso de migracion hacia las nuevas plataformas web. Hoy hasta la intranet ya va desapareciendo.
los primiparos en desarrollo que desean iniciar su etapa de manejo del netbeans podran hacer uso de este blog para encontrar contenido sobre el uso del netbeans. Estos temas pueden ser investigados detalladamente en la internet por ahora son solo producto de mi experiencia en el manejo del Ide NetBeans.
Se requiere la version 6 del JDK para la Instalacion.