Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

[HTML5] Slides et démos : Autour du W3C , Nouveaux Standards et Web Mobile (Lille)

Euratechnologie HTML5 Wygwam Inria W3C

 

Très bonne après-midi passée lors cette conférence avec le W3C, organisée par L’ Inria sur les nouveaux standards, ce Mardi 14 Février, on sent vraiment que çà bosse au W3C, et l’avenir est très très prometteur pour le HTML5, notamment plus spécifiquement pour les devices mobiles !

 

 

 

Petit compte rendu de cette après-midi disponible ici.

 

Les slides de la session :

Euratechnologie HTML5 Wygwam Inria W3C

Les démos : ici

 

Slides et démos de la partie Web mobiles par Dominique Hazael Massieux (W3C) : ici

[Techdays 2012] Développement Web Mobile avec ASP.NET : Slides & demos

Techdays 2012 HTML5 développement web mobile

 

Comme promis, les Slides et démos de la session du 7 Février au Techdays 2012, sur le développement Web Mobile et ASP.NET.

Durant cette session, nous avons pu aborder quelques bonnes pratiques sur la détection de devices (browser detection), l’adaptation du rendu selon la device (adaptative rendering), comment Microsoft nous accompagne sur le développement Mobile avec ASP.NET, les librairies client-sides, un peu de HTML5 etc.

 

 

 

Faute de temps, je n’ai pas pu montrer les joies de la productivité d’un développement Mobile avec JQuery Mobile. Vous pourrez trouver de nombreux exemples dans la dernière démo.

Merci à tous d’avoir été nombreux à nous suivre, Aurélien Verla et moi dans ce bel amphi bleu.

 

Les slides :

 

Les demos : [Bientot]

[HTML5] Autour du W3C : Nouveaux Standards et Web Mobile (Lille)

Je m’y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu’on aime HTML5 chez Wygwam,  nous seront présent, le vieux ( Aurélien V.) et moi, pour présenter un état de la technologie, et surtout pourquoi, comment,  aborder HTML5, sur de nouveaux projets… ou pas.

Les sessions se dérouleront à l’amphithéâtre de Euratechnologie, à Lille (59).

 

Pour informations le programme (ici) : 

 

 

Le centre de recherche Inria Lille – Nord Europe et EuraTechnologies vous invitent à uneConférence/débat : « Autour du W3C : nouveaux standards et Web Mobile »

Le W3C, World Wide Web Consortium, est un organisme international qui développe des standards pour le Web afin que les gens puissent communiquer efficacement à travers Internet.
Le Web étant un univers d’informations accessible en réseau, le W3C oeuvre pour le mettre à la portée de tous, quelque soit leur matériel, logiciel, réseau, langue ou handicap.

 

 

Inria s’est engagé dès l’origine aux côtés du W3C, dont il a  été l’un des trois co-fondateurs avec le MIT et la Keio Université au Japon. Afin de renforcer ses relations avec l’industrie et les acteurs de l’écosystème français, le W3C a ouvert en 2011 un Bureau France, porté par Inria.

 


Les présentations feront donc le point sur les nouvelles évolutions des standards du W3C, comme le HTML5 par exemple, et couvriront ce qui touche à l’interopérabilité, l’accessibilité, la portabilité…
Le programme (13h45 – 17h00)

 

Présentation du W3C par Bernard Odier (Inria et W3C)

Bernard Odier est Office Manager du Bureau-France du W3C. Il est également responsable sectoriel télécoms, réseaux et multimédia au sein d’Inria.
Il abordera entre autres les missions, les principaux membres, les principaux workshops, community groups, et autres assemblées, adhérer au W3C, quels avantages?, les activités networking prévues en France pour 2012

Les évolutions des standards du W3C : quelles innovations ? par Aurelien Verla et Giovanni Clement (WYGWAM)

Aurélien Verla, après un poste de Online Strategies and Tactics Manager, a pris la fonction de CTO chez Wygwam où il assure la responsabilité de la recherche et du développement technologie de la société.
Giovanni Clement est consultant expert (également chez Wygwam) en .NET  et Développement de projets .NET, ASP.NET ,MVC, HTML5 ..
“L’intervention abordera les innovations liées aux nouvelles évolutions des standards du W3C (HTML5, CSS) et Javascript.”

“Le Web, plate-forme de convergence des appareils mobiles connectés” avec Dominique Hazael Massieux (W3C)

Dominique Hazaël-Massieux est le responsable de l’activité Web mobile du W3C. Il est en charge des groupes de travail “Device APIs” et “Web Real-Time Communication” (accès depuis les navigateurs Web à de nouvelles fonctionnalités: appareil photo & caméra, batteries, carnet d’adresses, vidéo chat, etc.). Dominique s’occupe également de la partie standardisation du projet européen MobiWebApp. http://mobiwebapp.eu/

