mar

29

Posted by : Alessandri Olivier | On : 29 mars 2015

Après l’annonce que Google vient de faire sur l’obligation de réaliser des sites web adaptés au mobile quand  l’on fait une recherche à partir d’un mobile.

(Cette annonce sera appliquée le 21/04/2015) Je souhaiterais rebondir sur ce nouvel algorithme.

Le constat

Le constat que fait Google est l’augmentation grandissante de l’utilisation des mobiles ou tablettes c’est pourquoi il veut forcer les concepteurs à créer des sites adaptées à la navigation mobile.

La création de site web en responsive design

Google favorise la mise en place de responsive design sur les sites mais le Responsive Design est une solution parmi d’autres et ce n’est pas forcément la meilleure. Google se sert de sa position dominante pour imposer cette solution alors que d’autres sont bien plus performantes. Ce qui est assez incompréhensive est que Google parle de performances mais oublie que le responsive design est tout sauf performant.

Continue Reading

avr

18

Posted by : Alessandri Olivier | On : 18 avril 2012

Pour finaliser le 1er article je ne voulais pas faire l’impasse des portables qui restent un outils de mobilité encore très répandues et qui permet également de faire plus d’actions que sur une simple Tablette. Le jour où les tablettes permettront autant de possibilité que sur le PC cela sera idéal.

Maintenant que nous avons fait un tour d’horizon sur les supports possibles voyons comment les utiliser.

Qui utilisent les terminaux mobiles dans l’entreprise?

L’idée est de donner ce support (tablettes, smartphone) à tout ceux qui ont besoin de mobilité et de devoir synchroniser des informations. Eviter de ressaisir des informations et mettre à jour au fil de l’eau les informations. Pouvoir récupérer cette information par son propriétaire ou la partager. Montrer des produits à jour et enrichir l’expérience utilisateur est primordiale.

 

Continue Reading

déc

15

Posted by : Alessandri Olivier | On : 15 décembre 2011

Le responsive web design est né de la multitude d’écrans disponibles et surtout depuis l’avènement des tablettes et l’utilisation fréquente des Smartphones. Pour répondre à tous ces formats on est obligé de créer des sites différents réellement adaptés à chaque contenu :

  • Un écran d’ordinateur de bureau (mac ou pc) permet d’afficher
    • des contenus plus longs et plus complexes,
    • plusieurs colonnes sur une page,
    • des images plus grandes avec des agrandissements plein écran.
    • Plus d’éléments dans un site donc plus lourd.
  • Un écran de tablette affiche
    • déjà beaucoup moins d’informations,
    • des images plus petites
  • Pour les Smartphones c’est encore plus complexe puisque les écrans varient d’un fabriquant à l’autre mais on retrouve
    • des images plus petites pour les Smartphones,
    • et un contenu de quelques lignes,
    • des écrans plus nombreux avec des transitions entre eux,… La navigation n’est plus la même, plus humaine avec le doigt et non une souris ce qui change également le comportement des utilisateurs
    • Des pages plus légères à charger
    • Moins d’effet ou plutôt des effets différents (librairie javascript, jquery)

Continue Reading

nov

05

Posted by : Alessandri Olivier | On : 5 novembre 2011

Depuis quelques années la conception web est devenue, pour certaines sociétés, très professionnelle. Elles ont mis en place des méthodes de travail permettant de proposer aux clients des aspects d’interfaces fonctionnelles avant de concevoir le produit et ainsi optimiser ou même maximiser la satisfaction du client par rapport à sa demande.

C’est là qu’intervient le Wireframe qui permet de concevoir des interfaces virtuelles comme des maquettes (sans graphisme) et ainsi de construire avec le minimum d’effort des interfaces.

Cette étape semble être une perte de temps mais ce n’est pas le cas car cette action, intervenant avant la conception graphique,  va accélérer la création de la maquette. En se basant sur l’interface issu du Wireframe, validée par le client, le travail du graphiste va en être facilité. Cela évite ainsi de nombreux aller-retour entre la société conceptrice et le client.

Continue Reading

août

11

Posted by : Alessandri Olivier | On : 11 août 2011

Enfin une mise à jour majeure pour Windows Phone 7 qui doit être diffusé en octobre.

Windows Phone 7 : Microsoft livre de nouveaux détails sur la mise à jour Mango

Olivier Ribet, Microsoft France : « Windows Phone 7 Mango apporte des nouveautés encore jamais vues »

Voici une partie des 500 fonctionnalités de cette version 7.5 alias Mango :

