Se acaba de publicar la tercera versión para desarrolladores de Internet Explorer 9, con unos resultados generales excelentes. Aún no  se añade su nueva interfaz, así que aún no es producto terminado. Estas versiones  para desarrolladores sirven para comprobar el motor que se está desarrollando por debajo, que con los trabajos realizados se está convirtiendo en un serio competidor para el resto de navegadores. Estos son los cambios realizados hasta la fecha.

Mayor rendimiento en Javascript.

IE9 está mejorando bastante  con respecto a IE8 y eso se ve reflejado en los Benchmark. Aún no es el más rápido, siendo el más rápido Opera 10.6 neta, pero desde Microsoft se asegura que están optimizando otros subsistemas que tienen un amplio impacto en la visión de páginas web artificiosas

El hecho de  hacer uso de APIs de Windows Vista/7 y utilizar por defecto la GPU para renderizar todos los elementos, ha hecho que IE9 obtenga mejor rendimiento en determinados ejemplos.

Vídeo y audio de HTML5.

Se estrena el esperado soporte para vídeo, usando el códec H.264, lo que implica que podemos ver videos sin necesidad de un plugin como Flash. Esto ya es soportado en las nuevas versiones de Webkit.  También añaden el soporte para audio, ambos con aceleración por hardware habilitada.

Soporte para canvas.

Esta es una de las principales etiquetas de HTML5. Canvas es una etiqueta o elemento que permite la generación de gráficos en forma dinámica por medio de programación dentro de una página. Esto ya estaba soportado por todos los demás navegadores.

Soporte para fuentes WOFF

Este estándar fue creado conjuntamente por  Google, Mozilla y Microsoft, y lo mandaron en abril de este año. Está llamado a ser el estándar de fuentes para la web, ya tiene soporte en Firefox y Webkit, pero por lo visto en las pruebas de Microsoft por ahora ellos son los únicos que está aplicando un suavizado de fuentes.

Ejemplo de una página creada por Erik Spiekermann usando WOFF visualizado en Firefox 3.6 beta.

Medición de rendimiento nativa en el navegador

Las especificaciones de WebTiming proveen de funciones más confiables para medir el tiempo que tarda nuestro código en ejecutarse, y Microsoft también se apunta al movimiento para popularizar este estándar en todos los navegadores por igual. Como las especificaciones finales no están muy definidas aún, Microsoft está usando el prefijo propietario -ms en sus propiedades, de manera similar a -webkit o -moz.

Soporte más amplio de estándares

Microsoft se dio cuenta de que debe seguir  los estándares, por lo que se ha notado mucho el cambio en esta nueva versión. Se añaden varias nuevas funcionalides de HTML5, Javascript  y  CSS3 .

Aunque en el test de Acid3 ya obtienen un decente 83 de 100 (antes marcaba 63 de 100), y siguen trabajando para conseguir el 100/100 que ya lo consigue Safari o más bien su motor Webkit. La gente de Microsoft  reclama que este test es una prueba muy incompleta de los estándares actuales. Por tanto, siguen trabajando en escribir cientos de tests que van enviando regularmente a la W3C.

Conclusiones

Microsoft está mejorando bastante a Internet Explorer 9, obteniendo buenos resultados y lo más importante: enfocado a los estándares. Esperemos que siga mejorando y que alguna vez llegue al 100/100 en el Acid3, cosa que nunca creí que iba a ocurrir y que ahora puede que llegue a alcanzarlo en la versión final de IE9

Vía | Blog oficial de Internet Explorer
Descarga | Internet Explorer Platform Preview 3

¿Qué es HTML5?

HTML5 es una colección de estándares para el diseño y desarrollo de páginas web. Esta colección representa la manera en que se presenta la información en el explorador de internet y la manera de interactuar con ella. HTML5 está siendo desarrollado por Ian Hickson de Google Inc. y David Hyatt de Apple Inc. junto con todas las personas que participan en Web Hypertext Application Technology Working Group.

Beneficios

Existen muchas razones, de las cuales podemos mencionar:

• Empresas  como Google, Apple y Microsoft apoyan este estandar.
• Servicios Web como Yotube, Vimeo y Scribd ya se estan cambiando a este estandar
• Permite una mayor interacción entre nuestras páginas Web y contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.
• Su reprodutor de video no requiere flash o adobe player  y es más eficiente ya que  ocupa menos recursos en el computador del usuario.
• Es compatible con las versiones anteriores de HTML
• Su API ofrece una varieadad de herramientas  que son fundamentales para el futuro de las aplicaciones Web como aplicaciones con  caché.

