Información: Microsoft finalmente lanza IE Developer Channel - 16/06/2014 10:50:28
" Al igual que Google con su Dev Channel y Mozilla con su equivalente llamado Aurora, finalmente Microsoft acaba de dar un paso similar con el lanzamiento del IE Developer Channel, sobre el cual indica que es un navegador completamente funcional diseñado para ofrecer a los desarrolladores y a los early adopters acceso a las características de la plataforma web en la que están trabajando. El mismo se puede ejecutar junto a IE11 de forma independiente, disponiendo de todas las funciones disponibles en IE11 junto a características de la plataforma en la que están trabajando. El requisito fundamental es disponer de Windows 7 SP1 o Windows 8.1.IE Developer Channel cuenta además con mejoras en las herramientas de desarrollo F12, con soporte para el estándar emergente WebDriver, que permite a los desarrolladores web establecer pruebas para automatizar los navegadores web para probar en sus espacio web, así como soporte para el estándar emergente de la API Gamepad, que permite el uso de JavaScript para añadir soporte gamepad para aplicaciones web y juegos. Microsoft invita a probarlo conectando el controlador de la Xbox 360 y usarlo junto con algunas aplicaciones y juegos, señalando específicamente a Escape from XP, al juego Atari Arcade, y a Hover.IE.
IE Developer Channel también trae mejoras de rendimiento de WebGL y añade soporte para instancias de extensión, texturas de 16 bits, y otras características. Según Microsoft, esta versión mejora la puntuación Khronos WebGL Conformance Test 1.0.2, pasando del 89% al 94%.
Microsoft señala que éste será el primero de los muchos lanzamientos en el canal de desarrolladores, señalando que a medida de que trabajen en nuevas características y estándares, van a seguir compartiendo los principios del código a través de IE Developer Channel.
Texto escrito en wwwhatsnew.com
Patrocinan WWWhatsnew: Vuelos Baratos y Segurauto
Hospedado en RedCoruna
Ver artículo...
" Fuente Artículo
Que opina usted? Unheap: Repositorio de plugins jQuery - 05/05/2013 6:27:30
" jQuery es una librería de JavaScript que facilita muchísimo el desarrollo de aplicaciones web interactivas, jQuery no es un framework como algunos desarrolladores suelen llamarle, jQuery hace muchísimo más fácil la manipulación del DOM (Document Object Model), controlar los eventos del navegador, animar elementos HTML, hacer Ajax, entre otros.jQuery es la librería de JavaScript más utilizada en el mundo, los millones de desarrolladores web del mundo han creado miles de plugins o librerías más pequeñas basadas en jQuery para hacer casi cualquier cosa, creación de menús automáticamente; organizar texto; animaciones CSS; cargar imágenes dinámicamente; convertir imágenes en Sprites; manipular el favicon y otros miles de ejemplos.
Con tantas librerías es difícil a veces encontrar justo la que necesitas, pero para ello existe Unheap, una página a modo de repositorio, pequeño según ellos, en el cual hay más de 600 librerías de jQuery categorizadas por Interfaz, Entradas, Media, Navegación y otros, cada librería tiene un enlace al sitio web de la misma, un demo de la librería y en algunos casos vídeos para mostrar su funcionamiento.
Así que ya no hay excusas para no encontrar una librería a tus gustos y necesidades para tu proyecto web, aunque algunos desarrolladores no les gusta utilizar librerías porque les parece una forma perezosa de desarrollar, la verdad es que no hay razón para reinventar la rueda. ¡Ya existe!
Unheap
Ver artículo...
" Fuente Artículo
Información: Tendencias en Diseño Web en 2013 - 20/02/2013 12:00:40
"Este artículo fue publicado originalmente en inglés en bypeople.com usando un sistema de edición colaborativa integrando Github con WordPress. El Equipo de The Shock family: iconshock, wpthemegenerator y jqueryslidershock, responsables también por bypeople.com, se ha encargado de la creación y traducción al español del mismo, dejándolo aquí, en WWWhatsnew.com, como una excelente guía para profesionales del diseño web.Espero que os guste:
A continuación encontrará una guía completa de lo que está marcando tendencia en el ámbito del diseño web. Los campos de acción del diseño y el desarrollo web se están cruzando cada vez con más frecuencia y se ha hace importante cubrir la necesidad de entender los nuevos conceptos que conciernen a estos campos. Esperamos que esta guía sea un gran aporte para ayudarle enfocar el camino a seguir en el avance del diseño web.
Adaptación al diseño web responsivo
El diseño web responsivo (DWR) se ha convertido en la tendencia y el camino a seguir en el campo. Si aún no está familiarizado con el concepto, puede consultar la reseña de Ethan Marcotte para A List Apart; también recomendamos esta lista de recursos publicada por Brad Frost: Esto es responsivo.
Básicamente, el objetivo del diseño web responsivo es hacer que los sitios y las aplicaciones web se puedan adaptar a cada nuevo dispositivo y su respectiva resolución.
Sin embargo, el diseño web responsivo tiene sus debilidades; aún no es perfecto ya que sacrifica información a favor del diseño y no es lo suficientemente adaptativo. Es por esto que vamos a ver algunas de los desarrollos que están conduciendo a la evolución del diseño web responsivo.
RESS: La estrella naciente de la web
Como habíamos mencionado, el diseño web responsivo ha mostrado varias debilidades en este momento ya que se encuentra en la mitad de su propio desarrollo; muchos esfuerzos se han concentrado en minimizar los problemas presentados e incluso resolverlos del todo. En conjunto de los intentos que surgen diariamente, RESS (combinación de las expresiones del inglés REsponsive web design, diseño web responsivo, y Server Side, del lado del servidor) pretende mejorar el rendimiento de la web al combinar los poderes de los lados del servidor y el cliente.
"La idea tras [RESS], es que podamos combinar las técnicas de diseño web responsivo y las técnicas del lado del servidor para traer una experiencia óptima a cada dispositivo. Esto significa que se atenderán solicitudes ligeramente diferentes a algunos dispositivos para una URL dada, pero aún usaremos técnicas de responsividad para todo lo que se muestre en dichos dispositivos."
Luke Wroblewski introdujo esta implementación en septiembre de 2011 luego de algunas aproximaciones de parte de él mismo a dicha técnica. Esta ha sido diseñada para mejorar la manera en la que se muestra el diseño de un sitio web en diferentes dispositivos, así como su rendimiento y usabilidad. En otras palabras, mejora completamente la experiencia del usuario; es por esto que RESS brilla como una estrella en ascenso.
Primero que todo expliquemos el flujo básico de una implementación de RESS: Se comienza obteniendo tanta información como sea posible acerca del dispositivo (tamaño, funciones, etcétera.); luego, se obtiene el lenguaje de marcado apropiado en el servidor: esto puede ser un menú desplegable para un sitio web para móviles y un menú horizontal para tamaños mayores o imágenes con los tamaños y métodos adecuados.
Cuando el marcado generado de forma especial se envía, se usan media queries y otras técnicas de diseño responsivo para asegurar que este lenguaje de marcado sea el adecuado para lo que se pretende lograr. En resumen, el lenguaje de marcado del lado del servidor creará el contenido que se mostrará y en paralelo a las técnicas de diseño web responsivo van a determinar de qué forma lo hará. Esto puede sonar fácil, pero en realidad requiere de una buena cantidad de planeación y código; aún así, hacer esto correctamente dará los mejores resultados. El código fuente de RESS se puede encontrar en GitHub y esta guía le puede ayudar a comenzar a utilizarlo.
Consejos y técnicas para lograr un DWR más dinámico
No podemos ignorar que actualmente el diseño web responsivo se está volviendo más complejo; esto se debe al desarrollo rápido y continuo desarrollo de dicha tecnología, en particular a lo que respecta a dispositivos móviles: es prácticamente imposible probar y diseñar para todos los dispositivos. La simplicidad comienza a ser aceptada poco a poco como regla principal; no hablamos simplemente de simplicidad visual sino también de una experiencia de usuario, código y maquetación más simples.
Este fenómeno estimula la tendencia de dar más importancia al contenido que es el núcleo de cada sitio. Dicho esto, revelaremos aquellos trucos y técnicas que se podrán convertir en tendencia en el área del DWR y definirían el siguiente paso en su evolución.
"Haz las cosas tan simples como sea posible, mas no simplistas." Albert Einstein
La responsividad tendrá todo que ver con la tipografía
La tipografía y el manejo de los tipos de letra se han convertido paulatinamente en un factor importante para el diseño web debido a su naturaleza versátil; es bastante lógico pensar que la tipografía marcará pauta en el diseño responsivo. De hecho, la tipografía se ha vuelto más importante que nunca ya que esta es indudablemente efectiva al potenciar el rendimiento del sitio y resaltar su contenido.
Uno de los beneficios directos de concentrarse en la tipografía es la ganancia de simplicidad; desde que CSS introdujo el uso de tipos de letra personalizados los diseñadores web tienen más elementos para crear diseño web con foco en la tipografía. Sin embargo, se debe analizar el comportamiento de cada tipografía para que el diseño responda a las diferentes resoluciones. Adicionalmente, se deben tener en cuenta algunas reglas para el manejo apropiado de la tipografía.
Consideraciones para tener en cuenta:
El usuario final puede cambiar el tamaño de la letra.
Los tipos de letra se comportan de forma diferente a resoluciones diferentes; es importante considerar distintos tipos de letra.
Los tipos de letra deben conservar siempre una buena estructura de legibilidad.
Siempre debe haber un balance entre contenido y diseño. En otras palabras, la tipografía debe ser parte fundamental del diseño.
El contenido siempre debe ser importante y la tipografía es la mejor manera de transmitir un mensaje; en consecuencia, darle gran importancia a su manejo en los diferentes escenarios de responsividad proporcionará más fuerza al contenido mostrado en pantalla.
La responsividad se centrará en resaltar el contenido
Es una realidad que el mundo del diseño web se ha visto asombrado y a la vez desafiado por la repentina tendencia de la navegación web a través de dispositivos móviles. La década de 2000 se caracterizó por una Internet atractiva y dinámica, aunque no lo suficientemente usable. Una de las principales razones de ser del diseño responsivo es adaptar esta tendencia de la estética hacia un estado de mayor usabilidad.
Es muy común ver cómo se le ha dado más importancia al diseño que al contenido, con lo cual nos podríamos enfocar en las siguientes soluciones que abordan la responsividad de manera adecuada sin disminuir el impacto visual del diseño. El primer paso consiste en establecer prioridades: ¿Cuál es el contenido más importante, el que debe mostrarse necesariamente sin importar la resolución? ¿Qué debe suceder con los anunciantes principales? ¿Qué imágenes ilustran realmente el contenido y cuáles son simplemente decorativas?
Tomar estos aspectos en cuenta es clave para dar más relevancia a los contenidos al crear diseños para resoluciones pequeñas. En dichos casos, una estructura más adecuada debe planearse, evitando la simplicidad y la práctica común de apilar elementos indiscriminadamente en una columna simple al cambiar el tamaño, relegando contenidos importantes a la parte baja del diseño.
Ahora que está claro el concepto de dar prioridad al contenido, revisemos otro concepto que puede convertirse en referente para este propósito inicial, el cual se basa en una solución muy completa llamada Coreografía del Contenido, publicada por Trent Walton. Su objetivo es reorganizar el diseño al establecer una jerarquía del contenido existente y reubicarlo en posiciones estratégicas, dependiendo de la resolución en que se mostrará. Puede implementarse fácilmente gracias a la implementación de media queries junto con el módulo Flex Box de CSS3, descrito en un artículo escrito por Chris Coyier.
.alguna-clase { display: box // ¿deberíamos usar flex, o la extraña propiedad flexbox?; display: -moz-box; display: -webkit-box; }
A fecha de la redacción de este artículo, la sintaxis más soportada parece ser display:box; sin embargo esto podría cambiar pronto dado que la sintaxis aprobada más reciente, e intuitiva, es display:flex.
ADVERTENCIA: Ninguna de estas notaciones funciona en IE.
Antes de continuar, puede revisar lo que Jordan Moore ha escrito acerca de esta curiosa solución en un simple pero completo artículo.
En la primera parte, se muestra una implementación de responsividad común y ordinaria, en la que el contenido simplemente se transpone una vez que la resolución cambia tomando en cuenta el orden original. En la segunda parte, la implementación de la Coreografía del Contenido realiza la organización apilando según relevancia, en lugar de mantener el orden original. Puede visitar este ejemplo práctico que describe cómo funciona este método.
Karen McGrane sugiere otra perspectiva interesante. En su charla, Adaptándonos al contenido adaptativo, Karen presenta la idea de abandonar una práctica que diseñadores y desarrolladores web han usado hasta ahora: la creación de muchos diseños que le permitan a un sitio web adaptarse a cualquier contenido posible. En lugar de esto, recomienda la creación de contenidos reusables, haciendo que todo el contenido comience a ser más flexible, lo que se traduce en un ahorro de tiempo y dinero.
Finalmente, todos estos conceptos traen consigo una importante definición sobre la maquetación, la cual pone a la web en vías de una solución independiente del dispositivo: no diseñar para toda resolución existente, simplemente crear un diseño que funcione en cualquier resolución.
La responsividad será indiferente a la resolución
La independencia es necesaria para la responsividad, debido a que el objetivo es ser tan versátil como sea posible, sin importar el dispositivo Gradualmente, la práctica de que todo diseño se ajuste a cualquier resolución, en lugar a toda resolución existente, debe ser aceptada por todo aquel involucrado en el proceso de diseño.
Si quiere que su diseño se adapte a todo, desde la pequeña pantalla de un dispositivo móvil hasta monitores de la más alta definición, lo mejor sería usar vectores. Las imágenes SVG pueden ser una gran solución dado que este formato permite que los vectores se muestren en el navegador con todas las ventajas que esto conlleva; por ejemplo, una capacidad teórica de escalarse infinitamente sin mostrar un aliasing significativo. Sin embargo, este formato aún no cuenta con un soporte amplio y puede tardar bastante tiempo en cargar, representando una disminución en términos de rendimiento. Por lo pronto, usar esta solución con cierta moderación sería una mejor alternativa.
Ahora bien, la resolución sigue siendo el punto relevante, por lo cual se hace importante hacer pruebas en la mayor cantidad posible de dispositivos y para hacer esto de una manera más eficiente, Viljami Salminen ha creado una utilería llamada previsualización remota. Esta utilería basada en JavaScript permite cargar un URL en varios dispositivos a la vez, disminuyendo el tiempo destinado en el ajuste de plantillas a cualquier resolución para pruebas de diseño responsivo.
La responsividad tampoco dependerá de los dispositivos
La responsividad es algo más que un conjunto de contenedores que se organizan para mostrarse en varias resoluciones y orientaciones. La responsividad debe centrarse en mostrar el contenido apropiadamente en cualquier navegador y circunstancia. Para hacer esto no hay que adornar excesivamente el diseño con efectos o secuencias animadas. Simplemente se requiere un poco de planeación y buena ejecución del diseño.
El término web móvil comprende varios aspectos, entre los cuales están las soluciones que se diseñan para dispositivos portátiles como tabletas, consolas de videojuegos y teléfonos móviles. Sin embargo, estas soluciones rara vez incluyen algo diferente a HTML, CSS y en algunos casos JS. De esta manera la web continúa siendo la misma, independientemente del dispositivo en el que se muestre. Jeremy Keith ha publicado un artículo en relación a este tema: no existe una web móvil.
Del mismo modo, un proceso más eficiente de ingeniería web se debería basar en las nuevas tecnologías; sin embargo, estar a tono con lo más reciente no es obligatorio en absoluto. Es aquí donde HTML5 comienza a cobrar más importancia al ser capaz de crear una web mucho más limpia que funcione sin depender de un dispositivo o característica alguna.
Algunos aspectos de HTML5 pueden ayudar en gran medida a lograr este objetivo. Por ejemplo, la creación de opciones de contingencia permite evitar que se muestre un sitio web poco atractivo en aquellos momentos en los que todo puede fallar; aunque no mostrará todos los efectos y funciones, aún será usable y visualmente agradable. Christian Heilman ha presentado una gran cantidad de argumentos contundentes a favor de HTML5, como se muestra en Mantén la calma y confía en HTML5, una presentación que propone la creación de sitios web más eficientes, en lugar de simplemente inclinarse por la aplicación de un exceso de las más recientes técnicas, las cuales solo funcionan en un reducido número de navegadores.
Manejo dinámico de imágenes
El diseño web se está volviendo cada vez más exigente y uno de sus requisitos radica en hacer que todos los elementos sean responsivos y estén dirigidos a resaltar el contenido. Es por esto que el concepto del manejo dinámico de imágenes ha cobrado tanta fuerza. A continuación revisaremos en profundidad las nuevas técnicas que potenciarán este concepto.
Vectorización perfecta de imágenes. Un paso hacia la extinción del pixel
Las imágenes de mapa de bits y las imágenes vectorizadas tienen ciertas limitaciones bien conocidas que tienen un enorme impacto en el diseño web responsivo. En favor de la responsividad, sería realmente ideal trabajar sólo con imágenes vectorizadas, sin embargo, estas representan un alto costo para el desempeño y están muy limitadas a mostrar formas básicas.
No obstante, dos profesores británicos, John Patterson y Philip Willis, aseguran que el pixel está cerca a su final dentro de pocos años. Esta aseveración se sustenta con un códec que ellos están desarrollando el cual transforma imágenes de mapa de bits en vectores, incluyendo fotografías y videos. Su trabajo se llama VPI, acrónimo en inglés para imágenes fotográficas vectorizadas y VSV, secuencia de video vectorizada. Dicho trabajo consiste en convertir perfectamente las imágenes y videos a vectores. Como podemos ver en la siguiente comparación, la foto vectorizada tiene finalmente mejor calidad que la imagen de mapa de bits.
Comparación de la calidad final entre la imagen de mapa de bits (izquierda) y la foto vectorizada (derecha). Clic para aumentar. Fuente , Extremetech
Aunque aparentemente resulta asombroso, tiene un gran problema: el desempeño resulta muy lento debido a que el códec es muy pesado. De cualquier modo, este parece ser un gran paso a favor de resolver el problema de tener imágenes pixeladas, además de ser una interesante herramienta que podría ayudar en procesos de diseño responsivo.
El futuro de las imágenes responsivas con JPEG2000 y WebP
Uno de los más mayores problemas al manipular imágenes de mapas de bits es la búsqueda por reducir la brecha entre calidad y tamaño; estos aspectos son inversamente proporcionales entre sí, llevando a desarrolladores y diseñadores de todo el mundo a proponer e implementar varias soluciones; sin embargo, ha sido ampliamente aceptada porque la mayoría de las veces el balance calidad/tamaño en estas se pierde fácilmente.
David Bushell nos presenta la posibilidad de aumentar el soporte que tiene el formato SVG, que por ahora funciona bien para figuras e imágenes sencillas, pero no tanto para imágenes como fotografías y patrones complejos. Otra opción se centra en la creación de un nuevo formato, más fácil de usar; y ya existen algunas alternativas disponibles: los formatos JPEG2000 y WebP.
Comencemos con JPEG2000, desarrollado en el año 2000 por el Grupo conjunto de expertos en fotografía (Joint Photographic Experts Group , JPEG), desarrolladores del conocido formato JPEG, en un intento por mejorar la compresión de las imágenes. Algunas de las características de este formato son:
La compresión puede ser con o sin pérdida, en contraste a la compresión estándar de JPEG, que es únicamente con pérdida.
La capacidad de mostrar una imagen en diferentes tamaños y resoluciones partiendo de un mismo archivo.
La compresión resultante muestra una imagen mucho más clara que el JPEG estándar, evitando una apariencia desenfocada y pixelada.
Hay una solución similar en proceso de desarrollo por parte de Google, propuesta como un proyecto de código abierto. Es el formato WebP, el cual pretende tomar el lugar del dominante JPEG. WebP es compatible actualmente con Chrome y Opera, así como en editores como Pixelmator e ImageMagick, mientras que Photoshop y GIMP pueden manejar WebP a través de extensiones. Este formato supone una mayor tasa de compresión que el propio JPEG, la cual se puede ajustar según se requiera, manteniendo la calidad de la imagen. Adicionalmente, sus desarrolladores planean incluir soporte para canales alfa y así permitir el manejo de transparencias. Sin embargo, este formato no ha tenido una gran aceptación por parte de muchos profesionales, especialmente fotógrafos, quienes argumentan que este método de compresión desenfoca mucho las imágenes y en algunos casos la pérdida de información es tal que el color se muestra erróneamente.
A la izquierda, el resultado de la compresión WebP; a la derecha, una imagen PNG.
¿Y mientras tanto? Regresemos al presente.
Es importante tener en cuenta que la responsividad de las imágenes se ha concentrado en el tamaño, en verse bien en cada dispositivo. Ahora, con la aparición de dispositivos con resoluciones HiDPI (basados en la pantalla Retina de Apple), resulta natural que todo fabricante intente crear tecnologías similares e incluso superiores haciendo que los diseñadores concentren sus esfuerzos en crear imágenes para hiperresoluciones, como comenta Ben Frain. Esto tiene algo de cierto; sin embargo, a mayor resolución más pesada será la imagen y más pobre el desempeño.
Implementar en la web imágenes de altísima calidad, vectoriales y ligeras supone el uso de formatos como el SVG, el cual juega un papel fundamental gracias al soporte que se le ha venido dando por parte de los diversos navegadores. Dan Denney usa SVG en vez de PNG para ciertas ilustraciones, incluso aquellas con un gran nivel de detalle, obteniendo impresionantes resultados en resoluciones HiDPI. El desafío consistirá en cómo hacer que estas imágenes vectoriales sean responsivas, como lo expuso Fuente Artículo
Consulte Información de Gana Emprendedor Web Técnica efectiva para mejorar el posicionamiento web y Es SEO Spam para Google?
Consulte Información de Tecnologia Emprendedora Microsoft finalmente lanza IE Developer Channel y Unheap: Repositorio de plugins jQuery
Consulte Información de Gana Emprendedor Web Tendencias en Diseño Web en 2013 y Un filón con mucho futuro
Consulte la Fuente de este Artículo
No hay comentarios:
Publicar un comentario