HTML5 y CSS3 en la batalla de los navegadores

La batalla de los navegadores ahora esta centrada en HTML5 y css3, buscando quien da soporte mas rápidamente a este nuevo lenguaje de marcas, lo bueno de esta competencia es que todos los fabricantes que compiten ponen a disposición de los developers una gran cantidad de código, ejemplos, funcionalidad y documentación para que se actualicen rápidamente ponerse al día de la ultima versión de HTML.

Error de apple en HTML5

Error de apple en HTML5

Primero fue apple quien creo un centro de desarrollo para html5 en su sitio web, diciendo que buscaban estandarizar el uso de HTML5 e impulsar su desarrollo, aunque como sabemos apple es igual que microsoft, no entienden el significado de la palabra estándar, ejemplo de esto es que para acceder a los demos del sitio debes usar el navegador web safari, aun si tu navegador actual (chrome, firefox, opera, etc) soporta html5 deberás instalar safari para ver los demos del sitio de desarrollo HTML5 de apple.

Esto podría interpretarse como una campaña psicológica sucia por parte de apple que buscaría crear la imagen de que ellos son el estándar de HTML5 y todo lo demás no funciona. Recordemos que la W3C es quien debe dictar estos estándares y los fabricantes solo deben apegarse a ellos, aunque a algunos (adobe, apple y microsoft) no lo hagan.

Ahora Google, la compañía que sabe hacer las cosas al derecho, ahora también a publicado su sitio para developers de HTML5 y CSS3, su nombre, HTML5 Rocks, es muy sencillo y minimista y tiene una presentación muy interesante que te llevara por el recorrido de HTML y las especificaciones y herramientas del nuevo HTML5.

HTML5 apple demos

HTML5 apple demos

Existe una tabla comparativa de las propiedades de HTML5 que ya han sido adoptadas por los navegadores, esta tabla esta echa en HTML5 así que te recomendamos verla en un navegador que tenga la mayor cantidad de soportes (que ironico verdad?) http://html5readiness.com/

Como se ve en la tabla safari solo supera a chrome en transformaciones 3D, y chrome supera a safari en geo localizacion. Este para mi si es un fail de Google, es verdad que su google maps no lo iguala nadie pero la herramienta de Geo localizacion frente a la de transformación 3D, mmmmm, yo prefiero el 3D.

Entre las cosas mas interesantes que encontré de HTML5 están la capacidad de utilizar elementos emergentes de escritorio y la posibilidad de usar y manipular fuentes no seguras, aunque esta es una propiedad de CSS3.

Infografia del nuevo HTML5

Infografia del nuevo HTML5

Te recomiendo mucho que revises esta imagen donde no solo se explica que es HTML5 sino que hace una anlisis del actual soporte de los navegadores sino que también informa sobre el soporte con la que vendrán las nuevas versiones, increíblemente Firefox 4.0 aparentemente tomara la delantera y como siempre microsoft Internet Explorer quedara resagado pero probablemente siga siendo el mas usado.

También muestra la comparativa entre HTML5 y Flash, otra de las cosas que se vienen con HTML5 y donde adobe, aun sin tener navegador propio tendrá mucho que ver al tener que pensar que va a hacer con Flash y Dreamweaver en sus futuras ediciones dela creative suite. ¿Dara que Adobe CS6 ya traerá soporte HTML5 incorporado en Dreamweaver?.

Visita el sitio de desarrollo HTML5 de apple: http://www.apple.com/html5/

Visita el sitio de desarrollo HTML5 de Google: http://www.html5rocks.com/

Recuerden que en el Campus Party se van a dedicar varias conferencia y talleres para hablar de HTML5 y CSS3.

HTML5 Rocks de Google

HTML5 Rocks de Google

xTetris una versión bonita de un clásico

xTetris es solo una versión bonita o retocada del clásico tetris, una de tantas versiones donde se añaden elementos nuevos al juego como un pixel que elimina todos los otros pixeles que toque, este tetris no es la gran cosa aunque mantiene la esencia clásica del Tetris que todos jugamos en la infancia, sin embargo tal vez muchas personas (fanboy del juego) no se sientan a gusto jugando.

Pero en comparación a las nuevas versiones de tetris que han sacado este se salva por mantener el esquema básico del juego y la interfaz a pesar del estilo Flash que tiene es igual a la del clásico Tetris de NES (Nintendo Entertainment System).

