Je vais vous expliquer comment je vois l’investissement en mobilité pour essayer d’y voir un peu plus clair. Cette réflexion sera divisée en plusieurs articles.

Constat

2009 : 59.7 Millions d’abonnés mobile (arcep.fr)

2010 : 64.4 Millions d’abonnés mobile (jdn)

2011 : 67.04 Millions d’abonnés mobile (arcep.fr)

2012 : …

Les Internautes n’utilisant que le mobile pour se connecter vont être, en 2015, 56 fois plus nombreux qu’en 2010 soit 788 millions.

Quels périphériques faut-il prendre en compte?

Les Smartphones

Oui, ce sont les téléphones de dernières générations; ceux qui sont les plus prometteurs car permettent d’exploiter la puissance de l’appareil et le rend extensible : ajouter des applications; Une des fonctions les plus intéressantes car complètes l’offres du mobile et la personnalise suivant les intérêts de l’utilisateur (bravo Steve tu as avais tout compris!). Oui ces téléphones seront l’unique offre des opérateurs. Nous aurons donc 3 systèmes à notre disposition : Iphone, Androïd et Windows Phone.

et les autres ? Les autres comme les BlackBerry sont amenés à disparaitre. Ils ont ratés le coche du tactile. Les utilisateurs ne voient plus que par le tactile. Nokia a déjà fait le pas et parier sur le Windows Phone. Les rumeurs vont bon train Blackberry en pour parler avec Microsoft?!

Et les téléphones qui ne sont pas des Smartphones? : Ils seront renouveler par des Smartphones tout simplement parce qu’ils n’y aura plus que cela en magasin.

Les tablettes

Les tablettes tactiles

Grâce ou à cause de la tablette Apple, un nouveau support et né avec de nouvelles utilisations. Mais j’ai de nombreuses personnes qui me disent : “mais à quoi cela sert une tablette?”

C’est entre un poste de travail (pc ou mac) et un téléphone. Quoique plus proche du Smartphone dans son utilisation mais le Smartphone a un écran trop petit pour vraiment exploiter certaines applications : lire un document par exemple

• utile : utilisation et consultation de documents
• faible encombrement : le PC portable ne rentre pas facilement dans un petit sac
• faible poids : Le PC est encore lourd
• tactile : l’ordinateur portable n’est pas tactile donc on l’équivalent d’u téléphone mais avec des fonctions d’un PC. La tactile apporte une facilité d’utilisation exacerbée.
• Connectés : 3G ou Wifi
• Qualité très haute de l’écran : facilité de lecture
• sécurisé: peut-être trop! ce support est pour le moment hyper verrouillé pour 2 raisons : éviter la propagation de virus et pour de grandes raisons commerciales.

DONC pour ces raisons la tablette tactile est née.

Les tablettes PC

Mais les tablettes existent depuis très longtemps pourtant! Oui mais ce qui changent avec ces nouvelles tablettes sont la mobilité et leurs légèretés: Eléments très peu exploitée par les constructeurs. Les tablettes ont été proposées pour des pros et certainement très mal ciblée. Donc certainement amenée à disparaitre au profit des tablettes tactiles.

Je vous invite à passer à l’article suivant : Avril 2012

Moins encombrante

Le point le plus flagrant est son encombrement  elle devient une vrai table.

Avant les caméras et le système imposaient  une forme de caisse et était relativement lourde.

Maintenant grâce au nouveau châssis Samsung SUR40, elle repose sur des pieds et la table en elle même est beaucoup plus fine.

Peut aussi être fixé sur un mur pour devenir un tableau.

Plus de points de contact

une nouvelle technologie appelé Pixel Sense permet de détecter jusqu’à 50 points de contact

Le développement repose sur WPF 4.0 et le Framework .Net 4.0

Vous remarquerez les différents tags des objets et l’interactivité grandissante avec le monde réel. Comme pour les aficionados des jeux de rôles, un Donjon et Dragon épatant.

Voici quelques exemples

Personnellement je suis toujours épaté  des capacités de cette table que je rêve d’avoir dans mon salon mais à 9000$ c’est pas encore abordable.

Visionnez ces vidéos et laissez vos remarques, je serais curieux de savoir ce que vous en pensez?

