Une performance impressionnante de la part de Michael Bebenita qui a eu l'idée de convertir le code en C du décodeur vidéo H.264 de Android en Javascript. Bien sûr le script est encore en phase de test mais donne des résultats intéressant. En effet le script tourne aux alentours des 20 FPS sous la nightly build de Firefox. Malheureusement les résultats ne sont vraiment pas les mêmes sur les versions stables de Chrome ou Firefox. Le script s'appel Broadway et il est prévu d'utiliser WebGL pour tirer partie de la puissance du GPU.
Vous pouvez accéder à la démonstration à cette adresse : devongovett.github.com/Broadway.
I'm Nassim, a web developer and I'm sharing with you some programming tips and tricks
New CSS 3 in 3D
Bonjour à tous,
Aujourd'hui nous allons nous intéresser à une nouvelle feature intégrée dans CSS 3. Il s'agit des transformations 3D qui ont été intégrées dans le moteur Web WebKit.
Cette nouvelle feature permet de simuler de la 3D ( ce n'est pas de la vrai 3D comme WebGL ) pour des rendus vraiment sympas.
Hakim El Hattab a réalisé une démonstration de cette feature destinée aux appareils mobiles. J'ai modifié cette démonstration pour qu'elle prenne en charge les navigateurs PC basés sur WebKit tels que Safari ou Google Chrome.
Alors comment cela fonctionne-t-il me demanderait vous ? Et bien c'est assez simple, dans un premier temps on réalise un cube à l'aide de la propriété CSS -webkit-transform de cette manière :
La propriété -webkit-transform permet de spécifier un ensemble de transformations sur les couleurs, la rotation, la taille mais aussi le placement de l'élément. Une fois que l'on a notre belle boîte en CSS 3, il faut faire en sorte que cette boîte se déforme par rapport aux mouvements de la souris.
Pour cela nous utilisons la propriété -webkit-perspective-origin qui nous permet de définir l'origine de l'effet de perspective définit par -webkit-perspective. Cette propriété nous permet de définir la profondeur de champs et le point de vu pour un effet de perspective. Celui-ci est calculé automatiquement par le moteur WebKit pour nous :D.
Nous calculons donc les coordonnées de l'origine du point de vu de la perspective et appliquons les modifications de coordonnées à l'aide d'une boucle de cette façon :
Et voilà notre cube 3D qui s'oriente en fonction de la souris fonctionne. Enfin presque, dans certains cas il faut penser à placer les murs au-dessus ou au-dessous des autres éléments à l'aide de la propriété z-index.
Pour les appareils mobiles (iPhone / iPad en l'occurence) la tâche est un peu plus complexe. Nous pouvons accéder au gyroscope à l'aide de la propriété accelerationIncludingGravity ce qui permet de savoir comment est penché notre appareil. Puis il nous faut détecter l'orientation l'appareil (portrait ou paysage) ce qui se fait par le biais de la propriété window.orientation qui sera égale à 90 ou 0.
A l'aide de ces informations nous pouvons alors placer notre point d'origine d'effet de perspective ainsi :
A noter l'utilisation de la fonction preventDefault() qui permets de surcharger la fonction de base de l'évènement. Ainsi vous pouvez modifier le comportement par default de l'évènement lors de la rotation de l'appareil.
C'est ainsi que se termine cet article sur cette fonctionnalité plutôt intéressante du CSS 3. WebKit a également une page dédiée aux transformations 3D.
Aujourd'hui nous allons nous intéresser à une nouvelle feature intégrée dans CSS 3. Il s'agit des transformations 3D qui ont été intégrées dans le moteur Web WebKit.
Cette nouvelle feature permet de simuler de la 3D ( ce n'est pas de la vrai 3D comme WebGL ) pour des rendus vraiment sympas.
Hakim El Hattab a réalisé une démonstration de cette feature destinée aux appareils mobiles. J'ai modifié cette démonstration pour qu'elle prenne en charge les navigateurs PC basés sur WebKit tels que Safari ou Google Chrome.
Alors comment cela fonctionne-t-il me demanderait vous ? Et bien c'est assez simple, dans un premier temps on réalise un cube à l'aide de la propriété CSS -webkit-transform de cette manière :
#back {
width: 600px;
height: 500px;
background: rgba(0,100,120,1);
text-align: center;
-webkit-transform: translateZ(-49px); // on place le fond à -49
}
#front {
width: 600px;
height: 500px;
background: url('../stripe.png') no-repeat bottom;
-webkit-transform: translateZ(50px); // on place le premier plan à 50
}
#wall-left {
height: 500px;
width: 100px;
left: 0px;
background: #bbb;
// le mur gauche est placé sur l'axe X puis tourné sur l'axe Y de 90 degrés
-webkit-transform: translateX(-50px) rotate3d(0, 50, 0, 90deg);
}
#wall-right {
height: 500px;
width: 100px;
right: 0px;
background: #bbb;
// on fait de même pour le mur droit en inversant l'angle de rotation
-webkit-transform: translateX(50px) rotate3d(0, 50, 0, -90deg);
}
#wall-top {
height: 100px;
width: 600px;
top: 0px;
background: #999;
-webkit-transform: translateY(-50px) rotate3d(50, 0, 0, 90deg);
}
#wall-bottom {
height: 100px;
width: 600px;
bottom: 0px;
background: #999;
-webkit-transform: translateY(50px) rotate3d(50, 0, 0, -90deg);
}La propriété -webkit-transform permet de spécifier un ensemble de transformations sur les couleurs, la rotation, la taille mais aussi le placement de l'élément. Une fois que l'on a notre belle boîte en CSS 3, il faut faire en sorte que cette boîte se déforme par rapport aux mouvements de la souris.
Pour cela nous utilisons la propriété -webkit-perspective-origin qui nous permet de définir l'origine de l'effet de perspective définit par -webkit-perspective. Cette propriété nous permet de définir la profondeur de champs et le point de vu pour un effet de perspective. Celui-ci est calculé automatiquement par le moteur WebKit pour nous :D.
Nous calculons donc les coordonnées de l'origine du point de vu de la perspective et appliquons les modifications de coordonnées à l'aide d'une boucle de cette façon :
function onMouseMove( event ) {
perspective.tx = Math.round( ( event.clientX / window.innerWidth ) * 100 );
perspective.ty = Math.round( ( event.clientY / window.innerHeight ) * 100 );
};
function update() {
// Interpolate towards the target perspective
perspective.cx += ( perspective.tx - perspective.cx ) * 0.1;
perspective.cy += ( perspective.ty - perspective.cy ) * 0.1;
// Apply the current perspective
world.style.webkitPerspectiveOrigin = perspective.cx + '% ' + perspective.cy + '%';
world.style.perspectiveOrigin = perspective.cx + '% ' + perspective.cy + '%';
// Rinse, repeat
setTimeout( update, 1000 / 30 );
}Et voilà notre cube 3D qui s'oriente en fonction de la souris fonctionne. Enfin presque, dans certains cas il faut penser à placer les murs au-dessus ou au-dessous des autres éléments à l'aide de la propriété z-index.
Pour les appareils mobiles (iPhone / iPad en l'occurence) la tâche est un peu plus complexe. Nous pouvons accéder au gyroscope à l'aide de la propriété accelerationIncludingGravity ce qui permet de savoir comment est penché notre appareil. Puis il nous faut détecter l'orientation l'appareil (portrait ou paysage) ce qui se fait par le biais de la propriété window.orientation qui sera égale à 90 ou 0.
A l'aide de ces informations nous pouvons alors placer notre point d'origine d'effet de perspective ainsi :
function onMotionChange( event ) {
if ( orientation ) {
var beta = -event.accelerationIncludingGravity.z;
var gamma = -event.accelerationIncludingGravity.y;
}else {
var beta = -event.accelerationIncludingGravity.z;
var gamma = -event.accelerationIncludingGravity.x;
}
perspective.tx = ( ( gamma / 5 ) + 0.5 ) * 100;
perspective.ty = ( ( beta / 5 ) - 0.5 ) * 100;
event.preventDefault();
}A noter l'utilisation de la fonction preventDefault() qui permets de surcharger la fonction de base de l'évènement. Ainsi vous pouvez modifier le comportement par default de l'évènement lors de la rotation de l'appareil.
C'est ainsi que se termine cet article sur cette fonctionnalité plutôt intéressante du CSS 3. WebKit a également une page dédiée aux transformations 3D.
Compression Gzip
Bonjour, bonjour,
Ca fait un petit moment que j'ai pas eu le temps de poster sur mon blog, j'ai donc décidé de me racheter
Introduction
Courant Mars, Google a mis en production une nouvelle version de son site comme vous avez été nombreux à le voir. Ce changement inclus également une modification de l'algorithme d'indexation de Google. En effet, l'algorithme appelé MayDay a été mis en place suivi, plus récemment, par l'algorithme Caffeine.
Ces modifications de l'indexation ont eu des effets sur le référencement de nombreux sites car Google a modifié ses critères de classement. De nouveaux critères entres maintenant en jeu. Parmi ceux-là il y a maintenant la vitesse de réponse du serveur.
Nous allons voir aujourd'hui comment améliorer ce critère à l'aide d'un technique de compression à la volée.
Module Gzip/Deflate
La compression des données à la volée permet de diminuer la taille des données transférées entre votre navigateur et le serveur. En effet, grâce à cette technique, votre navigateur reçoit les données HTML compressée par Gzip et les décompresse pour les afficher.
Cette technique peut vous premettre de gagner jusqu'à 8 secondes de temps de réponse. Le seul bémol de cette technique est qu'elle nécessite un serveur d'assez bonne qualité puisque le processeur est plus utilisé.
Pour activer Gzip, rien de plus simple installez mod_deflate pour Apache 2.x et mod_gzip pour Apache 1.x.
Activez ensuite le module dans votre httpd.conf : LoadModule deflate_module modules/mod_deflate.so
Et ajoutez la règle suivante dans le : AddOutputFilterByType DEFLATE text/html. Ce qui compressera les fichiers HTML.
Vous pouvez également ajouter des règles pour d'autres types de fichiers comme les MP3 ou PDF mais sachez qu'il peut y avoir des incompatibilités avec ces formats.
PHP Zlib
Vous pouvez également activer ce module grâce à PHP. Vous aurez besoin avant tout que l'extension Zlib de PHP soit installée.
Ajoutez le code suivant en tout début de page : ob_start("ob_gzhandler");
Le handler ob_gzhandler est un alias facilitant l'activation de la compression gzip. L'inconvénient de cette technique est le même que précédemment, cela aura pour effet d'utiliser plus le processeur de votre serveur.
Autre optimisation
Vous pouvez également forcer le taux de rafraîchissement du cache de vos visiteurs grâce à l'entête Expires. Ainsi vos visiteurs ne chargeront vos images que lors de leur première visite. Le point négatif de ce dispositif est que le client doit vider son cache pour que son navigateur prenne en compte les modifications que vous avez apportées.
L'entête Expires prend comme argument une date d'expiration. Si la date est antérieure à la date courante, le cache sera mis à jour. Attention, les dates supérieures à un an par rapport à la date courante ne sont pas conseillées.
En Php pour utiliser l'entête Expires, rien de plus simple, vous utilisez la fonction header : header("Expires: ".gmdate('D, d M Y H:i:s', time()+(60*60*24).' GMT'); .
Nous définissons donc une date d'expiration de 60 secondes * 60 minutes * 24 heures soit 1 journée. Ainsi durant une journée vos visiteurs ne mettrons pas à jour leur cache.
Conclusion
Il existe de nombreuses techniques d'optimisation du temps de réponse de votre serveur web. On peut citer l'optimisation des fichiers CSS et JavaScript mais aussi l'optimisation de vos requêtes SQL.
De nombreux développeur oublient de prendre ce paramètre en compte lors du développement d'un site internet or ces optimisations deviennent de plus en plus indispensables aux vues des exigences des moteurs de recherche actuels.
Voilà, voilà, sur ce je vous souhaite une très bonne soirée.
A+, Flyers.
Ca fait un petit moment que j'ai pas eu le temps de poster sur mon blog, j'ai donc décidé de me racheter
Introduction
Courant Mars, Google a mis en production une nouvelle version de son site comme vous avez été nombreux à le voir. Ce changement inclus également une modification de l'algorithme d'indexation de Google. En effet, l'algorithme appelé MayDay a été mis en place suivi, plus récemment, par l'algorithme Caffeine.
Ces modifications de l'indexation ont eu des effets sur le référencement de nombreux sites car Google a modifié ses critères de classement. De nouveaux critères entres maintenant en jeu. Parmi ceux-là il y a maintenant la vitesse de réponse du serveur.
Nous allons voir aujourd'hui comment améliorer ce critère à l'aide d'un technique de compression à la volée.
Module Gzip/Deflate
La compression des données à la volée permet de diminuer la taille des données transférées entre votre navigateur et le serveur. En effet, grâce à cette technique, votre navigateur reçoit les données HTML compressée par Gzip et les décompresse pour les afficher.
Cette technique peut vous premettre de gagner jusqu'à 8 secondes de temps de réponse. Le seul bémol de cette technique est qu'elle nécessite un serveur d'assez bonne qualité puisque le processeur est plus utilisé.
Pour activer Gzip, rien de plus simple installez mod_deflate pour Apache 2.x et mod_gzip pour Apache 1.x.
Activez ensuite le module dans votre httpd.conf : LoadModule deflate_module modules/mod_deflate.so
Et ajoutez la règle suivante dans le : AddOutputFilterByType DEFLATE text/html. Ce qui compressera les fichiers HTML.
Vous pouvez également ajouter des règles pour d'autres types de fichiers comme les MP3 ou PDF mais sachez qu'il peut y avoir des incompatibilités avec ces formats.
PHP Zlib
Vous pouvez également activer ce module grâce à PHP. Vous aurez besoin avant tout que l'extension Zlib de PHP soit installée.
Ajoutez le code suivant en tout début de page : ob_start("ob_gzhandler");
Le handler ob_gzhandler est un alias facilitant l'activation de la compression gzip. L'inconvénient de cette technique est le même que précédemment, cela aura pour effet d'utiliser plus le processeur de votre serveur.
Autre optimisation
Vous pouvez également forcer le taux de rafraîchissement du cache de vos visiteurs grâce à l'entête Expires. Ainsi vos visiteurs ne chargeront vos images que lors de leur première visite. Le point négatif de ce dispositif est que le client doit vider son cache pour que son navigateur prenne en compte les modifications que vous avez apportées.
L'entête Expires prend comme argument une date d'expiration. Si la date est antérieure à la date courante, le cache sera mis à jour. Attention, les dates supérieures à un an par rapport à la date courante ne sont pas conseillées.
En Php pour utiliser l'entête Expires, rien de plus simple, vous utilisez la fonction header : header("Expires: ".gmdate('D, d M Y H:i:s', time()+(60*60*24).' GMT'); .
Nous définissons donc une date d'expiration de 60 secondes * 60 minutes * 24 heures soit 1 journée. Ainsi durant une journée vos visiteurs ne mettrons pas à jour leur cache.
Conclusion
Il existe de nombreuses techniques d'optimisation du temps de réponse de votre serveur web. On peut citer l'optimisation des fichiers CSS et JavaScript mais aussi l'optimisation de vos requêtes SQL.
De nombreux développeur oublient de prendre ce paramètre en compte lors du développement d'un site internet or ces optimisations deviennent de plus en plus indispensables aux vues des exigences des moteurs de recherche actuels.
Voilà, voilà, sur ce je vous souhaite une très bonne soirée.
A+, Flyers.
Subscribe to:
Posts (Atom)