Les appareils mobiles, connectés en permanence, ont fait déferler les usages du Web dans de nouveaux contextes ergonomiques, géographiques et sociaux, que les concepteurs de sites Web doivent prendre en  considération pour satisfaire aux besoins de leurs utilisateurs. Le Web est appelé à jouer le rôle unique de plate-forme de convergence pour tous les nouveaux appareils connectés qui arrivent sur le marché : tablettes, téléviseurs, automobiles, etc. Lors de cette session, nous aborderons les techniques et les technologies qui permettent de donner aux usagers mobiles une  expérience utilisateur de première classe.

Conclusion par Bernard Odier
Bernard Odier conclura sur l’impact de la Recherche et des Standards sur l’Industrie du Multimédia : les sujets chauds du moment

Cette conférence sera animée par Nicolas Roussel, Directeur de recherche Inria, membre de l’équipe Mint (commune avec le CNRS et l’Université Lille1)

 

Pour vous inscrire

[HTML5] Utiliser l’API de Géolocalisation : Part I

Voici une série d’articles techniques sur l’API de géolocalisation HTML5. Nous aborderons à travers plusieurs parties, chaque points importants de cette API , actuellement de plus en plus utlisée, quelques explication techniques du quid, de la pratique basique, en passant par la complexité de gestions des anciens navigateurs, des exemples cas de productions types  (marketing, e-commerce etc…).   

  1. Introduction à l’API

  2. Comparaison entre navigateurs

  3. Dans la pratique
  4. Support des navigateurs non HTML5 Compliant (Progressive enhancement)
  5. Exemples d’utilisations concrets, intégration à l’aide des API existantes. 

 

Part I : Présentation de l’API Géolocalisation HTML5

 

image

Geolocalisation, géolocaliser ?

Tout d’abord, la géolocalisation, c’est quoi ? Globalement c’est le fait de pouvoir être localiser, selon un référentiel, ici notre planète, n’importe où nous sommes, lors de nos déplacements etc. Exemple typique : un GPS. Selon la position courante, le GPS nous situe sur une carte, puis nous dirige vers une direction, selon une destination.

Actuellement la géolocalisation est pratiquement omniprésente, principalement grâce à notre téléphone, GPS,  ou connexion internet…

 

 

HTML5 et la géolocalisationimage

Grâce à HTML5, L’api de géolocalisation de HTML5, nous fournit, plusieurs méthodes ( pour rappel : nous sommes coté client, en JavaScript ), permettant de localiser, précisément et simplement , l’utilisateur courant, bien sûr sous son consentement. Le degré de précisions des coordonnées varient selon plusieurs facteurs que nous verrons au long de ce post. Concernant votre propriété privé, lors d’une requête de position, l’utilisateur est automatiquement averti de cette requête,  et choisi d’accepter ou non de partager sa position.

Exemple sur Internet Explorer 9 :

image

 

 

 

Ainsi, nous pouvons récupérer, simplement , la latitude et longitude de l’utilisateur, de manière à l’exploiter sous différentes formes : GeoTagging, localisation de visites, réalité augmentée etc.,  présentation à l’aide d’API cartographiques comme Bings Maps. Le point important de cette API est qu’elle est totalement transparente de la device qui l’utilise, que vous naviguiez sur devices mobiles ou Desktop.

Note : L’api de géolocalisation n’est actuellement pas intégrée dans les spécifications officielles de HTML5. Celle-ci a uniquement été développée par le W3C, non par le WHATWG. Vous pourrez trouver les spécifications par le W3C ici.

 

Comment sommes nous géolocalisés ?

La façon dont nous sommes géoloclisés dépend fortement de la source matérielle avec laquelle nous naviguons. Plusieurs sources sont utilisés pour obtenir les coordonnées de l’utilisateur, chaque source à sa propre spécificité, et implique également son propre niveau d’ exactitude :

  • IP Geolocation, (Exemple)
  • Wi-Fi et Bluetooth avec adresses MAC
  • Puces GSM/CDMA
  • Global Positioning System (GPS), Assisted Global Positioning System (A-GPS)

imagesPour un téléphone, une trilatération est utilisée, basée sur les angles d’un point mobile : vous, vers plusieurs tours émettrices proches (cf schéma ci-contre : A notre position, Px les émetteurs).

Pour un PC de bureau, nous parlons de triangulation par Wifi, ou par géolocalisation par IP, sachant que ce dernier détient une précision se tenant au niveau des villes (basée sur les positions des répartiteurs Telecom, qui peuvent couvrir plusieurs villes).

  • La plupart des devices mobiles équipées de puces GPS, disposent de 2 niveaux de géolocalisation : 
    • -          Premier niveau  très rapide utilisant la trilatération ( sur Windows Phone 7, la pile de localisation) , sans puce GPS, idéal pour une simple prise de position, sans besoin de très hautxe précision.
  • -          Deuxième niveau  plus lourd, basé sur le système GPS de la device (si présent),  permettant de géolocaliser avec une grande précision ( quelques mètres ), idéal pour générer par exemple un tracking de position.