Et voici d’autres vidéos

http://www.youtube.com/watch?feature=player_detailpage&v=cmbW8zRrRbs

http://www.youtube.com/watch?feature=player_detailpage&v=z2mbcjnISJI

http://www.youtube.com/watch?feature=player_detailpage&v=n94E3IeBquY

http://www.youtube.com/watch?feature=player_detailpage&v=CL9MbEM2N4o

http://www.youtube.com/watch?feature=player_embedded&v=RNv8Jt2DGx4

http://www.youtube.com/watch?feature=player_embedded&v=tZjywoqtqGg

http://www.youtube.com/watch?feature=player_embedded&v=XjKcG-Xmwm0

Site officiel : http://www.microsoft.com/surface/en/us/purchaseprocess.aspx

Je souhaite expliquer comment je pratique la construction d’emailing pour optimiser la réception des emails dans les boites aux lettres.

Les spammeurs et la sécurité

Je pratique l’emailing depuis une quinzaine d’années et j’ai pu suivre les différentes évolutions de ce type d’envois. On s’aperçoit que l’augmentation du nombre de boites aux lettres dans le monde en fait un média de choix pour les spammeurs qui s’en donnent à coeur joie pour envoyer des messages non sollicités. Mais la contre-mesure à ce type de pratique est une mise en place de sécurité de plus en plus serrée qui était quasiment inexistante dans les années 2000.

L’arrivée de virus comme Code Red qui pour moi a été le tournant dans la mise en place de serveurs sécurisés. Depuis cette vague de virus tous les opérateurs sérieux ont mis en place sur le serveurs des filtres anti-spam de plus en plus efficace et des antivirus.

Donc cela devient de plus en plus difficile d’envoyer des mails en masse et d’être sûr que les destinataires les reçoivent correctement.

Les pratiques changent

On constate également que les messageries en mode web telles que Yahoo mail, Hotmail, Gmail,…) deviennent de plus en plus utilisées car très pratiques, ne demandent aucune installation, sont accessibles de partout. L’autre intérêt est la sauvegarde des emails et la sécurité.

Les messageries mobiles arrivent à grand pas sur le marché de l’emailing. Le système est un peu différent puisque les messages sont des emails réceptionnés dans vos boites aux lettres classiques qui sont poussés par les opérateurs vers les mobiles. cela veut donc dire que ce sont les mêmes messages qui arrivent dans vos PC via un logiciel ou un navigateur et sur vos mobiles.

Construction de vos emails

Comment vous pouvez connaitre la meilleure façon de construire un email? La meilleure façon est d’une part de comprendre comment les messageries affichent le contenu de l’email et comment les filtres anti-spam filtres le contenu de vos emails.

Le contenu HTML

Un email se construit comme vous pouvez créer une page HTML avec donc un logiciel de création de page web mais sa conception restera très basique avec des tableaux par exemple, pas de feuille de style externe, que des styles dans les balises à l’ancienne ou dans l’entête.

Mais ce type de messagerie étant elle-même affichée sur un navigateur, et le contenu des emails étant aussi construit comme une page HTML, cela oblige ces messageries web a supprimer certains contenus des emails comme certains entêtes et les feuilles de styles externes pour éviter de casser la mise en page des messageries.

Les filtres anti-spams

Pour les filtres anti-spam lorsque les opérateurs les mettent en place ils ont un paramétrage de base mais qui reste libre de toutes modifications et d’améliorations. C’est à dire que ces derniers peuvent affiner le filtrages à leurs guise ce qui rend la mise en place d’emails très difficiles. Puisque le filtre anti-spam intervient du côté du destinataire c’est à dire de la réception ce qui rend la maitrise impossible.

Je ferais article sur d’autres sujets autour de l’emailing pour compléter celui-ci

• 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)

Toutes ces contraintes rendent difficiles la création d’un seul site qui puissent gérer et s’adapter automatiquement à tous les périphériques disponibles mais le Responsive web design est né !

Responsible web design répond donc à l’adaptation du contenu et de ses images en fonction de la résolution et de la taille d ‘un écran. J’ai vu beaucoup de techniques de mise en page depuis plus de 15 ans, celle là m’a particulièrement interloquée. Cette technique est vraiment efficace, le plus fou est que l’on utilise des langages que les web développeurs connaissent bien : les feuilles de styles mais avec sa dernière version les CSS 3 (avec les media queries). Cela explique pourquoi on ne l’a pas vu apparaitre plus tôt.

