Contenido

Haz flip a las páginas con Safari

2 Jun

+ 6

Mediante el uso de la propiedad CSS (-webkit-transform), propuesta por el equipo de WebKit para transformar la salida por pantalla del HTML, podremos girar cualquier página usando un pequeño enlace javascript.

anieto2k-flip

javascript:document.body.style['-webkit-transform']='rotate(180deg)';
javascript:document.body.style['-webkit-transform']='rotate('+prompt('degrees',180)+'deg)';

Guarda estos bookmarks entre tus marcadores y podrás girar cualquier página (solo en Safari y WebKit).

Flip / Flip2

Via

CSS Masks, ya disponibles en WebKit

24 Abr

+ 0

Hoy la gente de Webkit, anuncia que la última versión de su navegador dispone de CSS Masks, una nueva funcionalidad CSS que permite aplicar un estilo de máscara a imágenes y elementos.

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

Estas propiedades, pronto formarán parte del núcleo de Safari, así que no estaría de más ir echandole un vistazo.

Los nuevos tags

WebKit, es bastante famoso por seguir los estándares web y ser pionero (cogido de la mano con Opera) en integrarlos en las versiones beta de su navegador, además es el componente usado de base del navegador predeterminado de los sistemas operativos de Apple, pero con la creación de estos tags creo que está entrando en un terreno delicado, ya que a las pruebas me remito para recordar al querido Internet Explorer, el cual empezó integrando ActiveX, y los problemas que ha causado.

Por el momento están desarrolladas como posibles mejoras para un futuro navegador, a modo de propuestas para ir poniendo los dientes largos a más de uno, pero …

WebKit pasa el Acid3

27 Mar

+ 10

Era cuestión de tiempo que la gente de WebKit pasara el Acid3 y en convertirse en el primer navegador que lo pasa en una versión disponible para descargar.

acid3_webkit.jpg

Un pequeño paso para un navegador, pero un gran paso para la humanidad. 😀 

Actualización:

Me he descargado la última versión y no consigo pasar del 98/100 y además parece que alguien conoce un bug en la versión de desarrollo de Opera que lo deja en un 99/100… parece que la carrera aún continúa.

Webkit a punto de superar el Acid3 Test

22 Mar

+ 5

Los chicos de Webkit siempre han ido por delante a otros navegadores en cuanto a estandares, pero es que ahora están a años luz de ellos. Tras conseguir un 95/100 del famoso Acid3 solo les queda superarlo y atribuirse otra medalla que pesará a otros navegadores.

Primeras imagenes de Spinneret, el WebKit de Windows

12 Feb

+ 3

Poco a poco van migrando el navegador estrella para los estandares web a la plataforma más usada en Internet. Tras una pequeña migración consiguen hacerlo funcionar “de esa manera” sobre Windows, dando un gran salto hacia la portabilidad de WebKit. ¿lo veremos en algún móvil en breve?

webkit_on_windows.jpg

Actualización
En el desarrollo del core que formará parte de Spinneret (nombre que se le ha dado la versión para Windows de WebKit), se están puliendo la ciertos detalles fundamentales para cualquier navegador, como por ejemplo, el tamaño de la fuente que ha de mostrar. Podemos ver una imagen de como se vé la página de Apple desde está versión realmente alpha.

spinneret.png

getSelector y getSelectorAll ya en WebKit

8 Feb

+ 1

La gente de WebKit no para de incorporar nuevas funcionalidades a su navegador. Esta vez ha sido el API de selectores que la W3C publicó hace unos meses. Estos selectores nos permitirán completar las posibilidades de las que ahora disponemos para seleccionar uno o más elementos de nuestro DOM. 

Actualmente disponemos de métodos como getElementById, getElementByTagName y el recien integrado en el core, getElementByClassName (de forma nativa) con lo que ya podemos manejarnos perfectamente, pero, ¿nos vamos a contentar con solo estos métodos?. Está claro que no, debemos facilitarnos la vida con querySelector() y querySelectorAll(), podemos conseguirlo. Veamos un ejemplo de su uso.

Ejemplo

document.querySelectorAll(".hot"); // Seleccionar todos los elementos con clase hot

document.querySelector(":hover"); // Seleccionamos el elemento que esté en modo :hover (el ratón sobre él).

