juillet 2011 - Outweb

Une aide au débogage javascript : blackbird

On juillet 30, 2011

Temps de lecture : < 1 minute

BlackBird est une librairie Javascript qui permet de générer un système de log visuel.
Grâce à cet outil, plus besoin de faire des alertes toutes les 5 lignes de code pour trouver la source de vos bogues.
La librairie permet de chronométrer vos applications afin d’en trouver les parties lentes.

Voici les principales fonctions de la librairie :

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

// pour le profilage

log.profile( 'generate test string' );

var testContent = '';
for ( var i = 0; i < 3000; i++ ) {
  testContent += '-';
}

log.profile( 'generate test string' );

Et voici le résultat obtenu dans la petite fenêtre de débogage :

Bref il s’agit ici vraiment d’un outil ergonomique et simple destiné à simplifier la vie des développeurs. L’essayer c’est l’adopter !

Faire des popups non intrusives avec Fancybox

de arnaud

On juillet 30, 2011

dans JQuery

Temps de lecture : < 1 minute

Aujourd’hui, je vais vous présenter un plugin JQuery très connu mais qui est un des meilleurs dans son style. Fancybox permet de faire des popups non-intrusives avec un design à la MAC OS. Vous l’aurez compris, le design est épuré et sans couleur.
Du fait de sa simplicité apparente, on peut facilement l’intégrer sur nos sites Internet, elle ne choquera pas comme pourrait le faire lightbox avec ses bordures épaisses.

Je serai relativement court sur cette présentation, car la documentation est très fournie sur le site suivant Fancybox. Vous y trouverez aussi une suite d’exemples qui pourront vous convaincre d’utiliser ce plugin plutôt qu’un autre.

Comme je vous l’ai dit précédemment, on peut voir que les bordures sont très fines et que seul le bouton « fermer » ressort. Cependant, pour fermer la fancybox, vous pouvez aussi cliquer à côté.

Sortie de Symfony 2

de arnaud

On juillet 29, 2011

dans Framework

Temps de lecture : 2 minutes

La nouvelle mouture tant attendue de Symfony 2 est sortie hier matin en version stable. Après de nombreux mois de tests, de versions releases, beta et RC, la version stable et définitive est enfin accessible.

Au programme, énormément de changements et une simplification apparente du framework. Les bundles font leur apparition, ils vont vous permettre d’insérer dans votre site Internet des modules que vous pouvez télécharger avec composer. Il existe déjà un grand nombre de bundles tout faits et prêts à l’emploi, comme un forum ou une gestion des membres par exemple. Le but est réellement à court terme de fournir tous les codes de base pour un site Internet, afin de se focaliser seulement sur le coeur de votre application.

Bien que ceci soit une différence notable par rapport aux précédentes versions, la sortie de différentes versions du framework en fonction des utilisations et du niveau des développeurs est une chose encore plus étonnante de la part du framework PHP5, qui a la réputation d’être le plus complexe à apprendre. Pour le moment, seule la version standard est téléchargeable, mais la rumeur parle de version Standard Edition, Sandbox, CMF… Chacune présentera des caractéristiques de base différentes, mais en arrière-plan il s’agira toujours du même noyau Symfony 2.

Les habitués de Propel vont être bien déçus d’apprendre qu’il a disparu du framework. En effet, seul Doctrine, en l’occurrence Doctrine 2, est maintenant disponible. C’est la fin de la cohabitation :p. Le grand plus de Doctrine 2 est la mise en cache des résultats de requêtes. Ceci vous permet de gagner du temps sur la génération de vos pages web.

Dans les nouveautés notables, on peut mentionner l’intégration du moteur de templates twig. Twig est aujourd’hui un des meilleurs moteurs de templates PHP disponibles, son intégration n’est pas une grande surprise.

Présenter votre site Internet à vos utilisateurs

de arnaud

On juillet 28, 2011

dans JQuery

Temps de lecture : < 1 minute