Pour être plus concret aller sur ce site : http://www.macdonaldhotels.co.uk/ avec IE9 ou Chrome réduirez la taille de la fenêtre du navigateur pour prendre une taille équivalente à celle d’un smartphone.

Vous obtenez ceci

pour un écran d’ordinateur de bureau

Vous remarquez l’utilisation de diaporama en jquery, d’un design poussé et de l’utilisation de 4 colonnes incluses dans un diaporama

Pour l’utilisation d’une tablette

cela passe à 3 colonnes

Et enfin pour un Smartphone

on retrouve le diaporama du haut fonctionnant parfaitement avec des photos adaptées, les points pour naviguer dans le diaporama ont disparus, le moteur de recherche s’est adapté et réduit ainsi que le menu.

Le 2ème diaporama a disparut pour afficher toutes les images les unes en dessous des autres tout en conservant une efficacité ergonomique.

Alors qu’en pensez vous?

La conception

Je souhaite faire une remarque importante sur la conception d’un tel site qui demande une réflexion en amont plus poussée (avec des wireframe), pour le construire et que tout s’enchaine parfaitement en fonction des différents périphériques. Vous devez définir l’objectif pour vos différents site et savoir si cette technique est utile à mettre en place pour votre projet.

Les coûts

Si vous deviez réaliser 3 sites pour 3 supports différents avec cette technique vous n’en faite plus qu’un. Le temps de travail se ressent sur la conception fonctionnelle et sur la mise en page mais pas forcément sur le développement des fonctionnalités. Vous aboutissez finalement à la maintenance d’un seul site pour plusieurs périphériques et donc à une réduction des coûts.

Attention le devis final est certainement moins important que de concevoir 3 sites classiques (pc, différentes versions de navigateurs sur pc (ou mac), mobile, tablette,)  mais pas moins important que de faire 1 seul site.

Des compétences hyper spécialisées

Donc la difficulté est de trouver une société qui connaisse parfaitement les contraintes des différents supports mais également les spécificités de certains périphériques car un Iphone est différents d’un Android et d’un Windows Phone 7 pourtant tous des Smartphones.

Le fait de rechercher des compétences particulières pour cette conception va alourdir également le devis., enfin théoriquement.

Je vous invite à aller voir cette article qui détaille la conception de ce site : http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/

La compatibilité avec les navigateurs IE7, IE8 et IE6

Pour ce qui est de IE 6, il n’est de toute façon plus soutenu par les concepteurs. Pour les 2 autres il n’y pas de soucis car le site prendra la forme normale donc une utilisation plutôt en mode PC comme on le voit sur 90% des sites actuels. Mais comme j’en ai déjà parlé pour l’HTML5 il existe des bibliothèques pour simuler les avantages de la CSS 3 (j’en parlerais dans un prochain billet)

Plus d’informations

Je ne vous détaillerais pas l’aspect technique qui mérite d’autres billets mais je vous conseille de visiter les articles suivants qui vous éclaireront dans ce nouveau concept :

http://www.slideshare.net/livefront/responsive-design-7877412

http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/

http://blog.johanbleuzen.fr/responsive-design-pour-tous

Des informations sur le responsive Images

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

Pourquoi le QRCode surpasse tous les autres codes 2D?

1. Le QRcode est internationalement libre et tout le monde peut générer son propre QRCode. La plupart des téléphones mobiles lisent ce QRCode comme dernièrement la version Mango du WP7 qui intègre nativement un lecteur de QRCode. De nombreuses applications sur les Iphones, Androïd et Windows Phone 7 intègrent les scanneurs de ce QRCode.
2. De nombreuses informations sont mémorisables dans ce QRCode voir dernier article
3. Il peut être customisé et beaucoup de QRCode commencent à se fondre dans la mise en page.

Pourquoi ce carré est “magique”?

Pour la plupart des personnes ce carré n’est qu’artistique. Ce n’est qu’un assemblage de petits carrés blancs et noirs mais comment penser que cela peut contenir plus de 4000 caractères cachés?