L’inconvénient de l’utilisation de la géolocalisation par GPS , est la consommation de batterie, et le temps d’initialisation. Cette deuxième méthode doit, dans un premier temps, initialisée le système GPS, pour ensuite le requêter. Sur les devices mobiles , l’utilisation du système GPS est  très consommatrice en énergie, surtout en Tracking mode ou celui-ci est interrogé à intervalles réguliers. Cependant, ce procédé permet une exactitude exclusive des informations.

image

La notion de précision est très importante dans l’utilisation de l’ API de Géolocalisation HTML5, puisqu’il vous sera possible de contrôler le degré d’exactitude de la requête de localisation selon un bas / haut niveau de précision.

Des API de cartographie interactives comme Bings Maps, ou Google maps sur devices mobiles, utilisent ses 2 procédés :

  1. Première localisation par IP / Wifi à faible précision ( cercle de grande circonférence ) .
  2. Seconde localisation ( si système GPS autorisé ) , affinement de la localisation ( cercle de petite circonférence).    

La circonférence du cercle indique le degré d’ erreur potentiel de l’estimation de votre position. Celle-ci variant en fonction des procédés utilisés techniquement pour effectuer la géolocalisation.

Notes : Le référentiel géographique de coordonnées utilisé par cette API est celui généralement utilisé pour tous systèmes de géolocalisation (WGS84 World Geodetic System). Ce qui implique que les coordonnées renvoyées par l’API peuvent être communément exploitées.

Notes bis : Si la géolocalisation vous intéresse, je vous invite à lire le blog de mon collègue Nicolas Boonaert, MVP Bing maps.

 

 

Les navigateurs et la géolocalisation HTML5

image

 

Actuellement, la quasi-totalité des versions up-to-date des browsers actuels implémentent l’API de géolocalisation HTML5.  Pour les anciennes versions de browsers, des polyfills peuvent être utiliser afin de reproduire au mieux l’expérience utilisateur de l’api. Nous verrons cela partie 3 de ce post.

 

  • Du coté Desktop :
Navigateur Version Support

Internet Explorer

9.0+
   image

Chrome

4.0 (Gears API)
   image

Chrome

5.0+
   image

Firefox

3.5+
   image

Safari

5.0+
   image

Opera

10.60+
   image
 
  • Du coté mobile :
Navigateur Version Support
image
Windows Phone 7

Mango
image
image
Android

2.0+
image
image
Opera Mobile

10.1+
image
image
Symbiam Mobile

S60 3+
image

Blackberry

6.0
image
image
Maemo

5.0
image

 

On remarque que le support de cette API est assez étendu sur les navigateurs actuels. Firefox fut le premier a intégré la gestion de la géolocalisation dans sa version 3.5. Pour pouvoir vous localiser, chaque navigateur rassemblent les informations sur les points d'accès sans fil alentour et l'adresse IP de votre ordinateur, puis les envoient à un provider de Géolocalisation. Par exemple pour Google et Firefox, vos données sont envoyées au Google Location Services, afin d’estimer votre localisation.

Idem pour les navigateurs mobiles dernière génération, pratiquement toutes les devices mobiles actuels sont équipés ,soit de puce GPS ou de connexion internet. Cependant, gardez toujours à l’esprit que le parc de mobiles est loin d’être complètement “Next Gen”, et qu’il est indispensable, si vous voulez garder la même expérience utilisateur (Oui oui c’est possible) CF prochainement un prochain post sur le progressive enhancement / gracefully degradation sur les terminaux non compatibles.

 

A suivre …  Partie 2 : Comparaison entre navigateurs, précisions, temps de réponses, procédés utilisés selon les cas…

Posté le par Gio | 0 commentaire(s)
Classé sous : ,

[ASP.NET MVC] MVC4 Developper Preview, premiers changements.

MVC4

 

Importantes évolutions que nous délivre l'équipe ASP.NET lors de la Build Conference , plusieurs Developper Preview pour ASP.NET :

Mais aussi pour Visual Studio 2011, et le Framework .NET 4.5.

Modernisation des templates, nouvelles intégration de librairies client-side, nouvelles fonctionnalités … C’est ce qui vous attend avec cette nouvelle évolution de ASP.NET MVC 4.

Les évolutions concernant ASP.NET 4.5 Core et Runtime seront abordées dans un prochain post.

Voyons donc plus en détails les premiers changements pour MVC4 et Webpages 2.0.

 

Téléchargement de MVC4 :

Vous trouverez cette Developper Preview ici.

 

Premier pas : Ajout d'un type d'application Web

Après installation, commençons par nous créer une nouvelle application Web. On remarque l'arrivée du type d'application Web MVC4.

MVC4 Web App

Un fois sélectionné, nous arrivons sur le choix du Template d'application web.

 

Nouveaux templates de projets MVC :

On remarque également ici, l'arrivée d'un nouveau Template d'application web pour Mobile. Celui-ci intègre directement un Template de projet utilisant JQuery.Mobile par défaut, avec un thème de base. Nous y reviendrons plus loin dans l'article.

  • Nouveau Template de projet pour Mobile
  • Evolution des Templates existants

