You are on page 1of 6

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

problemas más molestos a la hora de escribir reglas de estilo "modernas" ya que lo que hace es agregar de modo automático, los prefijos correspondientes para cada navegador de tal modo que no sería 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 líneas (que, inevitablemente uno termina equivocando u olvidando) se transformaría en es esto: .una-regla { background-image: linear-gradient(#000,#FFF); } es decir, sólo deebría 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 móviles más comunes. Obviamente, como IE8 no soporta la mayoría de las propiedades CSS3, nada ocurrirá allí pero tampoco tendrá influencia alguna, todo seguirá como antes. ¿Funciona en Blogger? Si, no debería 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. ¿Cómo lo usamos? Descargamos el script desde la página del desarrollador (es muy pequeño) 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 .......

tenemos que sufrir la existencias de prefijos de acuerdo a cada navegador.transition:all 1s. mas si tenemos en cuenta que no . y la que permite que usemos solo las propiedades estándar en nuestras hojas de estilo. pero debido a la falta de colaboración entre los diferentes proveedores de navegadores. lo que resulta realmente útil. es molesto tener que repetir las instrucciones. CSS3 trae consigo cosas geniales. en ambos casos. Si bien los prefijos existentes no son muchos.//]]> </script> y.} to {background-color:#F00. y es que la ingeniosa diseñadora Lea Verou se puso a la tarea de crear esta maravillosa librería. una por cada prefijo.background-color: #000.border-radius:50px.#FFF).}} Prefix Free Como ya todos saben.} /* una animación*/ #pf3{background-color:#000.line-height: 100px.} @keyframes recrojo {from {background-color:#000. que esta desarrollada en JavaScript.animation: recrojo 1s infinite alternate.border-radius:0.} /* una transición */ #pf2{font-size: 0. Es acá donde prefix free hace su entrada.background-color: #F00.font-size: 80px.} #pf2:hover{background-color:#F0F8FF. conviene hacerles caso a los desarrolladores y agregarlo justo antes de </head> Tres ejemplo rápidos: /* un fondo con gradiente */ #pf1{background-image:linear-gradient(#000.

Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas. } Por una hoja de estilos como esta: div{ width: 960px.min. -webkit-box-shadow: 5px. destaca su reducido tamaño. /*Opera*/ -khtml-border-radius:15px. Su uso es bastante sencillo. Índice [ocultar] . una publicación en línea especializada en diseño y desarrollo web. margin:10px 0. y el hecho de ser libre. Esta librería esta disponible en el sitio oficial de Prefix Free. /*Chrome y Safari*/ -moz-box-shadow: 5px. /*Mozilla*/ -ms-box-shadow: 5px. idea que luego extendería en su libro Responsive Web Design. /*Mozilla*/ -ms-border-radius:15px. /*IE9 o superior*/ -o-border-radius:15px. /*Chrome y Safari*/ -moz-border-radius:15px. box-shadow: 5px. ahora que dejan de lado webkit.js"></script> Con esto podremos pasar de tener una hoja de estilo con cosas como esta: div{ width: 960px. /*IE9 o superior*/ -o-box-shadow: 5px. como parece que puede suceder en el caso de Chrome. /*Opera*/ -khtml-box-shadow: 5px. así como de media-queries en la hoja de estilo CSS. -webkit-border-radius:15px. margin:10px 0.sabemos cuando estos prefijos pueden cambiar. } Diseño web adaptativo El diseño web adaptativo o adaptable (en inglés. consigue adaptar el sitio web al entorno del usuario. y basta con agregar a la cabecera de nuestro documento la siguiente línea: <script src="js/prefixfree. /*Konqueror*/ border-radius:15px. /*Konqueror*/ box-shadow: 5px. El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart. border-radius:15px.

por lo tanto. desde enlaces que los usuarios comparten en medios sociales tales comoFacebook. Retina Design ¿Qué es un Retina Display? En términos generales es una pantalla de alta definición. También se evitarían errores al acceder al sitio web en concreto desde los llamados "social links". etc. 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). Twitter. aunque específica para dispositivos móviles. con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. o bien es accesible pero la experiencia de navegación es muy pobre. con sitios web de ancho fijo cuando se acceden desde dispositivos móviles. puntualiza que está hecha en el contexto de "One Web". Los productos de Apple no son los únicos que poseen este tipo de pantalla. Dicho esto. Ventajas[editar · editar código] Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla. pues se evita tener que desarrollar aplicaciones ad-hoc para versiones móviles. teléfonos móviles. 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. Desde el punto de vista de la optimización de motores de búsqueda. 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 2 dispositivos de sobremesa. es decir. Esto mejora la experiencia de usuario a diferencia de lo que ocurre. sólo aparecería una URL en los resultados de búsqueda. el sitio web creado estará optimizado para todo tipo de dispositivos: PCs. tabletas. Hoy en día.    1 Origen 2 Ventajas 3 Referencias 4 Enlaces externos Origen[editar · editar código] Tanto la idea y como el propósito del diseño web adaptativo fueron previamente discutidos y descritos por el consorcio W3C en julio de 2008 en su recomendación "Mobile Web Best 1 Practices" bajo el subtítulo "One Web". otra para móviles Android. eso es todo. es decir. la variedad de dispositivos existente en el mercado ha provocado que la información disponible no sea accesible desde todos los dispositivos. Dicha recomendación. por ejemplo. una aplicación específica 4 paraiPhone. es importante crear sitios web y aplicaciones que soportan estas pantallas. De esta forma se reducen los costes de creación y mantenimiento. . permítanos explicar por qué las imágenes Retina Ready y el Responsive Web Design van de la mano y cómo crear este tipo de imágenes. estas pantallas están siendo ampliamente implementadas y utilizadas. por ejemplo. etc.

El dilema Diseñadores y desarrolladores ahora tienen que adaptarse a los diferentes tipos de pantallas. De esta manera. en una pantalla retina la imagen se muestra en la calidad adecuada. se pueden manipular de muchas maneras manteniendo intacta su forma y calidad. Si no es así los usuarios con pantallas Retina verán diseños borrosos. SVG SVG es un formato de imagen para gráficos vectoriales. que compara los píxeles entre la Retina y una pantalla de definición estándar. Hay una posible solución a este problema que consiste en utilizar la imagen al doble de su tamaño deseado y mostrar el 50% de esas dimensiones.¿Qué significa Retina? Una visualización sencilla explicará este concepto bien así que eche un vistazo a la imagen de abajo. Por desgracia.no pueden hacer eso. No vamos a entrar en detalles. CSS o JS. esta es la razón por lo que los iconos o texto en un iPad 2 se ven borrosos y luego en el iPad 3 o superior no. En las pantallas Retina se obtiene el doble de píxeles en el mismo espacio. nos veremos obligados a trabajar también con mapas de bits. pero vamos a mostrar sólo los métodos básicos. o los usuarios sin Retina tendrán cargas más lentas sin disfrutar de una alta calidad en las imágenes. las imágenes de mapa de bits -JPG. PNG o GIF. Hay muchas maneras mostrar imágenes 2x en su sitio web a través de HTML. . Lo que queremos decir es que si tienes una foto que es de 150px de ancho por 150px de altura. Fotografías e imágenes de mapa de bits Desgraciadamente no todas las imágenes pueden ser un formato SVG. ¿Cómo crear imágenes Retina Ready en Responsive Web Design? Hay varios métodos. utiliza una imagen de 300px x 300px. Vamos a exponer sólo unos pocos. Por eso es importante que entre en juego el Responsive Web Design. debido a que los vectores están compuestos de coordenadas matemáticas en vez de pixeles.

contactos en el dispositivo. y comprado posteriormente por Adobe Systems. PhoneGap además nos permite el desarrollo ya sea ejecutando las aplicaciones en nuestro navegador web. Las aplicaciones resultantes son híbridas. PhoneGap es una distribución de Apache Cordova. Estas API's se conectan al sistema operativo usando el código nativo del sistema huesped a traves de una Interfaz de funciones foráneas en Javascript.3 La aplicación fue primero llamada solamente "PhoneGap". En la tercera version de PhoneGap se incorpora el uso de una interfaz de comandos a traves de consola. notificaciones. 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). HTML5 y CSS3. PhoneGap maneja APIs que permiten tener acceso a elementos como el acelerómetro.1 2 Principalmente. y luego "Apache Callback". es decir que no son realmente aplicaciones nativas al dispositivo (ya que el renderizado es realizado mediante vistas web y no con interfaces gráficas específicas a cada sistema). cámara. Apache Cordova es un software de código abierto y tanto este como PhoneGap pueden ser utilizados libremente en cualquier aplicacion sin necesidad de atribución o licencias de ningún tipo. si usted tiene una imagen que es de 300px x 300px. 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. . sólo tiene que declarar en el código HTML que el alto y el ancho de la imagen que van a 150px. sin tener que utilizar un simulador dedicado a esta tarea. Ambos sistemas tienen funciones casi identicas. red. una nueva arquitectura de plugins descentralizados y la posibilidad de utilizar un codigo web unificado para crear multiples proyectos. etc. nos da la posibilidad de soportar funciones sobre frameworks como Sencha Touch o JQuery Mobile. además. PhoneGap PhoneGap es un framework para el desarrollo de aplicaciones móviles producido por Nitobi.En primer lugar. PhoneGap permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas genéricas tales como JavaScript. almacenamiento.