Clasico juego de Ateroids en Flash

Asteroids (Asteroides) es uno de los video juegos mas clasicos que existen, solo juegos como tetris y pong pueden competir con Asteroids. es epico a un modo muy geek, y ademas de ser clasico, es divertido, un exelente juego que despues de quien sabe cuantos años sigue marcando la parada.

Asteroids en Flash

Asteroids en Flash

Si lo conocías (que es lo mas probable) disfruta del rey de los clásicos, y si no lo conocías (en que planeta “asteroide” vives???) bueno igual conoce lo que le dio vida a lo que hoy tu conoces como video juegos.

Si quieren descargar el juego simplemente bajen el archivo Flash, no es muy difícil peor tienen que saber alguito de uso de un PC. xD

Este super clásico definitivamente entrara en el conteo de los 10 mejores juegos clásicos, y aunque no hay trucos o claves para asteroids seguro que es un buen juego para competir entre amigos.

Adobe CS4 Master Collection con Crack

Este es un post importantisimo para los diseñadores graficos, desarrolladores de codigo, fotografos, diseñadores web, printers, etc, etc, etc, en fin todo el que usa las herramientas de las Creative Suite de Adobe para algo.

Adobe CS4

Adobe CS4

Se trata de la Creative Suite 4 de Adobe (Adobe CS4) completa con el crack y un tutorial sobre como usar el crack, si estan acostumbrados a CS3 o peor aun a CS2 cuando vean CS4 van a quedar sorprendidos en especial los usuarios de Flash, Fireworks, DreamWeaver y Photoshop ya que para ellos se generaron las principales mejoras.

Desde hace un par de meses me mude de Adobe Creative Suite 3 a las Creative Suite 4 y estoy feliz, entre otras cosas este sitio web (tupale.com) es posible gracias a herramientas de Dreamweaver y Fireworks CS4.

Aqui hablare de las caracteristicas de algunos de los software de la Suite CS4 que yo mas uso, de las que puedo hablar con sierta seguridad y publico tambien algunos screenshots. Proximamente publicare algunos tutoriales.

Adobe DreamWeaver CS4

DreamWeaver CS4

DreamWeaver CS4

Para comenzar la interfaz, aunque esto ya viene desde CS3 donde Adobe se dio cuenta que los usuarios odian las estupidas ventanas flotantes, en CS4 puedes reducir aun mas el espacio que ocupan las barras de herramientas y las ventanas de los paneles laterales, llegando a solo iconos.
Tiene una barra llamada barra Spry donde puedes insertar muchos elementos ·prefabricados” que no son mas que buenas herramientas AJAX, es como tener un jQuery en tu Dreamweaver con el que puedes crear, pestañas, acordeones, transiciones, juegos de datos,  etc.
Tambien dispone de mejoran en la parte de administracion de bases de datos y sitios dinamicos, trae nuevos comportamientos que puedes usar de maneras muy sensillas y dinamicas.

Otra de las grandes mejoras se hizo en la parte del visor de navegación, aquella herramienta que nos permite ver nuestro código ejecutándose en un navegador sin salir de dreamweaver, ahora soporta AJAX y javascripts sin problemas, ademas de los tradicionales PHP y Flash.
También es importante y casi se me olvida, es que ahora en el panel de propiedades van a encontrar de manera separa las acciones que se aplican al formato en HTML y CSS dando preferencia al CSS, así que si eres usuario de CSS te va a ir muy bien y si no es la mejor oportunidad para aprender.

Adobe Fireworks CS4

Fireworks CS4

Fireworks CS4

La principal mejora según adobe (y estoy de acuerdo)  es la corrección de la critica fuga en ram de este software, en versiones anteriores después de trabajar durante un tiempo de manera seguida en este programa comenzaba a ralentizar el equipo e incluso podía cerrarse Adobe Fireworks, esto se debía a que Fireworks no limpiaba eficientemente la memoria RAM de los datos que utilizaba pero en la nueva versión CS4 parece estar solucionado el inconveniente.
Por otro lado los estilos se dividen en categorías y hay una nueva cantidad de estilos para escoger, nuevas auto formas y activos que te pueden ser útiles, dentro de ellos encontré una que se llama “inspirar” que genera un gráfico vectorial aleatorio muy interesante para desarrollar artes, fondos fractales, etc.
Una cosa que no me gusto tanto es que ya no puedes aplicar estilos a las auto formas sin antes des agruparlas, el problema es que cuando des agrupas pierden sus propiedades de formas inteligentes.

