Quitar Bisel de un elemto html5 (button o submit) cuando aplicamos css

Si alguna vez te ha pasado que aplicas estilos css3 a un elemnto botton o submit de html5 y nos damos cuenta de que tiene un feo bisel y acaba con todo lo hermoso que puede hacer el CSS , bueno pues es muy sencillo de quitarlo.

Simplemente a tu css aplicas la siguiente línea de código:

border:0;

y listo.

o también puedes arreglar tu propio border, por ejemplo
1 pixel sólido y algun color en rgb

ej.
1px solid rgb(70,133,0);

y se verá aun mas hermoso..

;)

Responsive Design

En los últimos años el desarrollo web ha creado un gran apogeo, crear para la web ya no solo implica hacer páginas informativas y estáticas que ocupen un espacio dentro de la web, sino que ahora implica el uso de diferentes tecnologías, las cuales trabajan en un ambiente cliente-servidor utilizando bases de datos lo cual genera una mayor interactividad con los usuarios.

Otra cosa que cabe mencionar, es que en los últimos años se ha generado una tendencia hacia el uso a de diferentes dispositivos móviles, es decir, anteriormente la mayoría de usuarios navegaban por internet visitando páginas web a través de computadoras de escritorio, pero esto ya no es así, actualmente más de la mitad de los usuarios que navegan en la web lo hacen utilizando un dispositivo portátil.

Esto ha obligado a los desarrolladores a crear nuevas herramientas las cuales faciliten el desarrollo de sitios atractivos y funcionales, pensando siempre en brindar un ambiente agradable y funcional al usuario, logrando hacer que este pueda sentirse atraído hacia un sitio web y al mismo tiempo este pueda recomendarlo a otros usuarios. Lo anterior puede usarse como estrategia para atraer más usuarios hacia ese sitio.

Entre las herramientas creadas para combatir directamente el problema anterior se encuentra una que más ha impactado tanto a  desarrolladores web como a los usuarios y es que a través de sus características ha logrado no solo ahorrar tiempo, sino también capital por parte de las personas que lo utilizan.

Esta herramienta lleva el nombre de Responsive Web Design o Diseño Web Responsivo, una tecnología web que hace que los sitios puedan ser fluidos, esto es, páginas que puedan adaptables al dispositivo a través del cual se esté accediendo. 

La idea de utilizas la tecnología Responsive design fueron discutidos y descritos por la W3C en mediados del años 2008 en su recomendación “Mobile Web Best Practices” bajo el subtítulo "One Web".

Este principio aunque era específica para móviles puntualiza que está hecha bajo el concepto “One Web” y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de sobremesa.

El concepto de "One Web" hace referencia a la idea de construir una Web para todos y que sea accesible desde cualquier tipo de dispositivo.

Anteriormente, con las páginas normales, era muy incómodo navegar en ellas a través de un dispositivo portátil, esto porque que las resoluciones son variantes, lo cual hacía difícil ver contenido completo y la experiencia para el usuario era desagradable.

Responsive Design utiliza estructuras e imágenes fluidas así como usa los media-queries empleando hojas de estilo en cascada (CSS) consiguiendo adaptar los sitios el entorno del usuario.

Implementar Responsive Design es muy sencillo, basta con ordenar los elementos de la página a través de las hojas de estilo en cascada de estas, así cuando se esté accediendo desde cualquier dispositivo, ésta pueda ajustarse a las dimensiones del mismo, logrando que el contenido pueda mostrarse y verse con facilidad.

A continuación se detalla cómo se hace el Responsive Design utilizando los media-queries.

Para ello es necesario crear primero una nueva hoja de estilo .css, en ella se colocarán los estilos que definirás como se ordenaran los objetos en pantalla al detectar cierta resolución de un dispositivo.

La siguiente línea de código muestra cómo se crea un media-querie:

@media only screen and (max-device-width: 480px) and (orientation : landscape) {
/* estilos */

}

Para importarla a nuestra página html basta con colocar el siguiente código:

<link href="css/phone.css" rel="stylesheet" type="text/css"

