Category: Site vitrine - Alessandri Olivier

déc

Le responsive web design : explication

Posted by : oalessandri | On : 25 décembre 2011

Category: Ecommerce, Ergonomie, Mobile, Programmation, Site vitrine, Veille technologique, Web en général

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)

nov

Wireframe : explication

Posted by : oalessandri | On : 5 novembre 2011

Category: Ecommerce, Ergonomie, Programmation, Site vitrine, Web en général

Tags:conceptionwew, logiciel, wireframe

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.

Un logiciel très performant comme Visio de Microsoft a des fonctionnalités bien plus poussées que la simple conception de Wireframe puisque qu’il sait également générer du code mais ceci est un autre sujet

Certaines méthodes facilitent donc la conception de pages web, l’organisation de contenu, l’optimisation de l’ergonomie et la disposition des éléments sur une page, l’interaction entre plusieurs pages ou écrans, …

Voici quelques exemples

nov

Lightbox en Jquery très performante

Posted by : oalessandri | On : 15 novembre 2009

Category: Ecommerce, Ergonomie, Site vitrine, Veille technologique

Tags:ergonomie, jquery, lighbox

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.

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

oct

De nouveaux attraits pour les (nouvelles) technologies web (3) : Jquery

Posted by : oalessandri | On : 18 octobre 2009

Category: Ecommerce, Ergonomie, Site vitrine, Veille technologique

Tags:ecommerce, ergonomie, jquery, menus

Suite d’une liste de plugins en Jquery utiles pour vos sites

Attention certains des ces liens peuvent ne plus fonctionner

Menus

http://www.getintothis.com/pub/projects/rb_menu/

Type Ipod

http://www.getintothis.com/blog/2006/09/26/my-first-jquery-plugin-a-sliding-menu/

http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/

http://www.filamentgroup.com/examples/menusHierarchical/index2.php

http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/

http://p.sohei.org/jquery-plugins/clickmenu/

http://p.sohei.org/stuff/jquery/clickmenu/demo/demo.html

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

http://be.twixt.us/jquery/

http://jdsharp.us/jQuery/plugins/jdMenu/

http://users.tpg.com.au/j_birch/plugins/superfish

http://p.sohei.org/jquery-plugins/menu/

http://javascript-array.com/scripts/multi_level_drop_down_menu/?j

http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

Menu Contextuel

http://www.trendskitchens.co.nz/jquery/contextmenu/

http://abeautifulsite.net/notebook/80

Popup

http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial/

Menu over sorte de bulles

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

août

De nouveaux attraits pour les (nouvelles) technologies web (2) : Jquery

Posted by : oalessandri | On : 2 août 2009

Category: Ecommerce, Ergonomie, Site vitrine, Veille technologique

Tags:ergonomie, experience utlisateur, jquery, site web, wpf

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)