Estructura

Uno como desarrollador Web siempre estructura sus paginas Web dependiendo de sus necesidades, pero generalmente ocupamos los  campos o div con los identificadores :header (cabecera), footer (pie de página), sidebar(barra latera), nav (barra de navegación). La W3C, en esta version de HTML,  se basó en el diseño más común de las páginas Web alrededor del mundo para llegar a un estándar de etiquetas que realicen las mismas tareas de manera más rápida y eficiente:

Los nuevos elementos estructurales son:

• <header> El elemento de encabezado contiene información de introducción a una sección o página.

• <nav> :El elemento de navegación está reservado para una sección de un documento que contiene enlaces a otras páginas o vínculos a secciones de la misma página.

• <section>: El elemento de la sección representa un documento genérico o sección de aplicación.

• <article>: El elemento artículo representa una porción de una página que puede estar solo, tales como: una entrada de blog donde  el usuario envía comentarios o cualquier elemento independiente del contenido.

• <aside>: Representa contenidos relacionados con el área principal del documento. Esto se expresa generalmente en las barras laterales que contienen elementos como enlaces, las nubes de etiquetas, etc.

• <footer>: Este elemento es para marcar el pie de página de la página o sección.  (ver imagen: Estructura HTML5)

Estructura HTML5

Ayer el equipo de desarrollo de WordPress publicó la versión 3.0 de su popular plataforma de código abierto para la gestión y publicación de blogs. Su  nombre código es “Thelonious” en honor al pianista de jazz y compositor estadounidense Thelonious Monk.

Esta nueva versión tiene más de 2,700 cambios, entre ellos 1,217 correcciones de errores y mejoras en sus características. Ahora incorpora WordPress MU (multi-usuario), lo que permitirá a los usuarios gestionar múltiples sitios utilizando la misma instalación y otras mejoras que vamos a mencionar a continuación.

Por otro lado también se pueden configurar menús jerárquicos fácilmente desde la administración e incluye un nuevo tema por defecto llamado “Twenty Ten” que remplaza a Kubrick.

Otros cambios incluyen el soporte para modificar el fondo de nuestro sitio, mantener una imagen personalizada en la cabecera (header) del sitio para cada artículo,  crear menus de manera sencilla mezclando categorías y páginas estáticas, un sistema de ayuda contextual ampliada, creación de enlaces cortos y lo más importante: creación de  tipos de artículos personalizados y    taxonomías .



Los chicos de Google, con el afán de conquistar el mundo, han creado una API de fuentes (tipografías) bastantante fácil de utilizar con el cual podremos ocupar una variedad de fuentes que va ir aumentando gradualmente. Aqúi les dejo un minitutorial (tip) utilizando Google Font Directory.

Simplemente creando un enlace a una fuente en particular, almacenada en los servidores de Google (ahorrando ancho de banda ), ahora tenemos acceso a una amplia gama de fuentes personalizadas.

En 10 segundos puedes integrarlo a tus proyectos Web. Aquí un ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13

<head>
<meta charset="utf-8">
<title>untitled</title>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie'
 rel='stylesheet' type='text/css'>