Créons dans un premier temps, une internet application. Celle-ci sera obligatoirement HTML5 compliant ( Principalement : les nouveaux markups seront présents dans votre layout, ainsi qu’une intégration a base de CSS3).

Pas de changement des moteurs de vues, toujours le moteur ASPX et RAZOR.

MVC4 Mobile application

 

Evolution du skin de base des applications Web ASP.NET :

Surprise ! Le Template par défaut des applications Web à évolué !

New ASP.NET Skin

On remarque rapidement, l'arrivée de JQueryUI dans ce template, notamment pour le formulaire de Login, mais aussi d'enregistrement :

JQueryUI est une librairie JS, à base de JQuery, fournissant des composants d'interfaces interactifs (Datepicker, Dialog, etc..). Celle-ci était déjà présente lors des derniers ToolsUpdates MVC3, mais non utilisé dans les Template de bases.

Register :

New ASP.NET Skin JQuery UI

Login :

 JQuery UI

 

Template de base compatible Mobile

Par défaut, votre site généré adapte le rendu de sa disposition en fonction de la taille du navigateur. Ici nous ne parlons pas du Template de projet Mobile.

Petit coup d'œil à la feuille CSS , Les Templates de base ( Internet application et Intranet application) contiennent un style compatible Mobile :

Une Media Query CSS3 adaptant le rendu de la page (Adaptative Rendering ) par rapport à la résolution de navigation , ici le déclencheur si la Width inférieure ou supérieure à 850px :

CSS3 Media query

Ce qui donne si on modifie la taille du navigateur :

MVC4 CSS3clip_image008

 

Nouveau Template de projet Mobile

Un nouveau Template de projet fait place parmi les Templates de projets MVC : Mobile Application.

Celui-ci permet de créer une web application, spécifique pour mobile et tablettes, à base de JQuery Mobile, une librairie Javascript à base de JQuery, et JQuery UI.

JQuery Mobile est plus un Web Framework, facilitant le développement d’application web sur plateformes mobiles, en fournissant de nombreux outils, et unifiant une interface utilisateur à travers toutes les plateformes. Cette libraire gère également le Progressive Enhancement, qui consiste à garder la même expérience utilisateur, selon les différentes versions du browser.

Cette librairie est notamment utilisée sur les principales plateformes mobiles actuelles :

JQuery Mobile users

 

Créons maintenant une web application pour mobile :

Mobile application MVC4 ASP.NET

 

Une fois crée, nous obtenons une interface épurée, totalement compatible Mobile, avec fonctionnalité facile d’accès “Touch”, validation universelle, intégration dynamique :

JQuery Mobile Skin ASP.NET MVC4JQuery Mobile Skin ASP.NET MVC4JQuery Mobile Skin ASP.NET MVC4

N.B : Pour tester votre nouveau site Mobile, vous pouvez utilisez le Windows Phone Emulator (Requière le Windows phone SDK).
N.B : Tutoriel sur la création d’une application Mobile en MVC4 : ici.

Le site généré est sur la même base que les autres Templates de projets (Controllers, librairies disponibles, Attributs) , uniquement le skin diffère.

Regardons le layout :

Javascript ASP.NET MVC4 Mobile

Viewport : Présence par défaut du Viewport, qui va nous permettre, de fixer idéalement notre taille d’intégration par rapport à la taille de la device. Sans ce meta tag, la taille de la device, ne serait pas adaptée à l’intégration, provoquant l’utilisateur à zoomer, pour avoir une taille ajustée.

 

Gestion des browser : Desktop / Mobile

Cette version de MVC 4, en plus de proposer un nouveau Template pour Mobile, nous permet également de pouvoir aisément sélectionner quelles vues doivent être utilisées pour quels browser, grâce au Display Modes.

Les Displays Modes permettent de préfixer les vues ou partial vues, par rapport au type de devices / browser consommant la page web : ViewName.Mobile.cshtml ou mobile est soit le nom du display Mode, soit Mobile pour cibler toutes devices “IsMobile”. 

Par exemple : nous avons une vue Index.cshtml, qui est utilisée par défaut. Nous voulons en avoir une version universelle pour mobile, il nous suffit alors de créer une vue : Index.Mobile.cshtml.

Cependant, nous remarquons que cette vue universelle, n’est pas si universelle que cela, sur un Mobile IE6, l’expérience utilisateur est différente. Nous allons donc créer une vue spécifique pour Mobile IE6 , mais nous voulons rester transparent par rapport au mécanisme de switch.

Il va falloir créer un Display Mode :

MVC4 Display modes

 

Ce display mode, à pour nom “MSIEMobile6”, détectant si le browser, est une device mobile, et si le browser est de type MSIE Mobile 6.

