Microsoft acaba de lanzar su navegador Internet Explorer versión 9. Para promocionarlo han creado una web llamada “La Belleza de Internet”, web en la que se supone, esta nueva versión muestra su potencial.
Lanzado Internet Explorer 9
Responder
Aclaraciones sobre el PageRank
El PageRank es un algoritmo secreto patentado por google, que mide la relevancia de una página en base al número y calidad de las páginas que la referencian. Durante algunos años el posicionamiento giraba alrededor del PageRank, hasta que el desarrollo de técnicas para modificarlo acabaron con su supremacía. En la actualidad, el PR se sigue utilizando como criterio de posicionamiento, pero su peso es mucho menor de lo que fue en su tiempo. En todo caso puede ser un buen indicador de la popularidad de una web. Sigue leyendo
Los codec de video en HTML 5
Cualquier persona que haya visitado YouTube sabe que se puede incrustar vídeo en una página web. Antes de html 5, no había forma basada en estándares para hacerlo, porque hasta ahora la mayoría de los videos en la web se han visualizado a través de plug-ins de terceros como QuickTime, RealPlayer o Flash. Pero esto cambiará a medida que se valla implementando html 5 en la web.
Imagen de www.anexom.es
Todavía se están definiendo algunas de las especificaciones de html 5. Según dichas especificaciones, los navegadores deben ser capaces de decodificar vídeo por sí mismos, sin ningún tipo de plug-in. Por ello es muy importante seleccionar un códec estándar para ese propósito. Esto a generado una gran controversia y una guerra de entre empresas del sector para intentar imponer su codec.
La web no sería lo que es hoy si cada blogger tuviera que pagar por una licencia para publicar imágenes y texto en una página. Los vídeos tampoco tendrían que requerir el pago de licencias.
Asa Dotzler:
¿Pero qué es un códec y porque es necesario para visualizar un video?, ¿es lo mismo un códec y un formato de video?, ¿Cuáles son los formatos de video más importantes?, ¿por qué no interesa a algunos de qué futuro estándar sea un códec libre?, ¿nos afectara en algo que el codec que se imponga sea libre o propietario?
En este artículo intentaremos explicar de manera resumida, todas estas preguntas.
Formatos de video contenedor
Un formato de video es usado para agrupar distintos tipos de información (generalmente vídeo y sonido) en un único archivo. Hay un montón de formatos contenedores de vídeo. Algunos de los más populares para la web son:
- MPEG-4 (.mp4): este formato se basa en el QuickTime (.mov) de Apple. Los trailers en el sitio web de Apple siguen usando este formato, pero las películas alquiladas desde iTunes se basan en el más actual MPEG-4.
- Flash Video (.flv): lógicamente es utilizado por Adobe Flash. Las versiones más recientes de Flash también incluyen soporte para MPEG 4.
- Ogg (.ogv): es un estándar abierto, por lo tanto no sujeto a ninguna patente conocida.
- WebM es un formato nuevo. Técnicamente es similar a Matroska. Está diseñado para ser utilizado exclusivamente con el códec de vídeo VP8.
- Audio Video Interleave (.avi): El formato contenedor AVI fue inventado por Microsoft No es oficialmente compatible con la mayoría de los modernos codecs en uso hoy en día.
Codec de video para la web
Un códec de vídeo es un algoritmo mediante el cual se codifica una secuencia de vídeo. Esto es descifrar la secuencia de acuerdo con el códec y a continuación mostrar una serie de imágenes, o “cuadros”, en la pantalla.
Hay codecs de vídeo con pérdida y sin pérdida. Los códec sin pérdida, generan un tamaño de archivos tan grande, que son inútiles para la web, por lo que nos centraremos en los codecs con pérdida. Estos códec para generar archivos más pequeños, degradan la calidad del video cada vez que lo codifican, por lo que se pierde información. Hay muchos codecs de vídeo, pero el futuro del video en la red pasa por solo tres: H.264, Theora, y VP8.
Consorcios enfrentados
- WHATWGs: es una fundación que empezó a escribir las especificaciones de HTML5. Años más tarde, la W3C lo eligió como el siguiente estándar a apoyar. A pesar de que su comunidad está abierta a todo el mundo, lo cierto es que los principales navegadores ejercen su influencia, por ello no es raro que Apple presionase para que Theora no fuera el estándar elegido inicialmente.
- MPEG-LA: Es un consorcio de compañías entre ellas Apple y Microsoft, que desarrollaron la patente de H.264. Su función es otorgar licencias y velar por que sus patentes no se vulneren. Está permitido el uso de este codec hasta 2016, pero a partir de esa fecha se podrán cambiar los términos de uso y cobrar a todo el que quiera utilizarlo.
Los códec en conflicto
Códec H.264
- Navegadores soportados: Safari, Google Chrome y el futuro Internet Explorer 9.
- Compatibilidad: es algo es algo generalizado se utiliza tanto en el vídeo para la web como para fuera de la red.
- Ventajas: está muy consolidado. Tiene una calidad aceptable con ficheros pequeños, además tiene múltiples usos.
- Inconvenientes: es propietario.
- Enlace a la página oficial de H.264 (en inglés)
Códec OGG Theora
- Navegadores soportados: Firefox, Opera y Google Chrome soportan de fábrica este códec.
- Compatibilidad: los dispositivos digitales que permiten crear contenidos en Theora son prácticamente nulos.
- Ventajas: es libre.
- Inconvenientes: necesita un 25% más recursos que H.264, además ofrece una calidad menor y los ficheros generados son mucho más grandes.
- Enlace a la página oficial de OGG Theora(en inglés)
Códec WebM
- Navegadores soportados: Google Chrome, Firefox y Opera soportarán de fábrica. Internet Explorer 9 añadirá soporte, pero solo si el usuario tiene instalado ese códec. Y como Safari utiliza Quicktime como base, podrá soportar también este códec.
- Ventajas: es libre y de una calidad similar a H.264, además sus ficheros que pesan la mitad.
- Inconvenientes: las cámaras actuales no soporten este formato, por lo que tendremos que convertir los vídeos que grabemos.
- Enlace a la página oficial de WebM (en inglés)
Empresas e intereses cruzados
- Mozilla y Opera: defienden que los estándares web se tienen que estar basados en tecnologías libres, por ello apoyan a tanto a Theora como a WebM.
- Google: Apoya todos los códecs porque le interesa que cualquier usuario pueda visualizar youtube. Pero es un formato que no controla, por lo que su solución ha sido coger un formato de eficiencia comparable a H.264 y liberarlo. Esa es la principal razón para lanzar WebM.
- Apple: Es la empresa que más ha invertido en H.264, de echo sus productos están optimizados para ese formato. Lo único que le obligaría a cambiar de opinión es que Youtube deje de soportar H.264.
- Microsoft: Internet Explorer 9 soportará WebM, si el usuario lo tiene previamente instalado en su equipo, aunque H.264 estará instalado de fábrica. Esta posición contradictoria se explica porque por un lado, forma parte de la MPEG-LA y le interesa que H.264 triunfe. Pero también, no le conviene que este formato se popularice, porque le daría a los dispositivos de Apple una gran ventaja respecto a su competencia.
- Adobe: Anunció que Flash soportará WebM en una próxima versión. A corto plazo es beneficioso para ellos pero a medio plazo significa un futuro incierto para Flash.
Como utilizar la etiqueta video
Como hemos dicho anteriormente, en HTML5 podremos marcar un contenido como vídeo y nos permitirá informar una alternativa a los usuarios que tengan un navegador que no soporte estas capacidades de esta manera:
Esta aplicación solo funciona correctamente en Safari y Firefox. Si no visualizas correctamente el video puedes descargarlo aquí.
Breve guía de codificación de documentos y caracteres en HTML
Una consideración muy a tener en cuenta respecto a los textos de nuestras páginas, es la codificación de los caracteres.Tenemos que saber que dependiendo del lenguaje en que escribamos, algunos de los caracteres que utilicemos no se podrán visualizar correctamente una vez renderizada la página. A continuacion veremos algunos ejemplos y sus soluciones: Sigue leyendo
Depuración de CSS (parte II) – Convenciones de nomenclatura semántica
Una de las cosas más frustrantes de heredar un proyecto de otra persona, es cuando las convenciones de nomenclatura para clases e identificadores no tienen ningún sentido. Esto puede dificultar una actualización o un rediseño y puede hacernos perder mucho tiempo. En este artículo te daremos algunos consejos sobre como nombrar a las clases e identificadores de tus proyectos, de manera que sean fácilmente entendibles por otros desarrolladores. Sigue leyendo
Depuración de CSS (parte I) – Comentarios y documentación
¿Cuántas veces has heredado un proyecto de otra persona, para descubrir que el código es un desastre y no entiendes nada?. Cada uno tiene su manera de escribir código, pero esto tiene serios inconvenientes a la hora de compartir proyectos, puesto que aunque nosotros lo entendamos, puede que nuestro código sea ininteligible para los demás. Sigue leyendo
Demo con las nuevas características de HTML5
Completa demo con algunas de las nuevas posibilidades que ofrece HTML5: Canvas, nuevos formularios, las nuevas opciones de accesibilidad, los nuevos selectores de CSS y javascript. Todo en una demo en forma de presentación. Se visualiza correctamente con las ultimas versiones de Chrome, Firefox, Safari e Internet Explorer con Google Chrome Frame, aunque también funciona con Opera, algunas partes de la demo no funcionan correctamente.
Google Font Directory, un nuevo método para insertar fuentes en la web
La semana pasada, google presentó el Google Font API y Google Font Directory. La idea es compartir con los usuarios un repositorio de fuentes open source, conocida como Google Font Directory, alojadas en los servidores de Google. Este directorio, contiene por el momento un número reducido de fuentes disponibles.
Estas fuentes podrán ser utilizadas mediante la Google Font API con el fin de implementarlas en nuestros diseños de manera rápida y sencilla. Tan sólo necesitamos crear un enlace a la Google Font API, especificando el tipo de fuente que vamos a utilizar y aplicarla mediante selectores CSS en donde deseemos:
h1 { font-family: 'Crimson Text', arial, serif; }
Este nuevo método propuesto por google supone muchas ventajas, porque las fuentes se comportan como texto normal, sin canvas ni otros objetos, son indexables y además son accesibles a todo tipo de lectores de pantalla. Internet Explorer 6 también soporta la Google Font API sin ningún tipo de hack ni derivados.
Para usuarios más avanzados se ha liberado una librería de JavaScript llamada WebFont Loader. Además tienes la opción de usar la librería TypeKit para personalizar las fuentes aun más. Por si fuera poco también nos han ofrecido un visualizador de fuentes. Por último aquí teneis un video explicativo de la aplicación (en ingles).
Expression Web SuperPreview el renderizador web de Microsoft
Una de las mayores preocupaciones de los desarrolladores, es saber como se visualizará su página en los diferentes navegadores y plataformas. El simple echo de que Windows no permita desplegar y ejecutar las diferentes versiones de IE en paralelo, ha provocado que las pruebas de sitios web en IE6, IE7 e IE8 sean un constante quebradero de cabeza. Aunque existen soluciones alternativas, no todas son fiables.
Para intentar paliar el problema que ellos mismos has creado, Microsoft ha publicado Expression Web SuperPreview, que estará incluido en futuras versiones de Expression Web, aunque de momento queda como un producto externo. Mediante este programa podremos comparar el render de nuestras páginas para las diferentes versiones de Explorer. Todo ello directamente sobre una maqueta y en la misma máquina. Por ahora se limita a los motores de Internet Explorer, aunque se prevé que soporte más navegadores en el futuro.
Lo bueno
Tras un primer análisis, parece una herramienta fiable con una interfaz muy limpia y intuitiva. Tiene varias vistas para visualizar las páginas de maneras diferentes, zoom , reglas y guías. También lee etiquetas DOM, pero no permite modificarlas y la información que ofrece que éstas es más bien escasa.
.png)
Sin duda alguna lo mejor de la herramienta es el modo de superposición de vistas, para comparar exactamente las diferencias de visualización entre navegadores.
Lo no tan bueno
Pero también tiene puntos negativos que deberán mejorar para la versión final:
- Ocupa mucho espacio (250 MB).
- Hay que instalarlo.
- Requiere .NET Frameworws 3.5 SP1.
- No se puede interactuar en tiempo real con el navegador.
- Ofrece información y nula interacción de los objetos DOM.
- Por ahora no visualiza JavaScript
- Al menos en mi máquina, el render es extremadamente lento.
Enlaces
Técnicas para aumentar la velocidad de una web
Según los estudios realizados por Yahoo! el 20% del tiempo de carga de un sitio web corresponde al servidor y el 80% restante es responsabilidad del cliente. Teniendo en cuenta este dato, es necesario reflexionar y cambiar nuestro modo de trabajo para intentar reducir lo máximo posible el peso de los archivos que generamos y de esta manera aumentar la velocidad de nuestra web.
En este artículo repasaremos tecnología por tecnología, algunas de los mejores trucos y metodologías para reducir al máximo posible el peso de nuestros archivos.
¿Porque es recomendable reducir el peso de nuestra web?
- Todavía hay muchos hogares donde la conexiones a internet siguen siendo lentas y poco fiables.
- La rapidez de un sitio web mejora la experiencia del usuario.
- Reduce los costes operativos de tu sitio.
- El número de páginas vista por sesión de usuario aumentará, al poder visualizar más páginas en el mismo tiempo.
- Recientemente google ha reconocido que ha incluido en su algoritmo de búsqueda el factor de velocidad de una sitio . Eso quiere decir que la velocidad de una web, será otro factor a tener el cuenta para mejorar el posicionamiento de una web.
“hemos decidido tomar en cuenta la velocidad del sitio en la clasificación de los resultados de búsqueda. Usamos diferentes fuentes para determinar la velocidad de un sitio con respecto al resto de sitios.
Matt Cutts” - En muchos casos, reducir el peso de un sitio no requiere cambios de importancia ni excesivamente caros.
- Puede suponer un gran adelanto respecto a la competencia.
HTML
- Maqueta tu web de acuerdo con el web standard.
- Olvídate de diseñar con tablas. Diseñar con divs nos ahorrará muchas líneas de código.
- Separa el diseño, el contenido y la funcionalidad en varias capas. Esto quiere decir que ni las hojas de estilo ni el javaScript deberían ir embebidos en tus html.
- Elimina el código superfluo o redundante tanto en tus HTML como en CSS y JavaScript.
- Vigila la indentación, elimina tabulaciones, retornos de carro y espacios innecesarios.
- La web no es un libro, inserta tus contenidos resumidos y utilizando técnicas de redacción para la Web.
- Cuida la paginación de tu sitio para que no haya excesivo contenido en cada página. Si hay mucho contenido divídelo en varias secciones.
- Evita los errores 404, ya que el tiempo de espera es mucho mayor.
- Usa es HTML Code Cleaner para aminorar el peso de tu html.
CSS
- Utiliza propiedades shorthand.
- Escribe las propiedades css en línea y no en bloque.
- Enlaza las hojas de estilo externamente en vez de incluir los estilos en la propia página.
- Intenta utilizar sprites CSS para reducir el número de imágenes a una única imagen.
- Combina si es posible todos los archivos CSS individuales en un único archivo CSS. , esto reducirá el número de peticiones HTTP.
- Aunque muchas veces veces resulte imposible no utilizarlos, intenta utilizar lo menos posible expresiones (expression()) en las hojas de estilos. El navegador Internet Explorer revalúa continuamente el valor de las expresiones y puede penalizar el rendimiento de la página.
- No utilizar los filtros de Internet Explorer, ya que algunos filtros como AlphaImageLoader bloquean la carga de la página hasta que no se descarga la imagen utilizada por el filtro.
- Clean CSS es de los mejores compresores para CSS.
SWF
- Recurre al Flash solo cuando sea absolutamente necesario.
- Si te es posible carga de secciones de manera externa. Es mejor tener varios SWF ligeros que uno solo con un peso enorme.
- Antes de cargar cualquier objeto de manera externa, realiza una precarga.
- No los insertes sonidos en la línea de tiempo, cargalos de manera externa o llámalos desde la biblioteca.
- Los videos cargalos en tiempo de ejecución. Nunca los incorpores en la línea de tiempo.
- Elimina elementos innecesarios de la biblioteca.
- Intenta minimizar el peso de las imágenes en tus diseños. Si su calidad te lo permite, comprímelas desde la biblioteca. Una compresión de menos de 50 hará que pierdan demasiada calidad y una superior a 80, hará que pesen demasiado.
JavaScript
- Combinar tus scripts en un único archivo para mejorar los tiempos de respuesta de la página, así solo necesitarás una sola conexión HTTP para descargar los scripts.
- Elimina espacios, saltos de linea y tabulaciones y otros elementos innecesarios.
- Comprime los archivos con gzip.
- Reduce el Número de Elementos DOM, de este modo navegador dedicará menos tiempo en la comparación con los CSS y por ende, con la apertura de la página.
- Utiliza el Closure Compiler o el ShrinkSafe para aligerar el código Javascript.
Imágenes
- No incluyas imágenes de gran tamaño en tu web. Si es muy grande, cambia su tamaño en un editor de imágenes y guardala a un tamaño menor.
- Si aún así tienes que incluir una imagen de gran tamaño, puedes enlazar esa imagen a través de una versión en miniatura (thumbnail) de la misma, que servirá a modo de vista previa.
- Utiliza el formato JPEG para bitmaps con mucho color, como degradados o fotografías . Si es posible nunca sobrepases el 80% de compresión cuando la exportes.
- Los formatos PNG 8 son ideales para iconos y logotipos con pocos colores. Si quieres hacer transparencias simples, puedes utilizar también este formato.
- No utilices el formato GIF, además de ser propietario da peores resultados que el PNG
- Utiliza rutas relativas en vez de rutas absolutas, así el servidor no tendrá que volver a establecer una conexión para cada imagen en la página.
Herramientas
- Page Speed: complemento de Firefox/Firebug que evalúa el rendimiento de sitios web y da sugerencias para mejorarlos.
- YSlow: una herramienta gratuita de Yahoo! que sugiere formas de mejorar la velocidad de sitio web.
- WebPagetest: muestra una vista en cascada del rendimiento de carga de tus páginas, además de una lista de optimización.