document.querySelectorAll("#large:nth-child(even)"); // Ejemplo de como conseguir elementos intercalados (por ejemplo para tablas zebra)

Tests

Desde la propia página de WebKit nos facilitan un test, basado en SlickSpeed de MooTools, en el que podemos testear el funcionamiento de estas funciones nativas (únicamente desde Webkit última versión). 

slickspeed.jpg

Viendo los tiempos obtenidos por la versión nativa (columna de la derecha), frente a los frameworks testeados (Ext 2.0, Prototype y jQuery) notamos la diferencia y la mejoría (y necesidad) de que estos métodos se incluyan en el navegador y no tengamos que implementarlos nosotros.

Descargar

Más mejoras para WebKit

25 Dic

+ 2

Es que no paran, ni siquiera en estas fechas donde lo último en lo que habría que pensar es en trabajar. Pero esto a nosotros nos va de perlas, ya que una vez más los chicos/as de WebKit han demostrado estar a la cabeza en cuanto a cumplimiento de estandares se refiere. 

Un ciclo de desarrollo basado en betas permite que nosotros, los usuarios, podamos disfrutar de estas nuevas características en el momento en el que se desarrollan, de ahí que seamos nosotros los encargados en testear la nueva funcionalidad y reportar los posibles errores que encontremos.

Esta ves, nos sorprenden con una serie de mejoras entre las que podemos encontrar, una versión mejorada del soporte HTML5 de canvas, que gracias a la ayuda de la gente de Adobe han logrado unir gráficos mediante Cairo.

webkitcairocanvasshad.png

Tambien han depurado el último ticket de la serie que permitía que la cara del Acid2 se viera perfectamente. Otro navegador que se une a la lista de los selectos que han pasado la prueba, a ver si sigue pasandola más adelante.

La tecnología móvil es algo que a nadie se le quiere escapar, y por ello se han puesto las pilas en este tema solventando algunas deficiencias de las versiones portátile. La gente de Google tambien ha contribuido con el proyecto, ayudando a mejorar la decodificación de imagenes entre GTK+ y Android. Ahora las funcionalidades diseñadas para Android serán más fácil de usar con GTK+. Además, la plataforma Maemo/Hildon, usada por Nokia en Tables y Ubuntu`s mobile dispone de una versión oficial de GTK+ y se ha mejorado el tratamiento de Javascript para los modelos N800/810.

Nueva actualización de Web Inspector (WebKit)

6 Dic

+ 1

La gente de WebKit no para y una muestra de ello es la actualización de Web Inspector, el Firebug de este navegador.

Web Inspector

Nuevas características

Descargar

10 funcionalidades para Webkit 3

15 Nov

+ 5

Los chicos de AppleWeblog, se hacían eco hace unas horas de las 10 novedades incluidas en WebKit 3. Y es que son para mencionarlas:

  1. Editor de texto enriquecido avanzado
  2. Javascript más rápido
  3. Carga de páginas más rápida
  4. Soporte a gráficos vectoriales SVG
  5. XML Path Language (XPath, destinado a desarrolladores)
  6. Nueva tecnología XML mejorada
  7. Controles de diseño modificable en formularios
  8. Hojas de estilo avanzadas
  9. Reducción del uso de la memoria
  10. Herramientas para desarrolladores web

Continua —>

Webkit integra tags HTML 5 para controles multimédia

13 Nov

+ 13

HTML5 está pensado para enfrentarse a la nueva internet, una internet más cargada de contenido multimedia, por ello tags como <video /> y <audio /> van a coger cierta importancia en el futuro. Por ello, los chicos de WebKit se han puesto manos a la obra para integrarlas lo más pronto posible entre las funcionalidades del navegador

Veamos como nos quedaría el código HTML y javascript para cada uno de los casos, según el estandard:

Video

//HTML
<video src=sample.mov autoplay></video> 

//javascript
<script>
function playPause() {
  var myVideo = document.getElementsByTagName('video')[0];
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}
//Controlamos que el video ha terminado
myVideo.addEventListener('ended', function () {
  alert('video playback finished')
} );</script>
<input type=button onclick="playPause()" value="Play/Pause">

Audio

var audio = new Audio("song.mp3");
audio.play();

[Descargar][Via]