Lorsque une device se connectera à l’aide d’un IE6 Mobile, alors le display mode sera “MSIEMobile6”. De cette façon, nous pouvons créer une autre vue Index.MSIEMobile6.cshtml. Celle-ci ne sera utilisée uniquement lorsque le display mode sera MSIEMobile6.

 

Le display mode étant créé, il faut qu’au démarrage de l’application, celui-ci soit enregistré. Plaçons donc cette méthode dans le Global.asax, qui elle-même sera appellée dans le ApplicationStart.

MVC4 Display modes

 

System.Web.MVC 4.0.0

Du coté des entrailles , on remarque la nouvelle Web.MVC 4.0 présente :

GAC MVC4

 

Nouvelles librairies client-side

Nouvelles librairies présentes dans le layout du template de base :

JQuery Mobile JS 

JQuery 1.6, et JQuery UI étant arrivés avec la dernière ToolsUpdate de MVC3 ; On remarque une version de développement de Modernizr, (une librairie de Features Detecting HTML5).

Pour rappel, JQuery est une librairie Framework Javascript, proposant de nombreux outils de développement ( Helpers, Selecteurs etc..).

AjaxLogin.js, qui, comment son nom l’indique, va permettre de se loguer en Ajax ( par défaut, le formulaire de login utilisant JQueryUI, le login requiert un appel Ajax).

 

Concernant le package de libraires fourni,

Javascript lib ASP.NET MVC4

Arrivé de KnockoutJS, en beta : une librairie JS de Templating vraiment pas mal, comme l’on peut voir avec JQuery Template, se rapprochant d’un MVVM, ou encore en facilitant grandement le binding dynamique client-side.

 

Scripts manager

Nouvelle fonctionnalité de Webpages 2, le ressource Manager.

WebPages ASP.NET MVC4Script Register ASP.NET MVC4

Celui-ci va permettre d’ajouter des références Javascript, à partir du server-side ( par exemple : dans un helper, ou une méthode de control etc.). De ce fait, si vous développez un helper, nécessitant une référence de librairie, vous n’aurez plus besoin de spécifier à chaque utilisation cette référence, votre méthode de Helper génèrera cette dépendance.

A l’image d’un Script Register, Scripts.Add contrôle si le script est déjà référencé, si non, la référence sera ajoutée, à l’endroit ou vous lui aurez spécifié dans la View, à l’aide de Scripts.GetScriptTags, par exemple à la fin du Layout.

WebPages ASP.NET MVC4

 

Nouveaux attributs

[AllowAnonymous]

ASP.NET MVC4 Attributes

Permet de bypasser une obligation d’autorisation globale dans un controller. Par exemple, vous avez opter pour une authentification nécéssaire pour toutes méthodes de votre controller à l’aide de [Authorize], [AllowAnonymous] vous permettra de ne pas obliger l’authentification sur une méthode de control.

 

[AsyncTimeout],[NoAsyncTimeout]

ASP.NET MVC4 Attributes

Permet sur une méthode de control asynchrone, de déterminer un Timeout avant levée d’exception.

 

Configuration

ASP.NET MVC4 Configuration

On remarque 2 nouvelles clefs par défaut :

webpages:Version

Permet de choisir le moteur de Webpages utilisé.  Il est possible de faire cohabiter les 2 moteurs, vos sites en Webpages 1.0 resteront en 1.0, idem pour les 2.0. Si vous voulez faire tourner un site WebPages 1.0 vers WebPages 2.0, utiliser cette clef : webpages:Version , value : 2.0.0.0.

PreserveLoginUrl

Sert à empêcher la surcharge du loginRedirect des FormsAuthentification, notamment pour les développements WebMatrix, référençant WebData.Dll.

 

Controllers Asynchrones

A l’aide du Framework .NET 4.5, ASP.NET 4.5, et ASync CTP (Librairie de gestion de méthodes asynchrones) , nous remarquons l’arrivée des méthodes de contrôles asynchrones.

Ces méthodes de contrôles asynchrones vont nous permettre de binder simultanément par exemples plusieurs parties de model, ou établir plusieurs traitements simultanément.

 

Nous retrouvons dans System.Web.Mvc 4.0 , un nouveau namespace System.Web.Mvc.Async :

Async ASP.NET MVC4

Exemple,

Async ASP.NET MVC4

Ici je déclare mon action méthode en tant que méthode asynchrone. Celle-ci doit obligatoirement retourner une Task, qui retourne elle-même un ActionResult, soit une Task<ActionResult> (Pour rappel, ActionResult est le type qui encapsule tous les types possibles de retours d’une action MVC). Ceci permettra au moteur IIS de pouvoir gérer le retour asynchrone de l’action.

Le model est bindé à l’aide de 2 méthodes, exécutées simultanément. Nous avons vu plus haut les attributs Timeout, qui permette de fixé le temps de latence limite avant laquelle une exception est levée. HandleError permet ici de catcher l’exception et d’adopter une redirection lors de la levée de celle-ci.

N.B : Il faut obligatoirement avoir ASync CTP / C#5 installé, afin de pouvoir utiliser ce type de méthode de contrôle.

 