Quand vous faites une démonstration avec votre téléphone en scannant ce QRCode et que cela redirige vers une vidéo cela a un coté “magique” (clin d’oeil à Hubert qui se reconnaitra ;°)) . Quand votre QRCode contient vos coordonnées et que cela rentre directement dans votre carnet d’adresse, Wouav! c’est génial! Oui on est tous un peu fainéant.

Son coté gadget

Vous pourrez trouver de nombreuses utilisations du QRCode qui ne sert à rien. Une grande tendance est l’utilisation qu’en font les artistes. Certains sont très jolis mais ils ne faut pas en oublier son utilisation principale qui est l’information qu’il contient. Car de nombreux QRCode artistiques ne fonctionnent pas. Je vous laisse consulter http://www.qrdresscode.com/ qui en montrent plusieurs.

Son coté utile

Le 1er point est son coté imprimable qui fait, bien entendu, le lien entre le monde réel et votre mobile

Ensuite vient sa capacité à stocker de l’information

Puis vient l’interprétation que font les scanneurs de téléphone de ce QRCode :

1. Reconnait les adresses web : redirection vers un site
2. Reconnait les SMS donc redirige vers la saisie d’un message
3. Reconnait le format téléphone donc redirige vers l’appel
4. Reconnait les Vcard et MeCard insertion des coordonnées directement dans le carnet d’adresse
5. Reconnait le format “youtube:“
6. Reconnait le format Wifi
7. Reconnait  le format de mail
8. Reconnait les Vcalendar (ne fonctionne pas très bien )

Le fait de reconnaitre les adresses web permet l’affichage de plan Google, de vidéos, …

Ne pas perdre du temps à ressaisir une adresse web ou une carte de visite cela a son utilité.

De nombreux exemples

Les japonais sont très en avancent sur l’utilisation de ce code 2D et de nombreux exemples d’applications existent.

Voici des articles très complets sur le sujet :

http://www.clubic.com/actualite-81170-live-japon-qr-code-publicites-subliminales.html (2007)

http://www.servicesmobiles.fr/services_mobiles/2010/12/utilisation-du-qr-code-chez-les-m%C3%A9nag%C3%A8res-japonaises-.html (2010)

http://www.qrdresscode.com/ (énormément d’exemples)

Ses défauts

• Le défaut des codes 2D est d’avoir un liserai blanc pour pouvoir le lire correctement mais tous les codes 2d ont ce défaut.
• Mémoriser une information figée c’est à dire que le carré magique contient la même information; Si c’est une Url et que vous l’avez diffusée partout il est préférable que cette adresse web soit toujours disponible. Bien sûr on peut y remédier facilement.
• La lecture des caractéristiques du Tag de Microsoft y montre une utilité qui me semble très importante que n’a pas le QRCode : pouvoir adapter le contenu en fonction du nombre de scans et de l’appareil qui le scanne (voir mon article sur les Microsoft tag)

Notre exploitation des QRCode

Avec un groupe de personnes nous avons réalisés un projet appelé Mobil Avenue et Mobizness (consultable sur vos téléphones) qui exploite les caractéristiques de ces QRCode. Nous proposons ainsi des autocollants à nos clients qui peuvent les placer sur leur vitrine et ainsi diffuser leurs horaires d’ouvertures et leurs coordonnées via ces 2 sites. Je vous parlerez plus en détail de ce projet dans un prochain article.

Conclusion

La tendance est l’exploitation des caractéristiques du QRCode par les marketeurs (certains sont très ingénieux) et il en ressort une grande utilité pour le monde de la consommation.

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

L’utilisation de WriteFile pour l’enregistrement d’un fichier sur le serveur ou le téléchargement d’un fichier via une page web pose apparemment des problèmes lorsque le fichier est trop volumineux et que la connexion du client n’a pas un débit important.

WriteFile mets les données du fichier transmit au client dans un buffer (en mémoire) géré par le processus w3wp.exe, utilisé pour le site web. Dans ce cas un seul processus gère le site web et une limite de mémoire avant recyclage a été configurée pour éviter les saturations de mémoire et ainsi recycler régulièrement le processus. Mais cette configuration couplée à WriteFile coupe la connexion lors du téléchargement car la mémoire dépasse  la quantité de mémoire maximale autorisée. Et il est impossible au navigateur client de se recnnecter au serveur sur le même thread qui était occupé à transmettre le fichier