Si votre site possède une partie un peu complexe, comme une zone membre avec des menus et des zones d’informations, vous souhaitez peut-être expliquer à vos utilisateurs la logique et le fonctionnement de tout cela. Habituellement, vous faites une vidéo ou un tutoriel expliquant à l’aide d’images votre projet.

Bootstro va vous permet de faire une suite d’infobulles, expliquant étape par étape, directement dans la page web, le fonctionnement de votre site. Ceci offre une multitude d’avantages. Le simple fait que l’utilisateur puisse à tout moment, sans quitter la page, accéder à l’aide, est déjà beaucoup.

Voici un exemple en images :

De plus on pourrais utiliser ce système sur des sites à contenu payant pour faire « un tour gratuit » ou bien encore pour présenter des templates HTML. Bref vous l’aurez compris, les utilisations de cet outils sont multiples.

Spriter

de arnaud

On juillet 27, 2011

dans Optimisation

Temps de lecture : 2 minutes

Pour faire suite à l’article sur l’optimisation, voici comment gagner du temps sur le chargement des images de vos pages web.

En général, les développeurs débutants, ou peu soucieux du temps de chargement de la page, utilisent un nombre conséquent d’images différentes. Chaque image est donc téléchargée une à une lors de l’affichage de la page web. Donc s’il y a 100 images sur la page il faudra 100 requêtes HTTP pour toutes les afficher.

Maintenant, il y a une solution alternative, le spriter, qui permet d’afficher les 100 images simultanément et en une seule requête. La page en question s’affiche donc très rapidement. Les grands sites Internet comme Google, Facebook, Amazon, … utilisent cette technique.

Voici par exemple le spriter de Google

La solution, c’est de réunir toutes les images en une seule grande et de n’afficher que la portion dont nous avons besoin grâce au css.

Voici un exemple simple de spriter

Source: https://www.pixelcrea.com/blog/sprites-css/

Nous allons utiliser cette image pour afficher seulement une icône à la fois.

Ici, je vous présente un exemple simple d’utilisation de spriter. Seulement les quatre icônes sélectionnées sont affichées, elles apparaissent toutes en même temps.

Différents sites Internet vous permettent de fusionner et de récupérer les coordonnées des icônes dans le spriter : Spritemapper , spritegen ou spritecow

Des tooltips élégants avec tipTip

de arnaud

On juillet 26, 2011

dans JQuery

Temps de lecture : < 1 minute

Quand vous souhaitez donner des informations à la volée, vous utilisez sûrement l’attribut title sur vos liens. Cependant, le rendu ne sera pas le même d’un navigateur à l’autre. De plus, les infos bulles basiques du navigateur ou du système d’exploitation sont rarement belles. Mais grâce au plugin JQuery tipTip vous allez pouvoir mettre en place des tooltips élégants. TipTip est fourni avec un CSS par défaut noir, mais libre à vous de le changer car il n’est pas très complexe.

Pour l’utiliser c’est très simple, pour le mot où vous souhaitez ajouter un tooltip il faut faire :

   <a class="tiptip" href="#" title="message tooltip">mot</a>

Et côté JavaScript, vous avez juste à faire appel au plugin sur votre classe tipTip :

    $(function(){
	$(".tiptip").tipTip();
    });

Voici un exemple en images, avec un contenu assez long dans la tooltip :

Détecter des visages avec JQuery

de arnaud

On juillet 24, 2011

dans JQuery

Temps de lecture : 2 minutes

Vous souhaitez mettre en place un système d’avatar sur votre site Internet, et vous souhaitez que l’utilisateur puisse envoyer sa photo, puis puisse la recadrer selon son désir ? Le problème réside dans la détection du visage. Comment faire pour pré-cadrer le ou les visages ?

Face Detection est un plugin JQuery qui vous permettra de récupérer les coordonnées des visages présents sur la photo, et ainsi permettre de recadrer celle-ci.

Vous trouverez à la page Face Detection un exemple, sur une image de bonne taille et contenant deux visages de face.

Encore une fois, l’utilisation est très simple, il vous suffit, après avoir inclu les fichiers javascript, de faire un appel de cette manière :

var coords = $('#myPicture').faceDetection();

