de webmaster a webmaster

Lo que tenemos clasificado como ‘FireFox

Ver la disposición de una página web

sin comentarios, by the moment porfaplis, deja uno que "é grati"

ver-wireframe-de-una-pagina.jpg

O como dicen los de lengua inglesa, ver el Wireframe, see the wireframe.

¿Qué es un wireframe?

Pues como ya decimos en el título un wireframe es un esquema de disposición de los diferentes elementos de una página web. Los módulos visuales sin textos en los que se distribuyen los contenidos.

La utilidad que le podemos dar es la del estudio y la inspiración, por ejemplo cuando una página web te gusta o te atrae por su usabilidad, ejecutas la herramienta y podrás ver su estructura, a partir de aquí inspira y expira código fuente hasta que la mejores.

En la captura de pantalla anterior te mostramos el wireframe de la página corporativa de nuestra aplicación de gestión online invOOice.com, una distribución la mar de sencilla y clara, en el header, selector de idiomas, logo, menú de navegación cuerpo de a tres columnas con imagen en cada una y un footer.

La aplicación para ver el wireframe

Esta aplicación es un Bookmarklet, es decir una aplicación web que se puede instalar como favorito, para instalarla:

Arrástra ESTO hasta tu barra de favoritos, si no te funciona dirígete a la página de autor y allí encontrarás más botones para instalarlo y una mayor documentación.

Os copiamos un vídeo de youtube sobre el funcionamiento de esta aplicación:

Enlace original: http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/

Compatibilidad del HTML5 entre navegadores

sin comentarios, by the moment porfaplis, deja uno que "é grati"

compatibilidad-html5-navegadores-web.png

En el siguiente enlace encontrarás la web original de donde he capturado la imagen con el esquema de compatibilidad de las nuevas funcionalidades del HTML así como diversos enlaces para poder comprobar por ti mismo la compatibilidad del HTML5 con los diferentes navegadores web: http://robertnyman.com/html5/

Blogueado por uvedobles.com alias uvedobles.com

December 2nd, 2010 a las 10:09 pm

Slider con hashtag bajo jQuery

sin comentarios, by the moment porfaplis, deja uno que "é grati"

Slider con hashtag construído bajo jQuery, la propiedad hashtag permite que desde cualquier enlace previo o cualquier enlace en la propia página puedas ir directamente a la diapositiva que quieras.

A nivel de efectos es sencillito pero muy efectivo, meter más efectos es meter más ruido y perder elegancia, puede modificarse prácticamente del todo via CSS.  No obstante estos efectos son totalmente ampliables mediante la configuración de diferentes easeIn y easeOut, puedes ver los efectos disponibles en:

http://gsgd.co.uk/sandbox/jquery/easing/

Además este slider permite que se desplace su contenido interior a través de la rueda de scroll del mouse, genera la paginación automática y permite cualquier tipo de contenido, todo en 2,2Kb. (Sin contar las librerías jQuery).

A nivel de compatibilidad hemos encontrado algún problema menor con Google Chrome, donde el indicador de paginación está sobre el contenido y la capa flotante pisa algo el contenido, bajo FireFox funciona perfectamente, quizá en una nueva versión corrijan estos problemas.

La licencia de este slider es totalmente free, es decir puedes incorporarla en tus propias aplicaciones sean comerciales o no.

Enlace: http://mgoys.com/lab/hashslider

Blogueado por uvedobles.com alias uvedobles.com

November 16th, 2010 a las 7:59 am

Internet Explorer 8 incompatible con max-width

con un 4 comentario, di la tuya, maracuya

Esto es un post rápido o apunte para tenerlo a mano pues tras darme de cabezazos durante un par de horas con una hoja de estilo y la compatibilidad entre diversos navegadores.

En especial esta compatiblidad afecta a Internet Explorer 8, el navegador que tristemente usa la mayor parte del planeta, y que hoy Microsoft pretende jubilar con su nueva versión, si bien es cierto que Internet Explorer 9 tiene buena pinta lamentablemente no es compatible con Windows XP, es decir, sólo funciona bajo Vista y Windows 7.