<style>
body { font-family: Reenie Beanie', serif; font-size: 100px; }
</style>
</head>
<body>
Web Pro Developers
</body>
</html>

Obteniendo:

Más información puedes encontrar en Google Font Directory

Aquí un listado de 30 tipografias (fonts) que podrás usar en tus diseños Web.

1. MDRS-FD01

2. Labrat

3. TYPORM01 Round ans Square

4. SquaretypeB

5. Knarf art font

6. Velocity

7. Synthetique

8. Amputa Bangiz Standard TTF

9. Giant Head

10. Snickles

11. Times New Yorker

12. Vintage

13. GOCA LOGOTYPE

14. Parallello

15. Karabine

16. Infected

17. Facet

18. Drift Type

19. Multistrokes

20. Cat Basah Kental!!!

21. Que FONTita

22. Confessions

23. Madredeus

24. Vtks Revolt

25. Exus Pilot

26. VAL

27. Outlaw

28. Kilogram

29. Ballpark

30. Orial

fuente: Six Revisions

La gente de PSDtuts+ han publicado un artículo en donde nos muestran una  colección de iconos que ha sacado IconFinder por la celebración de sus tres años en la Web.

Estos iconos se pueden utilizar en  proyectos comerciales bajo licencia Creative Commons Attribution-No Derivative Works 3.0. Son 50 iconos en formato .PNG y de tamaño 128×128px.

Previsualización: Isloo Icons

Descarga: Isloo Icons

Cristian Correa

PHP Excel Reader es una librería que lee ficheros .xls  de Excel con la cual vas a poder acceder a la información y modificarla.

Con esta librería podrás modificar datos de celdas  y hojas, ademas de  darle estilos.

Aquí un ejemplo de la utilización de esta libreria:

$data = new Spreadsheet_Excel_Reader("test.xls");
$data->dump(true, true);

Enlace: PHP Excel Reader

Realizar un bosquejo de un diseño es una de tareas mas importantes y vitales  a la hora de desarrollar un sito Web o una aplicación de escritorio. Si queremos visualizar nuestras ideas de lo que queremos hacer, los bosquejo son muy importantes.

En un proyecto podemos crear diagramas de interacción, casos de usos, y diagramas de base de datos,  pero la mayoría de nuestros clientes no poseen los conocimientos necesarios  para entenderlos, por lo que los bosquejos de diseños son una herramienta importante para previsualizar  lo que vamos a realizarles y así validar funcionabilidades que puedan tener nuestros proyectos.

Ejemplo de un bosquejo en papel

Pero actualmente existen diferentes herramientas que nos permiten hacer lo mismo pero en nuestro computador que poseen mayores funcionabilidades que podríamos aprovechar. Una de estas herramientas es SketchFlow.

¿Qué es SketchFlow?

Screenshot de SketchFlow

SketchFlow es una herramienta que viene con Microsoft Expression Blend 3.

SketchFlow proporciona un conjunto de controles de “estilo boceto” que dan al prototipo un aspecto de boceto para mantener el enfoque en los conceptos de la experiencia de usuario sin distraerse con los detalles de los elementos visuales.

Los controles de estilo boceto son completamente funcionales y se pueden  transformar a controles con detalles en cualquier momento.

Algunas de sus características son:

Prototipos:

Se pueden utilizar herramientas de dibujo, las notas adhesivas,  controles y componentes de Silverlight, así como las imágenes importadas para representar sus ideas y visualizar rápidamente el prototipo. SketchFlow incluso viene con un conjunto de estilos de dibujo para los controles  de  plataforma estándar, para así  presentar tus trabajos con un consistente “prototipo”.

Revisión Interactiva:

Se pueden recoger las anotaciones y comentarios  directamente vía Web y visualizarlas directamente en la capa de diseño de Expression Blend. Los prototipos se pueden explorar interactivamente desde el primer boceto incluso si el prototipo realmente no contiene ninguna interfaz de usuario activo todavía. Tiene la capacidad de mostrar flujos de transición  de una pantalla a otra y de estado a estado.

Documentación:

SketchFlow permite la creación de la documentación del proyecto global a través de un comando de exportación a Microsoft Word que crea un documento de proyecto  con un cuadro completo de contenidos,  capturas de pantalla del flujo de la aplicación y las diferentes pantallas en el proyecto. Esto,  ahorra horas  durante la creación del documento y le permite mantener fácilmente tu proyecto al día.

Archivo generado por SketchFlow

En un próximo artículo enseñaremos a utilizar esta herramienta en la creación de un prototipo Web.

Silverlight 4 Training Kit es un kit de entrenamiento  que trae toda la información que necesitas  para sacarle el provecho al desarrollo de aplicaciones con Silverlight 4 (ejercicios de programación,  8 tutoriales  y 25  videos). 

Módulo 1 – Introducción

Tema: Desarrollando aplicaciones de negocios con Silverlight 4

Módulo 2 – Servicios WCF RIA

Tema: Utilizando los servicios WCF RIA

Videos:

• Módulo 2.2 – Administración de Servicios WCF RIA Services

• Módulo 2.1 – Servicios WCF RIA

• Módulo 2.3 – Registros maestro/detalles con WCF RIA Services

Módulo 3 – Autenticación, Validación, MVVM, Comandos, estilos implícitos y RichTextBox

• Código fuente: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_03_User_Registration/Source.zip
• Laboratorios: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_03_User_Registration/SL4LOB_03_User_Registration.docx

Videos:

• Módulo 3.1 – Autenticación
• Módulo 3.2 – MVVM (Model-View – ViewModel)
• Módulo 3.3 -Validación
• Módulo 3.4 – Estilos implícitos
• Módulo 3.5 – RichTextBox

Módulo 4 – Perfil de usuarios, cámara web y el portapapeles

• Código fuente: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_04_User_Profile/Source.zip
• Laboratorios: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_04_User_Profile/SL4LOB_04_User_Profile.docx

Videos:

• Módulo 4.1 – Cámara web
• Módulo 4.2 – Arrastrar y colocar

Módulo 5 – Controles DataGrid/ItemsControl +  soporte para clic derecho del mouse

• Código fuente: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_05_Schedule_Planner/Source.zip
• Laboratorios: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_05_Schedule_Planner/SL4LOB_05_User_Profile.docx

Videos:

• Módulo 5.1 – Manejo de datos
• Módulo 5.2 – Diseño Visual States
• Módulo 5.3 – Soporte para clic derecho del mouse

Módulo 6 – Imprimiendo en Silverlight

• Código fuente: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_06_Printing_the_Schedule/Source.zip
• Laboratorios: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_06_Printing_the_Schedule/SL4LOB_06_Printing_the_Schedule.docx

Videos:

• Módulo 6.1 – Servicios de impresión
• Módulo 6.2 – Imprimiendo varias páginas

Módulo 7 – Ejecutando eventos en Silverlight

• Código fuente: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_07_Event_Administrator_Dashboard/Source.zip
• Laboratorios: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_07_Event_Administrator_Dashboard/SL4LOB_07_Event_Administrator_Dashboard.docx

Videos – Aplicaciones fuera del explorador:

• Módulo 7.1 – 7-3 – Administración de eventos y usuarios
• Módulo 7.4 – Introducción a la Confianza elevada

Módulo 8 – Aplicaciones fuera del explorador y MEF

• Código fuente: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_08_Advanced_OOB/Source.zip
• Laboratorios: http://ecn.channel9.msdn.com/o9/learn/Silverlight4/Labs/SL4LOB_08_Advanced_OOB/SL4LOB_08_Advanced_OOB.docx

Videos: – Aplicaciones fuera del explorador

• Módulo 8.1 – Confianza elevada Módulo 8.2 – El evento: Window Closing Módulo 8.3 – Instalación silenciosa Módulo 8.4 – Firma digitalMódulo 8.5 – Beneficios de MEF (Microsoft Extensibility Framework) en Silverl

Aveces los clientes nos dicen: “Yo quiero un sitio parecido a…”. Bueno aquí les mostramos una recolipación de 15 temas de WordPress clonados de sitios Web muy conocidos.

WPSN Theme – clonado de ESPN

• 

Información de tema Demo Ver sitio original

The New Yorker Theme – clonado de NYTimes.com

• 

Información de tema Demo Ver sitio original

One News Theme – clonado de popurls.com

• 

Theme info Demo Ver sitio original

Facebook theme Theme – clonado de Facebook

• 

Theme info Demo Ver sitio original

Cry Book Theme – clonado de Facebook

• 

Theme info Demo Ver sitio original

iBlog Theme – clonado de Apple

• 

Theme info Demo Ver sitio original

Coda Blue Theme – clonado de Coda

• 

Theme info Demo Ver sitio original

The Beeb Theme – clonado de BBC News

• 

Información de tema Demo Ver sitio original

tumblelog Theme – clonado de tumblr.com

• 

Theme info Demo Ver sitio original

Digg-like Theme – clonado de Digg

• 

Theme info Demo Ver sitio original

WP Max Theme – clonado de Digg

• 

Información de tema Demo Ver sitio original

Fresh Tweet Theme – clonado de Twitter

• 

Theme info Demo Ver sitio original

Sharp Theme – clonado de Creattica

• 

Información de tema Demo Ver sitio original

Shade Pro Theme – clonado de WordPress.org

• 

Información de tema Demo Ver sitio original

Gmail Theme – clonado de GMail

• 

Información de tema Demo Ver sitio original

Fuente: wpzoom.com