La toute nouvelle suite Adobe Creative Suite 5 propose de nouveaux outils dont le fameux BrowserLab

Il n’est pas toujours évident pour l’intégrateur de sites WEB de tester ses pages sur toutes les plateformes et sur la majorité des navigateurs, devoir installer dans son bureau des stations Windows, Mac Os et Linux, voire émuler plusieurs systèmes d’exploitation sur un même ordi au risque de voir ses ressources vite saturées…

BrowserLab est un outil qui va vous faciliter la vie en vous permettant de tester en ligne la mise en page CSS, entre autres, que vous avez créée et ce, depuis différents profils de navigateurs…

BrowserLab propose de nombreux outils d’affichage , pour le diagnostic et la comparaison de vos sites.
Vous pouvez, depuis l’interface BrowserLab demander un affichage multiple et simultané de la page depuis plusieurs profils de navigateurs…

Les différents navigateurs disponibles dans BrowserLab

• Chrome 7.0 Windows
• Chrome 8.0 Windows
• Firefox 2.0 Mac Os X et Windows
• Firefox 3.0 Mac Os X et Windows
• Firefox 3.6 Mac Os X et Windows
• Firefox 4.0 beta 7 Windows
• Internet Explorer 6.0 Windows
• Internet Explorer 6.0 Windows
• Internet Explorer 7.0 Windows
• Internet Explorer 8.0 Windows
• Internet Explorer 9.0 Beta Windows
• Safari 3.0 Mac Os X
• Safari 4.0 Mac Os X
• Safari 5.0 Mac Os X

Démo. choix du navigateur

Démo. affichage de la page

Création d’ensembles personnalisés

Déterminez quels ensemble de navigateurs souhaitez-vous solliciter à chaque test

Affichage des ensembles

Les différents ensembles créés et celui par défaut sont affichés

Lancement des tests

La progression des tests s’affiche

Affichage profil Firefox 3.0 OS X

Affichage, par exemple, du résultat sous Firefox 3.0 OS X

Affichage profil Internet Explorer 7.0 Windows

Affichage, par exemple, du résultat sous Explorer 7.0 Windows

Menu profils

menu déroulant des profils

Paramétrages (alignement…)

depuis ce menu, à la façon de FireWorks, vous pouvez déterminer un affichage simultanés rendus de plusieurs navigateurs

Adobe BrowserLab, s’il tient ses promesses en terme de fiabilité, fera parler de lui dans le Landerneau des intégrateurs…

Un affichage rapide pour un meilleur référencement

Chacun le sait, la qualité du référencement de vos pages internet est tributaire de leur vitesse d’affichage. Performance du serveur, bande passante, poids des fichiers javascript, CSS, image, compression à la volée Gzip, etc.

Mesurer les performances d’affichage

De nombreux outils en ligne existent, d’autres sont de type « plug-in » pour navigateurs… Aujourd’hui nous allons voir comment installer l’extension proposée par Google : Speed Tracer, qui fonctionne depuis Google Chrome.

Pour commencer, veillez à utiliser la version dites « devchannel » de Google Chrome.

Télécharger Google Chrome devchannel

Une fois cette version de Google Chrome installée, lancez-le, puis télécharger et installez l’extension Speed Tracer à cette adresse :

Télécharger Speed Tracer.
Quittez Google Chrome.

Sous Windows

Sur le raccourcis Google Chrome présent sur votre bureau faites un clic-droit :

Propriétés – > Onglet « Raccourcis »
Un champ « cible » est présent, collez-y le code suivant puis validez en cliquant OK.

--enable-extension-timeline-api

Sous Mac Os X

Téléchargez le bootstrap suivant, le lien va ramener sur votre mac, une image disque qui contient l’application ci-contre. Lancez-là, c’est terminé !

Télécharger le bootstrap pour Mac Os X

Dans Google Chrome

Si l’installation s’est bien passée, le petit icône de Speed Tracer apparaît en haut à droite de la fenêtre (voir la copie d’écran, ci-dessous.). Saisissez l’adresse du site que vous souhaitez mesurer, puis cliquez sur cet icône.

Une nouvelle fenêtre s’ouvre identique à celle-ci :

L’analyse faite, une cascade s’affiche, affichant point par point les temps d’accès pour chacun des éléments présent dans la page analysée. Si vous cliquez sur l’un des éléments de la cascade, un complément d’information s’affiche détaillant les données de l’élément, un camembert affiche une synthèse visuelle du comptage.

Il est également possible de sauvegarder les URLs sauvegardées :

Vous restera, si besoin est, d’améliorer vos fichiers et certains paramètres du serveur pour atteindre une vitesse d’affichage respectable,
bonne optimisation…