Objectif centraliser les informations des différents sites et accélérer l’accès aux informations

  • multi-tâches – multi-applications – application en fond tâche – économise la batterie
  • interface commune pour le chat à travers des SMS, Facebook chat et Windows Live Messenger
  • Réseaux sociaux sont unifiés et intégrés au carnet d’adresse : on avait déjà windows live, google, facebook,s ‘ajoute linkedin, twitter, Messenger
  • boites mail liées et accessibles depuis la même interface ou pas
  • système de calendrier et de demande rendez vous
  • intégration de IE9 ouf! : html 5, accélération matérielle
  • stockage en ligne avec skydrive et Office 365
  • navigation avec guidage vocale
  • SMS dictés
  • système d’identification de musique intégré à Bing
  • mode conversation pour les emails affichés dans la boite de réception
  • recherche sur le serveur de la messagerie électronique
  • Lecture intégrée des QRCode, Micrsoft Tags, et code barres
  • Lync sera disponible gratuitement sur le Marketplace Windows Phone pour accéder au service de communications unifiées (lui est payant Clignement d'œil)
  • Pour les développeurs : accès aux multi-tâche, réalité augmentée, API  de capteurs, APN, capacité de notification évoluées, accès aux calendriers,n aux contacts

 

MISE A JOU 24/09/2012 : le changement le Windows Phone  8

Continue Reading

déc

28

Posted by : Alessandri Olivier | On : 28 décembre 2010

Après avoir attendu deux mois que Bouygues veuille bien lancer leurs offres, j’ai enfin mon Windows phone 7 le HTC HD7 : 1ère remarques

L’utilisation est très fluide sur le HTC HD7, les icônes sont beaucoup plus grands que sur un IPhone et je trouve plus clair. Chose bizarre Microsoft n’a pas pensé à autoriser la personnalisation des sonneries, alors que le simple mobile de base à cette fonction ? Bien sûr par rapport l’iPhone il manque des fonctions mais cela suffit largement pour le moment.

Les fonctions très intéressantes sont la fusion des contacts en une seule fiche, la centralisation sur Windows live des contacts et calendrier, l’utilisation des photos de Facebook pour ses amis et l’affichage de leur mur.

En ce qui concerne le téléphone, le seul problème pas d’extension avec une carte ce qui a long terme sera certainement gênant.

C’est en fait une micro tablette.

Pour revenir au JqueryMobile, il passe pour le moment très sur WP7 car ce dernier intègre IE7.

juil

06

Posted by : Alessandri Olivier | On : 6 juillet 2010

Je viens de découvrir le Microsoft Tag.  En temps que développeur des technologies Microsoft j’ai pu consulter le guide pour concevoir ce type de tag très intéressant et se démarquant de son aspect de tous les autres tags tel que le QRCode ou le Datamatrix.

Entre autre les premiers points sont : son utilisation des couleurs et du noir et blanc

StandardTags_356x160

OLVANI_WEBSITE_201111261171Celui ci contient OLVANI WEBSITE en libellé et son adresse web : www.olvani.com

Est également défini une période de validité et une vignette qui s’affiche à la place du code 2D

 

 

L’autre point est l’affichage d’un libellé ici “OLVANI WEBSITE” à la place de l’url et une vignette qui peut être son logo.

Continue Reading

nov

15

Posted by : Alessandri Olivier | On : 15 novembre 2009

Voici une lightbox facile à intégrer et qui permet d’insérer des flash ou autre page via Iframe

Elle comporte des thèmes différents : clair, foncé, avec sous ans coins arrondis.

Un petit défaut pas de traduction en français. Il faut juste changer les boutons.

image

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

oct

18

Posted by : Alessandri Olivier | On : 18 octobre 2009

août

02

Posted by : Alessandri Olivier | On : 2 août 2009

Voici une liste de plugins JQUERY très utiles pour améliorer l’expérience utilisateur (l’ergonomie d’un site web).

On s’aperçoit qu’avec ce type de fonctionnalités le rapprochement en terme d’ergonomie et d’intuitivité d’un site web vers une application traditionnelle est très fort. Je dirais même qu’une interface logicielle peut être beaucoup moins ergonomique (je ne parlerais pas bien sûr de WPF qui est une évolution majeure dans le développement de logiciel, malheureusement loin d’être utilisé par grands nombres d’éditeurs de logiciels):

Boites de dialogue :

http://plugins.jquery.com/project/jmodal

Colonnes

http://www.codeasily.com/demo/few-column-list/few-column-list.html

Effets Fading

http://medienfreunde.com/lab/innerfade/

jquery.innerfade.zip (124kb)

image

Effets de transitons sur des images :

http://www.malsup.com/jquery/cycle/int2.html

Effets de Zooms

http://www.mind-projects.it/jqzoom_v10

http://www.mind-projects.it/projects/jqzoom/

image

Carrousels:

http://plugins.jquery.com/project/carousel3d

http://plugins.jquery.com/files/carousel3d_1.1_0.zip

http://www.webcssdesign.com/css/coins-arrondis-avec-jquery-css-et-une-seule-image/

Effets panoramiques

http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html?lang=fr

image

des blogs font l’inventaire de plugins Jquery :

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

http://www.webcssdesign.com/ajax/jquery-plugins-240-tutoriels-a-decouvrir/

http://www.webdesignerwall.com/demo/jquery/

juil

14

Posted by : Alessandri Olivier | On : 14 juillet 2009

De nombreuses librairies javascripts (jquery, extjs, scriptaculous,dojo,…) existent pour rendre plus intuitives vos interfaces web.

Mais une a plus particulièrement attirée mon attention : Jquery

Pourquoi choisir cette librairie ?
  1. - elle est très complète
  2. - la communauté est importante
  3. - les plugins importants
  4. - les bugs réparés rapidement
Qu’a t-elle de spéciale par rapport aux autres ?
  1. Son concept de base : utiliser la structure hiérarchique du document HTML (Le DOM)
  2. Le script ne parasite pas le code HTML : utilisation des attributs “id” et “class” des tags
  3. Elle supporte l’XmlHttpRequest (Ajax)
  4. Externalisation du script qui permet de gérer les événements
  5. Installation très facile par de simples liens (link) et l’étiquetage des tag Html via Id ou Class
  6. Légèreté de la librairie
Les principes de bases :
  1. Des actions sur les noeuds du DOM (choix d’éléments, boucle sur des éléments, événements : un langage dans le langage, …)
  2. Des effets et animations : fade, déplacement (sliding), de tremblement, de glissement, …
  3. Des widgets : drag and drop, accordéon, sliders, tri, barre de progression, datepicker, boite de dialogue, onglets, …

Beaucoup d’animations pour enrichir vos interfaces web et en améliorer l’expérience utilisateur.
On se rapproche de logiciels classiques avec peut-être encore plus d’esthétique et d’ergonomique.

Que peut-on faire avec Jquery ?
  1. des carrousels,
  2. des popup nouvelles génération (lightbox, thickbox, greybox)
  3. des menus de toutes sortes : verticaux, horizontaux, onglets, hierarchique, …
  4. des Glisser-Déplacer
  5. des menus déroulants plus ergonomiques
  6. des tooltips plus joli, plus paramétrables

sans rechargement des pages bien sûr!

voir le site www.jquery.com

et les sites en version française :

www.jquery-france.com

www.jquery.info

Un prochain article listera les différents plugins utiles : menus, boite de dialogue, lightbox, thickbox, greybox, drag and drop, …

Une autre libraire peut également faire des effets similaires mais je trouve qu’elle n’a pas tous ces avantages : c’est Library Ajax de l’ASP.NET. Fournie de nombreux exemples avec l’AjaxToolkit

fév

12

Posted by : Alessandri Olivier | On : 12 février 2008

QRCode veut dire Quick Response Code est un code barre en deux dimensions en opposition du code barre en une dimension que vous rencontrez sur tous les produits de consommation. Il a été créé par la société Denso Wave en 1994

About2Dcode-e

Source Denso Wave

180px-DatamatrixIl existe plusieurs sortes de code en 2D comme les Datamatrix que vous pouvez trouver sur certains documents comme les correspondances bancaires. Vous pouvez également le retrouver sur des pièces électroniques de petites tailles. des entreprises comme la NASA l’utilise. Source Wikipedia

Le FlashCode qui est une création française s’appuie sur le Datamatrix.  A l’heure actuel on entend beaucoup parlé du Flashcode mais n’étant pas libre de droit à l’inverse du QRCode je pense que ce dernier va prendre plus d’ampleur d’ici les prochaines années.

 

Quel est la particularité du QRCode?

  • Il possède une haute capacité d’encodage des données ce qui en fait la plus grande différences avec les codes 1D et le Datamatrix
    • Numérique : 7089 caractères maximum
    • Alphanumérique : 4296 caractères maximum
    • Binaire (8bits) : 2953 octets
    • Caractère Chinois ou japonais (Kanji) : 1817 caractères maximum
  • Il a besoin d’une très petite surface d’impression. Une autre version existe appelé Micro QR Code
  • Il a la capacité d’encoder des idéogrammes.
  • Il résiste à des rayures ou des trace sur sa surface grâce à de la redondance d’information. La redondance doit être choisi au départ via 4 niveaux (L,M,Q,H) allant de 7% à 30%

yogore

  • Il peut être lu à 360° grâce au positionnement de ses carrés que l’on retrouve sur tous les QRCode

zenhoukou

Ce code 2D est devenu un standard international et dans le domaine public donc pas de redevance.

Il faut un scanner qui sait lire les code comme certaines douchette et surtout les téléphones mobiles?

Pour des explications plus techniques je vous conseille de visiter ces 2 pages : http://www.denso-wave.com/qrcode/qrgene3-e.html et http://www.denso-wave.com/qrcode/qrgene4-e.html

 

qcode-olvanicom2Ce QRcode code notre site web professionnel : www.olvani.com

Partly powered by CleverPlugins.com