Pour éviter cela 2 solutions :

1. augmenter la mémoire pour le processus w3wp.exe
2. utiliser TransmitFile qui envoi directement les données du fichier et ne mets rien en mémoire.

Si d’autres personnes ont des informations complémentaire à ce sujet ils seront les bienvenues.

Présentation

Ce livre s’adresse aux développeurs débutants en Asp.Net 4.0 et C# dans le but d’apprendre à utiliser les fonctionnalités et composants fournis avec Visual Studio 2010 tels que treeview, les formview, les listview et les Ajaxtoolkit,…

L’objectif est de développer complètement un service en ligne en s’appuyant sur un exemple concret : une gestion documentaire. La construction de cette GED pose les briques solides d’un service en détaillant sa conception, sa réalisation, son hébergement et toutes les évolutions imaginables pour finaliser ce service. J’ explique pourquoi j’ai choisi comme exemple une Gestion documentaire et les implications d‘un tel service dans une entreprise.  Les évolutions sont expliquées de façon précise dans le dernier chapitre tels que l’intégration du moteur de recherche Index Server, des idées sur le développement bibliothèque Jquery.

Les codes sources par palier sont en téléchargement sur le site www.editions-eni.fr.

Les chapitres du livre :
Introduction – Outils et environnement – Définition du projet – Mise en place de l’infrastructure – Gestion des rubriques – Gestion des droits et des accès – Gestion des documents – Connexion au service – Construction de la page de gestion documentaire – Construction de la partie éditeur – Pages statiques – Évolutions futures

Acheter ce livre aux Editions ENI : ASP.NET 4.0 et C# sous Visual Studio 2010

Accès en version numérique

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 )
• 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

Les nouveautés de Windows Phone 7.5 « Mango » en images

et le blog de Microsoft WP7

on voit ici la messagerie Outlook en mode conversation et la recherche des emails (va exchange)

Ci dessous Lync avec la présence avec une bande verte

la définition de groupe (fonction je pense très utile)

source : blog Microsoft

Mise à jour : Windows Phone 7 Mango : caméra frontale supportée et intégration de Skype

Commençons par la requête et le remplissage du WebGrid

var data = db.Query(selectQueryString, id);
var grid = new WebGrid(source: data, rowsPerPage: 50);

Voii le helper pour construire la grille :

