prefix-free es un script que habra que tener muy en cuenta ya que nos ayuda a resolver uno de los problemas

ms molestos a la hora de escribir reglas de estilo "modernas" ya que lo que hace es agregar de modo automtico, los prefijos correspondientes para cada navegador de tal modo que no sera necesarios escribir algo as: .una-regla { background-image: -moz-linear-gradient(#000,#FFF); background-image: -webkit-linear-gradient(#000,#FFF); background-image: -o-linear-gradient(#000,#FFF); background-image: -ms-linear-gradient(#000,#FFF); background-image: linear-gradient(#000,#FFF); } y todo ese exceso de lneas (que, inevitablemente uno termina equivocando u olvidando) se transformara en es esto: .una-regla { background-image: linear-gradient(#000,#FFF); } es decir, slo deebra usarse la propiedad especificada por la w3.org y del resto, se encargar el script. En que navegadores funcionar? En todos aquellos que usen ese tipo de prefijos, Firefox, Chrome, Safari, Opera, IE9 en adelante y las versiones mviles ms comunes. Obviamente, como IE8 no soporta la mayora de las propiedades CSS3, nada ocurrir all pero tampoco tendr influencia alguna, todo seguir como antes. Funciona en Blogger? Si, no debera haber problemas ya que el script se ejecuta tanto sobre etiquetas <style> </style>, estilos externos agregados con la etiqueta LINK o incluso, en estilos agregados inline con el atributo style en la misma etiqueta. Cmo lo usamos? Descargamos el script desde la pgina del desarrollador (es muy pequeo) y lo alojamos en un servidor: <script src='URL/prefixfree.min.js' type='text/javascript'/> o simplemente lo copiamos y pegamos en la plantilla entre etiquetas <script type='text/javascript'> //<![CDATA[ ....... ac pegamos el contenido del archvo js .......

//]]> </script> y, en ambos casos, conviene hacerles caso a los desarrolladores y agregarlo justo antes de </head> Tres ejemplo rpidos: /* un fondo con gradiente */ #pf1{background-image:linear-gradient(#000,#FFF);} /* una transicin */ #pf2{font-size: 0;line-height: 100px;border-radius:0;background-color: #000;transition:all 1s;} #pf2:hover{background-color:#F0F8FF;border-radius:50px;background-color: #F00;font-size: 80px;} /* una animacin*/ #pf3{background-color:#000;animation: recrojo 1s infinite alternate;} @keyframes recrojo {from {background-color:#000;} to {background-color:#F00;}}

Prefix Free

Como ya todos saben, CSS3 trae consigo cosas geniales, pero debido a la falta de colaboracin entre los diferentes proveedores de navegadores, tenemos que sufrir la existencias de prefijos de acuerdo a cada navegador. Si bien los prefijos existentes no son muchos, es molesto tener que repetir las instrucciones, una por cada prefijo. Es ac donde prefix free hace su entrada, y es que la ingeniosa diseadora Lea Verou se puso a la tarea de crear esta maravillosa librera, que esta desarrollada en JavaScript, y la que permite que usemos solo las propiedades estndar en nuestras hojas de estilo, lo que resulta realmente til, mas si tenemos en cuenta que no

sabemos cuando estos prefijos pueden cambiar, como parece que puede suceder en el caso de Chrome, ahora que dejan de lado webkit. Esta librera esta disponible en el sitio oficial de Prefix Free, destaca su reducido tamao, y el hecho de ser libre. Su uso es bastante sencillo, y basta con agregar a la cabecera de nuestro documento la siguiente lnea:
<script src="js/prefixfree.min.js"></script>

Con esto podremos pasar de tener una hoja de estilo con cosas como esta:
div{ width: 960px; margin:10px 0; -webkit-box-shadow: 5px; /*Chrome y Safari*/ -moz-box-shadow: 5px; /*Mozilla*/ -ms-box-shadow: 5px; /*IE9 o superior*/ -o-box-shadow: 5px; /*Opera*/ -khtml-box-shadow: 5px; /*Konqueror*/ box-shadow: 5px; -webkit-border-radius:15px; /*Chrome y Safari*/ -moz-border-radius:15px; /*Mozilla*/ -ms-border-radius:15px; /*IE9 o superior*/ -o-border-radius:15px; /*Opera*/ -khtml-border-radius:15px; /*Konqueror*/ border-radius:15px; }

Por una hoja de estilos como esta:

div{ width: 960px; margin:10px 0; box-shadow: 5px; border-radius:15px; }

Diseo web adaptativo

El diseo web adaptativo o adaptable (en ingls, Responsive Web Design) es una tcnica de diseo y desarrollo web que mediante el uso de estructuras e imgenes fluidas, as como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. El diseador y autor norteamericano Ethan Marcotte cre y difundi esta tcnica a partir de una serie de artculos en A List Apart, una publicacin en lnea especializada en diseo y desarrollo web, idea que luego extendera en su libro Responsive Web Design.
ndice
[ocultar]

1 Origen 2 Ventajas 3 Referencias 4 Enlaces externos

Origen[editar editar cdigo]

Tanto la idea y como el propsito del diseo web adaptativo fueron previamente discutidos y descritos por el consorcio W3C en julio de 2008 en su recomendacin "Mobile Web Best 1 Practices" bajo el subttulo "One Web". Dicha recomendacin, aunque especfica para dispositivos mviles, puntualiza que est hecha en el contexto de "One Web", y que por lo tanto engloba no solo la experiencia de navegacin en dispositivos mviles sino tambin en dispositivos de mayor resolucin de pantalla como 2 dispositivos de sobremesa. El concepto de "One Web" hace referencia a la idea de construir una Web para todos (Web for 3 All) y accesible desde cualquier tipo de dispositivo (Web on Everything). Hoy en da, la variedad de dispositivos existente en el mercado ha provocado que la informacin disponible no sea accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegacin es muy pobre.

Ventajas[editar editar cdigo]

Con una sola versin en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estar optimizado para todo tipo de dispositivos: PCs, tabletas, telfonos mviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos mviles. De esta forma se reducen los costes de creacin y mantenimiento, pues se evita tener que desarrollar aplicaciones ad-hoc para versiones mviles, por ejemplo, una aplicacin especfica 4 paraiPhone, otra para mviles Android, etc. Desde el punto de vista de la optimizacin de motores de bsqueda, slo aparecera una URL en los resultados de bsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de stas. Tambin se evitaran errores al acceder al sitio web en concreto desde los llamados "social links", es decir, desde enlaces que los usuarios comparten en medios sociales tales comoFacebook, Twitter, etc y que pueden acabar en error dependiendo de qu enlace se 5 copi (desde qu dispositivo se copi) y desde qu dispositivo se accede.

Retina Design
Qu es un Retina Display? En trminos generales es una pantalla de alta definicin, eso es todo. Los productos de Apple no son los nicos que poseen este tipo de pantalla, estas pantallas estn siendo ampliamente implementadas y utilizadas, por lo tanto, es importante crear sitios web y aplicaciones que soportan estas pantallas.

Dicho esto, permtanos explicar por qu las imgenes Retina Ready y el Responsive Web Design van de la mano y cmo crear este tipo de imgenes.

Qu significa Retina? Una visualizacin sencilla explicar este concepto bien as que eche un vistazo a la imagen de abajo, que compara los pxeles entre la Retina y una pantalla de definicin estndar. En las pantallas Retina se obtiene el doble de pxeles en el mismo espacio, esta es la razn por lo que los iconos o texto en un iPad 2 se ven borrosos y luego en el iPad 3 o superior no. El dilema Diseadores y desarrolladores ahora tienen que adaptarse a los diferentes tipos de pantallas. Si no es as los usuarios con pantallas Retina vern diseos borrosos, o los usuarios sin Retina tendrn cargas ms lentas sin disfrutar de una alta calidad en las imgenes. Por eso es importante que entre en juego el Responsive Web Design.

Cmo crear imgenes Retina Ready en Responsive Web Design? Hay varios mtodos. Vamos a exponer slo unos pocos.

SVG SVG es un formato de imagen para grficos vectoriales, debido a que los vectores estn compuestos de coordenadas matemticas en vez de pixeles, se pueden manipular de muchas maneras manteniendo intacta su forma y calidad. Por desgracia, las imgenes de mapa de bits -JPG, PNG o GIF- no pueden hacer eso.

Fotografas e imgenes de mapa de bits Desgraciadamente no todas las imgenes pueden ser un formato SVG, nos veremos obligados a trabajar tambin con mapas de bits. Hay una posible solucin a este problema que consiste en utilizar la imagen al doble de su tamao deseado y mostrar el 50% de esas dimensiones. Lo que queremos decir es que si tienes una foto que es de 150px de ancho por 150px de altura, utiliza una imagen de 300px x 300px. De esta manera, en una pantalla retina la imagen se muestra en la calidad adecuada.

Hay muchas maneras mostrar imgenes 2x en su sitio web a travs de HTML, CSS o JS. No vamos a entrar en detalles, pero vamos a mostrar slo los mtodos bsicos.

En primer lugar, si usted tiene una imagen que es de 300px x 300px, slo tiene que declarar en el cdigo HTML que el alto y el ancho de la imagen que van a 150px.

PhoneGap
PhoneGap es un framework para el desarrollo de aplicaciones mviles producido por Nitobi, y comprado posteriormente por Adobe Systems.1 2 Principalmente, PhoneGap permite a los programadores desarrollar aplicaciones para dispositivos mviles utilizando herramientas genricas tales como JavaScript, HTML5 y CSS3. Las aplicaciones resultantes son hbridas, es decir que no son realmente aplicaciones nativas al dispositivo (ya que el renderizado es realizado mediante vistas web y no con interfaces grficas especficas a cada sistema), pero no se tratan tampoco de aplicaciones web (teniendo en cuenta que son aplicaciones que son empaquetadas para poder ser desplegadas en el dispositivo incluso trabajando con el API del sistema nativo). En la tercera version de PhoneGap se incorpora el uso de una interfaz de comandos a traves de consola, una nueva arquitectura de plugins descentralizados y la posibilidad de utilizar un codigo web unificado para crear multiples proyectos. PhoneGap maneja APIs que permiten tener acceso a elementos como el acelermetro, cmara, contactos en el dispositivo, red, almacenamiento, notificaciones, etc. Estas API's se conectan al sistema operativo usando el cdigo nativo del sistema huesped a traves de una Interfaz de funciones forneas en Javascript. PhoneGap adems nos permite el desarrollo ya sea ejecutando las aplicaciones en nuestro navegador web, sin tener que utilizar un simulador dedicado a esta tarea, adems, nos da la posibilidad de soportar funciones sobre frameworks como Sencha Touch o JQuery Mobile. PhoneGap es una distribucin de Apache Cordova.3 La aplicacin fue primero llamada solamente "PhoneGap", y luego "Apache Callback". Ambos sistemas tienen funciones casi identicas, la diferencia principal entre Apache cordova y Phonegap es que el segundo tiene acceso a servicios de compilacion en la nube proporcionados por Adobe Creative Cloud. Apache Cordova es un software de cdigo abierto y tanto este como PhoneGap pueden ser utilizados libremente en cualquier aplicacion sin necesidad de atribucin o licencias de ningn tipo.