Con lo anterior no se necesita más que conocimientos medios en CSS para  implementar Responsive Design, de lo demás dependerá de la creatividad del desarrollador.

Convertir SWF a HTML5 con Google Swiffy

Hoy en día con la revolución de las tecnologías en la web, específicamente HTML5 es necesario adaptarse a los nuevos estándares de desarrollo web, hace algunos años los archivos swf eran de gran ayuda para dar animación a ciertas imágenes en nuestro sitio web.

Un archivo swf (Shockwave Flash) es aquel que se genera al exportar un archivo FLA de Adobe Flash Professional. Los archivos SWF están diseñados para ser pequeños archivos comprimidos que puedan ser publicados en la web. Los archivos SWF pueden contener animaciones, componentes, mapa de bits, gráficos vectoriales y vídeo digital.

Pero hay existe css3 para hacer animaciones y ahora los navegadores modernos y sobre todo los navegadores de los dispositivos móviles, no soportan este tipo de archivos swf.

Lamentablemente una gran cantidad de sitios web los empleaba de manera regular y hasta ahora puede ser que se encuentren aún en sus páginas web, pero es importante evolucionar al nuevo y demandante mundo de la web responsive design.


Habrá muchos webmasters que desearán conservar algunos archivos flash en sus nuevos diseños.

Para estos casos google desarrolló una herramienta llamada swiffy.

Swiffy lo que hace es convertir los archivos flash en html5.

Para convertir e implementar los archivos swf a html5, puedes seguir los siguientes pasos.


1. Abre el sitio de google swiffy. https://www.google.com/doubleclick/studio/swiffy/

2. Luego presiona el botón seleccionar archivo para seleccionar el archivo swf,

Acepta los términos del servicio y selecciónalo.

3. Una vez seleccionado el archivo les aparecerá el botón de Upload and convert

Si todo sale bien google swiffy mostrará las dos imágenes abajo, una en swf y la otra en html5.

4. Para implementarlo en nuestro sitio web lo que debemos hacer es descargar el archivo html que genera el cual se muestra al final de la conversión.

Si miramos el código fuente de ese archivo html contiene en el “head” un script que es necesario para ejecutar la imagen o animación.

El script puede ser este: 

<script src="https://www.gstatic.com/swiffy/v5.2/runtime.js"></script>

5. El script anterior lo  insertan en la etiqueta head de la página donde van a poner su animación.

6. En seguida copian el script que contiene un código enorme, es parecido a esto:

swiffyobject = {"internedStrings":………….

Lo anterior también se inserta en el head

7. Por último copian el div contenedor de la animación o imagen el cual es parecido a esto

<div id="swiffycontainer" style="width: 550px; height: 450px"></div>

8. También deben copiar un escript que pone el código en el contenedor, todo esto es en el body.

<script>
	var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
	swiffyobject);
	stage.start();
</script>

9. ¿Cómo hacerlo responsive design?


Lo único que tienes que hacer para que su imagen o animación se adaptable simplemente hay que aplicarle al style del div contenedor un max-width en 100%. Como a continuación.

<div id="swiffycontainer" style="width: 550px; height: 450px; max-width:100%"></div> PD. Disculpen la presentación del código

Tutorial 4 Spring Framework en español

JavaFX

¿Qué es JavaFX?

Para comenzar a hablar de JavaFX es necesario antes conocer el significado de una RIA (Rich Internet Application) Aplicaciones Enriquecidas de Internet, ya que esta tecnología está enfocada principalmente en el desarrollo de este tipo de programas.

Una RIA es una aplicación que tiene la habilidad de ejecutarse tanto en un ambiente de escritorio como en un ambiente web, eh aquí el emblema de Java que dice “Escribe una vez, ejecuta en todas partes”, lo cual nos brinda una gran facilidad de uso.

Ahora, volviendo a  JavaFX, podemos denominar a esta tecnología como un conjunto de librerías Java que permiten al desarrollado diseñar, crear, compilar y desplegar diferentes aplicaciones con un ambiente enriquecido que operan constantemente en diferentes plataformas. 