Après cet appel, la variable coords contient (comme son nom l’indique) les coordonnées des visages qui ont été détectés sous le format suivant :

x: coordonnée X du visage
y: coordonnée Y du visage
width: largeur du visage
height: hauteur du visage
positionX: positon en x par rapport à document
positionY: positon en y par rapport à document
offsetX: positon en x par rapport à parent
offsetY: positon en y par rapport à parent

Voici le résultat obtenu sur une image après avoir fait appel au plugin, ici les coordonnées sont utilisées pour dessiner un rectangle autour de la tête :

En combinant ceci à Système de tag d’images avec JQuery image annotate on pourrait obtenir un tag d’images avancé, détectant les visages et vous proposant d’y mettre un nom.

Modèle de page « en maintenance »

de arnaud

On juillet 22, 2011

dans JQuery

Temps de lecture : < 1 minute

Si vous avez une mise à jour à faire qui risque de provoquer des erreurs, de type 404 ou autre, pendant le temps de la mise en place, il vaux mieux afficher une page d’avertissement expliquant brièvement la situation à l’utilisateur.

Grâce au plugin JQuery lwtCountdown, vous pouvez très simplement ajouter un compte à rebours propre et animé, afin d’éviter la page toute simple et moche. Bien sûr, il vous faudra connaître au préalable la date de retour en ligne. Pensez à prévoir toujours un peu plus que nécessaire. 🙂

Voici un exemple de page faite avec lwtCountdown :

Pour lancer le compte à rebours à partir d’une date, il vous suffit de faire appel au plugin de la manière suivante :

jQuery(document).ready(function() {
				$('#countdown_dashboard').countDown({
					targetDate: {
						'day': 		21,
						'month': 	12,
						'year': 	2012,
						'hour': 	11,
						'min': 		0,
						'sec': 		0
					}
				});
			});

Quand la date butoir est atteinte, le compteur reste à 0, pas de chiffre négatif comme on peut parfois le voir.

Rendre votre HTML5 compatible sur tous les navigateurs

de arnaud

On juillet 20, 2011

dans JQuery

Temps de lecture : < 1 minute

Comme vous le savez, le HTML5 est assez récent et donc pas encore pris en charge par tous les navigateurs. Cependant, il permet de faire des choses assez intéressantes sans y passer des heures, et le code est plus ordonné. Bref, je ne vais pas faire la présentation complète de HTML5, ce n’est pas le sujet de cet article. Mais voilà, même si le HTML5 a l’air génial, on ne peut pas l’utiliser tant que l’on n’est pas sûr que l’utilisateur pourra avoir le résultat voulu.

C’est pourquoi beaucoup de développeurs attendent pour se lancer dans cette aventure.

Mais voilà HTML5Replace , qui est un script JQuery vous permet, par sa simple inclusion dans votre page, de détecter la prise en charge ou non du HTML5, et en cas de non prise en charge de remplacer les balises HTML5 par du HTML normal.

Afin de pouvoir adapter simplement votre css, les balises <header>, par exemple, sont remplacées par <div class= »header »>. De même pour toutes les autres balises HTML5.

Voilà de quoi encourager les réticents à se lancer dans l’aventure du HTML5, et enfin contribuer encore un peu plus à la fin du Flash :p

Personnaliser vos menus déroulants avec DropKick

de arnaud

On juillet 18, 2011

dans JQuery

Temps de lecture : < 1 minute

Vous trouvez que vos menus select sont trop simples ? Le plugin JQuery DropKick vous permet de faire des menus déroulants élégants sans perdre de temps à changer le css, et à travailler sur la compatibilité.

Si les thèmes par défaut ne vous conviennent pas, vous avez la possibilité de vous faire le vôtre assez simplement.

De tels plugins rendent plus attirants des formulaires qui d’habitude rebutent un peu les utilisateurs.

Voici un exemple de menu réalisé avec ce plugin :

Vous admettrez que le style de base est plus que correct, ce qui change des menus déroulants basiques présents sur beaucoup de sites Internet.

Mois : juillet 2011 Page 1 of 2