Premier constat

Pas mal de nouveautés client-side principalement, on sent de plus en plus Microsoft s’investir sur les terminaux portables et tablettes, qui sont ( Cf Build & Windows 8 sur tablette), les principales orientations des prochains mois (année ?). On remarque également l’implantation plus profonde et précise du Framework Async dans ASP.NET 4.5, annoncée rapidement au Mix 2011 dans une conférence WebForms ( mais est-il mort finalement ? et bien non au contraire).

Un apparition de KnockoutJS, vraiment pas mal, mais un peu déroutant face à JQuery Template, qui était annoncé prochainement comme partie intégrante des librairies client-side ASP.NET.

Cette developper preview confirme la tendance vers un développement web asynchrone sur plateformes mobiles, on attend la suite Sourire .

[HTML5] Mise à jour du support de HTML5 dans Visual Studio 2010

Petit surprise venu directement de la Visual Web Developer Team, Jeudi dernier,  une nouvelle mise à jour du support de HTML5 dans Visual Studio 2010 SP1, ou plutôt la première mise à jour des standards Web W3C pour VS 2010.

Nous avions pu voir un premier effort lors de la sortie du SP1 pour VS 2010 il y a quelques mois, comprenant une mise à jour de l'IntelliSense, avec quelques nouveaux markups, nouveaux events et, première prise en charge de CSS3. Puis l’arrivée avec les Tools updates ASP.NET MVC3 lors du MIX 2011, importante évolution basée principalement sur l’apparition des markups de zones (header, footer, article section etc.) dans les templates de projets MVC3, ainsi que l’ajout d’une librairie de “Features detecting” : Modernizr

 

HTML5 Visual studio 2010 supportLa Visual Web Developper Team, coordonnée par Mads Kristensen, nous propose ici une mise à jour de l’IntelliSense et de la validation de VS, selon les nouvelles spécifications des standards Web du W3C, ainsi que quelques corrections de bugs liés au premier support de HTML5 pour le SP1. 

Celle-ci apporte un support plus complet de l’HTML5, de CSS3, ainsi que du JavaScript.

Cette initiative est très intéressante, puisqu’elle nous amène à penser, vu le caractère encore très évolutif de HTML5, qu’à période régulière nous aurons de nouvelles mises à jour lors de nouvelles spécifications / updates du W3C. Effectivement, c’est ce qu’a annoncé Mads Kristensen, tous les trimestres environ.

Petite note également importante : “This release has been made possible by the hard work of some of our team members in their spare time and isn’t an official Microsoft release.” Donc soyez indulgents, il subsiste certainement quelques bugs, n’hésitez donc pas à les remonter, et grand Merci à la VWDTeam.

                              Pour le télécharger, vous le trouverez ici : Web standards update.

Listing du contenu de ce Web Standard Update  ( Source ):

Fonctionnalités HTML 5 :

Browser APIs
CSS3

 

HTML 5 & Visual Studio

A l’arrivée du support de HTML5 dans notre éditeur favori, on a pu remarquer l’arrivée de nouveaux schémas dans le répertoire système de Visual Studio. (Pour rappel, un schéma est un fichier.xsd, composé de règles, suivant un standard ( ici (X)HTML5 ), et exploité par Visual Studio à travers l'IntelliSense, mais aussi par les processus de validations de pages par exemple).  Vous pouvez trouver ces fichiers dans votre répertoire de Visual Studio , Common7/Packages/Schemas/Html.

Petite screenshot à l’époque de la sortie du SP1 Beta :

Visual studio 2010 schema HTML5

On remarque bien, qu’à l’installation du “Web standards update”, les schémas HTML5 sont mise à jours.

Visual studio 2010 schema HTML5

Par exemple l’ajout du support de l’attribut “Source” pour un media element :

Visual studio 2010 schema HTML5

Dans Visual Studio, vous pouvez choisir quelle version de HTML vous voulez supporter, à plusieurs endroits :

  • Tout d’abord,  aller dans Tools –> Options , puis dans Text Editor -> HTML -> Validation :

Visual studio 2010 HTML5

  • Ou directement à l’aide de la barre d’outils HTML Source Editing. Si celle-ci n’est pas présente, vous pouvez l’afficher :

Visual studio 2010 HTML5 Toolbar

Ce qui donne :

Visual Studio 2010 HTML5 Toolbar

Note : Depuis les “ToolsUpdates” de MVC3,  vous pouvez directement créer une application Web MVC3 avec support de HTML5,  dès l’interface de création :

Visual Studio 2010 HTML5 MVC3

Attention, votre web application MVC3 utilisera alors les templates de projets HTML5. Ce qui implique entre autre l’utilisation des nouveaux semantics markups et l’import de Modernizr.

Concernant les évolutions :

Les nouveaux inputs étaient déjà prise en compte dès le SP1, pas de changement à ce niveau.

Visual Studio 2010 HTML5 input

Les nouveaux évènements étaient partiellement pris en compte dès le SP1, pas de changement non plus à ce niveau. 

Pour rappel :

  • Support des nouveaux windows events ( mis à part les OnPageHide et Show).
  • Support des nouveaux forms events
  • Supports des nouveaux mouse events, OnDragEnd maintenant disponible.
  • Support des nouveaux médias events

 

  • Correction de quelques bugs de validation, notamment sur les attributs ne nécessitant pas forcément de valeurs :

A l’arrivée du SP1 :

Visual Studio 2010 HTML5 Validation

Après mise a jour :

Visual Studio 2010 HTML5 Validation

  • Support de l’attribut Source sur les Media Element (audio et video) :

Visual Studio 2010 HTML5 media

  •  Support complet de l’accessibilité WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). Pour rappel, ARIA définit des moyens afin de permettre à des personnes invalides, d’avoir une expérience utilisateur adaptée, les attributs sont préfixés par “aria-”.