Référencement : Going-Up analyse vos pages

Going-Up est un outil statistique proposant un premier compte gratuit, permettant de suivre plusieurs sites. Certaines options nécessitent un compte payant. Voici les principaux aspects de cette application en ligne :

• Une page d’accueil à personnaliser avec des widgets
• Onglet statistiques du trafic
• Onglet suivi d’action et d’objectifs
• Onglet track et optimisation référencement
• Onglet de cartographie des clicks

Pour l’intégrer dans votre site, plusieurs possibilités proposées :

• Tracking Javascript
• Tracking PHP
• Tracking par code HTML
• Tracking WordPress (installation extension)
• Tracking lasso

Une aide détaillée pour l’installation des codes par type de CMS :

• MySpace Install
• AOL Journal Install
• Blogger Install
• Blogger (blogspot) Old 2006 Install
• Edublogs Install
• Flickr Install
• FreeWebs Install
• Friendster Install
• GooglePages Install
• iBlog Install
• iWeb Install
• Joomla Install
• Justin.TV Install
• Last.FM Install
• LiveJournal Install
• Moodle Install
• Movable Type Install
• MSN Spaces Install
• Multiply Install
• MySpace Install
• Ning Install
• One.com Install
• PB Wiki Install
• SmugMug Install
• Tripod Install
• Typepad Install
• WikiSpaces Install
• Windows Live Spaces Install
• WordPress Install
• Yahoo Site Builder

Analyse du traffic

Les principaux onglets et fonctions disponibles :

• Classement des pages vues
• Classement des visiteurs (pays, région, visiteur unique…)
• Référents (sites d’origine…), carte…
• Moteurs de recherches et requêtes
• Profils des ordinateurs (systèmes d’exploitation, affichage écran, navigateurs…)

Référencement : Actions et objectifs

Côté Actions, possibilité de suivre le taux de conversion des pages en ajoutant un code tracking personnalisé