Surgimiento de JavaFX

JavaFX surge como una alternativa de Java Swing que anteriormente se utilizaba para crear este mismo tipo de aplicaciones, FX es el siguiente paso en la evolución de Java como una plataforma de cliente enriquecido. FX surge a partir del año 2008, lanzando su versión 1.0 en diciembre de ese año. A pesar de su inicio eventual y con la llegada de sus versiones posteriores muchos desarrolladores consideraban que esta tecnología podría desaparecer a causa del mínimo uso que se le daba y también por el surgimiento de  nuevas tecnologías más robustas, como lo es HTML5, Silverlight de Microsoft y Flex de Adobe, pero eso no sucedió y JavaFX continuo con su trayectoria apostándole todo al desarrollo de las tecnologías de cliente enriquecidas.

Características de JavaFX

Actualmente FX cuenta con ocho versiones, la más reciente 2.2, la cual emplea una gran variedad de características como por ejemplo: FXML, basado en XML Scripts para la creación de interfaces de usuario, implementación de multimedia de alto rendimiento, motor de renderizado web, y el diseño en tercera dimensión 3D que se ha estado implementando últimamente, el cual tendrá un gran soporte en su siguiente versión JavaFX 3.0, que saldrá en el año 2014, incluido en el JDK8, entre otras particulares.   

Modo de operar de JavaFX

A diferencia de swing JavaFX trabaja en forma de árbol jerárquico, compuesto de nodos que representan todos los elementos visuales de la interfaz gráfica. Todo se muestra  a través de escenas gráficas, cada elemento grafico mostrado en la escena es considerado un nodo. Con excepción del nodo raíz cada nodo debe tener solo un nodo padre y cero o más hijos, asimismo cada nodo tiene un identificador, clase de estilo, un volumen de delimitación y un estado, esto último nos permite aplicarle diferentes tipos de transformaciones a dicho nodo.

Los diferentes nodos pueden ser agrupados y situados en diferentes contenedores para posteriormente ser mostrados en pantalla.

Ventajas de Java FX

La ventaja de usar JavaFX es que permite definir una potente interfaz de usuario basado en Java. Otra ventaja acumulativa es que, gracias a que JavaFX está escrito como un API de Java, es nos posible acceder y utilizar las librerías  del lenguaje nativo Java y acoplarlo con otros marcos de desarrollo sin ningún problema de compatibilidad. Por ejemplo podemos usar FX al mismo tiempo que usamos Swing, ambos se acoplan perfectamente sin generar problemas.

Requerimientos para ejecutar JavaFX

Los requerimientos para poder crear y desplegar una aplicación FX son las siguientes:

• Contar la Máquina Virtual de Java (JVM) en una versión 1.7.0_21 o superior
• Tener instalado JavaFX Runtime 2.2 o superior
• Contar con un IDE (Interfaz de desarrollo, Ej. Netbeans IDE)
• JavaFX Scene Builder 1.0 o superior (Opcional para la creación de interfaces)
• Navegador actualizado:
• Internet Explorer Versión 7 o posterior
• Mozzila Firefox Versión 3 o posterior         
• Google Chrome Última Versión
• Safari Versión 5 o superior
• Etc.

¿Qué se puede desarrollar en JavaFX?

Como se mencionó anteriormente JavaFX está destinado a la creación de RIA’s, entonces, es posible con FX crear diferentes aplicaciones multiplataforma entre ellas podemos mencionar a los Applets de Java (Aplicaciones que facilitan el aprendizaje de un tema a través de interfaces de usuario con funcionamiento especifico y una interacción realizada por el usuario), que anteriormente eran creados con el lenguaje nativo, ahora es posible crear estas mismas aplicaciones pero con un ambiente más enriquecido, amigable y robusto. 

En resumen podemos decir que JavaFX tiene un gran impacto en el ámbito de las aplicaciones enriquecidas, ya que a diferencia de las tecnologías con las que compite, FX tiene un mayor rendimiento y cuenta con una mayor estabilidad, además de que es multipltaforma.