Visual Studio 2010 HTML5 media ARIA

  • Support des microdatas, avec IntelliSense des schemas basée sur schema.org  ( Exemple ), très utile pour le SEO. Pour rappel, les microdatas permettent différents éléments de votre page web, à des meta datas, directement exploité par les moteurs de recherches ( Bings, Yahoo, Google l’utilisent ).

Visual Studio 2010 HTML5 Microdata SEO Bings Google Yahoo

  • Petit détail également, plus besoin de l’attribut “Type” sur les balises scripts.
Visual Studio 2010 HTML5 javascript

 

CSS3 & Visual Studio

On peut remarquer une nette évolution de l’IntelliSense avec cette mise à jour, l’arrivée du support des différents moteurs de rendus spécifiques, des animations, transformations etc., avec en prime les infos-bulles IntelliSense pour chaque nouveautés. Sachant que les spécifications CSS3 changent constamment, c’est d’ailleurs pour cela que le SP1 était très incomplet sur le support de CSS3.

Voyons ça en détails :

Tout d’abord, passer en mode de validation CSS3.

Visual Studio 2010 HTML5 CSS3

Si vous n’avez pas la barre d’outils  “StyleSheet” :

Visual Studio 2010 HTML5 CSS3 Toolbar

  • Support des différents moteurs de rendus ( –ms, –webkit, –moz )

Visual Studio 2010 HTML5 -ms -moz -webkitVisual Studio 2010 HTML5 -ms -moz -webkit

Visual Studio 2010 HTML5 -ms -moz -webkit

  • Support des nouvelles propriétés CSS3, comme par exemple les borders ( radius etc.), les columns ( columns-fulls, columns-fill, multi etc.)

Visual Studio 2010 HTML5 CSS3 properties

  • Support des animations, transformations, transitions 

Visual Studio 2010 HTML5 CSS3 properties transitions tranformations animations

 

JavaScript API & Visual Studio

Gros manque lors de la sortie du SP1, le support des nouvelles APIs arrivées avec HTML5. Cette update arrive alors comme notre sauveur puisque celle-ci ajoute un grand nombre de fonctionnalités à l’IntelliSense,  correspondant aux APIs principales présentes avec ECMAScript5.

  • Support du Localstorage ou appelé également WebStorage. Pour rappel, le Localstorage permet de stocker des informations, à l’aide du navigateur Web. Cette information est stockée dans une zone mémoire du navigateur. Elles sont uniquement accessibles que par le navigateur qui a lui-même enregistrer cette donnée.

Visual Studio 2010 HTML5 Webstorage localstorage

Visual Studio 2010 HTML5 Geolocation Geolocalisation

Visual Studio 2010 HTML5 Selectors javascript API 

 

Cette mise à jour des standards Web liée aux spécifications HTML5 se reposent principalement sur une évolution de l’IntelliSense et de la validation dans Visual Studio. Celle-ci reste très utile pour les développeurs souhaitant se lancer dans l’expérience HTML5, et découvrir en live les nouvelles fonctionnalités disponibles. Point important : Cette mise à jour est annoncée comme trimestrielle d’ après Mads Kristensen, ce qui permettra d’avoir votre Visual Studio à jour par rapport aux nouvelles spécifications que ce soit en HTML5 ou CSS3.