El Internet Explorer versión 8 o IE8 tiene un bug, y van fosfocientos mil, en fin, aunque quizá no sea tan bug sino una excentricidad o exceso de compatibilidad.

El bug es que Internet Explorer 8 no soporta los estilos max-width, min-width, max-height, min-height propiedades de estilo que como ya sabrás o habrás deducido con tu prodigiosa mente ceceseada sirven para definir el máximo ancho, mínimo ancho y altos de por ejemplo una caja de texto aka DIV.

Esta propiedad funciona perfectamente bajo FireFox, Chrome, Safari etc.

Fíjate en este trozo de código, donde ya te aviso que no funcionará bajo IE8.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style>
.width {
    width:50%;
    min-width:200px;
    max-width:400px;
    background:#eee;
}

Y ahora en este otro, que es el que funciona bajo IE8, la diferencia, es que defines el tipo de documento html sin especificación alguna con el tag DOCTYPE, es decir, no lo haces estricto tal y como se hace en documentos bajo HTML5, y por tanto, max-width funciona bajo IE8

<!DOCTYPE html>
<head>
<style>
.width {
    width:50%;
    min-width:200px;
    max-width:400px;
    background:#eee;
}

Blogueado por uvedobles.com alias uvedobles.com

September 17th, 2010 a las 7:19 am

Tienda de aplicaciones web

sin comentarios, by the moment porfaplis, deja uno que "é grati"

Una de cal y otra de arena, eso es lo que nos trae Google en su evento Googe I/O 2010, par amí esto es un notición como pocos no tanto por su novedad sino porque por fin un grande está detrás. Vamos por partes.

Si hace poco comentábamos la rocambolesca idea de Google de llevar el lenguaje C directamente al navegador con la descarga e instalación de aplicaciones via web luego nos trae lo que nosotros creemos que será un exitazo, una Store de aplicaciones web donde podrás vender tus aplicaciones web con la confianza que Google puede transmitir al usuario.

Una tienda de aplicaciones web con la confianza de Google

Por fin, alguien se decide a intentar unificar en un catálogo o tienda las aplicaciones diseñadas por todos nosotros. Sin lugar a dudas, con el tiempo, triunfarán.

Apple y su appStore para iPhone e iPad

En el otro lao Apple no debe estar en exceso tranquila con lo bien que parece irle todo, pues esta Store es lo mismo que su AppStore pero para todos los dispositivos que posean un navegador moderno, incluso podrás llegar a los iPhone, a menos que Apple ya en un exceso de recelo y ambición prohíba determinadas webs en el navegador Safari que incorporan tanto os iPhone como iPad iPod y futuros.

La webStore de Google potenciará HTML5

La Store de Google incluye programas desarrollados bajo HTML y Flash, si bien según rezan y repiten pretenden que sea HTML5 invitando a migrar a todos nuestras aplicaciones hacia este nuevo estándard que parece que va a ser empujado, y de que manera por la todopoderosa.

La webStore de Google es aún un proyecto, en marcha pero no accesible por el momento, hemos investigado a ver que podíamos encontrar pero no hemos sacado mucha info al respecto si bien os copiamos una URL con la siguiente docu sobre como crear una aplicación web compatible con la tienda, o al menos eso es lo que entendemos:

http://code.google.com/chrome/apps/docs/developers_guide.html

El nombre de la webStore de Apple

Ahora bien el nombre que han elegido para su webStore es muy feo: chromewebstore

Que pesaitos con esto del “Chrome” para esto “Chrome” para lo otro, en lugar de potenciar algo que ya funciona bastante bien y que posee un nombre de los más cool como es Android no se porque se empeñan en desdoblar esfuerzos para algo que en sí es lo mismo.

Enlace: https://chrome.google.com/webstore