Flash CS4

Flash CS4

Flash CS4

Este programa es una nueva ciencia, me parece que esta muy desligado de las versiones anteriores de Flash y que es un mundo nuevo para el usuario promedio de Flash CS3 o anteriores.
Primero que todo, aunque da soporte para Action Script 2 no es igual la cantidad de herramientas nuevas disponibles solo para Action Script 3 hace que uno se sienta perdido.
Pero por otro lado la herramienta de huesos es bastante interesante para hacer animación de personajes u objetos con características un poco mas reales.
Te da un mayor soporte 3D ya que desde Flash player 10 el mismo reproductor incluyo soporte para gráficos 3D y no requiere de plugins como en las versiones anteriores.
La verdad no tengo mucho que decir sobre Flash CS4 ya que actualmente en la mayoría de los casos sigo usando el CS3.
Importante, la interfaz sigue siendo la misma, pero cambiaron todo de posición jejejej.

Ya que te leíste o te saltaste todo el contenido descargate Adobe-Master-Collection-CS4.

Con el fin de cumplir con las politicas de Google para editores, todo el contenido protegido por leyes de derechos de autor ha sido eliminado de tupale.com.

Como descargar y usar los templatemonster gratis

Desde hace mucho tiempo me dedique a publicar los .fla de los template monster que me pedian en el foro o en los comentarios del sitio, sin embargo la demanda de templates monster ha crecido mucho y ya no doy abasto para sacarlos y publicarlos todos, por lo tano voy a publicar este anual que debi publicar desde el comienzo sobre como obtener, descargas y usar los template monster.

Para este tutorial necesitar los siguientes programas:

En versiones de firefox anteriores a la 3.5 es recomendable usar este plugin Plugin Download Embeded 0.5

Ahora vamos al tutorial paso a paso.

  1. Primero desidimos que template monster necesitamos para este caso escoji este http://www.templatemonster.com/flash-templates/23416.html abrimos la web en firefox ya con el plugin instalado y damos click en la flecha roja que aparece en la esquina inferior derecha de la pantalla, se abre un menu y damos click en Download All embed items, ay nos va a dejar guardar el archivo SWF.como-descargar-y-usar-los-template-monster-gratis-1
  2. Luego vamos a la carpeta ydonde guardamos y seleccionando el archivo damos click derecho y le derecho le decimos Convert to Fla, para esto ya deben tener instalado el SWF Decompiler les va a dar las opciones para guardar el punto fla y en formato selecciones Flash 8.
    como-descargar-y-usar-los-template-monster-gratis-2
  3. Una vez tengan el . Fla lo abre con Adobe Flash CS3, primero les aparecera una ventana pidiendo las fuentes para este template (no sucede en todos los casos) si quieres que quede bien descarga las fuentes, aun asi puedes continuar diciendole Use Default, despues de abierto  el .fla del template monster presionen CTRL+Enter para provar pelicula, les va a sonar un chirrido al comienzo, deben buscar entre la libreria un simbolo llamado Sound 7 que es el que produce eso.
    Cambio de Fuentes
    Eliminar sonido molesto
  4. Tambien en algunas ocacions los swf llaman archivos de pelicula externos como sonidos, videos y otros swf, esto lo sabremos al exportar la pelicula y probarla si aparecen errores de de linkeo de archivos, para descargar estos archivos adicionales, miramos el action scripot que lo llama y vamos a la url donde se encuentra alojado el swf cmabiando la ruta del swf por la ruta del archivo que queremos descargar, lo guardamos manteniendo al estructura de arbol que tenia en template monster y probamos pelicula de nuevo.como-descargar-y-usar-los-template-monster-gratis-5

Templatemonster

Y asi finalmente tenemos nuestro template monster en flash listo para usar, solo modifiquen o que necesitan publique y disfruten.  Espero que les haya gustado y se les sirivio porfavor reconoscan el trabajo de escribir el tutorial y regalenme un link desde su web.

Este post lo escribi yo aunque originalmente lo publique en mi web personal “Kalvin Manson” ahora lo pongo a su disposicion en tupale debido al gran exito que ha tenido este material.

Articulo original: http://kalvinman.com/como-descargar-y-usar-los-template-monster-gratis.html