[C#5 Async] [RX Extensions] Wygday 2011–Contenu de la session “Vers un développement asynchrone”

Wygwam, ce 9 Juin 2011, a organisé pour sa 5ème édition, l’évènement Wygday à Lille, en partenariat avec Microsoft ( Microsoft Days ). Cet évènement a regroupé de nombreuses entreprises et intervenants autour des nouvelles technologies Microsoft.            

          

Durant cette évènement, j’ai pu co-animé une session sur le développement asynchrone, avec Eric Vernie, DPE chez Microsoft.

A travers cette session, plusieurs points ont pu être abordés, notamment les solutions disponibles proposées par le framework .NET pour permettre de développer de façon asynchrone / ou de paralléliser. On y aborde les bases bas niveau à l’aide du Thread, les runtimes objects comme le threadpool, les nouveautés du 4.0 avec la Task Parallel Library, ou encore les externals comme TPL Dataflow, Reactive Extensions. Pas mal d’exemples concrets ludiques seront également disponibles ( Merci Eric ).

           Wygday 2011 - Developpement Asynchrone Dataflow Reactive Extensions sur Lille avec Eric Vernié Microsoft

 

 

 

 

 

 

 

 

Voici les slides de la présentation :

 

Les démos viendront complétées la présentation, à travers quelques articles.

Posté le par Gio | 0 commentaire(s)

[HTML5] Wygday 2011–Contenu de la session “Introduction à HTML5”

Wygwam, ce 9 Juin 2011, a organisé pour sa 5ème édition, l’évènement Wygday à Lille, en partenariat avec Microsoft ( Microsoft Days ). Cette évènement a regroupé de nombreuses entreprises et intervenants autour des nouvelles technologies Microsoft.

HTML5

 

Durant cette évènement, j’ai pu co-animé une session sur HTML5, avec David Rousset, DPE Web chez Microsoft.

A travers cette Introduction à HTML5, plusieurs points ont pu être abordés, d’une présentation globale, en passant par une vision plus concrète de son utilisation actuelle ( marché, clients etc.. ) , tout en sondant des exemples de productions, puis de la technique avec par exemple quelques bonnes pratiques à adopter, face à la diversité des Spécifications / navigateurs Web disponibles (Progressive Enhancement, Graceful degradation etc.). 

 

Voici les slides de la présentation :

Les démos viendront complétées la présentation, à travers quelques articles.

PDC 2010– Sessions sur Paraléllisme

Hello tout le monde,

Petite news pour les personnes intéressées par le parallélisme, 2 très bonnes sessions à ne pas manquer :

Très bonne session décrivant les nouveautés (enfin !)  sur le parallélisme asynchrone, notamment grâce au package Visual Studio Async CTP. ( gros rapprochement par rapport à l’ Asynchronous Agents Library ).

Citation :

Pour découvrir ce petit bijou, Mads Torgersen nous offre une superbe documentation à télécharger:http://www.microsoft.com/downloads/en/details.aspx?FamilyID=d5b3e1f8-c672-48e8-baf8-94f05b431f5c&displaylang=en

A bientôt,

Bruno

boucard.bruno@free.fr

 

Session sur le parallélisme .NET & C++ , avec rappels et nouveautés : notamment sur  Visual Studio Async et DataFlow (TPL).

 

 

Edit: Les liens ont été mis à jour.

Bonne journée !

Posté le par Gio | 0 commentaire(s)
Classé sous : , , ,

Open bar…blog !

A mon tour de rejoindre ce monde de brute, qu’est celui des furieux du blog’!

Petite présentation,  Giovanni, 24 ans, ayant rejoint la Wygteam depuis Mai.

J’essaierais de partager sur ce blog mes connaissances et expériences, notamment en développement ASP.NET , mais aussi dans un domaine qui m’intéresse particulièrement : le parallélisme .NET .

La communauté ne se résumant pas à un seul blog , vous pourrez y trouver également  pas mal de trackings de publications d’autres blogueurs, avec lesquels j’apprends tous les jours. Grand Merci à eux Sourire

 

@bientôt !

 

Merci à Nix, et Emmanuel pour l’ouverture.

Merci à Aurel.V pour son spécial mental coaching Sourire .

PS : IdPersonn == null ? il fallait que je le dise !

Posté le par Gio | 3 commentaire(s)


Les 10 derniers blogs postés

- L’application des MiniDrones Parrot est aussi disponible pour Windows 8.1 par Blog de Jérémy Jeanson le 10-28-2014, 15:01

- L’application des MiniDrones Parrot est enfin disponible pour Windows Phone par Blog de Jérémy Jeanson le 10-27-2014, 09:49

- Mise à jour Samsung 840 EVO sur core server par Blog de Jérémy Jeanson le 10-27-2014, 05:59

- MVP Award 2014 ;) par Blog de Jérémy Jeanson le 10-27-2014, 05:42

- « Naviguer vers le haut » dans une librairie SharePoint par Blog de Jérémy Jeanson le 10-07-2014, 13:21

- PowerShell: Comment mixer NAGIOS et PowerShell pour le monitoring applicatif par Blog Technique de Romelard Fabrice le 10-07-2014, 11:43

- ReBUILD 2014 : les présentations par Le blog de Patrick [MVP Office 365] le 10-06-2014, 09:15

- II6 Management Compatibility présente dans Windows Server Technical Preview avec IIS8 par Blog de Jérémy Jeanson le 10-05-2014, 17:37

- Soft Restart sur Windows Server Technical Preview par Blog de Jérémy Jeanson le 10-03-2014, 19:43

- Non, le certificat public du CA n’est pas un certificat client !!! par Blog de Jérémy Jeanson le 10-03-2014, 00:08