• Suivi des ventes
• Suivi d’une image cachée placée dans le contenu
• Redirection d’URL (particulièrement adapté pour le téléchargement de logiciels
• Comptage de chargement d’une URL (pour visiteur unique ou non, nombre de pages vues, etc.

Outils de référencement

L’ atout, entre autres, de Going-Up est de proposer plusieurs outils pour améliorer son référencement naturel : Le positionnement (Rank) et la densité des mots clefs contenus dans vos pages, leur Google Rank, l’outil d’optimisation de page et l’analyse en masse d’un groupe de nom de domaine.

www.goingup.com

Illustrator : créer un objectif photo vectoriel

Niveau moyen. Temps : 30 mn à 1H00
Je réalise aujourd’hui une illustration d’une vue d’objectif photo de face, le but est de pouvoir gérer au mieux les reflets de lumières… Bon tuto à vous tous !

Thèmes abordés

• Dégradés
• Centrage d’objet
• Gestion des transparences et modes de fusion des calques
• Utilisation de l’outil filet
• Ecriture en cercle selon un tracé

Dessiner un objectif photographique vu de face, la lumière étant située en haut à droite de l’objet, les différents dégradés vont permettre de donner tout le volume aux éléments de l’objectif. La majeure partie du dessin est constituée d’une superposition de cercles gris dégradés linéaires.

Réaliser un objectif photo avec Adobe Illustrator

Etape 1

Création du premier cercle gris dégradé. Ce premier cercle représentant le bord extérieur de l’objectif, la couleur claire du dégradé est placée à droite (vers la lumière).

Etape 2

Pour créer l’effet de profondeur le dégradé du second cercle est inversé, la couleur couleur clair à l’opposé de l’emplacement de la source lumineuse. Le second cercle est légèrement plus petit et centré par rapport au premier.

Etape 3

Le troisième cercle, dont le dégradé se trouve à nouveau inversé par rapport au précédent, va permettre de créer un bord. Le bord éclairé en bas à gauche donne l’effet « creux » pour cette pièce de l’objectif.

Etape 4

Continuez par superposer des cercles pour matérialiser les différents groupes constituant l’objectif. Celui-ci, totalement noir, va dessiner un sillon profond dans lequel la lumière ne pénètre pas.

Etape 5

Avec ce nouveau cercle dégradé, le sillon est bien visible à présent, nous continuons…

Etape 6

Un nouveau disque gris dégradé linéaire…

Etape 7

Un cercle à nouveau, inversion, toujours, des dégradés, le procédé reste simple… Ajout de l’encoche, en bas à gauche, permettant de recevoir l’outil de vissage de la bague lors de la fabrication de l’objectif.

Etape 8

Dessin du cercle suivant, pensez à sélectionner l’ensemble des cercles et centrer les horizontalement et verticalement à l’aide des outils dans l’onglet « Alignement ».

Etape 9

Pour résumer les surfaces enfoncées ont la partie claire à l’opposé de la source lumineuse qui se trouve en haut à gauche, les parties saillantes, quant à elles, ont la zone claire en haut à droite. Organisez vos dégradés selon ce principe…

Etape 10

La présence des différents groupes de lentilles en verre dans l’objectif et le traitement de leur surface optique créent un diffraction de lumière, celle-ci est visible par la présences de différents reflets de couleurs. En l’occurrence, l’objectif que je cherche à représenter aura des retours de bleu et de magenta. Le premier cercle reçoit un dégradé bleu dans cet esprit, le reflet futur étant censé éclairer le bord de la pièce en plastique noir.

Etape 11

Nous nous enfonçons dans le mécanisme de l’objectif, la lumière y pénètre plus difficilement, le noir est donc de rigueur…

Etape 12

Même principe pour la pièce suivante, avec le magenta appliqué…

Etape 13

Le cœur de l’objectif, plus sombre se voit appliqué non plus un dégradé linéaire, mais un dégradé polaire (en cercle) ce qui lui confère un aspect bombé. Et suivant notre logique, qui dit bombé dit saillant donc lumière (reflet) en haut à droite.

Etape 14

J’imagine que l’objectif que je regarde de face reflète mon environnement, je vais donc dessiner le reflet d’une fenêtre qui se trouverait derrière moi… Créer un cercle blanc, personnellement je lui ai donné, via l’onglet « Contour » une épaisseur de 65 points. Avec l’outil plume + je créé des points dans ce cercle pour délimiter qu’une partie (si l’on raisonne en horaire et que l’on imagine que ce soit une horloge, je souhaite ne garder environ que 15 mn sur les 60 mn que compose ce trait).

Etape 15

Avec l’outil plume + je créé des points dans ce cercle pour délimiter qu’une partie (si l’on raisonne en horaire et que l’on imagine que ce soit une horloge, je souhaite ne garder environ que 15 mn sur les 60 mn que compose ce trait). Ensuite je vectorise ces deux bouts de tracé pour pouvoir les travailler…
Objet -> Tracé -> Vectoriser le contour
Je leur applique ensuite un dégradé de blanc à 100 % vers blanc à 26 % d’opacité.
J’applique ensuite au reflet de ma fenêtre un léger flou gaussien :
Effet -> Atténuation -> Flou gaussien

Etape 16

A présent je vais m’occuper des fameuses diffractions de lumière. Création d’un cercle et avec l’outil « Filet » [raccourci U] je vais disposer 4 points dans le cercle,ceci va former un maillage d’aspect bombé. Le point haut gauche reçoit une couleur magenta, le point bas gauche reçoit lui, la couleur bleue.
J’applique ensuite à ce cercle le mode de fusion « Superposition » avec 45 % d’opacité via l’onglet « Transparence ».

Etape 17

Je vais à présent créer les petits reflets blanc placé dans l’axe du rayon de lumière, je leur applique un léger flou gaussien.

Etape 18

La lentille protectrice extérieure de l’objectif occasionne un léger voile laiteux du aux reflets. Pour recréer cet effet, dessiner un cercle puis lui appliquer un dégradé de blanc à 15 % vers blanc à 0 % d’opacité

Etape 19

Réalisation d’un reflet blanc sur la partie basse de la lentille dessinée en arc de cercle.

Etape 20

Réduire l’opacité de ce reflet et application d’un léger flou gaussien

Etape 21

Pour l’insertion du texte, création d’un cercle puis sélection de l’outil texte curviligne dans la palette d’outils. Cliquez sur le cercle qui servira de guide aux inscriptions. J’ai choisi une police sans-serif (à bâton) de taille 9 points en blanc. Et voila !

Journée Mondiale de la Terre

Google se met aux couleurs de la Journée Mondiale de la Terre. En 1970 pour sensibiliser les étudiant américains sur le respect des écosystèmes de la planète, le sénateur Gaylord Nelson, leur demanda de mettre sur pied des projets pour sensibiliser le monde sur la protection de la notre terre.

Google, comme chaque année, célèbre ce jour en arborant une image, vous avez certainement entr’aperçu celle du 22 avril 2010 :

My love 3D

Photo : Marek Denko

3D réalisée sous 3ds Max 6 par Marek Denko qui pris pour modèle son épouse. Le personnage est entièrement réalisé et les tissus sont modélisés par géométrie polygonale.

Scène rendue

Scène non texturée

Synchronisez, sauvegardez, partagez

À l’heure où les terminaux se multiplient, entre les smartphones, les tablettes, les portables et les stations de travail il devient incontournable de pouvoir synchroniser ses données d’une façon sûre, automatique et facile. Plus besoin de votre clef USB !

Visiter le site DropBox

Après plusieurs essais, mon choix s’est porté sur la DropBox.
Que ce soit pour votre ordinateur Mac, Linux ou Windows et sur votre iPhone ou iPad, téléchargez l’application DropBox.
Installez-la et créez un compte en quelques clics.

La procédure d’installation terminée, vous disposez d’un compte accessible depuis un navigateur, d’un espace de stockage gratuit jusqu’à 2 Gb et sur votre ordinateur un répertoire qui reçoit vos fichiers à sauvegarder et/ou synchroniser.

Synchronisation et Back-Up

Si vous installez cette application sur tous vos ordinateurs, vous aurez accès aux mêmes données, via le répertoire DropBox de chacun. Il suffit de glisser un raccourci, un fichier, une photo, un dossier, une archive zip ou autre dans la DropBox et ces éléments seront visibles depuis la DropBox de vos autres ordinateurs.

Sécurité

Les données déposées dans la DropBox sont transmises cryptées au serveur selon le protocole SSL
Ces fichiers stockés sur le serveur sont encryptés en (AES-256), seule la personne propriétaire du compte peut avoir accès et décrypter ces données.

Partage de fichiers

Un répertoire dans la DropBox est destiné au partage et seuls les fichiers glissés dans ce dossier particulier sont accessibles aux tiers, le reste des données est toujours sécurisé. Pratique pour le partage de projets au sein des groupes de travail « collaboratifs ».

Pour partager un fichier, glissez le dans le dossier « Partage » puis bouton droit sur le document, sélectionnez « Copy Public Link », le lien copié, par exemple : http://dl.dropbox.com/u/0000000/ozone.png, collez-le dans un e-mail le destinataire n’aura qu’à cliquer sur ce lien pour afficher/télécharger le document.

Mobile

Compatible avec votre iPhone ou votre iPod Touch, BlackBerry et autres smartphones.

Service gratuit jusqu’à 2 Gb vous recevez un e-mail d’alerte lorsque le quota est presque atteint. Les services 50 et 100 Gb sont payants.

Visiter le site DropBox

Visiter le site DropBox

Girl on a Chair

Artiste : Alexander Tomchuk

Comment cela ?

Le choix d’une balise doit-être fait, non pas pour son aspect visuel, mais par rapport au sens-même de ce pour quoi elle a été créée.

Exemple :

Un tableau <table>, malgré sa faculté à organiser le contenu en lignes et colonnes, n’est pas fait pour mettre en page mais est prévu pour présenter des données à la manière d’un tableur.

Une balise H1 <h1> existe pour indiquer le titre d’une page et non pas pour mettre en exergue un texte grace à la taille de ses caractères.

Le tag <li> n’a pas pour but final de présenter visuellement une puce, mais permet d’indiquer que l’élément concerné fait partie d’une liste d’éléments.

Un tas de balises existe pour indiquer le type de contenu inséré dans une page, exemple
<address>, <legend>, <label>, etc.

La balise <legend> indique l’objet du champ <fieldset>, La balise <label> permet de lier l’élément d’un formulaire à sa description via les mentions for et ID.

<fieldset>
<legend>Civilité</legend>
<label for="nomVisiteur" >Nom</label>
< input id="nomVisiteur" name="nom"   />
</fieldset >

Quel intérêt ?

Le fait de respecter la sémantique du code et de coller au plus près possible des standards facilite l’indexation des pages par les moteurs de recherche, améliore l’accessibilité du contenu pour les personnes souffrantes d’un handicap.

Un lecteur à synthèse vocale utilisé par une personne aveugle, adaptera le rythme de lecture et son intonation en fonction du contexte, un titre, une liste, etc. L’existence d’un <label> bien renseigné lui indiquera l’utilisation exacte du champ de formulaire sur lequel le curseur se trouvera…

Un astuce rapide sous Adobe Illustrator.

Niveau débutant. Temps : 1 mn
Une évidence pour ceux qui travaillent régulièrement sur Adobe Illustrator, cette question est souvent posée par les personnes qui découvrent cette application. Voici, donc, une façon d’opérer simple rapide et… rapide !

Etape 1

Sélectionnez l’outil Etoile puis double-cliquez sur le plan de travail.

Etape 2

Dans la petite fenêtre Etoile, indiquez 3 points (les 3 sommets du triangle)…

Et voilà !