1:     @grid.GetHtml(
2:      tableStyle: « webgrid »,
3:      headerStyle: « webgrid-header »,
4:      footerStyle: « webgrid-footer »,
5:      rowStyle: « webgrid-rows »,
6:      alternatingRowStyle: « webgrid-alternating-rows »,
7:      columns: grid.Columns(
8:    grid.Column(format: @<a href= »@Href(« ~/Private/Edit », item.ID) »
title= »Editer la fiche »>
9:                     <img src= »@Href(« ~/images/icons/user_edit.png ») »
alt= »Editer la fiche » />
10:                              </a>),
11:     grid.Column(«  », «  », @<text>@if (item.C_LOGO_VIG != «  »)
12:     {
13:          <a href= »@Href(« ~/Private/Edit », item.ID) »
14:          title= »@item.C_SOCIETE »>
15:          <img
src= »../d/@item.C_ABRE/@item.VIG.Replace(« zoom », « vig ») »
16:                  alt= »@item.C_SOCIETE » />
17:          </a>
18:     }</text>),
19:    grid.Column(« Société », « Société », format:  @<i>@item.SOCIETE</i>),
20:    grid.Column(« Nom », « Nom », format: @<i>@item.NOM</i>),
21:    grid.Column(« Prénom », « Prénom », format: @<i>@item.PRENOM</i>),
22:    grid.Column(« Code postal », « Code postal »,
format: @<i>@item.CODEPOSTAL</i>),
23:    grid.Column(« Ville », format: @<i>@item.VILLE</i>),
24:    grid.Column(« Revendeur », format: @<i>@item.SOCIETE</i>),
25:    grid.Column(« Rubrique », format: @<i>@item.RLIBELLE</i>),
26:    grid.Column(« Département », format: @<i>@item.DLIBELLE</i>),
27:    grid.Column(
format:
@<a href= »@Href(« ~/Private/Del », item.ID) »
title= »Supprimer »>
<img src= »@Href(« ~/images//user_delete.png ») »
alt= »Supprimer » />
</a>)
28:   )
29:  )

Le résultat de ce WebGrid

Cela parait un peu rebutant de prime à bord mais vous allez voir que tout s’explique :

on peut ajouter tout type de code html, des liens, des images mais aussi des variables en provenance de liste d’objets pour afficher des données dynamiques (c’est le but ), des conditions avec le if. La balise <text> s’avère en fait très utile et indispensable pour personnaliser au plus précis ce type de helper.

1:   @<text>

2:  @if (item.C_LOGO_VIG != «  »)

3:   {

4:    <a href= »@Href(« ~/Private/Edit », item.ID) »

5:      title= »@item.SOCIETE »>

6:      <img   src= »../d/@item.C_ABRE/

@item.VIG.Replace(« zoom », « vig ») »

7:      alt= »@item.SOCIETE » />

8:    </a>

9:   }

10:  </text>

Pour faire des liens sans se soucier du chemin on utilise @Href. Le tilde “~” permet de partir de la racine du site et de construire le chemin. item.Id ajoute l’identifiant pour agir sur la base de données. on obtient ceci http://monnomdedomaine.com/Private/Edit/10

La condition test l’existence d’une vignette, si c’est le cas on affiche les balises nécessaire

   1:  @item.VIG.Replace("zoom", "vig")

ceci permet de remplacer le texte “zoom” par “vig” dans le nom de l’image

Les styles sont définis de façon précises

 tableStyle: "webgrid"
 headerStyle: "webgrid-header"
 footerStyle: "webgrid-footer"
 rowStyle: "webgrid-rows"
 alternatingRowStyle: "webgrid-alternating-rows"

1:   grid.Column(« DatePublication », « Publication »,

format: @<i>

@item.DatePublication.ToString(« d »)

</i>,

style: « datepub »),

donc à la fin on trouve style : qui permet d’agir sur la colonne

A suivre pour d’autres explications sur Les Asp.Net Web Pages.

Voici quelques articles qui donnent suite à mon article sur Node.js avec des explications plus techniques :

Node.js partie 1 – Tout ce que vous devez savoir sur Node.js

Présentation très précise du Node.js

Les applications web gagnées par le temps-réel : un plan sur la Comet ?

Explication très claire sur les différents protocoles pour arriver à faire une communication asynchrone viable!

Streaming Twitter: NodeJS & Socket.IO

Le dernier lien est très intéressant car il donne des explications précises (code à l’appui) sur le couple Node.js et socket.io. Seul les prochaines versions des navigateurs  possèderont la fonction WebSocket en natif. pour le moment un trou de sécurité empêche cette implémentation.

Mais en attendant pour être sûr que  le code fonctionne dans chaque édition et version de navigateur on utilise Socket.io qui gomme et gère les différences entre les navigateurs (voir les navigateurs supportés) en utilisant différentes techniques.

Nous attaquons notre premier projet en razor comprenant un espace privatif et un espace administration pour le client. pour ce faire nous utilisons le nouveau système de gestion des membres qui est parfaitement optimisé : pas de session anonyme stockée qui engorge la base de données, pas d’utilisation de Guid mais bien de clef primaire en type int. Plus souple pour faire évoluer le système d’ d’accès et  rôles.

Ayant fait également beaucoup de Php, la prise en main de la syntaxe Razor est relativement rapide. Le helper WebGrid est facile à utiliser mais attention si on souhaite le pousser dans ses retranchements. Le helper pour envoyer le mail est également trivial à utiliser pour envoyer de simple email. A voir pour utilisation plus poussée.

voici l’exemple de code d’une page index.cshtml

1:  @{
2:      Layout = « ~/Views/_SiteLayout.cshtml »;
3:      Page.Title = « accueil »;
4:  }
5:
6:  <div id= »bloc-filet »>Bonjour
7:
8:  …
9:
10:  </div>

La syntaxe présente plusieurs types de sections pour afficher des morceaux de pages. Ainsi on peut déporter tout morceaux de code html redondant, dans le but de l’écrire qu’une seule fois.

1:<!DOCTYPE html

PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN »

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>

2:  <html

xmlns=http://www.w3.org/1999/xhtml

xml:lang= »fr » lang= »fr »>
3:  <head>
4:  <meta http-equiv= »Content-Type »

content= »text/html; charset=utf-8″ />
5:          <title>@Page.Title</title>
6:    @RenderPage(« /Partage/_headerbasecss.cshtml »)
7:   <link href= »@Href(« ~/favicon.ico ») »

rel= »shortcut icon » type= »image/x-icon » />
8:
9:  </head>
10:
11:  <body class= »mbody »>
12:  <div id= »global »>
13:  <div id= »entete »>
14:
15:  ….
16:  </div>
17:  <div id= »contenu »>
18:      @RenderBody()
19:  </div>
20:  <div id= »pied »>
21:      @RenderPage(« /Partage/_footer.cshtml »)
22:  </div>
23:  </div>
24: @RenderPage(« /Partage/_headerbasescripts.cshtml »)
25: @RenderSection(« ClientScriptsEditor »,

required: false)
26:  </body>
27:  </html>
28:

c’est la mission du tag RenderPage. Les pages sont ainsi harmonisées.

Le tag RenderSection permet de faire apparaitre du code que sur certaines pages tout en utilisant le même master. Ce sont des sorte de section conditionnelle.

et enfin le RenderBody affiche le contenu placé dans la page index.cshtml

La fonction Page.Title est définie dans la page index.cshtml mais utilisé pour le titre dans le Layer (master)

Tous les autres fichiers comportent des morceaux de code html qui peuvent être combiné à des conditions gérées par la syntaxe Razor.

Je ne vais pas vous en dire plus pour le moment, je continuerais à vous donner des exemples au fils du temps.

C’est un compromis entre le langage php et l’Asp.net. Code intégré dans la page. Plus d’AjaxToolkit et place au Jquery  et à la maitrise totale du code source ce qui entrevoit une préparation à la venue de l’html 5

La puissance vient aussi avec la possibilité d’utiliser pleinement le les classes du framework 4.0 et l’Entity framework pour accélérer la création de la couche données

Il est bien de préciser que la construction de cette gestion documentaire est utilisée pour illustrer la conception d’un service en ligne dans un cadre pédagogique. Il est entendu qu’une gestion documentaire peut être très complète dans sa gestion des flux, des versions et des cycles de vies des documents et qu’il est difficile de tout intégrer dans un ouvrage. ces éléments sont donc évoqués et ainsi que toutes les évolutions possibles pour compléter le service et en faire un vrai service en ligne.

Sortie prévue en septembre 2011.

Mise à jour le  08/09/2011 voilà l’ouvrage est sortie aux éditions ENI

Le W3C est l’organisme qui gèrent la normalisation et l’évolution des standards du web dont  l’html. Celui-ci a dû abandonner le développement de la norme Xhtml2 pour laisser placer à l’html5 plus facile à comprendre. Ce dernier conserve tout de même certains travaux effectué sur l’xhtml 2.

Le but est son uniformisation dans tous les navigateurs. Malheureusement tous les navigateurs ne l’intègrent pas encore donc il est difficile de développer en html 5. Les sites doivent s’afficher dans tous les navigateurs même la version IE 6 qui est encore utilisée par de nombreuses entreprises (des grands groupes qui ne peuvent pas migrer leurs applications web sous peine de ne plus pouvoir les utiliser tel que les intranet des services bancaires)

L’html5 permettra une certaine simplification du développement de site et une construction plus claire et mieux adaptée aux sites actuels. Je pense que cela va permettre de créer de “vrai” application web plus stables.

N’oublions pas que l’html 5 sera toujours couplé avec les feuilles de styles en version css 3 (cela fait des années que l’on attends que cette version soit finie) et du javascript bien sûr

L’html 5 va radicalement changer la conception des sites web par l’intégration de nouvelles balises et de nouveaux attributs beaucoup mieux adaptés à la conception de site et aux applications web. L’html 5 c’est aussi une modification de l’architecture actuelle. Voici quelques exemples :

- La déclaration pour utiliser le html 5 est <!doctype html>

- Les tags sont classés dans des rubriques telles que

• Metadata content : contient les liens vers css, script,.. mais également des valeurs sémantiques
• Flow content : éléments utilisés dans le corps du document
• Sectioning content : définit la portée des entêtes et pieds de page
• Heading content : défini l’entête d’une section
• Phrasing content : défini le texte du document, on y retrouve toutes les mises ne forme de texte mais également les Embedded content et Interactive content
• Embedded content : importe des sources externes telle que des img, media elements (vidéo, audio), iframe, le fameux tag canvas , map…
• Interactive content : est dédié aux interaction avec les utilisateurs telle que la balise a, button, video, textarea, select, …

Certaines balises sont dans plusieurs catégories

Je ne vais pas m’étendre plus sur le sujet pour le moment car il y a beaucoup à dire sur l’html 5. Enfin ce groupe de travail a pensé aux véritables fonctionnalités utilisées par les sites web. Plus besoin de bricoler des scripts pour certaines utilisations classiques, enfin des sections pour les contenus réellement identifiées, de véritables balises pour la vidéo et l’audio, un canevas pour les applications vectorielles telles que l’utilise le flash et Silverlight (d’ailleurs Silverlight a aussi une balise canvas)….

Le jquerymobile utilise déjà l’html5 qui pourtant n’est pas reconnu par tous les navigateurs. Là est la puissance du jquery ! Je vous parlerez d’ailleurs de certaines librairies qui peuvent faire pencher la balance vers l’html5.

Du nouveau sur le web, je vois de nombreux sites parler de node.js mais qu’est-ce que c’est un script JavaScript ? Oui en quelque sorte mais coté serveur. Qui l’eut cru du JavaScript coté serveur mais quel intérêt ?

Pour faire simple node.js utilise l’asynchronisme très en vogue chez d’autres éditeurs comme Microsoft. Les requêtes asynchrones en web sont souvent utilisées pour éviter d’attendre qu’une requête trop longue se finisse. On peut continuer à naviguer sans attendre que la requête se termine. C’est ensuite un autre thread qui reprend le relais.

L’intérêt premier à mon sens est le nombre de connexions au serveur et l’économie de ses ressources.

Une utilisation concrète sera de s’en servir pour des applications de chat car en mode non asynchrone on est obligé des créer des boucles qui génère une multitude de requêtes vers le serveur et l’engorge très rapidement. Ces boucles servent à détecter si un utilisateur vous envoie un message, c’est très consommateur de ressources et de bande passante. La solution : l’asynchronisme avec node.js (ou une autre technologie)

En fait ce type de technologie est parfait pour faire des applications dynamiques temps réels tel que de la notifications temps réel comme Twitter (dans Twitter les tweets arrive automatiquement sur votre page), de la messagerie instantanée tel que du chat

On appelle également cette technologie le Reverse Ajax, l’Ajax push ou Comet.

A ma connaissance il est difficile de l’installer sur Windows mais c’est faisable avec un émulateur tel que Cygwin. Le top serait d’avoir une version adaptée pour les OS Windows.

Je pense que comme l’a été la fonction XmlHttprequest (ajax) une révolution est en marche.

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.

On peut créer plusieurs pages dans un seul fichier avec des transitions à la Iphone vraiment on croirait une application mobile.

Des boutons intégralement désignés donc pas forcément besoin d’intervention d’un graphiste. Cela implique une multitude de design identiques mais pour de petits projets cela peut être très intéressant. Il sera à mon avis nécessaire de personnaliser les applications mêmes légèrement.

L’avantage est un travail important des concepteurs qui font évoluer cette librairie pour que les pages s’affichent de façon optimale sur tous les navigateurs. IE7 sur WP7 n’est pour le moment pas pris en compte.

http://jquerymobile.com/

Je vous en reparlerais au fil du temps.

WP7 : http://www.microsoft.com/windowsphone/fr-fr/default.aspx

SDK : http://www.microsoft.com/download/en/windowsphone.aspx?q=windows+phone&WT.mc_id=MSCOM_EN_US_DLC_ICONNAV_121LSUS007800