WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB...

31
PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud Web 2.0, Ajax, HTML5, PHP Toutes les Bases de Données CODE MULTI-PLATEFORMES : Windows, .Net, Linux, Java, PHP, Internet, Ajax, Android, Windows 10 Mobile-UWP, iOS... Développement en L5G

Transcript of WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB...

Page 1: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

PLATEFORME INTÉGRÉE DE DÉVELOPPEMENTWEB

Internet, Intranet, CloudWeb 2.0, Ajax, HTML5, PHP

Toutes les Bases de Données

CODE MULTI-PLATEFORMES : Windows, .Net, Linux, Java, PHP, Internet, Ajax, Android, Windows 10 Mobile-UWP,iOS...

Développement en L5G

Page 2: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

Des sites toujours àjour, qui partagenten toute sécuritéles données de l’entreprise

NATIONAL AWARD

Aujourd’hui les sites

Internet et Intranetsont reliés en temps

réel aux données de l’en-treprise et se comportent

comme de véritables applica-tions.

WEBDEV 22 est la meilleure solutionpour créer ces sites.

Avec WEBDEV 22, vos équipes créent cessites et ces applications 10 fois plus vite. Comme

des dizaines de milliers de développeurs en France,choisissez la plateforme la plus performante pourdévelopper et publier vos sites et vos applicationsInternet et Intranet: WEBDEV 22.

S o m m a i r e3 Le cycle complet

4 Questions/Réponses

6 Exemples

8 Sites statiques et dynamiques

9 Intranet, Internet

10 Compatibilité navigateurs

11 Une techno révolutionnaire

12 IDE: l’environnement intégréWYSIWYG

15 La techno des «7 onglets»

16 Templates

17 Responsive Web Design

18 Zoning et Editeur HTML

20 HTML5 & CSS3

22 Des contrôles (champs) adaptés au Web

29 Export Word, Excel, 64 langues

30 SSL, Paiement sécurisé

31 SEO Le Référencement naturel,Sécurité par mot de passe

32 Le Langage L5G

33 Editeur de code

34 Le débogueur, POO

35 Les Webservices, Ajax

36 Angular JS, Bootstrap, JQuery

37 SPA, Websocket

38 Accès natif Google, SAP,...

39 SaaS et Cloud

40 Modélisation UML et Merise

41 Toutes les bases de données

42 HFSQL: base de données libre

44 Editeur de requêtes visuel

45 Générateur de rapports & PDF

46 Versionning (GDS /SCM)

47 Pilotage des projets

48 Import HTML & WINDEV

49 PHP

50 Déploiement

52 L’hébergement

54 Administration, Statistiques

55 Front Office, Back Office

57 Les services PC SOFT

59 Exemples de sites

BIENVENUE DANS LE MONDE DESAPPLICATIONS WEB

www.pcsoft.fr • 3

Page 3: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

4 • WEBDEV 22 : Développez 10 fois plus vite

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

A qui est destiné WEBDEV 22 ?A toutes les sociétés et tous les développeurs qui désirent réali-ser des sites et des applications INTERNET, INTRANET, Cloud etSaaS.

Quels types de sites et d’applicationspeut-on créer ?

Tous les types de sites. WEBDEV est spécialisé dans les sites «dyna-miques», c’est-à-dire qui se comportent comme de véritables appli-cations, et qui gèrent des données en temps réel.

Quelle est la formation requise ?Il suffit d’avoir programmé au moins une fois dans sa vie (ou sesétudes!). Une semaine suffit en général pour s’auto-former avecle manuel d’auto-formation livré en standard.

Faut-il des connaissances particu-lières sur INTERNET ?

Non. Vos équipes de développement produiront des sitesrobustes et efficaces. Tout le code (HTML, Javascript, Serveur)est généré par WEBDEV 22.

Peut-on créer des sites ResponsiveWeb Design avec WEBDEV 22 Oui. C’est très facile.

Quel est l’avantage principal de WEBDEVpar rapport à d’autres outils?

Il y en a plusieurs, comme: l’intégration totale, la simplicité, lavitesse de développement, 3 à 10 fois plus rapide, ou encore l’ac-cès aux bases de données. Et WEBDEV est «Full Stack»

WEBDEV s’appuie-t-il sur des techno-logies standard ?

Oui, comme HTML5, XML, CSS, Javascript ou PHP. Mais vousn’avez pas besoin de connaître ces technologies, WEBDEVgénère automatiquement le code nécessaire.

Je possède un existant. Pourrais-je lerécupérer avec WEBDEV ?

Oui. Vous pouvez aspirer des pages HTML existantes. Vous pou-vez également mixer des pages WEBDEV avec un site existant,en conservant votre existant.

On n’a pas besoin de connaître Java, HTMLPHP ou Javascript pour créer des sites ?

Non, c’est inutile. WEBDEV génère automatiquement le codeHTML, Javascript, CSS et PHP optimisé qui est nécessaire.

Et si je veux saisir du HTML, ou récupé-rer un existant Javascript par exemple ?

WEBDEV est ouvert. Il est possible de saisir (ou de copier) ducode HTML, PHP ou Javascript directement dans l’éditeur, etmême un script ASP.

J’ai lu que WEBDEV est compatibleWINDEV; il faut posséder WINDEV ?

WEBDEV est une plateforme totalement autonome. Aucun autreoutil n’est nécessaire pour développer avec WEBDEV.

Et si je possède déjà WINDEV ?Dans ce cas, d’une part, la formation est plus rapide, d’autre partvous pourrez automatiquement transformer vos applicationsWINDEV en applications Web...

L’éditeur de «pages» est-il WYSIWYG? Oui, au pixel près !

Quelles bases de données peuventêtre utilisées avec WEBDEV ?

Toutes les bases peuvent être utilisées: HFSQL, MySQL, SQLite, Oracle,AS/400, SQL Server, DB2, Informix, PostgreSQL, Progress, Access, ... Il est également possible d’accéder à des données Big Data.

Ajax, XML, CSS, W3C, JSON, JQuerysont-ils supportés ? Oui.

WEBDEV permet-il de développer dessites de grande envergure ?

Oui, c’est même dans ces projets qu’il excelle: sites Internet,Intranet et SaaS.

Quel Support Technique est dispo-nible?

C’est très simple: le Support Technique WEBDEV est gratuit (15 requêtes personnalisées gratuites par téléphone ou paremail)

Qui utilise WEBDEV ?Tous les types de structures professionnelles: SSII, construc-teurs, services informatiques, ingénieurs de laboratoire, minis-tères, administrations, indépendants...

Je peux générer des sites en pur«PHP» avec WEBDEV 22 ?

Oui, c’est une fonctionnalitéstandard.

En France WEBDEV est donc «le» stan-dard pour créer des sites dynamiques ? Oui.

Nous répondons ici aux questions que l’on nouspose le plus souvent surWEBDEV.

Consultez le numéro spécial de la revue«01Net» consacré à WEBDEV et WINDEV

pour découvrir 100 témoignages de sociétés prestigieuses.

Hébergement sous Windows ousous Linux.(et dans le Cloud)

QUESTIONSREPONSES

www.pcsoft.fr • 5

WEBDEV 22gère le cycle de vie completdes sites

WEBDEV 22 GÈRE TOUTESLES PHASES DU DÉVELOPPEMENT

W E B D E V,c’est l’assu-

rance d’un pro-duit complet et

totalement intégré: laformation est plus rapide,

le support technique estmeilleur (et gratuit).

Les sites «dynamiques» sont main-tenant la norme de l’INTERNET et de

l’INTRANET. Ces sites sont faciles à déve-lopper et à maintenir avec WEBDEV 22.

• Le maquettage•  La conception•  Le dossier

d’analyse et de pro-grammation

•  La liaison avec lessites statiques exis-tants

•  Les Bases deDonnées

•  La programmation(L5G, Webservice,Ajax, .NET, J2EE,HTML, HTML5,Javascript...)

•  La reprise de l’exis-

tant•  Les états (PDF,

codes-barres,...)•  Le paiement sécurisé•  La création et l’utili-

sation de compo-sants

•  La documentation•  Les tests en cours de

développement•  La liaison avec le

Back Office•  L’hébergement• La gestion SaaS, le

Cloud

•  Le travail avec lesinfographistes

•  L’installation chezl’hébergeur

• Les tests de non-régression

•  Les tests de perfor-mance

•  L’intégration conti-nue

• La maintenance etles évolutions

•  Les statistiques defréquentation

•  L’assistance audéveloppement

TOUTES LES PHASES DU DÉVELOPPEMENT SONTPRISES EN COMPTE EN STANDARD PAR WEBDEV 22

WEBDEV : OUTIL DE DÉVELOPPEMENT «FULL STACK»

Page 4: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

DES SITES RÉUTILISABLES, ET PERSONNALISABLES SONT LIVRÉSWEBDEV 22 est livré avec de nombreux sites et applicationsWeb déjà développés. Le code source et les pages sont livrés:vous pouvez utiliser directement ces sites, ces applications,les modifier, les personnaliser, les revendre...

UN ASPECT DIDACTIQUEVous pouvez également étudier l’analyse et le code de cessites, dans un but didactique.

PARMI LES SITES LIVRÉS...Voici une sélection de quelques exemples livrés :

• Site de vente Gestion des rayons, du chariot, du paiement.

• Petites annoncesGestion de plusieurs critères de sélection.

• Annuaire partagéEn Intranet, l’annuaire pourra êtrepartagé dans une entreprise. En Internet, l’annuaire pourra êtrepartagé entre différentes agences,ou par les membres d’une associa-tion...

• Gestion de parc matériel

Répartition et affectation du maté-riel sur un site.

• Agence immobilièreRecherche d’un bien en fonction de nombreux critères.

• CMSSystème de gestion de contenu.

• Gestion d’une base documentairePour archiver et retrouver des documents en fonction demots-clés que vous décidez.

• Paiement sécurisé(voir détail page 30)

• Gestion d’agence de voyage Présentation des hôtels, des disponibilités, sélection selon denombreux critères, ...

• News, Forum, Blog, Site associatif,Gestion de FAQs...... et tout un ensemble d’autres exemples immédiatement uti-lisables.

ETC...De nombreux autres exemples sont également livrés sousforme de pages, ou sous forme d’objets dans le dictionnaireinteractif.

GAGNEZ DU TEMPSLes sites livrés, que vous pourrez adapter à vos besoins, vouspermettront de gagner beaucoup de temps lors de vos déve-loppements.

Réutilisez les exemples

dans vos sites

WEBDEV®

DE NOMBREUX SITES ET APPLICATIONSPRÊTS À L’EMPLOI SONT LIVRÉS

En ra

ison

des é

volu

tions

per

man

ente

s, l’a

spec

t des

site

s livr

és e

t pré

sent

és p

eut d

iffér

er.

6 • WEBDEV 22 : Développez 10 fois plus vite

Honolulu : portail IntranetUn portail Intranet com-plet, avec toutes ses applications (messageries,news, recherche documentaire,...), estégalement livré.Directement utilisable, ilpeut également êtreadapté à vos besoins(source livré).

Honolulu a déjà été diffuséà plusieurs centaines demilliers d’exemplaires

DES SITES EN WEBDEVParmi les dizaines de milliers de sites réalisés enWEBDEV, en voici quelques-uns. Retrouvez-enplus de 1000 sur le site www.pcsoft.fr.

DES DIZAINES DE MILLIERSDE SITES

Des milliersd’autres sites àdécouvrir surwww.pcsoft.fr

www.pcsoft.fr • 7

Page 5: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

RAPPEL : SITE STATIQUEUn SITE STATIQUE est un site qui pré-sente des pages figées, reliées demanière définie les unes aux autres.Il s’agit d’un «ensemble de pages» surInternet, que l’on peut juste consulter.En général ce site présente des infor-mations de base sur la société, legroupe ou l’association: activité,adresse, les produits, et quelquefoisdes tarifs, une page de contacts...Les limites des sites statiques se fontvite sentir: à chaque modificationd’une donnée, il faut la reporter dansle site, et ré-installer les pages concer-nées.Pour que les produits présentés restent

d’actualité, il faut effectuer à chaquefois les modifications sur le site sta-tique.

QU’EST-CE QU’UN SITEDYNAMIQUE ?Un SITE DYNAMIQUE crée «à lavolée» les pages demandées par lesinternautes, en temps réel, en fonctiondes données présentes dans des bases dedonnées. Prenons l’exemple d’un catalogue quicontient 300.000 articles: un site sta-tique devrait prévoir 300.000 pagesHTML statiques différentes !Un site dynamique ne nécessiteraqu’une seule page, prévue pour rece-

voir des données(les références duproduit, saphoto,...). Le ser-veur «assemblera»les élémentsnécessaires à lademande.(voir également latechnologie SPA,«Single PageApplication» enpage 37)

TOUJOURS À JOURLes données du site dynamique sont

TOUJOURS À JOUR, puisqu’issues desbases de données de l’entreprise.Vous affichez les stocks réels, vous indi-quez à l’internaute la date réelle d’en-voi de sa commande, vous gérez desplannings,...

DES SITES QUI SONT DE VÉRITABLES APPLICA-TIONSAutre aspect intéressant des sites dyna-miques réalisés avec WEBDEV 22, ils secomportent comme de VÉRITABLESAPPLICATIONS. Toute la puissancede l’informatique est à votre disposi-tion.

FACILITÉ DE RÉALISATIONGrâce à la puissance de son environ-nement complet et à sa richesse fonc-tionnelle, il est extrêmement FACILE àtout développeur, sans compétenceparticulière en Internet, de réaliser dessites dynamiques sophistiqués, dehaute fiabilité, rapides et évolutifs avecWEBDEV 22.(Qui peut le plus peut le moins: WEBDEVcrée également des sites statiques)

AJOUTER UNE PARTIE «DYNAMIQUE»À UN SITE STATIQUE EXISTANT

UN SITE DYNAMIQUE C’EST QUOI ?

Aujourd’hui, la plupart dessociétés qui possèdent unsite statique désirent profi-ter des fonctionnalités dyna-miques.

AVEC WEBDEV 22,RÉUTILISEZ VOTRE EXISTANTPour réutiliser un EXISTANT, vouspouvez, à votre choix:• brancher des pages dynamiques sur

le site statique• brancher des pages statiques dans le

site dynamique• mixer statique et dynamique• importer des pages statiques dans le

site dynamique• ...Dans tous les cas, vous pouvez conser-ver votre existant, et l’améliorer.

MIXER STATIQUE ETDYNAMIQUEMIXER statique et dynamique est lasolution la plus rapide.Souvent un site statique existe dansl’entreprise. Le site statique est CONSERVÉ, et lespages dynamiques sont RAJOUTÉES,ou remplacent certaines pages sta-tiques.Il est également facile de relier demanière transparente 2 sites, un sta-tique et l’autre dynamique.

IMPORTER LES PAGESSTATIQUESWEBDEV 22 propose une puissantefonctionnalité d’import de pages sta-tiques et de templates (voir page 48). Les pages existantes sont ainsi IMPOR-TÉES dans l’environnement, et sonttransformées en pages WEBDEV 22.

LE BESOIN DE «TEMPS RÉEL»Un tarif change dans le système de ges-tion de l’entreprise ? Immédiatement,le site est à jour.Une nouvelle référence de produit estcréée ?Automatiquement et immédiatementce produit est présent sur le site dyna-mique.Le stock évolue ? Automatiquement, leclient qui passe commande estinformé.Sans avoir à installer en permanence, àmodifier et mettre à jour les pages, unsite dynamique affiche automatique-ment des DONNÉES À JOUR.

LE «DYNAMIQUE» ESTINDISPENSABLEAujourd’hui, vos sites doivent se com-porter comme des applications ! Vossites doivent être des sites dynamiques.

8 • WEBDEV 22 : Développez 10 fois plus vite

WEBDEV 22 IDÉAL POURCRÉER UN SITE INTRA-NET OU EXTRANET OUUNE APPLICATION WEBWEBDEV est l'outil idéal pour créer desapplications Web et sites Intranet etExtranet. Un site Intranet est un site (ensemblede pages) interne à un ensemble d'uti-lisateurs: sociétés, clients, fournis-seurs... Il peut être utilisé au sein d'une entre-prise, ou à l'extérieur (hébergeur ouCloud). L'accès et la gestion des droitsse font par identifiant et mot de passe,ce qui est automatiquement géré parWEBDEV (voir page 31).Une application Web est organisée partraitement; les données sont trans-mises en asynchrone, en push, indé-pendamment des pages (SPA, «SinglePage Application», voir page 37).

SÉCURITÉ TOTALE AUTOMATIQUELe site Intranet ou l’application Webréalisé en WEBDEV est accessible à tra-vers une session unique. Par défaut,

pour chaque utilisateur, une session estouverte et maintenue automatique-ment sur le serveur.La sécurité du site est assurée automa-tiquement, par cette notion de session.L’adresse de la page ne peut pas êtreréutilisée par copier/coller. Le fonctionnement dynamique protègeles requêtes et leurs résultats, qui peu-vent être cryptés.

AUCUNELIMITELa richesse fonction-nelle de WEBDEV per-met de développerdes sites et de véri-tables applicationsWeb, vous n'êtes paslimité.WEBDEV 22 est l'ou-til idéal pour créer dessites Intranet et desExtranet, et c'est pourcette raison quedes milliers degrandes sociétés ontcréé leur Intranet avecWEBDEV.

WEBDEV 22 est également idéal pourcréer des applications Web qui repro-duisent le comportement d’applica-tions traditionnelles.Une application Web réalisée avecWEBDEV 22 peut être «Responsive»(voir p 17).

WEBDEV 22 IDÉAL POURCRÉER UN SITE INTERNETUn site Internet est un site accessiblesimultanément par les internautes dansle monde entier.Les pages de ce site doivent être réfé-rençables individuellement par lesmoteurs de recherche (Google...).Pour être bien référencé, un site doitêtre «Mobile Friendly», c’est à direfonctionner aussi bien sur un ordina-teur que sur un smartphone ou unetablette.WEBDEV 22 permet la création facilede ce type de sites.

LA TECHNOLOGIE AWPPour un référencement naturel optimaldes pages, WEBDEV 22 propose latechnologie AWP: Active WebDevPage.Grâce à cette technologie AWP,WEBDEV 22 permet de créer des pages

Web dynamiques indépendantes.Chaque page AWPest référençable demanière individuellepar son adresse (URL).Chaque page du sitepeut ainsi être réfé-rencée par lesmoteurs de recherche. Une page AWP dusite s'exécute demanière autonome,sans contexte d'exé-cution automatiquesur le serveur.Lorsque le site doitconserver des infor-mations pendant lanavigation entre lespages, le site peutbien entendu gérerun contexte par pro-grammation.

www.pcsoft.fr • 9

La méthode laplus simplepour créer desapplicationsCloud

APPLICATIONS WEB, INTRANET/EXTRANET :WEBDEV EST ROI !

INTERNET : WEBDEV EST (AUSSI) ROI !

Page 6: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

Internet Explorer sous Windows

Edge sous Windows

Firefox sous Linux ou Windows

Tablette sous Android

Chrome sous Windows

Safari sur Mac

WEBDEVgénère à lademande dessites compa-tibles avec lanorme W3Ctransitional

LES SITES ETAPPLICATIONSCRÉÉS AVECWEBDEV SONT COMPATIBLESAVEC TOUS LESNAVIGATEURSLes navigateurs propo-sent tous leurs particu-larités, qui diffèrentmême selon les ver-sions.WEBDEV génère uncode générique, qui estreconnu par quasimenttous les navigateursstandard du marché.Voici la consultation dumême site sous diffé-rents navigateurs etsystèmes.

LE MÊME SITE

WEBDEV

S’AFFICHE DE

FAÇON IDENTIQUE

SUR TOUS LES

NAVIGATEURS

VOS SITES COMPATIBLES TOUS NAVIGATEURS

10 • WEBDEV 22 : Développez 10 fois plus vite

WEBDEV permet de créer des sites «Responsive».WEBDEV supporte également le concept de «DynamicServing»: à une même URL correspondent 2 pages dif-férentes, sous une page Desktop et une page Mobile;qui s’affichent automatiquement selon le navigateur. www.pcsoft.fr • 11

WYSIWYG:créez en visuel

CRÉATION DE PAGE : UNE MÉTHODE RÉVOLUTIONNAIRECréez vos sites visuellement, WEBDEV 22génère automatiquement le code HTML, lecode Javascript et le code Serveur néces-saires au site. Et sur demande, WEBDEV 22génère même le site en PHP.

CLIQUEZ AU LIEU DE CODERWEBDEV 22 est un environnement complet,intégré. L’ensemble du développement s’ef-fectue avec un seul environnement et unseul et unique langage: le WLangage,L5G d’une très grande PUISSANCE, etFACILE à apprendre.

WEBDEV 22 permet ainsi de s’affranchir des connaissancesinutilement complexes de l’Internet. Par ailleurs, les traitements sont totalement séparés despages, il n’y a pas de mélange comme avec des langagestraditionnels.Les pages se créent facilement en positionnant les champsà la souris. Des zones de champs peuvent être créées pour les dépla-cements et décalages d’un bloc.

HTML, CSS ET JAVASCRIPTInutile de connaître ni HTML, ni CSS, ni Javascript pour réa-liser de superbes et puissants sites dynamiques.WEBDEV 22 génère tout le code qui est nécessaire à votreplace.Mais WEBDEV 22 est OUVERT, et si cela est nécessaire, ilest toujours possible de taper (ou coller) directement ducode de bas niveau: HTML, CSS, Javascript, JQuery,Bootstrap, Angular JS, scripts ASP, PHP...

Avec WEBDEV 22, vos équipesdéveloppent 10 FOIS PLUS VITE tous lestypes de sites et d’applications, Internet,Intranet, Extranet, Cloud et SaaS.

L’éditeur de WEBDEV : visuel,création des pages et deschamps à la souris !

Code HTML qu’il fallaittaper soi-même

Code Javascript qu’ilfallait taper soi-même

Le WLangage de WEBDEV: simplifiez et réduisez le code !

La création et le paramétrages’effectuent visuellement, enWYSIWYG, à la souris, pourles pages et les puissantschamps. Inutile de connaître HTML pourcréer des pages sophistiquées.

Page 7: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

12 • WEBDEV 22 : Développez 10 fois plus vite

La méthode laplus intuitive

WEBDEV 22 propose certai-nement l’environnement detravail le plus puissant, leplus facile et le plus intégrédu marché !Vos équipes créeront facile-ment de superbes sites.Aucune connaissance préa-lable de la programmationInternet n’est nécessaire.Le générateur de pages de WEBDEVpermet de réaliser facilement et rapi-dement de superbes pages.Notez que WEBDEV est ouvert: si vousle désirez, vous pouvez égalementintégrer ou réagir avec d’autres tech-nologies Web (AngularJS, Bootstrap...).

LES CHAMPS DANSLES PAGES: WYSIWYGRÉVOLUTIONNAIRE !Les différents champs (saisie, table,image...) sont créés et positionnésvisuellement, en interactif sous l'édi-teur. Ce que vous voyez sous l’éditeurcorrespond à ce que l’internauteverra dans son navigateur.Les pages (avec les champs, leurscaractéristiques détaillées définies parles 7 onglets, et leur code) sont sauve-gardées comme éléments réutili-sables.Cette technique permet de simplifier laprogrammation, en gérant les pagescomme des objets évolués. L’éditeur de pages permet de créer etde modifier visuellement les champs,indépendamment du code source.

Il est possible de s’abonner aux éven-tuelles modifications d’un élément par-tagé entre plusieurs développeurs(héritage).

Avec WEBDEV 22, il est bien sûr pos-sible d'intervenir par programme pourmodifier les propriétés d'un champ:cible, couleur, visibilité,... Par exemple, selon le profil de l’inter-naute, il est possible de rendre deschamps visibles ou invisibles, ... Tout estdynamique !

Cette technique de gestion des pageset des champs fait gagner un tempsconsidérable lors de la maintenancedes sites, et apporte un gain de robus-tesse.Et un simple «GO» permet de testerimmédiatement le site.

UN POSITIONNEMENTPRÉCIS Vous choisissez le type de positionne-ment: en flux ou au pixel près.WEBDEV inclut des algorithmes depositionnement à la souris très puis-sants, et permet un positionnement aupixel près. WEBDEV peut faire appel, si vous ledésirez, aux feuilles de styles CSS. Les feuilles de styles se créent facile-ment depuis l’environnement.

Si besoin, les tables de positionne-ment sont disponibles

ANCRAGE Les ancrages définissent la manièredont le contenu d’une page va se com-porter lorsque la page est agrandie parl’internaute ou passe de portrait à pay-sage.La gestion des ancrages en WEBDEV22 est très facile.

TOUS LES CHAMPS POURINTERNETL'éditeur de WEBDEV permet de créeret manipuler tous les champs dontvous aurez besoin pour réaliser rapide-

UN PUISSANT ENVIRONNEMENT VISUEL

Une méthode

révolutionnaire !

La création des pages

est facile:

glissez/déplacez les

champs à créer

depuis le ruban,

positionnez-les

directement à la

souris !

Les caractéristiques

personnalisées du

champ se

définissent en visuel

par les «7 onglets»

(voir page 15)

La barre de création des champs

www.pcsoft.fr • 13

ment de superbes interfaces (voir pages22 à 28). Les principaux objets gérés par l'éditeurd'IHM sont:• Texte, libellé HTML, Zone de texte• Champ de saisie, saisie riche• Champ d’affichage formaté• Sélecteur, interrupteur• Liste, combo, treeview• Bouton texte, bouton graphique• Web Caméra• Image statique, dynamique, générée • Zone de cliquage, Map Area• Table, Champ zone répétée• Champ HTML• Champ «réglette» de parcours• Modèle de champs, • iFrame, Page interne• SiteMapPath, Plan du site, • Graphe, Calendrier• Google Map, Notation, Lien sociaux• Onglets, etc...Les masques de saisie HTML5 sontgérés.

LE CHAMP «ZONE RÉPÉTÉE» WEBDEV permet la création de zonesrépétées multicolonnes, remplies auto-matiquement par liaison fichier, ou parprogrammation personnalisée ( voirpage 22).

DÉFINIR UN LIEN Pour définir un lien depuis un boutongraphique ou un champ lien, il suffit depointer la page à afficher à l’aide dumini-modifieur.

Ce lien peut être redéfini par pro-grammation si nécessaire.

LES GRAPHIQUES DEGESTION INTERACTIFSUn grapheur est livré avec WEBDEV; ilpermet de réaliser facilement des his-togrammes, des courbes, des camem-berts, boursiers... en 2D ou en relief.Les graphiques sont statiques ou inter-actifs, avec ou sans mire.

BOUTON ANTI MULTI-CLICLe «multi-clic» sur les boutons de vali-dation est neutralisé par défaut. Un

internaute qui clique 3 fois sur le bou-ton «valider» ne recevra pas 3 fois sacommande...

PLAN DU SITELe plan du site est calculé par rétro-analyse de l’existant, en fonction desliens fixes et programmés.Un champ «plan du site» est automa-tiquement créé pour être inclus dans lesite généré.

DES TEMPLATES POURTOUS LES USAGESWEBDEV 22 est livré avec de nombreuxTemplates (modèles de pages prédéfi-nis: Materiel Design,...), permettantainsi de réaliser facilement des sitespour toutes les cibles.

CRÉEZ FACILEMENT VOS PAGES

DE BELLES PAGES FACILEMENT La création des pages s’effectue facilement, en visuel, et vousdisposez d’un arsenal impressionnant de champs (contrôles)très puissants. Un «champ de saisie» WEBDEV avec toutes sesfonctionnalités intégrées, qui se pose par un simple«glisser/déplacer» à la souris correspond à plus de 50 lignesJavascript ! Vous imaginez facilement le code que vous écono-misez.

Découvrez dans les pages suivantesles principales possibilités offertespar l’éditeur intégré de WEBDEV 22.

Page 8: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

14 • WEBDEV 22 : Développez 10 fois plus vite

WEBDEV®

UN ENVIRONNEMENT DE CRÉATION WEBINTÉGRÉ ET INTUITIFL’environnement de tra-vail WYSIWYG de WEBDEVapporte un confort propice àla productivité. Vos équipes réaliseront faci-lement les sites et les appli-cations que vous devez déve-lopper, et que vos clients etutilisateurs attendent.WEBDEV 22 est facile àprendre en main: une semai-ne suffit en général à un déve-loppeur.Tout est en français: c’est plus clair (ver-sion anglaise également disponible).

Tout est intégré avec le même modeopératoire, tout est visuel, tout estinclus: vos équipes développent plusvite!Le Support Technique5 est égalementinclus, ce qui représente encore unconfort et des économies non négli-geables, ainsi qu’un gain de temps dedéveloppement supplémentaire.Notez que les projets peuvent être sau-vés dans le Cloud, ce qui facilite le tra-vail en équipe.WEBDEV 22 est compatible WINDEV22. Roue chromatique dans l’environne-

ment

Un petit carré jauneindique que le

champ fait partiedu modèle (template)

Un menu contextuel(clic droit) est dispo-

nible pour un accèsrapide aux diffé-

rentes fonctionnalités

Un menu contextuel(clic droit) est

disponible pour le paramétrage des barres

d’icones.

Les volets proposentdes composants, deschamps, du code,...

pour vous faire gagnerdu temps

Volet: il donneune vision glo-bale du projet;un double-clic(ou un drag &drop) sur un élé-ment l’ouvreimmédiatement

Ruban & boîtes à outilsdéplaçables,

visibles ou pas, et paramétrables

Barre d’informationindiquant le nom de la

page en cours, sa taille,...

L’interface des éditeursest très intuitive, et très efficace.

Note: la combi-

naison de touches

Ctrl W permet de

dégager momen-

tanément l’espace

de travail en mas-

quant les volets.

Affichage optionnel

L’ENVIRONNEMENT INTÉGRÉEST TRÈS INTUITIF

La méthodologie proposée par les «7 onglets»pour définir des champs puissants est très intui-tive: aucune connaissance préalable d’Internetn’est nécessaire, tout est décrit en français lim-pide.Les caractéristiques de chaque contrôle (champ) se définissent parl’intermédiaire d’un mode de dialogue exclusif, très facile et trèspuissant: les «7 onglets».Chacun des onglets permet de définir les différentes caractéris-tiques du champ. Si nécessaire il est également possible de modi-fier ces caractéristiques par programme.

Le contenu des onglets diffère selon le type d’objet; voici le détaildes 7 onglets pour un champ de type «Saisie».

Onglet «Liaison»: pour lier les données aux pages, ...

Onglet «Aide»: bulle d’aide, message d’aide...

Onglet «Avancé»: pour saisir ou copier/coller du code HTML

Onglet «Détail»: définissez les caractéristiques en saisie

Onglet «Style»: définissez les caractéristiques du champ:taille de police, caractères forcés en majuscules...

Onglet «Code»: saisissez directement dans l’événement(entrée dans le champ, clic sur le champ, ...) le code

WLangage, Javascript et ou PHP

LA TECHNOLOGIE DES «7 ONGLETS»PERMET LA CRÉATION FACILE DES PAGES

www.pcsoft.fr • 15

Les 7 ongletsfacilitent lescréations depage: il suffit decliquer

TECHNOLOGIE 7 ONGLETS : DES CONTRÔLESPUISSANTS EN QUELQUES CLICS

Onglet«Général»: nom,libellé, type duchamp, visuali-sation du style...Ici masques pro-posés

1

4

5

6

7

2

3

Les champs sontdétaillés à partir dela page 22

Les champs sont détaillés à partir de la page 22

Page 9: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

Commencer un nouveau siteou une nouvelle applicationWeb avec WEBDEV 22 est unjeu d’enfant: choisissez untemplate (modèle de pages),une ambiance, une palettede couleurs et votre pre-mière page est créée surune base solide !

LES TEMPLATES(MODÈLES DE PAGES),POUR STRUCTURER LESITELe template est un élément essentieldans la construction des sites Web.Un template contient la présentation«commune» à plusieurs pages.Le modèle de pages définit l’architec-ture des pages: • en-tête de page• menu• colonne• pied de page• bandeau pub• … (voir le concept de «zoning», page 18).Les éléments communs sont position-nés dans ce modèle de pages.Un template (modèle de pages) peutégalement contenir des images, deschamps, du code, des procédures, …Lors de la création du site, chaque pagecréée peut hériter d’un template(modèle de pages).Toute modification apportée au tem-plate sera propagée automatiquementà toutes les pages utilisant ce template.Dans une page, il est bien entendu pos-sible de «surcharger» une propriété dutemplate si cela est nécessaire.

TEMPLATES PRÉDÉFINISWEBDEV 22 propose de nombreuxtemplates prédéfinis.Ces modèles permettent de gagner untemps considérable lors de la concep-tion d’un site Web.Ces modèles prédéfinis sont déclinésen plusieurs ambiances.

AMBIANCE, POUR DÉFI-NIR LE LOOK DES PAGESLe concept «d’ambiance» permet d’af-finer les templates.Une ambiance définit un ensemble destyles, une palette de couleurs, desillustrations, des polices de carac-tères,…Changer d’ambiance permet de chan-ger le look du site ou d’une page, sansen changer la structure et la mise en

page.De nombreuses ambiances sont livréesavec WEBDEV 22.

LA PALETTE DE COULEURS, POUR L’HAR-MONIE DES COULEURSAutre concept d’affinement du style,les «palettes de couleurs». Une palette de couleurs est unensemble de couleurs harmonieuses(ton sur ton par exemple) utilisées dansles styles des pages.Une palette de couleurs définit parexemple une couleur de texte pour untitre, ainsi que la couleur de fond cor-respondante, la couleur d’un bouton,etc.De nombreuses palettes de couleursprêtes à l’emploi sont livrées.

16 • WEBDEV 22 : Développez 10 fois plus vite

LES TEMPLATES : FACILE !

Changement d’ambiance sur un site.Un site au printemps...

Le même site pendant la saison d’hiver: l’ambiance a changé (couleurs, styles,...)

LE RESPONSIVE WEBDESIGN C’EST QUOI ?Le Responsive Web Design est uneméthode de développement de siteWeb.Le principe de cette méthode est depermettre à une même page Web des'adapter automatiquement, pendantla navigation, à la taille et à la résolu-tion de l'écran sur lequel elle est affi-chée.L'intérêt principal est de pouvoir cibleravec une même page Web aussi biendes smartphones, des tablettes ou desécrans de bureau.L'adaptation se fait en temps réel surle navigateur. L’adaptation permet éga-lement d’optimiser les modes portraitet paysage.

Un site Responsive WEBDEV 22affiché sur une tablette

Le même site affiché sur unsmartphone

AVANTAGES DURESPONSIVE: «MOBILEFRIENDLY» ET RÉFÉRENCE-MENT AMÉLIORÉDans son classement des sites lorsd’une recherche par un internaute,Google privilégie maintenant les sites«mobile friendly», c’est-à-dire les sitesdont la mise en page est adaptée auxappareils mobiles. Grâce au Responsive Web Design deWEBDEV 22, vos sites sont automati-quement «mobile friendly», doncmieux référencés par Google.

CRÉER DES PAGESRESPONSIVE AVECWEBDEV 22: VISUEL !Les pages Responsive se créent envisuel sous l’éditeur.En édition, les pages Responsive sontautomatiquement dotées d'une grillede positionnement.Cette grille est constituée d'unensemble de colonnes de largeur iden-tique.Les champs de la page sont position-nés et ancrés en largeur sur cescolonnes.Quand la largeur de la page varie, lagrille s’adapte, et les champs s'adap-tent automatiquement en position eten taille.Dès la conception de la page, directe-ment dans l’éditeur, vous visualisez lerésultat dans différentes largeurs depage.

Pour voir cet comportement,flashez ce code ou visitezwww.pcsoft.fr/21732

LES TRANCHES DE RÉSOLUTIONUne page Responsive utilise égalementle concept de «tranches».Une tranche est définie par une largeurminimale et une largeur maximale dunavigateur et permet d’adapter lecontenu de la page à différents termi-naux. Dans une tranche, la taille des policesde caractères peut être adaptée, laposition et la taille des champs peuventêtre modifiées, etc...

www.pcsoft.fr • 17

LE RESPONSIVE WEB DESIGN FACILE !

Dans cet exemple, entre une page en grande lar-geur et une page étroite, le concepteur du sitea décidé que:• La taille de la police du Titre est agrandie sur

téléphone (pour une meilleure lisibilité)• Le bandeau de pub devient invisible parce qu’il

y a moins de place• Une image différente (ou cadrée différem-

ment) est utilisée

Page 10: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

18 • WEBDEV 22 : Développez 10 fois plus vite

ZONING EN ÉDITION(ZONE D’ÉDITION)WEBDEV 22 permet de délimiter deszones d’édition dans une page, c’est ceque l’on nomme le «zoning».Les zones permettent de définir l’ar-chitecture de la page: en-tête (<hea-der>), pied de page (<footer>), encart(<aside>),...Il suffit de découper la page en«zones» logiques.Une zone contient les champs qui ysont présents.Le zoning est en général défini dans unmodèle de pages et sera ainsi communà plusieurs pages du site.Une fois ces zones d’édition délimitées,la modification de la page est facilitéeen édition.

ANCRAGESIl est possible de définir l’ancrage dechaque zone et des champs qui la com-posent.Par exemple le fait d’agrandir le navi-gateur en largeur peut étirer une zonede la page pour donner plus d’espaceà un champ texte, tout en poussant leszones adjacentes.

ZONING EN EXÉCUTIONIl est également possible de définir lecomportement des zones et de leurcontenu pendant la navigation (en exé-cution).Lorsque l’internaute modifie la taille dunavigateur, ou bien si le contenu d’unezone change, la page peut se réorga-niser seule harmonieusement.Tout ceci est automatiquement gérépar WEBDEV 22 !Les moteurs de recherche reconnais-sent la sémantique des zones et ainsiréférencent mieux la page.

ZONING :LA MISE EN PAGE FACILE !

MANIPULATIONS D’UNEZONESi la zone est déplacée, ses champsseront ensuite automatiquementdéplacés avec la zone.Ce mode d’édition simplifie les mani-pulations de création et de modifica-tion de pages.L’ outil «crayon» permet de découperune page de manière visuelle.Ces zones sont matérialisées et faci-

lement manipulables sous l’éditeur. Par exemple l’agrandissement de lahauteur de la zone d’en-tête déplaceautomatiquement vers le bas leszones qui sont situées en dessous: lazone corps de page et de bas depage.L’édition respecte la position relativedes champs contenus dans chaquezone, ainsi que leurs ancrages.L’édition est WYSIWYG.

L’ÉDITEUR HTML INTÉGRÉPour ceux qui désirent modifier le code HTML qui est généré par

WEBDEV, un éditeur visuel, convivial et puissant est livré.

www.pcsoft.fr • 19

Page 11: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

HTML5 ET W3CEn WEBDEV 22, vous n’avez pas besoind’écrire de code HTML, WEBDEV legénère automatiquement pour vous !Le code HTML généré par WEBDEV 22respecte le standard HTML5 et suit lesrecommandations du W3C.Le respect de la nome HTML5 garantitune compatibilité des pages sur tousles navigateurs du marché supportantla norme.

HTML5 : LAPUISSANCEHTML5 représente uneévolution importante dela norme Internet. La pré-sentation élaborée despages Internet se stan-dardise et de nouvellesfonctionnalités apparaissent.Le standard HTML5 permet de tirerpartie de toute la puissance des navi-gateurs récents et de proposer desfonctionnalités avancées.

COMPATIBILITÉANCIENS NAVIGATEURS:HTML4 TRANSITIONALPour assurer la compatibilitéavec d’anciennes versions denavigateurs (utilisés en

Intranet par exemple), WEBDEV permettoutefois de générer les sites à lanorme HTML4 Transitional.

20 • WEBDEV 22 : Développez 10 fois plus vite

HTML5

MASQUES DE SAISIEHTML5La norme HTML5 propose desmasques sur les champs de saisie.Avec ce type de masque, le site laissela gestion de la saisie et son contrôleau navigateur. Ce n’est plus la page (lesite) qui effectue les contrôles, maisdirectement le navigateur. Les masques gérés sont: Email, Url,Date, Heure, DateHeure, Mois,Semaine, Nombre, Intervalle,Recherche, Numéro de téléphone,Couleur,...Sous l’éditeur de WEBDEV 22, il estpossible de définir un masque natif ouun masque HTML5.

LOCALISATION PAR GPSDIRECTEMENT EN MODENAVIGATEURWEBDEV 22 offre un jeu de fonctions«navigateur» qui permet d’interagiravec les fonctionnalités GPS du maté-riel, si ce matériel en dispose: position,déplacement,...

Ici une carte affichée par un champ «image»: le trajet a été

dessiné avec les fonctions de dessinen mode «navigateur»

(sans retour au serveur)

DESSIN EN MODE NAVIGATEURWEBDEV 22 propose des fonctions dedessin basées sur la norme HTML5. La célèbre famille des fonctions de des-sin du WLangage est également dis-ponible en code navigateur.Cela est très pratique pour annoterune carte ou un plan interactif, oudans le domaine de la réalité augmen-tée.

VIDEO SANS PLAYERUn site réalisé en WEBDEV 22 utilisépar un navigateur supportant la normeHTML5 ne nécessite pas de plug-inspécifique (Windows Media Player,QuickTime ou encore Flash...) pourjouer des vidéos.Cela permet d'interagir avec la vidéogrâce au WLangage, et de personnali-ser l'affichage.

AUTO-COMPLETION AUTOMATIQUELes navigateurs HTML5 récents propo-sent automatiquement une auto-com-plétion des formulaires dans les pages.Lorsque l’internaute commence à sai-sir des informations dans un formulaire(par exemple une adresse de livraison),tous les champs de la page se remplis-sent immédiatement. Cette fonctionnalité est dangereusepour des données confidentielles. Avec WEBDEV 22, il est possible dedésactiver cette fonctionnalité champpar champ grâce à l’option «Désactiverl’autocomplétion». Cette sécurité estégalement utile sur les ordinateurs par-tagés.

HTML5 AVANCÉ

UTILISATION DE SITEDÉCONNECTÉ (OFFLINE) WEBDEV 22 permet d’indiquer qu’unsite ou un ensemble de pages donnéespeuvent fonctionner en mode décon-necté (sans connexion Internet).Dans ce cas, l’ensemble des ressources(pages, images, fichier .js, fichier .css,..) utilisées par le site ou les pages estautomatiquement mis en cache par lenavigateur sur le poste de l’internaute.Ainsi le site peut être utilisé sans sereconnecter à Internet.

STOCKAGE LOCAL WEBDEV 22 permet à un site de stoc-ker un ensemble d’informations sur leposte de l’internaute.Ces informations sont stockées dans uncontexte propre au navigateur.

ACCÈS EN MODE LOCALÀ UNE BASE DE DON-NÉES (SQLITE) WEBDEV 22 permet à un site de créeret d’accéder à une base de donnéescréée par le navigateur, sur le poste del’internaute en code navigateur. Cette fonctionnalité permet d’envisa-ger de saisir des données en modedéconnecté, et par exemple de lestransmettre automatiquement au ser-veur dès que la connexion à Internetest établie.

MODIFICATION DESSTYLES WEBDEV DIRECTEMENT EN CSSLes styles WEBDEV 22 sont stockéssous forme de feuilles de styles au stan-dard CSS3. Le code CSS3 généré peut si nécessaireêtre modifié directement dans le fichier.CSS . Cette ouverture est offerte dans le butde permettre aux spécialistes CSS3 deréutiliser leur savoir-faire dans cedomaine. Un style CSS3 créé par WEBDEV 22 etmodifié depuis l’extérieur de WEBDEVest toujours reconnu par l’éditeur.Le style modifié peut être appliqué dela même manière qu’un style WEBDEVsur les champs et les pages.

IMPORTATION DE STYLESCSS EXISTANTSDes styles CSS3 existants peuvent êtreimportés dans WEBDEV 22, depuis desfeuilles de styles CSS3.La fonctionnalité d’import permet desélectionner les styles à importer, etceux à ne pas importer.Dans l’environnement de WEBDEV 22,les styles importés sont proposés aumême titre que les styles créés dansWEBDEV.

EDITEUR DE STYLES CSS L’environnement WEBDEV permetl’édition de styles CSS de manière gra-phique à travers un éditeur de descrip-tion de styles CSS.

L’éditeur de styles CSS3

INTÉGRER UNE ANIMATION EXTERNEDANS UN CHAMPL’environnement de WEBDEV proposel’ajout automatique d’effets d’anima-tion sur les champs : clignotement,fondu, grossissement, rotation,pirouette 3D,… Il existe d’autres types d’effets plus par-ticuliers, disponibles sur le marché sousforme d’animations CSS. Par exemple:balancier, flottement, explosion... Pourappliquer ce type d’animations à unchamp, il suffit d’importer la feuille destyles CSS contenant la description del’animation, et de spécifier dans le styledu champ le nom de l’animation à uti-liser, sa durée, et sa répétition.

ASSOCIEZ UN SCRIPT JSOU JQUERY À VOSCHAMPS

Une «classe CSS» peut être référencéedans un script Javascript externe ou unscript jQuery pour appliquer des modi-fications sur le champ auquel elle estattribuée.Il est ainsi possible de modifier demanière dynamique les propriétés deschamps et d’en modifier le comporte-ment.Par exemple: pouvoir déplacer unchamp à la souris, changer son style, lemettre en mouvement en réaction àcertains évènements, le faire interagiravec d’autres champs...

www.pcsoft.fr • 21

WEBDEV est totalementouvert

CSS3

CSS3 AVANCÉ

CRÉATION DE STYLES : CSS SANS CONNAITRECSS Pour créer un style avec WEBDEV 22,il est tout à fait inutile au développeurou au webdesigner de connaîtreCSS3: WEBDEV 22 génère lui-mêmele style qui est créé en visuel grâce àla technologie des «7 onglets».Les styles WEBDEV sont stockés sousforme de feuilles de styles au standardCSS3.Les styles sont modifiables à toutmoment sous l’éditeur, les modifica-

tions étant bien entendurépercutées à toutes lespages et champs utilisant lestyle modifié.

POSITIONNEMENTCSS3Le CSS3 est également utilisé parWEBDEV 22 pour positionner (au pixelou en flux) les éléments dans les pagesen respectant la séparation «position-nement» / «contenu HTML».

ANIMATIONS ETEFFETS SUR LESCHAMPSL’environnement WEBDEV22 propose de nombreuxeffets et animations baséssur la technologie CSS3 :

fondus, grossissement au survol, rota-tion, pirouette 3D, etc.Ces effets sont proposés sur tous leschamps et sont paramétrables (durée,courbe d’accélération, …).Vous n’avez pas besoin de connaître lelangage CSS3.

Page 12: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

WEBDEV 22 propose tous les types de champs(«contrôles») nécessaires à la création despages Internet et des applications Web. Voiciquelques-uns de ces champs détaillés.Notez que ces champs fonctionnent en Ajax.

ZONE DE TEXTE RICHE

Le champ «Zone de Texte Riche» (ZTR) permet d’éditer uncontenu. Ce champ très puissant est présenté en détail enpage 25.

CHAMP DE SAISIE RICHE HTMLCe type de champ permet aux internautes de créer et mettreen page des textes avec enrichissement.Une barre d’outils apparaît automatiquement en tête duchamp, et permet à l’internaute de définir les enrichissements.

Les données sont sauvegardées au standard HTML.

CHAMPS DE SAISIE (AVEC MASQUE)Les champs de saisie de WEBDEV 22 permettent, comme lesautres champs, de définir de nombreux paramètres, demanière visuelle et intuitive à travers les «7 onglets» ou parprogrammation. Il est facile de définir de puissants masquesde saisie, sans avoir besoin de taper la moindre ligne de code.Les formats sont matérialisés dès l’entrée de champ.

En entrant dans le champ, le masque apparaît: ici, taper le «/» est facultatif

Parmi les masques de saisie fournis: durée, première lettre en

majuscule, numéro de téléphone français, nom et chemin defichier, adresse email, code postal...

PERSONNALISER LE LISERÉ DESCHAMPSUn champ peut posséder un liseré.Un usage habituel de ce liseré est de mettre en valeur lechamp qui a le focus.

Il est facile de personnaliser l’apparence du liseré, selon lesactions sur le champ: prise de focus, survol,...

UNE «ZONE RÉPÉTÉE» EST UNCONCEPT TRÈS PUISSANTUne «zone répétée» est un ensemble de champs qui serépète horizontalement, verticalement et/ou linéairement unnombre de fois défini ou indéterminé.Les zones répétées sont alimentées soit par programme, soitpar liaison directe avec une ou des tables de données, soit àpartir de requêtes.

Zone répétée en définition sous l’éditeur

Par exemple, le nombre de répétitions peut être le nombred’enregistrements de la requête,...A chaque répétition, il est possible de modifier chaque attri-but de chaque champ. Par exemple:- couleur de la ligne- couleur d’une police (montant en rouge si négatif)- photo d’un article...

Zone répétée en exécution

22 • WEBDEV 22 : Développez 10 fois plus vite

Tous leschamps du

Web,et plus...

WEBDEV®

DE PUISSANTS CONTRÔLES (CHAMPS)

La zone répétée peut adapter dynamiquement le nombred’éléments à afficher suivant la largeur de la page chez l’in-ternaute.

Une zone répétée peut également être uniquement linéaire.

RÉGLETTE AUTOMATIQUELa réglette de parcours rapide des pages (avec son code) estgénérée automatiquement pour une zone répétée, toutcomme pour une table.

Exemple de réglette automatique

MENUS DÉROULANTS & POP-UPWEBDEV permet de créer des menus déroulants (verticaux ethorizontaux) en mode WYSIWYG, des menus «onglet», etdes menus «Pop-up».Il est possible d’ajouter dynamiquement (par programmation)des choix de menus, des sous-menus, etc...Les menus sont tactiles. Ils sont générés en «full» CSS ets’adaptent au mode Responsive.

www.pcsoft.fr • 23

Des champssophistiqués trèsfaciles à créer

Le fond du ban-deau de sélection

peut être uneimage

Il est possible deredimensionner

les colonnes

Un ascenseur remplace automati-quement la règlette

Ancrage et ascen-seur automatique

Gestion automatique d’un «cache» (fetch par-tiel) qui ne charge que lesdonnées nécessaires à l’af-fichage et au parcoursfluide à vitesse humaine

Si un traitement estlong, un sablier s’affiche

automatiquement.

Les cellules detable peuvent être

en «saisie»

Les lignes de latable sont «multi sélection»

Le tri descolonnes est disponible

La recherche dansla table est proposéevia la loupe

TABLES SERVEUR,NAVIGATEUR ETTABLES AJAXLes tables sont gérées parWEBDEV 22. Une table «habituelle» est unetable serveur, qui effectue desrequêtes sur le serveur pour se

remplir.Le mode Ajax est géré sur lestables serveur, ce qui évite leréaffichage complet de la pageà chaque modification d’un élé-ment de la table. Une table peut également êtreen mode «Navigateur», c’est-à-

dire n’exécuter aucun code ser-veur.Le champ «Table Navigateur»est un champ table complète-ment autonome sur le naviga-teur.

Le champ Table propose desfonctionnalités automatiques :

• filtre, • recherche, • déplacement de colonne,• colonne redimensionnable,• en-tête de colonne,

sur-en-tête de colonne,• colonne conteneur,• ruptures...

•••suite page 24

LES TABLES

Page 13: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

LES ONGLETS Les onglets peuvent facilement être gérés.

Exemples d’onglets dans une page.

CHAMP TIROIR Un champ tiroir permet d’enrouler et dérouler une zone d’af-fichage.

A gauche, une image déroulée.A droite un autre exemple, avec un texte déroulé

CHAMP CALENDRIER ET CHAMP DE SAISIE DATE AVEC POPUP CALENDRIERLe champ calendrier permet soit de créer un champ intégrédans une page, soit d’ouvrir une «popup» calendrier pour lasaisie de la date (très utilisé en Web). De très nombreuses options de personnalisation et présen-tation sont fournies: encadrer le jour en cours, barrer les datesdéjà passées, délimiter une durée, signaler les jours fériés,...Le fonctionnement du champ calendrier est assuré en mode«Ajax», ce qui permet de ne pas rafraîchir toute la page lorsd’un affichage ou d’un choix de date.

Le champ calendrier est très pratique à l’usage

CHAMP VIGNETTE (STATIQUE OU DYNAMIQUE)Un site Web gère souvent des images ou des photos qui sontpar ailleurs utilisées sous forme de vignette (imagette), parexemple pour leur sélection.WEBDEV 22 gère automatiquement la génération dynamiqueautomatique de ces vignettes: elles sont créées en fonctionde l’image initiale, ou fixées par le webdesigner.

IMAGE AVEC ZOOM AUTOMATIQUE Lorsque l’effet de zoom est activé sur une image, le survolde l’image par le curseur de souris ouvre automatiquementune zone à côté de cette image, zone dans laquelle la par-tie de l’image originale pointée est affichée agrandie, ce quimet en avant le détail de cette partie.La taille de la PopUp zoomée est paramétrable, ainsi que lefacteur de zoom dans un rapport de 1 à 100 fois.Cet effet peut s’appliquer sur les champs image et vignette.Il n’y a rien à programmer pour bénéficier de cet effet, il suf-fit de cliquer sur le choix «Zoom automatique» dans la des-cription du champ dans les «7 onglets».

Lorsque le curseur passe sur une zone de l’image, celle-ci est automatiquement affichée et zoomée

CAPTCHA CODELa gestion des «captcha», ces codes de sécurité à saisir parl’internaute, est totalement automatique. Le champ captcha calcule et affiche automatiquementl’image déformée correspondant à un texte. Ce texte est soit généré automatiquement par le champ, soitdéfini par l’application.La déformation change à chaque affichage.

CHAMP GRAPHE INTERACTIFLe champ graphe de WEBDEV 22 propose de nombreux typesde graphes, en mode 2D et relief, en statique et en interac-tif: courbes, barres, hémicycles, camembert, ...Un menu permet à l’internaute de modifier dynamiquementcertains paramètres: type de graphe, affichage de légende,...

24 • WEBDEV 22 : Développez 10 fois plus vite

La méthode laplus simple et la

plus intuitive

WEBDEV®

DES CHAMPS PUISSANTS

suite de la page 23•••Une mire permet une lecture précise des données. Des effetsd’animation sont disponibles.

IMAGES, IMAGES CLIQUABLESLe champ image permet d’afficher des images dans les for-mats standard du Web: Jpeg, Gif, Tiff, PNG, SVG...Les images peuvent être cliquables pour lancer un traitement.Le mode «défilement automatique» permet d’afficher auto-

matiquement des images présentes dans un répertoire.

EFFET MOUVEMENT AUTOMATIQUED’IMAGE

Cet effet donne vie à vos pages !L’effet «mouvement automatique» simule le déplacementléger d’une caméra sur une image: sans rien programmer,l’image affichée prend vie et se déplace légèrement, lente-ment et harmonieusement dans sa zone.3 effets sont combinés: balayage dans des directions aléa-toires, zoom léger, fondu pour l’enchaînement de ces effets.Cet effet est idéal pour mettre en valeur automatiquementdes photos de produit: bien immobilier, produit de luxe,...

www.pcsoft.fr • 25

La méthode laplus simple et laplus intuitive

•••suite page 26

CHAMP «ZONE DETEXTE RICHE» (ZTR)WEBDEV 22 propose un type dechamp extrêmement puissant :il s’agit du champ «Zone deTexte Riche» (abrégé en ZTR).Le champ Zone de Texte Richeest fondamental pour l’éditiondes pages statiques et dyna-miques: saisir du texte enrichiest enfantin. La saisie du texte et son enri-chissement s’effectuent commedans un traitement de texte:insertion des images avechabillage, insertion des liens,enrichissement du texte...Tout se passe en WYSIWYG.Sous l’éditeur, lors de la saisie detexte, le champ s’agrandit auto-matiquement lorsque cela estnécessaire.Comme pour tous les champs,le code HTML est automatique-ment généré par WEBDEV.

MISE EN FORME DUTEXTE Le champ ZTR permet déjà,bien entendu, de spécifier lescaractéristiques de chaquetexte, au caractère près : police,taille de police, graisse, couleur,barré, surligné, exposant,indice,...La mise en forme des textes est«logique» au sens HTML.Par exemple, un attribut «gras»sera automatiquement traduit

en «Strong» dans le codeHTML, ce qui facilite automati-quement le référencement parles moteurs de recherche(Google...).Les balises adéquates sont insé-rées avant et après le texte danssa forme HTML.

Par exemple :Athlétisme

sera stocké sous la forme <strong> Athlétisme

</strong>La balise <strong>, que le navi-gateur reconnait et interprète,signifie qu’il s’agit d’un mot«important». Le navigateur affichera le texteentre balises en gras. Les moteurs de recherche utili-sent également ces balises pourréférencer les pages. L’utilisationde ces balises dans un texteaugmente son référencementnaturel.

MISE EN FORME DEPARAGRAPHELe champ ZTR permet de mettreen forme les paragraphes: titre,sous-titre, sous sous-titre, basde page, adresse email, note,haut de page, puce...La mise en forme est logique:par exemple, un titre seramémorisé automatiquementdans sa forme HTML comme untexte de type <h1>.

<h1> est une balise HTML quidéfinit un titre de page. En plus de cette mise en formelogique, la mise en forme phy-sique est disponible: alignementdes paragraphes, indentation,couleur, ...

INSERTION DECHAMPSA tout endroit d’untexte dans une ZTR, ilest possible d’insérerun champ (de touttype) WEBDEV: ungraphique, un champtable, un lien, uneimage...Le champ est posi-tionné au fil du texte,relativement au texte.Le champ est «ancré»sur le texte.

MODIFICA-TION DUCODE HTMLGÉNÉRÉL’accès au code HTMLde la ZTR est possible,et le code HTMLgénéré par WEBDEVdans la ZTR est volon-tairement clair etlisible, au lieu d’êtrecompressé.Un développeur quimaîtrise le code HTMLpeut modifier le code

HTML généré pour le champZTR.Ce qui a été modifié directe-ment dans le code HTML seravisualisé également sous l’édi-teur.

LE CHAMP ZTR : ZONE DE TEXTE RICHE

Page 14: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

26 • WEBDEV 22 : Développez 10 fois plus vite

La méthode laplus simple et la

plus intuitive

WEBDEV®

CHAMP «CARTE GOOGLE»Il est possible d’intégrer un champ Carte «Google Maps»dans un site. Le champ Carte de WEBDEV 22 est totalementinteractif: l’internaute peut zoomer, se déplacer, utiliser dif-férents affichages (plan, satellite), basculer en mode «streetview», etc.

ZONES DE CLIQUAGE (MAP AREA)Les zones de clicage permettent de réaliser des traitementsd’hypertexte: en fonction de la zone d’une image sur laquellel’internaute clique, un traitement particulier est exécuté.Définir les zones est très simple à l’aide des zones géomé-triques fournies. Plusieurs zones peuvent être reliées.

Si nécessaire, il est facile de récupérer les coordonnées de cli-quage, au pixel près.Cela peut être utile dans des cartes de pointage précis,comme par exemple des cartes géographiques, ou dans lemilieu médical.

CHAMP «VIDEO»

Le champ «Vidéo» permet de jouer des vidéos Flash (Flv),QuickTime (Mov), Microsoft (Wmv), Webm, Mpg, Ogv...Les fonctionnalités de lecture, pause, avance rapide,... sontgérées.L’affichage de vidéos est également géré par HTML5.

EFFETS CSS3 SUR LES CHAMPSWEBDEV 22 permet de définir facilement des effets CSS3 surles champs de type image: accélération, clipping, fondu,zoom automatique, fondu, grossissement en survol, effetphoto, mouvement panoramique, clignotement, décalage,balayage, inclinaison, rotation, ...

Fondu d’opacité

Le cornage de page est également géré.

CHAMP SLIDER & RANGE SLIDERLes champs potentiomètre linéaire (Slider) et potentiomètred’intervalle (range Slider) sont proposés.

CHAMP NOTATIONCe champ permet à l’internaute de donner une note, ou àun site d’afficher une note.Par défaut le visuel utilisé est une étoile, mais ce visuel peutêtre modifié (smiley, main, coeur...). La note peut être déci-male.

SITEMAPPATH (CHEMIN DE NAVIGATION)

La navigation devient facile

Un «SiteMapPath» est un menu qui se construit au fur et àmesure des parcours de l’internaute dans un site.Il permet de revenir rapidement sur une page précédente. La

DES CHAMPS PUISSANTS

suite de la page 25•••génération de cette ligne est automatique.Un plan du site est également automatiquement généré.

GFI AUTOMATIQUE Le GFI (Grisage de Fenêtre Inactive) de page sur page est géréautomatiquement. La page inactive est assombrie dèsqu’une page de dialogue s’ouvre.

CHAMP RÉSEAU SOCIAL Le champ «Réseau social» est une barre d’outils composéede pictogrammes faisant le lien vers les principaux réseauxsociaux du Web : Facebook, Tweeter, Google+, LinkedIn.

Pour utiliser les identifiants d’un internaute en vue de sonauthentification, voir page 31.

ZONE FIXE SUR L’ÉCRAN (FIXED)

Même si l’internaute fait défiler la page vers le bas, lepanier reste visible au même endroit

L’ancrage fixe permet de maintenir visibles un ou plusieurschamps lors du déplacement par l’internaute de l’ascenseur(scrolling) du navigateur. La zone est dite «épinglée».

Le ou les éléments ainsi ancré(s) se déplace(nt) avec l’ascen-seur, et reste(nt) donc visible(s), alors que le reste de la pagedéfile.

CHAMP ÉPINGLÉ FURTIFAvec WEBDEV, un champ peut être épinglé dans la page. Le mode d’épinglage «épinglé furtif» est utile pour épinglerdes champs menu, des barres d’outils, des pieds de page...Lorsque l’internaute déplace longuement l’ascenseur, lechamp se masque. Dès que l’internaute déplace ensuite légè-rement l’ascenseur dans l’autre sens, le champ réapparaîtépinglé en haut ou en bas du navigateur.

LE CHAMP «UPLOAD» (HTML5)Le champ Upload permet de télécharger depuis le Navigateurun fichier vers le serveur. Sélecteur de fichiers, drag & drop,multi sélection, jauge de progression,... sont gérés en standard.

La taille des fichiers uploadables n’est pas limitée.L’upload peut s’effectuer en tâche de fond ou en différé

CHAMPS PLANNING & AGENDALe champ planning permet de gérer l’emploi du temps de res-sources multiples. Ce champ est Ajax.Le mode opératoire est confortable pour l’internaute, puis-qu’il est manipulable entièrement à la souris pour la création,l’agrandissement, le déplacement et la suppression destâches et ce, quel que soit le navigateur.Le lien avec les données est automatique (databinding).Ce champ fait gagner des semaines de programmation.Le champ planning est adapté aux terminaux tactiles(tablette, smartphone). Les modes opératoires pour créer, déplacer, supprimer les ren-dez-vous sont compatibles avec l’environnement «multi-touch», et peuvent donc s’effectuer avec le doigt.Un champ «Agenda» est également disponible.

www.pcsoft.fr • 27

Les champs duWeb

•••suite page 28

Page 15: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

28 • WEBDEV 22 : Développez 10 fois plus vite

La méthode laplus simple et la

plus intuitive

WEBDEV®

CHAMP «TABLEAU DE BORD»WEBDEV 22 permet de créer facilement des tableaux debord. Un champ tableau de bord est constitué de Widgets.L’internaute peut personnaliser et adapter le tableau de bord.

CHAMP BOUTON IMAGE Comme leur nom l’indique, les boutons image sont basés surune image.Un bouton peut être défini par 5 images différentes au maxi-mum, correspondant chacune à un état du bouton: repos,survol, clic, focus, grisé.

Exemples de boutons graphiques

Le bouton peut être animé.Il est également possible de créer des boutons utilisant desicones «Police de caractères» vectorielles.

CHAMP BOUTON CSS3 Le bouton CSS3 est entièrement défini à base d’un style CSS.Il ne nécessite pas d’images, mais le style CSS lui-même peutcontenir (ou pas) une ou des images.Le bouton CSS3 est automatiquement adapté selon le navi-gateur.

CLIPART COMPLET DE 10.000 IMAGESET BOUTONSWEBDEV 22 est livré avec un clipart comprenant plus de10.000 éléments.

Il est possible de référencer ses propres images et illustrationspour enrichir le catalogue.Le contenu du clipart est riche et varié: images, icones,cadres, animations, boutons graphiques, bandeaux, formes.

CHAMP BANDEAU DÉFILANT Le champ bandeau défilant permet d’afficher successivementplusieurs contenus, soit automatiquement, soit suite à uneaction de l’internaute.Le bandeau peut contenir des champs et des traitements.On voit souvent un bandeau défilant en en-tête de site.

Le bandeau change de plan tout seul ou à lademande. Les plans peuvent contenir des champs

TABLEAU HTMLLe champ Tableau HTML permet de créer facilement destableaux de présentation dans les pages.

DES CHAMPS ADAPTÉS AU FONCTIONNEMENT SUR MOBILELorsque les sites créés avec WEBDEV 22 s’exécutent sur unmobile (tablette ou smartphone), les champs ont un com-portement adapté à l’utilisation tactile.

TOUS LES CHAMPS WEBWEBDEV 22 propose également les champs «Treeview»,Webcam, Applet Java, Iframe... Vous avez tout.

suite de la page 27•••

www.pcsoft.fr • 29

La méthode laplus simple et laplus intuitive

EXPORT AUTOMATIQUEVERS XML, WORD, EXCELET OPEN OFFICEPour les tables et les zones répétées, unmenu d’export automatique vers XML,Word, Excel et Open Office est proposéà l’internaute.

Les données contenues dans la tableou la zone répétée seront automati-quement exportées vers le format etl’outil choisi.Pour un export vers XML, la feuille destyles XSL permettant une éditionimmédiate sur navigateur est mêmegénérée.En utilisation Intranet, les utilisateurspeuvent réaliser facilement leurs simu-lations sous Excel !

RIEN À PROGRAMMERIl n’y a rien à programmer pour béné-ficier de cette fonctionnalité.Vous pouvez bien sûr désactiver cettefonctionnalité.

UNE OUVERTURE TOTALESi vous désirez programmer des exportsautomatiques dans vos sites, des ordresde programmation du L5G de WEBDEVsont à votre disposition.Les ordres hExporteXML,TableVersXML, XMLPremier, per-mettent de personnaliser tous les trai-tements.

MENU D’EXPORT VERS WORD& EXCEL

Un site ou une applicationWeb a une audience mon-diale : tout internaute dumonde entier peut le consul-ter !Développer des sites multi-lingues est donc souventnécessaire sur Internet.Et il y a bien sûr les pays quiutilisent plusieurs languesofficielles: la Belgique, laSuisse, le Luxembourg, leCanada ...WEBDEV apporte une solu-tion inédite et très puissanteau support des langues.

64 LANGUES PAR SITEJusqu’à 64 langues différentes sontsupportées par les sites que vous déve-loppez. Il suffit de choisir les languesdans l'écran de paramétrage (listemodifiable à tout moment, même surun site existant).

Exemple de saisie d'un texte en plusieurs langues

WEBDEV se charge de tout, il suffit desaisir les libellés dans les différenteslangues sélectionnées (langues latineset non latines: chinois, russe,...).Pour changer de langue dynamique-ment dans le site, il suffit de faire appelà la fonction Nation.Notez que même le libellé des boutonsimage sera traduit !

PRÉVOYEZ LEFUTURImaginez la simplification dutravail lors du développementde sites multilingues (ou si unde vos sites risque de le deve-nir, car les traductions peu-vent être effectuées a poste-riori, sur un site existant).

EXTRACTIONAUTOMATIQUE DESTEXTES Un outil disponible séparé-ment (WDMSG) permet d’ex-traire tous les «textes» d’unprojet, afin de les faire tra-duire, et de les ré-intégrerautomatiquement après tra-duction. Utile pour faire tra-duire son site par un cabinetspécialisé!

64 LANGUES DANS VOS SITES ET VOSAPPLICATIONS WEB

Page 16: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

SÉCURITÉ SSLLA SÉCURITÉVous le savez, la sécurité et la confi-dentialité sont des sujets cruciaux surInternet.Par défaut, lors de l’utilisation d’un siteInternet, les données circulant entre leposte de l’internaute et le serveur Webne sont pas protégées : les donnéessont accessibles par n’importe quelinternaute malveillant. La confidentialité et l’authentificationde la source des données ne sont pasassurées par défaut.

CONNEXION SÉCURISÉESSLLe moyen le plus efficace aujourd’huipour protéger les informations de l’in-ternaute est d’utiliser une connexionsécurisée de type SSL (Secure SocketLayer). Cette connexion SSL assure le cryptagedes données qui transitent entre leposte de l’internaute et le serveur Webhébergeant le site. Ce protocole permet également à l’in-

ternaute d’authentifier avec certitudele propriétaire du site visité.Pour sécuriser un site ou une partie desite par SSL, il est nécessaire d’acheterun certificat SSL auprès d’une autoritéde certification reconnue (par exempleNorton VeriSign, Thawte, GeoTrust,…).Une fois ce certificat SSL obtenu, il suf-fit de l’installer sur le serveur héber-geant le site. Il est à noter qu’il existe différentsdegrés de certification, du simple cryp-tage à l’authentification « SSLExtended Validation » qui permet l’af-fichage d’une barre d’adresse vertedans certains navigateurs.

HTTP, HTTPSL’URL utilisée ensuite pour laconnexion sécurisée au site commen-cera par «https:// »au lieu du classique« http:// ». L’internaute peut enplus contrôler la pré-

sence d’un cadenas dans la barred’état dans son navigateur, témoin dela transaction sécurisée en cours, ainsique l’identité du site qu’il consulte.La barre peut même se colorer en vertpour signifier la sécurité !

SÉCURITÉ: FACILE ENWEBDEV 22Le mode sécurisé est bien entendu sup-porté par les sites créés avec WEBDEV22. Grace à la fonction SSLActive(), il estfacile de combiner une partie consul-tative non sécurisée (catalogue produit)avec un espace sécurisé (compte client,paiement). Un même site peut bascu-ler du mode non sécurisé au modesécurisé SSL.

Les certificats «client» sont égalementdisponibles.

PAIEMENT SÉCURISÉ Le paiement en ligne par carte bancaires’est aujourd’hui démocratisé.Il existe 2 méthodes principales pourrecevoir le paiement par carte bancaire.Récolter directement les données ban-caires du client (Numéro de carte, datede validité, cryptogramme) et effectuerensuite la transaction avec la banque.Cette méthode est assez lourde etcomporte des risques de stockage dedonnées sensibles.La méthode la plus répandue est baséesur un basculement vers une page depaiement spécialisée proposée par unopérateur financier (banque,...).Typiquement, l’internaute remplit unpanier et après validation de la com-mande, il est redirigé vers un site depaiement tiers qui assure la transactionbancaire. Dans ce mode de fonctionnement, iln’y a pas de formulaire de paiement àgérer, aucun numéro de carte à gérerou stocker. Seul l’accord de paiementest à gérer.

LES OPÉRATEURS FINANCIERSVous pouvezchoisir directe-ment unebanque commeopérateur, quivous proposeraun service depaiement enligne (Atos,C y b e r m u t ,C y b e r p l u s ,PPlus, …), aveclequel s’interfa-cer. Vous pouvezégalement passer par un opérateurmultibanques comme PayBox ouPayPal. Cette méthode permet de choi-sir et changer facilement le comptebancaire qui sera crédité.La mise en place de cette solution estfacile avec WEBDEV 22, grâce au com-posant «PayBox» ou «PayPal» livré enstandard.

PAIEMENT SÉCURISÉ

30 • WEBDEV 22 : Développez 10 fois plus vite www.pcsoft.fr • 31

RÉFÉRENCEZ VOS SITESUn assistant analyse la composition despages du site, et indique les améliora-tions à apporter pour maximiser lepositionnement des pages dans lesmoteurs de recherche (Google,Yahoo,...).L’assistant vérifie également que les liensentre les pages peuvent être détectés etutilisés par les robots des moteurs.De nombreuses autres règles sont véri-fiées.Les sites créés seront ainsi mieux réfé-rencés par les moteurs de recherche.

RÉFÉRENCEZ CHAQUEPAGE DYNAMIQUE («URL REWRITING»)Grâce à la technologie «AWP»,WEBDEV 22 permet de référencerchaque page dynamique. Un mode d’URL rewriting permet dedéfinir plusieurs adresses pour unemême page en fonction de soncontenu. Cette page et son contenu

dynamique seront ainsi mieux référen-cés par les moteurs de recherche. Unepage peut être renommée.Par exemple, l’adresse de la page peutcontenir le nom de l’objet (Vélo, VTT,armoire en teck,...), ce qui permettra àla page d’être mieux référencée.

STATISTIQUES DESOURCE DE CONNAISSANCEAfin de vérifier depuis quels sites pro-viennent les internautes, un module de«statistiques» est également fourniavec WEBDEV (voir page 54).

SEO: RÉFÉRENCEMENT NATUREL DE VOS SITES

CONTRÔLEZ L’ACCÈS AUXSITES ET APPLICATIONSWEB: GROUPWARELa sécurité d’accès aux sites ou à cer-taines pages peut être nécessaire: c’esten standard dans WEBDEV 22 !La fonctionnalité de «groupware utili-sateur» permet de définir des mots depasse pour des personnes et desgroupes.

Le contrôle d’accès se définit simple-ment sous l’éditeur. Aucune program-mation n’est nécessaire pour assurer lasécurité d’accès à vos applications, ilsuffit d’activer l’option «Groupware».

GROUPWARE: UNCONTRÔLE SÉCURISÉTRÈS FINLe contrôle d’accès permet de fil-trer l’accès à de nombreux élé-ments: choix de menus, boutons,champs, groupes de champs, pages,états, ...

Les éléments interdits seront inac-tifs et à votre choix grisés ou invi-sibles.

LE MODE SUPERVISEURLe superviseur du site livré pourra àtout moment paramétrer facilementles droits des utilisateurs. Un édi-teur convivial permet de définir etgérer ces droits.Si vous le désirez, les droits des uti-lisateurs ou des groupes d’utilisa-teurs, pourront être créés ou modi-fiés par programme.

LDAPSi vous désirez utiliser une base delogin déjà existante en LDAP, le

contrôle d’accès en fera usage.

SAASWEBDEV 22 propose des fonction-nalités avancées de gestion d’appli-cations SaaS (voir page 39).

AUTHENTIFICATIONAVEC LES IDENTIFIANTSFACEBOOK, GOOGLE+,TWITTER OU LINKEDIN

Pour authentifier un internaute, ilest possible également d’utiliser lesidentifiants déjà existants de l’inter-naute: identifiants de Facebook,Google+, Twitter ou LinkedIn (proto-cole oAuth).Notez que votre site ne connaitrapas les identifiants de l’internaute.

Sécurisez automatiquementvos sites, sans avoir à coder!

Vous connaissez déjà la version 21 ?Il existe un document tech-nique illustré (92 pages encouleurs) consacré aux 922Nouveautés de la version 22.Version imprimée dispo-nible sur simple demande; version PDF disponible surwww.pcsoft.fr .SÉCURITÉ: ACCÈS PAR MOT DE PASSE

Page 17: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

32 • WEBDEV 22 : Développez 10 fois plus vite

Le WLangage, le langageL5G intégré de WEBDEV,permet de décrire tous les

traitements que vous dési-rez. Vos équipes n’auront

pas à se plonger dansHTML ni Javascript. Le

WLangage facilite lap r o g r a m m a t i o n

Internet et Intranet.

LA PROGRAMMATIONINTERNET N’A JAMAIS

ÉTÉ AUSSI FACILELe langage L5Gde WEBDEV (leWLangage, déjàutilisé par descentaines demilliers de pro-f e s s i o n n e l s )apporte unconfort qui per-met de dévelop-per beaucoupplus vite tous lestypes de traite-ments.

COMMENT PROGRAM-MER LES TRAITEMENTS ?Sous Internet le code est donc de deuxtypes :• le code qui s’exécute sur le serveur de

l’hébergeur (à saisir sous le bandeaujaune - voir ci-contre)

• le code qui s’exécute sur le naviga-teur de l’Internaute (à saisir sous lebandeau vert - voir ci-contre).

LE RADNotez que le code (et les pages)peuvent être automatiquementgénérés par le RAD et les assis-

tants de WEBDEV, à partir d’unedescription de données («une ana-lyse»).

GÉNÉRATION AUTOMATIQUE DE HTMLET JAVASCRIPTUn Navigateur ne comprend que lecode HTML et Javascript.Le code WLangage destiné à s’exécu-ter sous le Navigateur génère doncautomatiquement le code HTML etJavascript optimisé correspondant. Le code est immédiatement fiable,beaucoup plus concis, et plus facile àmaintenir.

GÉNÉRATION AUTOMA-TIQUE DE CODE PHPLes pages créées et le code peuventêtre transformés automatiquement encode PHP. Sans connaître PHP, vouscréez facilement des sites dynamiquesPHP ! (voir page 49).

CONNAISSANCE DEJAVASCRIPT ET HTML:INUTILEIl est inutile de connaître Javascript ouHTML ou PHP pour développer avecWEBDEV. Toutefois, si pour une raison quel-conque vos équipes désirent utiliser ourécupérer du code Javascript, HTML ouPHP, WEBDEV le permet évidemment.

AJAX AUTOMATIQUE-MENTPour qu’un traitement soit «Ajax», ilsuffit de cliquer sur un bouton (voirpage 33).

IMPOSSIBLE D’ÊTRE BLOQUÉLe L5G de WEBDEV est extrêmementpuissant. Vous ne serez jamais bloqué. Par ailleurs, il est possible de saisir ducode HTML, Javascript ou PHP, des ani-mations CSS3, de l’ASP ou du JSP...

LE WLANGAGE: PUISSANT, INTUITIFLe WLangage est disponible en françaiset en anglais. Le français permet une programmationintuitive, et une maintenance facile. Les ordres du WLangage (hLitPremier,hLitSuivant, SSLActive, hTrouvé, etc...)sont des ordres faciles à comprendre,sans aucun effort particulier. Et facilesà maintenir.Le WLangage permet une grandevitesse de programmation, et unemeilleure qualité du code.Un ordre du WLangage correspondsouvent à des dizaines (ou des cen-taines) de lignes de code en Javascript:vos équipes développent plus vite.

EXEMPLE : ENVOYER UNEMAILIl est facile d’envoyer un email.L’ordre s’appelle simplementeMailEnvoieMessage.Vous pouvez joindre des pièces atta-chées. L’envoi de mails s’effectue entâche de fond.

INTÉGRATION OPTIMALEDES BASES DE DONNÉESLe WLangage est optimisé pour mani-puler les données de tables: la com-

plétion automatique propose les nomsde tables et de colonnes.

GESTION PUISSANTE DESCHAÎNESLe WLangage propose une gestion dechaînes vraiment très performante! Elle permet une programmation plusrapide:• taille dynamique gérée automati-

quement • concaténation par l'opérateur «+»• conversion automatique «numérique

vers texte» et réciproquement• fonctions évoluées de recherche• tests multiples (CASE, SELON,...).

PROFILER: OPTIMISEZ LAVITESSE DE VOTRE CODEWEBDEV 22 est livré avec un «profi-ler», outil qui mesure la vitesse dechaque instruction de votre code.

JQUERY

WEBDEV 22 permet d’appeler despoints d’entrée de la bibliothèquejQuery. Cette fonction s’utilise en codenavigateur, elle est donc utilisable danstous les sites, y compris les sites sta-tiques.

BOOTSTRAP WEBDEV 22 permet d’intégrer desfonctionnalités Bootstrap.

ANGULAR JS WEBDEV 22 permet de s’interfaceravec des pages créées avec Angular JS.

JSON Le WLangage interprète(sérialise et désérialise)nativement JSON.

LA POO (OBJET)La Programmation Orientée Objet estsupportée par WEBDEV: héritage mul-tiple, constructeur, destructeur, public,privé, polymorphisme... L’utilisation dela POO est optionnelle, et peut êtremixée avec la programmation tradi-tionnelle (voir p 34).

Le WLangage apporte unL5G structuré audéveloppement Internet. Les outils de productivitélivrés sont un réel atout.

PROGRAMMATION DE 5ÈME GÉNÉRATION :PUISSANCE ET FACILITÉ

Pour consulter laliste exhaustivedes ordres duL5G, consultezl’aide en ligne deWEBDEV 22 surle site de PC SOFT

www.pcsoft.fr • 33

L’éditeur de code participe àla puissance et à la produc-tivité de WEBDEV.La saisie du code est intui-tive, plus rapide et se faitdirectement dans le champconcerné.

UNE MÉTHODE RÉVOLU-TIONNAIRELa technologie exclusive de l’éditeur decode participe à la création d’un codede qualité, et permet de développerplus vite.

LA MÉTHODE WEBDEVLes événements les plus utiles sur unchamp sont proposés par défaut dansl’éditeur de code, et matérialisés par unbandeau de couleur.

Par exemple, pour un champ de type«saisie», les événements par défaut sont:initialisation du champ, entrée dans lechamp, sortie du champ, à chaquemodification. Il suffit de taper le codecorrespondant dans la partie adéquate.Le code qui s’exécutera sur leNavigateur peut être saisi enWLangage, ou en Javascript, au choix.

CODE SERVEUR ET CODENAVIGATEURIl suffit de saisir votre code sous le ban-deau correspondant. Le bandeau jaune indique que le codesaisi est du WLangage et s’exécuterasur le Serveur.

Le bandeau vert indique que le codesaisi est du WLangage et s’exécuterasous le Navigateur.Le bandeau rose signifie que le codesaisi est du PHP. Le bandeau bleu signifie que le codesaisi est du code Javascript. C’est visuel et très intuitif !

TOUS LES ÉVÉNEMENTSSONT GÉRÉSLes événements moins habituels sontproposés par les icones en bas àgauche de la fenêtre. Tous les événements sont gérés: clic,double clic, touche pressée, touchemaintenue enfoncée, touche relâchée,bouton de souris enfoncé, bouton desouris relâché, souris en dehors de l’ob-jet, souris au-dessus de l’objet, perte defocus, prise de focus, modification,

sélection du contenu du champ, appelde l’aide, chargement, envoi du for-mulaire,...

COLORATION SYNTAXIQUEPour un plus grand confort et unemeilleure lisibilité, chaque mot estcoloré en fonction de son type.

ENROULÉ/DÉROULÉL'éditeur de code dispose d’un méca-nisme confortable d’enroulé/dérouléde code: vous masquez le code connuet testez pour plus de lisibilité!

UMLWEBDEV 22 supporte UML et créeautomatiquement le diagramme declasses en rétro analysant le code.Inversement, un diagramme UMLgénère le code des classes.

GESTIONNAIRE DESOURCESWEBDEV 22 est livré en standard avecun outil de versionning, le Gestionnairede Sources collaboratif (GDS, voir page46).

AJAXC o n c e r n a n tAJAX, il suffit de cliquer sur le bouton«Ajax» de la ligne pour utiliser cettetechnologie (voir p 35).

COMPLÉTION AUTOMATIQUELors de lafrappe d’unordre, le typede paramètreattendu estproposé dansune liste déroulante. Une bulle d’aideapporte également des informationsprécieuses sur chaque paramètre de lafonction utilisée.

ERREURS EN TEMPS RÉELSi une erreur desyntaxe estcommise, ellesera détectée sous l’éditeur de code,avant même la compilation du projet !Les erreurs sont matérialisées par unsouligné rouge sous la fonction dont lasyntaxe est incorrecte.

TEST UNITAIRE DE PRO-CÉDURES ET DE CLASSESLe processus de création des tests esttotalement intégré à l’environnement.Pour tester directement une procédureou une classe, il suffit d’utiliser le menucontextuel qui propose de créer (etensuite de rejouer) un nouveau testunitaire.

CODE COVERAGEL’éditeur de code indique également le«Code Coverage» du projet: chaqueligne de code qui n’a jamais été exé-cutée est signalée.

L’éditeur de code participe àl’ergonomie générale, et à lafacilité légendaire deWEBDEV 22.

Initialisation du champ

L’EDITEUR DE CODE VOUS ASSISTE

Entrée dans le champ (onfocus)Modification en sortie (onchange)

Sortie du champ (onblur)

Page 18: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

WEBDEV®

DÉBOGUEUR PUISSANT ETCONVIVIALPour mettre au point les sitesInternet interactifs, le débo-gueur permet l'exécution en

pas à pas d’un traitement dusite, en visualisant ou en modi-

fiant le contenu de variables choi-sies.

DES FONCTIONNALI-TÉS AVANCÉES

Le débogueur est très puissant et pro-pose des fonctionnalités avancées:• exécution en pas à pas, saut de fonc-

tions, sortie immédiate de fonction,exécution jusqu’à une ligne donnée,...

• autostop, qui arrête l’exécution àchaque changement de valeur d’unevariable ou d’une expression définie

• visualisation automatique (débran-chable) de toutes les variables de laligne en cours d’exécution («Watch»)

• visualisation d’expressions contenant

des fonctions• affichage de la valeur de la variable sur-

volée par bulle• résultat en décimal ou hexadécimal• pile des appels visualisée en temps réel• trace du code exécuté• 32 et 64 bits • ...

DÉBOGAGE À DISTANCEIl est possible de déboguer un serveur àdistance: vous déboguez par exemple leserveur en place chez l’hébergeur sansvous déplacer.

DÉBOGUEUR PHP ET AWPLe débogueur fonctionne en mode«AWP» (le mode des contextes semi-automatiques). En PHP, il est possible dedéboguer l’application initiale.

Le débogueurpermet un gain

de tempsprécieuxlors des

phases de miseau point. Il devient viteindispensable !

Le développe-ment d’un sited y n a m i q u e(relié à des

données, etcomportant des

t r a i t e m e n t s )nécessite une

phase de pro-grammation.WEBDEV 22 estouvert à toutesles méthodes dedévelopement.

PROGRAMMATIONPROCÉDURALE OU POOLa programmation avec WEBDEV 22s'effectue en WLangage, le célèbreL5G, réputé pour sa puissance et sonintuitivité.Les développeurs ont le choix entreprogrammation procédurale etProgrammation Orienté Objet (POO).L'approche objet garantit l'évolutivitédu code complexe et facilite sa main-

tenance future.

POOWEBDEV permet un développementorienté objet si vous le souhaitez.Les classes et les syntaxes duWLangage autorisent une program-mation orientée objet moderne etefficace. Les méthodes des classes de basepeuvent être redéfinies visuellementdepuis l'explorateur de projet; lesméthodes virtuelles sont généréesautomatiquement.La gestion de la mémoire des ins-tances est totalement automatiquedans la très grande majorité des cas,pour les allocations comme pour leslibérations.

TOUTES LES NOTIONS DELA POOLes notions suivantes de la POO sontsupportées: • Classes• Classes abstraites• Héritage, héritage multiple

• Réflexion• Surcharge (dynamic dispatch)• Méthodes abstraites et virtuelles

(polymorphisme)• Propriétés (get et set)• Constructeur• Destructeur• Encapsulation des données : public,

privée, protégée• Libération automatique• Opérateur "est un" et downcast• Référencefaible• Association• ...

XML,JSON, ...Le WLangage est optimisé pour trai-ter les documents XML et JSON.Les structures des documents sontimportées directement dans leWLangage.L’éditeur de code propose alors la sai-sie assistée sur les noms des élémentsdes documents, la coloration syn-taxique,...

Le débogueurapporte uneproductivité

professionnelle

LA POO

DÉBOGUEUR INTÉGRÉ: MISE AU POINT FACILE DE VOTRE CODE

34 • WEBDEV 22 : Développez 10 fois plus vite www.pcsoft.fr • 35

Ne ré-inventezpas la roue,ré-utilisez !

LA FACILITÉ DE WEBDEVAU SERVICE DESWEBSERVICESWEBDEV 22 permet de consommer,créer, déployer et héberger facilementdes Webservices SOAP et REST.

CONSOMMATION FACILEDE WEBSERVICES RESTIl est très facile d’utiliser desWebservices REST depuis WEBDEV. Il suffit d’appeler les URL duWebservice.Les données renvoyées par leWebservice peuvent être au formatJSON. Les données JSON sont mani-pualables nativement par WEBDEV.

CONSOMMATION FACILEDES WEBSERVICES SOAPIl est très facile d’importer desWebservices SOAP dans WEBDEV. Il suffit d’importer la description WSDLdu Webservice. Les procédures et les types duWebservice apparaissent automatique-ment comme des types et des fonc-tions utilisables dans le projet.Ainsi les éléments du Webservice appa-raissent dans le projet comme des élé-

ments à part entière du projet.

TOUT EST GÉRÉLa gestion des Webservices est trèspuissante; voici une liste de quelquesfonctionnalités gérées: • Résultats de type tableau (SoapArray) • Databinding Webservices • Inclusion de Webservices• Attributs dans les wsdl• Réponses et En-têtes multiples• Signature du message• WS-Addressing• Cyclage dans les schémas• Authentifications SPNEGO

CREATION FACILE DEWEBSERVICES RESTIl est facile de créer un Webservice detype REST. Un éditeur spécifique est fourni pourcréer les verbes et définir les para-mètres ainsi que les procédures àappeler dans le Webservice REST.

CRÉATION FACILE DEWEBSERVICES SOAPLa création de Webservices SOAP s’ef-fectue facilement: il suffit de définir lacollection de procédures qui constituel’interface du Webservice.

Le fichier de description WDSL estgénéré automatiquement.

DÉPLOIEMENT FACILE DEWEBSERVICESLes Webservices sont hébergés sur unemachine disposant d’un serveur d’ap-plication WEBDEV. La procédure d’installation est auto-matiquement générée. L’administration s’effectue depuis l’ad-ministrateur WEBDEV comme un site«classique», tous les outils sont dispo-nibles: statistiques de fréquentation,etc (voir administration des sites p 54).

HÉBERGEMENT FACILEDE WEBSERVICES

La technologie d’hébergement estbasée sur le robuste serveur d’applica-tion standard de WEBDEV. Les serveurs peuvent être situés dansvos locaux (on premise), chez un héber-geur ou dans le cloud (PCSCloud parexemple).Les Webservices peuvent être consom-més par tout type d’applications,créées en WINDEV, WEBDEV, WINDEVMobile ou avec tout autre langagetiers.

Dans un site Web dyna-mique, «AJAX» permet aunavigateur de ne rafraîchirque la partie modifiée d’unepage.

SANS AJAX...En Web traditionnel, lorsque l'applicationsouhaite modifier un seul élément dansune page affichée (par exemple un prix,une liste de véhicules...), le serveur doitrenvoyer la page entière sur la machinede l'internaute.Cela charge le serveur, occupe de la«bande passante», produit un effetvisuel de «repaint» sous le navigateur del'internaute, et l'affichage peut être lentpuisque le navigateur doit réinterpréteret réafficher la page entière...

AVEC AJAX...Avec la technologie AJAX, point centraldu «WEB 2.0», il devient possible den'envoyer sur la machine de l'inter-naute «que» les données modifiées,sans rafraîchir la totalité de la page.

Les avantages sont multiples : le ser-veur est moins sollicité, les informationsqui circulent sont de taille réduite, l'af-fichage pour l'internaute est immédiatet sans effet visuel.

UTILISER AJAX DANS UNSITE WEBDEV: 1 CLIC !

Vous n'avez rien à programmer. Vous bénéficiez automatiquement deAJAX.Vous continuez à programmer en L5G(WLangage). WEBDEV s'occupe detout !Un choix «AJAX» apparaît dans la barrede titre de l'éditeur de code. Si vousdésirez activer AJAX sur le traitement,

il suffit de cliquer ... sur le bouton«AJAX».Le libellé change et devient «AJAXactivé».

LA SÉCURITÉDe par sa technologie, AJAX permet lelancement de procédures et traite-ments «serveur» depuis un appel dunavigateur. Pour sécuriser vos sites, lestraitements WEBDEV sont protégés detout appel illégal (tentative de détour-nement de session,...).

LA TECHNOLOGIE AJAXDE WEBDEV SUR LESCHAMPSSuite à une requête Ajax sur une page,tous les champs concernés sont auto-matiquement mis à jour en fonction deleur valeur sur le serveur. Il n’y a rien à coder.

LES WEBSERVICES SOAP & REST: FACILE

IMPLÉMENTEZ AJAX EN 1 CLICAjax

sans code supplémentaire.

Page 19: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

WEBDEV 22 permet d’intégrer facile-ment des snippets Bootstrap, des com-posants JQuery.UI, des composantsAngular.JS dans une page. Les res-sources Web externes (composantAngular JS, Snippet Bootstrap...) sontgénéralement livrées sous forme detrois composantes :

• un code HTML• un code CSS• un code JavaScript.Il peut arriver que des fichiers dedépendances soient également livrés(images,...).WEBDEV 22 propose une méthode trèssimple pour intégrer n’importe quelle

ressource Web externe dans un siteWEBDEV. Il suffit d’utiliser le champ«composant Web», et d’y importer lescodes du composant.Pour dialoguer avec le composantexterne, il suffit d’initialiser, de lire etd’écrire des variables Javascript de laressource externe en WLangage.

36 • WEBDEV 22 : Développez 10 fois plus vite

ANGULAR JS, SNIPPET BOOTSTRAP, JQUERY UI...

WEBDEV 22 suit cette tendance forte.Le code d’un site Web est différenciéentre le code «Serveur» et le code«Navigateur».La tendance actuelle est de déporter lemaximum de traitementspossibles sur le navigateur: leserveur est ainsi déchargé, ily a moins de données trans-férées, donc l’expérience uti-lisateur est bien plus fluide.

En version 22, WEBDEV étend sensi-blement les possibilités du WLangageen mode «Navigateur».Il devient ainsi possible de créer beau-coup plus de traitements qui s’exécu-

teront directement sur le navigateur.Le site est ainsi plus réactif, plus rapide,consomme moins de bande passante,sollicite moins le serveur.

CODE WLANGAGE NAVIGATEUR

www.pcsoft.fr • 37

WEBDEV 22 permet de créer desApplications Web contenues dans uneseule page (Single Page Application,SPA).Il suffit d’utiliser lanotion de plan. Unplan est un ensemblede champs de la page. Chaque plan peut êtrevisible ou non.Le changement deplan peut être réalisédepuis n’importe queltraitement de champ:• clic sur un bouton• code de la page enfonction de certainscritères...Ainsi l’apparence et lecontenu de la pageévoluent au fil de lanavigation sans aucunretour au serveur.Les données affichéesdans un plan sont ini-tialisées automatique-ment au chargementde la page quicontient le plan.Pour rafraîchir lesdonnées d’un plan

déjà affiché (comme une quantité enstock), il existe plusieurs méthodes:• appel d’un traitement Ajax

• appel d’un Webservice (par un timerpar exemple)

• usage d’un WebSocket.

SPA: SINGLE PAGE APPLICATION(TOUT UN SITE DANS UNE MÊME PAGE)

L’utilisation de Websockets est la seulefaçon de notifier le navigateur sansqu’il en fasse la demande.WEBDEV 22 propose dans ce but unefamille de fonctions WLangage navi-gateur: les fonctions Socket.Ce jeu de fonctions permet de gérer latransmission d’informations via uneWebsocket.La fonction SocketConnecte permetde se connecter au serveur de socketset d’ouvrir le canal de communication.La fonction SocketEcoute permet dese mettre à l’écoute de manière asyn-chrone de la socket ouverte, et d’indi-quer quel code WLangage sera appelélors de la réception d’un message.La fonction SocketEcrit permet elled’envoyer une notification au serveur,par exemple d’effectuer un calcul.L’usage de Websockets permet d’en-voyer (de «pusher») des données à unsite

WEBSOCKETSERVEUR PUSH

Page 20: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

38 • WEBDEV 22 : Développez 10 fois plus vite

WEBDEV AUSERVICE DESAP

SAP R/3 est un ERPtrès utilisé. Un site réa-lisé en WEBDEV 22 peutaccéder aux donnéesd’un ERP SAP en natif(via BAPI). L’accès auxdonnées est directementréalisé par SAP, la traça-bilité des accès est main-tenue, la gestion despriorités également.

Une famille de fonctions WLangagepermet d’établir une connexion(avec authentification) et d’appelerdes BAPI en passant des para-mètres.

Un assistant permet d’importerautomatiquement les structuresmanipulées.Il est inutile d’installer le moduleSAP GUI.Toutes les fonctionnalités de WEBDEVsont disponibles.

DES REQUÊTES SUR SAPLe générateur d’états (voir p 45) peutêtre utilisé pour créer des requêtes surdes données contenues dans une baseSAP.

ACCÈS NATIF À LOTUSNOTES

Les sites WEBDEVpeuvent accéder ennatif à Lotus Notes.L’accès aux mailsprésents sur le ser-veur de mails deLotus Notes(Domino), en envoiet réception, eststandard en modenatif. L’accès auxcontacts, aux ren-dez-vous, auxtâches et aux docu-ments présents surle serveur est facile.

Cela permet de réaliser des Intranet quis’intègrent totalement au S.I. en place.La sécurité habituelle de LotusNotes est bien entendu respectée,via le certificat de Lotus.

ACCÈS NATIF À OUTLOOKLes sites WEBDEV peuvent accéder ennatif à Outlook. L’accès aux mails deOutlook, en envoi et réception, eststandard. L’accès aux contacts, aux rendez-

vous et aux tâches est facile, en lec-ture et en écriture. Cela permet de réaliser des Intranet quis’intègrent totalement au S.I. en place.

ACCÈS NATIF À GOOGLEAPPSIndépendamment des possibilités deconnexion aux applications Google àtravers le Mashup, WEBDEV 22 pro-pose un accès natif aux données desapplications Google: Google Agenda,Google Maps, Google Contacts,Picasa...

Cela permet de récupérer des donnéesqui seront réaffichées dans un formatpersonnalisé sur le site.

Voici un exemple de code qui liste lescontacts de Gmail et les affiche dansune table WEBDEV.

ACCÈS NATIFS: GOOGLE APPS, SAP, LOTUS NOTES...

Exemple d’accès natif àGoogle Agenda, pour ensuiteêtre utilisé directement dansune page WEBDEV 22

Connexion est une gglConnexionConnexion.Email=”[email protected]”Connexion.MotDePasse=”motdepasse”GglConnecte(Connexion)Contacts est un tableau de gglContactContacts=GglListeContact(Connexion)TableAffiche(TABLE_Contacts)

www.pcsoft.fr • 39

SaaS (acronyme de Software As AService) est un modèle de livraison desolution informatique.Les clients ne payent pas pour possé-der le logiciel en lui-même mais pourl’utiliser. Les données sont stockées sur les ser-veurs du fournisseur de l’application, etnon plus en local dans la société.

SAAS FACILELa version 22 de WEBDEV fournit lesoutils nécessaires à la mise en lignefacile de solutions SaaS: commerciali-sez vos sites en SaaS grâce aux outilsfournis.L’administrateur SaaS permet dedécrire les autorisations d’utilisation. La gestion des comptes clients permetde définir les règles d’utilisation du site:authentification, nombre deconnexions autorisé, plage deconnexions,...Cette gestion s’effectue directementdepuis l’interface de l’administrateur,ou via des fonctions WLangage.A l’utilisation, le site vérifie l’autorisa-tion de connexion et les droits de l’uti-lisateur via un jeu de fonctionsWLangage.

ADMINISTRATEUR SAASLe logiciel administrateur peut fonc-tionner avec ou sans interventionhumaine. Il permet de créer descomptes sociétés, des comptes utilisa-teurs en fonction d’un paramétrage ini-tial, sans intervention humaine.L’interface est proposée en mode Web.

API D’ADMINISTRATIONSAASLes fonctions WLangage disponiblespour gérer les comptes sont (liste nonexhaustive):• création et suppression de comptes • modification de comptes: ajout d’uti-

lisateurs, de plages d’utilisation, denombre d’utilisateurs,...

• initialisation d’une base de donnéespar clonage d’une base de référence

• définition de la connexion à la basede données...

API AUTHENTIFICATIONSAASParmi les éléments à gérer dans un siteproposé en SaaS, vous trouverez:• Connexion et déconnexion• Identifiant de société • Mot de passe société

• Identifiant d’utilisateur • Mot de passe utilisateur• Vérification d’adresse IP• Nombre de connexions maximal• Durée de connexion maximale• Plage autorisée de connexion, etc...

GESTION PERSONNALISÉE DEVOTRE TARIFICATIONLa gestion de la tarification est assuréefacilement par un simple paramétrage.

LE SAAS C’EST FACILEAVEC WEBDEV 22 !

Le SaaS facile

SAAS : CRÉEZ FACILEMENT DES APPLICATIONSEN MODE SAAS

Page 21: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

Lorsque l’on crée un site dynamique ou uneapplication Web de zéro, il est nécessaire dedéfinir les tables de données à gérer. C’estfacile avec WEBDEV 22.Et si les bases de données existent déjà,WEBDEV les utilise directement. La méthode visuelle de WEBDEV décrit l'organisation desdonnées de manière graphique. Merise et UML sont inclusesdans l’environnement. Notez que WEBDEV fonctionne avectoutes les méthodes d’analyse.

DÉFINIR UNE NOUVELLE STRUCTURE Si vous devez définir de nouvelles tables de données,détaillons un exemple simple mais représentatif de définitionde nouvelle structure: la définition de tables de «Produit» etde «Commandes».

1. Créons la table «PRODUIT»: il suffit de spécifier son nom,et quelques renseignements généraux.

2 Créons la structure de la table: chaque colonne est défi-nie, ou récupérée du dictionnaire des données.

3 On crée ensuite de la même manière latable «COMMANDE». Les CLIENTS passent des commandes. Il faut donc relier ces 2 tables dans l’analyse.Après avoir cliqué sur l'outil «liaison» duruban, il suffit de tracer un lien avec la sourisentre ces 2 tables.

4. WEBDEV 22 pose alors les questions en langage naturelpour déterminer automatiquement le type de liaison entre les2 tables.

Les questions sont d’une simplicité enfantine. Par exemple ici:

En fonction des réponses à ces questions, WEBDEV détermineles cardinalités correctes, et déduit la nécessité éventuelled’une table de relation.

5. WEBDEV demande ensuite les règles à appliquer en casde suppression ou de modification (intégrité référentielle).

6. Voilà, les tables sont reliées, le travail est terminé.L’éditeur de requêtes saura trouver les jointures automati-quement, et chaque éditeur de l’environnement saura mani-puler automatiquement les données...

Une table de liaison a été automatiquement créée.

Il ne reste plus qu'à (éventuellement) imprimer le dossier, etgénérer les pages et le code avec le RAD, ou débuter un déve-loppement... C'est aussi simple que cela.

40 • WEBDEV 22 : Développez 10 fois plus vite

LE DOSSIER TECHNIQUED’UN CLICWEBDEV 22 permet d’éditer le dossier

d’analyse et de programmation completdu site. Le dossier est réalisé par rétroanalyse de l’existant, donc toujours à

jour. Un dossier peut contenir plusieurscentaines de pages, être édité en PDF, enHTML, sous un traitement de textes...

Chaque «produit» a au mo ins une «commande»: oui ou non?Chaque «produit» peut avo ir p lusieurs «commandes»: oui ou non?Etc...

Interdire la suppression d’un Produit qui a une Commande: oui ou non?Etc...

MODÉLISER UNE BASE DE DONNÉES :FACILE (UML, MERISE,...)

IMPORTERDES

DONNÉESEXISTANTESSi vous possédez

déjà une analyse oudes données, vous

les intégrez automa-tiquement dans l’environnement

(importation de la description des

tables, colonnes etrelations). Un simple«drag & drop» de la

structure dans l’éditeur d’analysescrée les structures !

www.pcsoft.fr • 41

TOUTES LES BASES DE DONNÉES: MYSQL,ORACLE, AS/400, SQL SERVER, MONGO DB...

Une descriptionde structures dedonnées sousWEBDEV

Un site dynamique ou uneapplication Web utilise desdonnées. WEBDEV 22 accèdeà toutes les bases de don-nées du marché. WEBDEV est ouvert, il per-met de ré-utiliser et decohabiter avec un existant.

TOUTES LES BASES DEDONNÉES SONT SUPPORTÉES (LISTE NONEXHAUSTIVE)WEBDEV peut lire et écrire dans toutesles bases de données.Parmi ces bases, on trouve les suivantes(voir tableau ci-contre svp).

HFSQL, UNE PUISSANTEBASE DE DONNÉES SQLEN STANDARDWEBDEV est livré avec HFSQL, unepuissante base de données SQLClient/Serveur, déjà utilisée sur des mil-lions de sites. HFSQL est déployable librement avecvos sites WEBDEV.HFSQL est décrit en détail page 42.

ACCÈS EN MODE NATIF WEBDEV peut accéder en mode natifà MySQL, Oracle, SQL Server,PostgreSQL, SQLite, AS/400, DB2,Informix, Sybase directement (modulesdisponibles séparément). L’installation de ces accès natifs estextrêmement simple (un fichier detaille réduite). Les champs de type BLOB ou Long Rawsont supportés.Les performances d’accès sont remar-quables.

SUPPORT NATIF DESBASES «AS/400» ET

«ISERIES»WEBDEV accède àl’AS/400 directe-ment (module dis-ponible séparé-ment), sans driverODBC, OLE DB etsans ActiveX.WEBDEV saitrécupérer etexporter desDDS, lancer

des commandes CL,gérer une Dataqueue,...L’intégration à l’environnement esttotale, et la vitesse est époustouflante.

Demandez la brochure spécifique !

BIG DATAWEBDEV peut accéder aux donnéesstockées en Big Data, comme Hadoopet Mongo DB.

TOUTES LES BASES DEDONNÉES VIA ODBC OUOLE DBWEBDEV 22 accède à toute base dedonnées possédant un driver ODBC ouOLE DB.

SCRIPT SQL = ANALYSEWEBDEVUne analyse définie sous WEBDEVpeut être convertie en script SQL pourcréer de nouvelles bases SQL, et toutscript SQL peut être converti automa-tiquement en analyse WEBDEV pourexploiter un existant. Cela offre une ouverture totale.La récupération des structures exis-tantes s’effectue par un simple«drag&drop» vers l’éditeur d’analyses.

LES PROCÉDURES STOCKÉESSi la Base de Données tierce supporteles procédures stockées, celles-ci sontaccessibles par des applications écritesavec WEBDEV.

LA PROGRAMMATIONEST IDENTIQUE QUELLEQUE SOIT LA BASE DEDONNÉESQuelle que soit la base de données,vous pourrez utiliser indifféremment laprogrammation par SQL ou par lesordres du L5G de WEBDEV, leWLangage (hLitSuivant,...).Cela offre encore fois une grandeouverture, et la possibilité de changerde base de données très facilement.

VOUS UTILISEZWINDEV...Si vous utilisez WINDEV, notez quevous pouvez partager le projet et seséléments (code, classes, fenêtres,requêtes, états, ...) entre les 2 environ-nements, et exporter vos applicationsvers WEBDEV.

WEBDEV 22 permet decréer un nouveau site et sesdonnées, ou de créer dessites reliés à des donnéesexistantes, quelle que soit laBase de Données.

- HFSQL*

- MySQL*

- Oracle**

- Informix**

- SQLServer**

- PostgreSQL*

- MariaDB*

- SQLite*

- IBM DB2**

- IBMAS/400**

- Sybase**

- Netware SQL- Ingres- Progress**

- XML*

- Access- xBase*

- ASCII*

- Excel*- Etc...

*: connecteur natif standard **: connecteur natif en option

Page 22: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

WEBDEV 22 gère toutes lesbases de données du mar-ché.En standard, WEBDEV estlivré avec une base SQL,HFSQL, à la fois très puis-sante, rapide et fiable.La diffusion du moteurHFSQL est gratuite.

WEBDEV GÈRE TOUTESLES BASESWEBDEV fonctionne avec toutes lesBases de Données du marché (voirpage 39).

UNE BASE DE DONNÉESÉPROUVÉE LIVRÉE ENSTANDARD: HFSQLHFSQL est le nouveau nomHyperFileSQL.HFSQL est livré en standard avecWEBDEV 22. Il s’agit d’une base de données fiableet robuste, utilisée sur des millions desites à travers le monde.

329 MILLIONS DE MILLIARDS DE LIGNES(ENREGISTREMENTS)...

HFSQL permet de manipuler simple-ment et en toute sécurité des volumesde données importants (jusqu’à 329millions de milliards de lignes). Vous envisagez sereinement la crois-sance naturelle des volumes de don-nées.

PARTAGE DES DONNÉESFACILE AVEC LE «BACKOFFICE»Les données du site peuvent facilementêtre partagées avec les applications«back office», par exemple pour trai-ter les commandes reçues, émettre lesBL et les factures, les ordres de prépa-ration... WINDEV est le complémentidéal à WEBDEV pour réaliser un BackOffice performant.

RÉPLICATION SITE / BACK OFFICELa réplication est souvent utile entre lesite et le back office.HFSQL gère la réplication de bases dedonnées et la réplication de serveurs,mono et bi-directionnelle, périodiqueou continue.La réplication peut être automatique,ou totalement personnalisée.

UNE VITESSE TRÈS ÉLEVÉEL’intégration totale des ordres, l’orga-nisation (automatique) des index per-

mettent des vitesses d’accès fabu-leuses. Cela donne de meilleurs tempsde réponse à votre site, que ce soit enInternet ou en Intranet.

UNE INTÉGRATIONTOTALEL’intégration du moteur à l’environne-ment de développement est totale.A tout moment, dans tous les éditeurs,vous disposez d’un accès immédiat àtoutes les informations concernant lestables et les colonnes. L’intégration Interface et base de don-nées permet une programmation plusfacile et plus rapide.

CONFIDENTIALITÉ: CRYPTAGE 128 BITSSur Internet, les données seront pré-sentes sur un serveur: il faut les proté-ger des tentatives d’accès illégales;c’est facile avec HFSQL. Le cryptage desdonnées et index est possible, pour unesécurité accrue.

FONCTIONNALITÉSAVANCÉESHFSQL propose les fonctionnalitésavancées: cluster, intégrité, journal,transactions, triggers, gestion automa-tique des accès concurrents, Unicode,maintenance à chaud (sans décon-nexion des utilisateurs)...

HFSQL : BASE DE DONNÉES SQL LIBRECLIENT/SERVEUR WINDOWS ET LINUX

iOSiOS

Ce Centre de Contrôle per-met d’administrer tous lesserveurs et toutes lesbases de données installéssur le réseau de votreentreprise ou à distancevia Internet. Ce centre permet égale-ment:• la visualisation et édition

des données• l’exécution directe de

requêtes• la gestion des comptes

utilisateur (groupes), desdroits, liste desconnexions en cours

• l’édition des statistiques

précises d’utilisation duserveur: postes,requêtes, journaux, logs,paramètres...

• déconnexion d’utilisateur• la gestion des transac-

tions: visualisation, annu-lation, ...

• la gestion des sauve-gardes (à chaud)

• la visualisation des blo-cages d’enregistrement

• les tâches planifiées• la réplication de serveurs• l’affichage du nombre de

lignes traitées• la gestion des clusters• ...

42 • WEBDEV 22 : Développez 10 fois plus vite

LE «CENTRE DE CONTRÔLE» HFSQL

www.pcsoft.fr • 43

FONCTIONNALITÉSCryptages 128 bits

Intégrité référentielle

Journalisation

Réplication

Transactions

Triggers

Unicode

Import Export

Cluster

Compression/Décompressiondes mémos à la volée

TECHNOLOGIESMaintenance automatique (SDD)

Gestion des accès concurrents

Reconnexion automatique

Zéro administration

Reprise après incident automatique

Déploiement automatique

Découvrez HFSQL danscette documentation de24 pages disponible surwww.pcsoft.fr

CLUSTER (FERME DE SERVEURS)Grâce à la fonctionnalité de cluster, unensemble de serveurs physiques apparaîtcomme un serveur unique aux clients.La défaillance éventuelle d’un serveur phy-sique ne provoque pas de défaillance desaccès à la base de données (haute disponi-

bilité, tolérance aux pannes).La charge d’accès lecture est répartie surl’ensemble des serveurs (répartition de lacharge en lecture).Lorsqu’un utilisateur est connecté à un ser-veur qui défaille, l’application ne sera pasdéconnectée, et sera automatiquementreconnectée à un serveur valide (bascule-ment automatique).

OUVERTURE AUX AUTRESLOGICIELSLes connecteurs natifs, les driversODBC et OLE DB fournis avec HFSQLpermettent de lire et écrire depuis desprogrammes ou applications tiers.

SQL ET WLANGAGEIl est possible d’accéder aux donnéesvia SQL ou par les fonctions puissantesdu WLangage. Dans un même pro-gramme, commandes SQL et com-mandes WLangage peuvent êtremixées.

LE CODE PEUT ÊTREGÉNÉRÉ !La programmation est très facile, trèsrapide et très fiable. Le code peut êtregénéré automatiquement lors des créa-tions de pages par le RAD WEB!

SÉCURITÉ : «SQLINJECTION» IMPOSSIBLEIl est possible de créer des requêtesparamétrées, ce qui interdit lesattaques de type « sql injection » auserveur.

RECHERCHE «FULL TEXT» La recherche «full text» permet larecherche de chaînes de caractères trèsrapide dans les données. L’index gère les textes enrichis (RTF,HTML), pour ignorer les balises de cesformats lors de l’indexation.Les résultats sont proposés selon unordre de pertinence («ranking»).

SAUVEGARDE À CHAUDIl est possible de déclencher une sau-vegarde d’une base de données alorsque la base de données est utilisée. Il peut y avoir des accès en cours (lec-ture, écriture, exécution de requêtes,...)à la base de données. La cohérence desdonnées sauvées est assurée.La sauvegarde peut être déclenchéepar programmation (à heure fixe parexemple) ou par action du DBA. Il est également possible d’effectuerdes sauvegardes différentielles.

INSTALLATION ETCONFIGURATIONFACILESHFSQL est immédiat à installer, sans

aucune manipulation. De même, l’ad-ministration des bases de données estautomatique. La gestion de l’évolution des structuresde base de données est automatique-ment gérée (technologie SDD).

DÉPLOIEMENT HFSQL : GRATUITL’utilisation de HFSQL peut représenterdes économies de plusieurs centainesde milliers d’Euros en déploiement (etencore plus dans le cas de déploiementde sites Intranet). Un avantage à ne pasnégliger.

HFSQL Client/Serveur est lemeilleur allié de vos sites !

Page 23: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

L’éditeur permet de créer automatiquementdes requêtes sur des tables, requêtes simplesou complexes. Cela simplifie encore la pro-grammation: pages, tables, zones répétées,combos, états... pourront s’appuyer sur lesrequêtes.

INUTILE DE CONNAÎTRE SQL POURCRÉER DE PUISSANTES REQUÊTESGrâce à l’éditeur visuel, il suffit de choisir les colonnes à inté-grer, de saisir les conditions de sélection à l’aide de l’assis-tant, et la requête est générée.Le code SQL généré par l’éditeur de requêtes est bienentendu modifiable.Les requêtes s’exécutent sur HFSQL (Classic, Mobile etClient/Serveur), ainsi que sur toutes les autres bases de don-nées.Il est possible de mixer du code WLangage (ordres hLit*) avecdes requêtes.

DES REQUÊTES VISUELLESLa requête est également générée en langage naturel au furet à mesure de vos choix dans l’éditeur (ou en SQL, à votrechoix).

L’éditeur de requêtes

� Le code SQL généré automatiquement

Une fois validée, la requête apparaîtra sous une forme degraphe synthétique dans l’environnement, ce qui affineencore sa compréhension pour des évolutions futures.

� La requête définie, celle-ci est visualisée.

EXÉCUTION OPTIMISÉEAvec HFSQL, le choix des index les plus discriminants seraeffectué lors de l’exécution, en tenant compte du poids réelde chaque index dans la table. S’il manque des clés, l’envi-ronnement le signale immédiatement grâce à l’AAD (Aide AuDéveloppement).

DES REQUÊTES SUR REQUÊTES...Le résultat d’une requête peut être une table de visualisation,un état imprimé, voire même une table de type HFSQL. Unerequête peut utiliser comme source le résultat envoyé par uneautre requête.

DES REQUÊTES SUR TOUTES LES BASESLa source des données peut être une base HFSQL ou une basetierce: Oracle, SQL Server, DB2, AS/400, MySQL, Access...

L’éditeur de requêtes simplifie laprogrammation des accès à vos données.

44 • WEBDEV 22 : Développez 10 fois plus vite

� La requête se construit sous vos yeux en langage naturel

ÉDITEUR DE REQUÊTES VISUEL

www.pcsoft.fr • 45

Un éditeur d’états résout laproblématique du reportingsur Internet. Et il simplifie la création desimpressions. Son usage est double:• d’une part pour les appli-

cations Intranet• d’autre part pour la géné-

ration dynamique d’étatsqui seront envoyés à l’in-ternaute (facture PDF parexemple).

PDF EN STANDARDLes états peuvent être créés au formatPDF en standard (sans frais supplé-mentaires, sans module complémen-taire à acquérir ou à installer).

Un état PDF généré avec WEBDEV 22

PDF/A ET SIGNATUREIl est possible de créer des PDF/A(archive standard ISO), et des PDFsignés (RGS).

CRÉER UN ÉTAT: FACILE

Le choix du type d’état à créer

Un assistant est systématiquement pro-

posé pour générer des états de hautequalité; il pose les questions permet-tant de n'oublier aucun élément ! En Intranet, les états s’impriment surune imprimante accessible depuis leserveur.Pour Internet, l’état sera envoyé à l’in-ternaute sous une forme spécifique:HTML, RTF, PDF...

TOUTES LES SOURCES DEDONNÉESLes données utilisées pour un état peu-vent provenir de n’importe quellesource: HFSQL, Oracle, Access...,requête, fichier texte, zone mémoire,table de page,...

GESTION DES FONDS DEPAGE PDFL’éditeur d’états gère les fonds de pageet les formulaires destinés à être impri-més, par exemple les formulaires fis-caux.

INCLURE DES IMAGES:AUTOMATIQUEInclure des images (BMP, TIFF, PCX, GIF,JPEG, PNG...) dans des états est d'unesimplicité totale. L'image peut être fixe(logo,...), ou provenir du traitement oud’un fichier (photo du produit,...). Il est également facile d'imprimer desdessins créés par programme.

DU CODE SOURCE OÙVOUS DÉSIREZWEBDEV permet d'inclure tout codesource exécutable (WLangage) à toutendroit d'un état: vous pourrez ainsiréaliser les traitements les plus particu-liers, sans jamais rencontrer de blo-cages.

CODES-BARRES AUTOMATIQUES

WEBDEV 22 imprime automatique-ment les codes-barres (horizontale-ment ou verticalement). Les formats supportés sont: QR Code,UPCA, UPCE, EAN13, EAN8,CODE128, CODE39, CODE93,CODE11, intervaled 2 of 5, CODABAR,CB_MSI, Datamatrix, PDF417...

MAILEZ DES ÉTATSAvec WEBDEV il est facile de créer unétat dynamiquement (par exemple unefacture des produits que vient d’ache-ter l’internaute en ligne!) et de le mai-ler immédiatement (au format PDF parexemple).

DIFFUSION LIBRE DESÉTATSIl n’y a pas de redevances ou de royal-ties à verser pour diffuser les états avecvos sites WEBDEV.

Avec WEBDEV 22, les étatssophistiqués c’est vraimentfacile !

Un éditeurd’états

WYSIWYG, aupixel près

ÉDITEUR DE RAPPORTS : GÉNÉREZ DES PDF EN TEMPS RÉEL (FACTURES...)

Un état encours decréationsous l’envi-ronnement

Page 24: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

LA BASE DES SOURCESAvec le GDS (Gestionnaire De Sources

- appelé SCM en anglais), les élémentsdu projet sont regroupés dans une basede données. Avant d’être utilisé un élé-ment est extrait, après avoir été modi-fié, il est ré-intégré. Chaque membrede l’équipe utilise donc des éléments àjour.Le GDS stocke tous les éléments duprojet: procédures, collections, classes,pages, états, composants, requêtes,analyses, dépendances (images,...), ...

TOTALEMENT INTÉGRÉTotalement intégré aux différents édi-

teurs, l’outil de versionning (GDS) per-met le développement en équipe, laconservation de l’historique des modi-fications et des versions, la gestionsimultanée de plusieurs versions d’unmême site, et l’automatisation de lasauvegarde des sources.

Le gestionnaire de versions apporteconfort, souplesse, sécurité et vitesse. Dimensionné pour des équipes de 1 à100 développeurs, le GDS favorise etnormalise sans contrainte les échangesentre développeurs.

DE PUISSANTES FONCTIONNALITÉS• Le GDS est totalement intégré à l'en-

vironnement; par exemple le GDSpropose d’extraire l’élément lorsd’une modification.

• La base gère plusieurs projets; si plu-

sieurs projets utilisentun même élément,celui-ci peut être par-tagé.

• Un historique de tousles éléments (pages,codes, requêtes,...),depuis leur création, estmémorisé dans la base(une purge totale oupartielle est toujours pos-sible).

• Le projet estéga lementprésent surc h a q u emachine ded é v e l o p p e -ment; il estdonc possiblede développeravec lam a c h i n edéconnectée.

• La gestion desbranches estassurée.

• Le «Diff» (différences) entre2 éléments est disponible:source, page,...

• Vous pouvez consulter à toutmoment la liste des modifica-tions effectuées entre 2 ver-sions, par vous-même et/oupar d’autres développeurs ouwebmasters...

CONNECTÉ ET À DISTANCELe GDS permet un fonctionnement à

distance, connecté via Internet. Il estainsi possible de travailler sur un projetdepuis un site client, sans crainte deperte des modifications effectuées.Si vous êtes connecté (par exemple enADSL), les modifications que vouseffectuez seront immédiatement dis-ponibles pour les autres développeurs.

DÉVELOPPEUR ISOLÉMême en développant seul, l’outil de

versionning a de l’intérêt: il conservel’historique des modifications de tousles éléments, et agit donc comme unefonctionnalité de sauvegarde et d’ar-chivage des versions.La gestion des branches permet degérer facilement plusieurs versions d’unmême site.

46 • WEBDEV 22 : Développez 10 fois plus vite

TRAVAIL EN ÉQUIPEOUTIL DE VERSIONNING (GDS /SCM)

Développez

au bureau,

en déplace-

ment, etmême à la

plage !

Le GDS gèreautomatique-ment les «dépen-dances»: lesfichiers utilisés(images,...). LeGDS les détectedans le projet, etles sauvegardeavec le reste duprojet.

TABLEAU DEBORD DE PROJETLe Tableau de Bord permet

une vision globale du pro-jet, de son état d’avance-ment et de sa qualité. Des voyants alertent lorsquecertains seuils (paramé-trables) sont franchis:nombre de bogues, retardde planning... et indiquentles optimisations à effec-tuer.

POUR GÉRER LECYCLE DE VIEUn Centre de Contrôle est

une application de «super-vision» d’un aspect du cyclede vie d’un site.

Un Centre de Contrôlepermet d’avoir une visionglobale du domaine cou-vert, que ce soit en phasede développement, sur unsite d’exploitation, ouencore pour les aspects de mainte-nance et d’évolution.Les Centres de Contrôle que l’on utilisele plus dans le cadre d’un développe-ment Web sont les suivants:• Centre de Suivi de Projets• Centre de Contrôle d’hébergement.Les Centres de Contrôle sont totale-ment intégrés à l’environnement; lesinformations sont partagées.

ALM : CENTRE DECONTRÔLE DE SUIVI DE PROJETSCe centre permet le suivi des plan-nings, des tâches affectées et réaliséespar chaque membre de l’équipe, eteffectue le suivi de la gestion des «exi-gences» et de la qualité.

GESTION DES EXI-GENCES ET DES TÂCHESLe Centre de Suivi de Projets permet dedéfinir et suivre l’avancement des «exi-gences» de chaque version du projet.Une exigence correspond à une fonc-tionnalité à développer dans le logiciel.A chaque exigence peuvent être liéesdes tâches (tâche de développement,de test, de documentation,...), desbogues, des règles métier...

GESTION DE LA QUALITÉLa gestion de la qualité permet le suivides incidents de développement.

CENTRE DE CONTRÔLE D’HÉBERGEMENTLe Centre de Contrôle d’hébergementpermet de configurer un profil d’hé-bergement type, et de maintenir le ser-veur d’hébergement. La gestion des comptes et des serveursWeb est également effectuée à traversce centre (voir p 50 à 53).

La gouvernance de projetsdevient facile.

www.pcsoft.fr • 47

PILOTEZ VOS PROJETS: TABLEAU DE BORD &CENTRES DE CONTRÔLE

Le Tableau de Bord permet d’avoir une vision globale de l’état du projet.

Gérez le planning de l’équipe de développement en temps réel

Analyse d’impact

Pilotez vos projets

Page 25: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

Les pages statiques existantes peuvent être récupérées dansWEBDEV 22. Les champs correspondants sont créés.

Ici : une fenêtre sous WINDEV ... ... et le résultat de son import dans WEBDEV 22.Le code source est également importé !

L’import, l’export et le partage d’applications et de fenêtres WINDEV permettent de gagner énormément detemps lors du passage d’une application Windows à une application Internet et vice-versa.

IMPORTD’EXISTANTHTML

La page statique initiale... La même page importée dans l’éditeur de WEBDEV

IMPORTER UN EXISTANT HTMLWEBDEV propose une fonctionnalité intéressante: l’aspirationde page HTML existante.La page est importée dans WEBDEV, et chaque libellé, image,lien... est transformé automatiquement en objet WEBDEV.La présentation générale de la page est conservée.Vous pourrez ainsi récupérer facilement un existant.

IMPORTER UN EXISTANT DREAMWEAVERIl est possible d’importer des pages, des templates et deslibrairies Dreamweaver. Lors de l’import d’une page réaliséeavec Dreamweaver, si un template Dreamweaver est détecté,il est automatiquement transformé en «modèle de pages»WEBDEV. Si ce template est détecté dans une autre pageimportée, il sera automatiquement substitué par le «modèlede pages» précédemment créé.

RÉCUPÉRER ET PARTAGER UN EXISTANTWINDEVLes fenêtres réalisées avec WINDEV sont directement trans-formées en pages. Les projets sont communs. Les champs,

le code, les états sont récupérés. Le passage de Windows versInternet (et Internet vers Windows) n’a jamais été aussi facile!Vous pouvez partager les classes, les procédures, les états, lesrequêtes entre des projets WINDEV, WEBDEV et WINDEVMobile.

L’import permetégalement de

créer facilementune «charte gra-phique» compa-

tible avec un sitestatique exis-

tant, pourconserver l’har-

monie du site.

HTML

IMPORT/EXPORT D’APPLICATIONS WINDEVWÉBISATION D’APPLICATIONS

48 • WEBDEV 22 : Développez 10 fois plus vite www.pcsoft.fr • 49

L’ouverture àtous les stan-dards

WEBDEV®

PHP SANS CONNAÎTREPHP !Toute la puissance de WEBDEV (éditeurWYSIWYG, éditeur d’analyses, UML,éditeur de requêtes, champs évolués,WLangage …) est disponible pourcréer des sites en PHP. Si vous le dési-rez, les pages et le code (en WLangage)sont transformés automatiquement encode PHP (il est également possible desaisir directement du code PHP).Sans connaître PHP, vous créez facile-ment des sites dynamiques PHP !

RAD PHPLa méthode RAD WEB est égalementdisponible pour générer des sites PHPen quelques clics. Générez automatiquement vos sites àpartir de l’analyse des données.

SAISIE DIRECTE DE CODEPHPSous l’éditeur de code de WEBDEV, ilest possible d’écrire (ou coller) du codePHP.

Ici, dans le traitement decouleur rouge, du code PHP.

Vous n’êtes jamais bloqué.Dans une même page, il est possible demixer du code PHP et du codeWLangage.

DES CHAMPS ÉVOLUÉSEN STANDARDEn plus des champs classiques (champde saisie, libellé,...) la plupart deschamps sophistiqués de WEBDEV 22sont disponibles en PHP: table avecascenseurs automatiques, zone répé-tée, calendrier, onglet, champ de saisieriche, libellé HTML, réglette automa-tique…Cela permet de simplifier énormémentles phases de codage, et apporte unegrande sécurité à vos sites par la pré-

sence de masques de saisie qui ne per-mettent pas la saisie de données horsformat.

WEB 2.0: AJAX EN PHPDe nombreux champs et traitementssont compatibles «AJAX» en modePHP: vous créez des sites PHP Web 2.0grâce à WEBDEV 22! (voir page 35)

TYPES ÉVOLUÉS En plus des types classiques de PHP,WEBDEV 22 permet de programmer àl’aide de types évolués. La programmation est ainsi plus facile,et plus sûre. Les types évolués sont: date, heure,durée, source de données, tableauassociatif, structures, numérique...Les syntaxes et les opérateurs puissantssont également disponibles: POURTOUT, manipulation des chaînes,concaténation optionnelle, opérateur«commence par»,...

PARTAGE DU CODELe codage en WLangage permet departager du code unique entre despages et des sites PHP, WEBDEV clas-sique, et même avec des applicationsWINDEV !Cela permet un gain de temps appré-ciable, et une fiabilité accrue par laréutilisabilité.

GESTION FACILE ETAUTOMATIQUE DES SESSIONS PHPLa gestion des sessions (contextes)PHP est automatique. Il suffit de décla-rer les variables qui doivent être retrou-vées dans une prochaine exécution dela page. Il n’y a aucun traitement de sérialisationà coder.

COMPATIBILITÉ PHP 7, 5& PHP 4WEBDEV 22 génère du code PHP com-patible à la fois avec PHP 7 et avec PHP5 et PHP 4.

ACCÈS A HFSQLL’accès à HFSQL (Classic, Réseau etClient/Serveur) est assuré via les ordresSQL.

ACCÈS A MYSQL, POST-GRESQL, ORACLEL’accès aux bases de données MySQL,PostgreSQL et Oracle est assuré.Notez que toutes les bases qui propo-sent un pilote ODBC sont accessibles.

ACCÈS A L’AS/400 (IBM I)L’accès à l’AS/400 est effectué en natif(module à acquérir séparément).

WAMP & LAMPAcronymes souvent utilisés, les tech-nologies basées sur 4 composants,WAMP (Windows, Apache, MySQL,PHP) et LAMP (Linux, Apache,MySQL, PHP) sont supportées enstandard par WEBDEV 22.

APPEL DE SCRIPTS PHPIl est possible d’appeler un scriptexterne .php depuis une page PHP ouWEBDEV classique, grâce à la com-mande PHPExécute. Il est possibled’utiliser soit une méthode POST, soitune méthode GET, le résultat est ren-voyé dans une chaîne.

EASYPHP: CONFIGURA-TION ET PARAMÉTRAGEAUTOMATIQUE DEWEBDEVLors de l’installation du serveur d’ap-plication WEBDEV 22, les serveursWeb «Apache» (utilisés en particulierpar EasyPHP) sont détectés et automa-tiquement paramétrés, comme les ser-veurs Apache isolés.

ACCÈS AUX HÉBERGEURSGRATUITSLa génération d’un site en PHP permet(parmi d’autres solutions) l’accès auxhébergeurs «gratuits» de sites dyna-miques. Cette possibilité peut êtreutile aux sites d’associations et depetites structures qui ne désirent pasun hébergement dédié.

Avec WEBDEV 22, PHP c’est facile !

GÉNÉREZ DU CODE PHP

Page 26: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

Une fois un site ou une application Web ter-miné, il faut les déployer sur un serveur.WEBDEV 22 est livré avec un puissant outil dedéploiement et d’installation.

LIVRÉ EN STANDARDComme les autres modules, ce module de création d’instal-lation est livré en standard avec WEBDEV.Le déploiement des sites créés avec WEBDEV peut s’effectuerà distance (FTP, HTTP,...) ou par le fourniture d’un CD, d’unDVD ou d’une clé USB à l’hébergeur.

LE DÉPLOIEMENT À DISTANCE ESTTOTALEMENT ASSISTÉPour déployer un site, il suffit de répondre à quelques ques-tions simples.Le déploiement peut s’effectuer de manière totalement sécu-risée en utilisant les protocoles HTTPS et FTPS.

LE DÉPLOIEMENT À DISTANCE DESMISES À JOUR DU SITEUne fois le site installé, celui-ci évoluera. Lors des évolutions,seuls les fichiers modifiés devront être mis à jour, ce qui limiteles volumes à transférer.WEBDEV comparera les fichiers du site réel et ceux du sitedu poste de développement, et pré-sélectionnera les fichiersayant été modifiés. L’assistant sélectionne automatiquement l’opération appro-priée pour chacun des fichiers : copie, mise à jour, suppres-sion,…Il est bien sûr possible de définir manuellement les fichiers àinstaller, exlure un dossier, ne déployer qu’une seule langue...

LES MISES À JOUR DIFFÉRÉES: LANUIT...Il est souvent intéressant d’effectuer les mises à jour de sitesdans les périodes de moindre affluence, comme la nuit. WEBDEV propose une programmation de la mise à jour à unedate et une heure donnée. Les fichiers à mettre à jour sont transférés sur le serveurimmédiatement, mais leur mise à jour effective ne s’effec-tuera qu’à l’heure et à la date que vous aurez indiquées.

DÉPLOIEMENT PAR MEDIA PHYSIQUEIl est parfois utile de fournir le site sous forme d’un CD, d’unDVD ou d’une clé USB.Cela peut également servir si le serveur d’hébergement n’estpas accessible par le protocole FTP (ou FTPS) pour des raisonsde sécurité.WEBDEV 22 permet de créer un «package d’installation»complet du site.Quand l’hébergeur reçoit le CD ou la clé USB, il déploie lesite sur son serveur.Il est possible de déployer le «serveur d’application WEBDEV»avec le site lui-même.

DATE DE PÉREMPTION DE PAGELors de la création d’une page, il est possible d’indiquer unedate de péremption pour cette page.Par exemple, si une page concerne un événement particulier(un salon professionnel, une promotion, ...), il faut enlevercette page à une date donnée !Pour ne pas oublier de le faire, WEBDEV 22 préviendra ledéveloppeur lors de l’ouverture du projet, et/ou enverra uneMail à une adresse donnée, avec un message paramétrable.Les risques d’oubli sont ainsi limités.

DÉPLOIEMENT POUR LOAD BALANCINGUn site qui a une grande affluence peut avoir besoin d’êtredéployé sur plusieurs serveurs en parallèle.WEBDEV 22 permet en une seule opération de déployer oude mettre à jour un site sur plusieurs serveurs d’hébergement.

50 • WEBDEV 22 : Développez 10 fois plus vite

Administrezfacilement à

distance

WEBDEV®

DÉPLOIEMENT FACILE DE VOS SITES ET DE VOS APPLICATIONS WEB

www.pcsoft.fr • 51

La méthode laplus simple et laplus intuitive

DÉPLOIEMENT MULTIPLE D’UN MÊMESITE SUR LE MÊME SERVEURWEBDEV 22 permet de déployer facilement plusieurs exem-plaires d’un même site sur un même serveur, à partir d’unseul projet.Cela permet par exemple à un prestataire de proposer plu-sieurs exemplaires d’un même site à différents clients.Une copie de chaque site (un site par client) sera hébergéesur le même serveur.Il suffit pour cela d’indiquer les noms des sites au momentdu déploiement, les paramètres de chaque site (time out,nombre de connexions, …) sont indépendants.Il est de plus possible de gérer l’ensemble des sites ainsi pro-posés grâce au module SAAS livré en standard dansWEBDEV (voir SAAS p 39).

L’ARCHIVAGECette fonctionnalité effectue la sauvegarde de tous les élé-ments du site avant d’effectuer une mise à jour de site.Il est ainsi possible de conserver différentes versions d’un site.

TESTS: MONTÉE EN CHARGE, DE NON-RÉGRESSION...La qualité de votre site passe par un jeu de tests approprié.WEBDEV 22 est livré en standard avec un outil de test quivous permettra de vérifier que le paramétrage de votre ser-veur permet le nombre maximum de connexions simultanéessouhaité, ou encore d’exécuter des scénarios d’actions, pourvérifier l’absence de régressions par exemple.

DÉPLOIEMENT DANS LE CLOUD EN UNCLICDéployer un site dans le CLOUD est simple.Il suffit d’indiquer l’identifiant du compte PCSCLOUD et lemot de passe dans l’assistant de déploiement, de sélection-ner la plateforme sur laquelle déployer le site, et le tour estjoué!

Déployer et administrer un site: facile avecWEBDEV 22 !

Administrateur duServeur d’ApplicationWEBDEV.

Administrateur duServeur HFSQL

Gestion des comptesWEBDEV

Centre de Contrôled’hébergement

Installation parmedia physique

Déploiement du sitedepuis le poste de

développement

Administrateur distantdu serveur d’Application

WEBDEV

Administrateur distant duserveur HFSQL

Robot de surveillance(Watchdog)

Tests de montée en charge

LES OUTILSD’ADMINISTRATION LIVRÉS

Page 27: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

WEBDEV 22 permetd’héberger les siteset applications chezun hébergeur, dansle cloud, ou eninterne.

SÉLECTIONNERUN HÉBERGEURWEBDEV Le site PC SOFT pro-

pose une liste fournied’hébergeurs (dans

plusieurs pays) maîtri-sant l’hébergement desites dynamiquesWEBDEV. Vous pouvezégalement contactervotre hébergeur habituel.

HERBERGEZ(GRATUITE-MENT) ETTESTEZ VOSSITES EN RÉELEN 1 CLICPC SOFT vous pro-pose d’héberger vossites en test. L’installation s’ef-

fectue facilement, en 1 clic depuis l’en-vironnement.

SERVEUR DÉDIÉL’hébergement dédié est réalisé sur unemachine que vous «louez» chez unhébergeur.Vous avez la charge de l’administrationdu système de cette machine et vousêtes le seul à en faire usage, elle estréservée à votre société.Vous êtes seul à pouvoir installer dessites sur cette machine. Vous pourrezadministrer vos sites à distance à l’aidedes outils fournis par WEBDEV.

SERVEUR MUTUALISÉL’hébergement mutualisé consiste àhéberger votre site sur une machinepartagée avec d’autres sociétés, quipourront y déployer leurs propres sites.Les ressources de la machine sont doncmutualisées.Avec une machine mutualisée, vousn’êtes pas administrateur du système,vous pouvez uniquement déployer vossites. Les performances dépendentégalement de l’activité des autres sites,mais le coût d’hébergement est moinsélevé que pour un serveur dédié.

CLOUDLe Cloud pour applications PC SOFT(www.pcscloud.net) met à votre dis-position des plateformes d’exploitationpréconfigurées et optimisées pour vosapplications WEBDEV, WINDEV, ouWINDEV Mobile.Ces plateformes d’exploitation vousdonnent la possibilité d’héberger vossites WEBDEV ou vos WebservicesWEBDEV.Elles vous permettent également departager vos bases de données HFSQLpartout dans le monde, depuis despoints fixes ou des terminaux mobiles,avec possibilité de répliquer vos don-nées depuis un serveur propriétaire.

PLATEFORME CLOUDUne plateforme PCSCloud est un ser-veur virtuel.Ce serveur vous est totalement dédié,vous êtes le seul à pouvoir déployer dessites sur ce serveur. Vous pouvez régler à tout moment ettrès finement la puissance nécessaire àvotre plateforme (CPU, RAM,disque,...) et ainsi réduire le coût austrict nécessaire. Vous êtes déchargé de l’administrationsystème des serveurs, vous pouvezvous concentrer sur votre coeur demétier.

AVANTAGES CLOUD Le Cloud permet de s’affranchir descontraintes matérielles, et permet degérer facilement les besoins d’évolu-tions des ressources.Il est facile de déployer un site dans lecloud PCSCloud.net: il suffit d’un clicdans l’environnement !PCSCloud vous propose égalementd’héberger vos Webservices, vos basesde données HFSQL...

52 • WEBDEV 22 : Développez 10 fois plus vite

HÉBERGEMENT CHEZ UN HÉBERGEUR

HÉBERGEMENT FACILE DANS LE CLOUD

SITE INTRANET En règle générale, le site sera installéet géré sur un serveur interne à l’en-treprise. Tous les postes reliés au ser-veur auront accès au site.

SITE INTERNET/EXTRANETEn règle générale, le site Internet ouExtranet sera installé chez un «héber-geur», distinct de la société utilisa-trice.

HÉBERGEMENTIl existe 4 types d’hébergement: • Serveur interne• Serveur dédié• Serveur mutualisé• Plateforme Cloud

SITESIl existe 3 types principaux de sites:• Site statique• Site Intranet• Site Internet/Extranet

www.pcsoft.fr • 53

Déployez etadministrezfacilement vossites.

HÉBERGEMENT INTERNE

WEBDEV 22 permet d’hébergeren interne les sites et applica-tions réalisés avec WEBDEV,directement dans votresociété.

LE SERVEUR D’APPLICATIONWEBDEVLe serveur d’application WEBDEV per-met de faire fonctionner les sites dyna-miques.Il est installé sur la machine d’héberge-ment.Le Serveur d’Application WEBDEV fonc-tionne sous Windows et Linux. L’installation du Serveur d’ApplicationWEBDEV reconnaît automatiquement leserveur Web installé.Chaque serveur Web doit être confi-guré. La configuration des serveurs WebIIS ou Apache est réalisée automati-quent lors de l’installation du serveurd’application.

VERSIONS DE WINDOWSSUPPORTÉESQuasiment toutes les versions deWindows «serveur» sont supportées:Windows 2016, 2012, 2008,… 32 et 64bits. Les versions «non serveur» de Windows(Windows 10, 8, 7, Vista …) sont éga-lement supportées.

DISTRIBUTIONS LINUXSUPPORTÉESLes distributions Linux évoluent souvent.Certaines évolutions sont mineures,d’autres majeures. La version 22 de

WEBDEV supporte à la fois certaines dis-tributions d’ancienne technologie, etcelles de nouvelle technologie.A la date d’impression de ce document,les nouvelles distributions suivantes ontété testées: Debian 7, OpenSuse 12,Ubuntu 12, Mandriva...Le fonctionnement avec les distributionssupérieures est assuré si ces distributionssont compatibles. N’hésitez pas à inter-roger PC SOFT pour connaître les der-nières évolutions.

POUR LES HÉBERGEURS:INSTALLATION SILEN-CIEUSEUtile aux hébergeurs et aux dévelop-peurs qui gèrent leur hébergement, laconfiguration automatique de serveurd’hébergement est possible de manière«silencieuse», c’est-à-dire sans deman-der d’intervention manuelle. L’installation est totalement paramétrée,et il devient possible de monter des ser-veurs en «batch» (créer des instances deserveur d’application WEBDEV demanière automatique).

CONFIGURATION AUTO-MATIQUE SOUS APACHE(WAMP LAMP)

Si vous utilisez un serveur Web Apache,lors de l’installation du serveur d’appli-cation WEBDEV 22, les serveurs Web

«Apache» (utilisés en particulier parEasyPHP) sont détectés et automatique-ment paramétrés.Le serveur Web Apache permet l’utilisa-tion de sites virtuels, ce qui permet decloisonner les hébergements.Un compte WEBDEV peut être défini parsite virtuel.

DÉMÉNAGER AUTOMATI-QUEMENT UN SITE D’UNSERVEUR À UN AUTRELa fonctionnalité de déménagementautomatique de site offerte parWEBDEV 22 va ravir les administrateursde serveurs. Il est très facile de déplacer un site enexploitation d’une machine à une autre.Le déménagement prend en chargetous les éléments nécessaires des sitesainsi que leur configuration d’exploita-tion: tout est automatique.

HÉBERGEMENTPHPL’hébergement PHP peut être effectuéchez un hébergeur «grand public»(Free,...).Il peut également être effectué eninterne.La machine serveur doit alors être équi-pée d’un moteur PHP et d’un serveur FTP.Le déploiement des sites s’effectue trèssimplement depuis l’environnementWEBDEV.

HÉBERGEMENTDE SITES PUREMENT STATIQUESUn site statique ne nécessite pas deServeur d’Application WEBDEV pourfonctionner, seul un serveur Web etun serveur FTP sont nécessaires.Un site statique peut facilement êtrehébergé chez un hébergeur «grandpublic» (Free,...).

RECORD ACTUEL DE

CONNEXIONS:31.200

CONNEXIONSSIMULTANÉESPOUR UN SITEDYNAMIQUE

WEBDEV.

Base de donnéesHFSQL

Page 28: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

ADMINISTRATION FACILE DE VOS SITES ETAPPLICATIONS

L’ADMINISTRATION:LOCALE OU DISTANTELe serveur d’application WEBDEV estlivré avec un administrateur accessible àdistance, qui permet de paramétrer leserveur, et de suivre en permanence l’ac-tivité de celui-ci.

De nombreux paramètres peuvent êtrespécifiés: nombre maximum deconnexions autorisées pour le serveur,nombre maximum de connexions pourun site donné, nombre maximum d’ins-tances par internaute,...

Notez que l’administrateur peut égale-ment être installé sous forme de «ser-vice», sans interface sur le Serveur.

Il est possible d’indiquer des droits parutilisateur.

SÉCURITÉ D’ACCÈS AUSITEL’aministrateur permet d’activer desoptions de sécurité dont :• navigation par adresse IP unique

(empèche le vol de session)• protection des identifiants de contexte

AWP (cookie HTTPOnly).

L’administrateur à distance

ROBOT DE SURVEILLANCEUn robot de surveillance très sophistiquéest livré avec WEBDEV 22. Il peut êtreutilisé pour surveiller la disponibilité desites WEBDEV, de serveurs HTTP, de ser-veurs NMTP, de serveurs SNMP, de ser-veurs de fichiers, de serveurs de mails,de serveurs d’application WEBDEV, deserveurs HFSQL...Le serveur alerte, au choix, par envoi

d’un message email, par messageenvoyé à une application spécifique(messagerie interne,…), sur écran decontrôle (alerte visuelle et/ou sonore),par lancement d’une procédureWLangage, par programme tiers (ceprogramme tiers peut par exempleeffectuer l’envoi d’un message paramé-trable par SMS).Bien entendu, il est possible de choisirune combinaison de ces alertes.Il est possible de paramétrer égalementla fréquence et la répétition des tests àeffectuer.

Il est important de disposerde statistiques précises surles visites des sites.

UTILISATION DEGOOGLE ANALYTICSGoogle Analytics est un outil trèsrépandu de mesure de fréquentationdes sites.Google Analytics permet de mesurer lenombre de vues pour chaque page dusite, le temps de chargement, le che-min de navigation, le temps de char-gement des ressources (images), letaux de rebond, l’environnement del’internaute (matériel, localisation géo-graphique, langue, navigateur,….),l’origine de la navigation (page d’ori-gine, publicité, ..), etc...WEBDEV 22 peut intègrer automati-quement dans vos sites les trackersnécessaires aux statistiques pourAnalytics. Vous pouvez également trac-

ker des événements particuliers: inter-action avec un réseau social,...

UN OUTIL TOTALEMENTPARAMÉTRABLE DE STA-TISTIQUES EST FOURNIWEBDEV 22 est également fourni avecun outil complet de gestion des statis-tiques sur les pagesdynamiques de vossites. Il ne nécessitepas d’installation, etfonctionne sur les sitesIntranet.Parmi les informationscollectées: nombre depages vues, nombrede visiteurs uniques,nombre de visiteurspar page, site de pro-venance des inter-nautes, pays de prove-nance, navigateur uti-

lisé, et même pages ayant posé un pro-blème technique !

Des statistiques utiles !

STATISTIQUES DE FRÉQUENTATION DE VOS SITES + GOOGLE ANALYTICS

54 • WEBDEV 22 : Développez 10 fois plus vite

WEBDEV 22 etWINDEV 22 sontcompatibles:• projet• analyse• tables• composants• états• code• classes• fenêtres, pages• ...

Les sites WEBDEV 22 serelient facilement aux appli-cations existantes.La compatibilité entreWEBDEV et WINDEV en faitle package idéal pour déve-lopper très vite un «front» etun «back» office perfor-mants !

FRONT ET BACK OFFICELe «Front Office» concerne la partie quiest en contact avec le client: en géné-ral le site Internet interactif. En schématisant, le Front Officeinforme, gère les demandes d’infor-mation et décroche les commandes.Le «Back Office» concerne la gestioninterne de l’entreprise: traitement descommandes, gestion des stocks, sta-tistiques, ordres de fabrication,... En schématisant, le Back Office traiteles commandes.

POUR DÉMARRER UNEAPPLICATION GLOBALE,LE COUPLE WINDEV 22 &WEBDEV 22 EST LA PLATEFORME IDÉALEPour créer les sites Internet et Intranetgérant des données (le Front Office),PC SOFT propose l’environnement inté-gré WEBDEV 22.Il s’agit du seul environnement intégré(de la modélisation à l’installation, enpassant par la Base de Données et lamaintenance) qui permette de dévelop-per facilement des sites robustes géranten temps réel des données.

Pour tout l’aspect de gestion interne (leBack Office), PC SOFT propose l’envi-ronnement préféré des développeursprofessionnels en France, le N°1 desAGL sous Windows: WINDEV.Et pour utiliser les applications surmobile, il suffit de les recompiler avec

WINDEV Mobile 22.

WINDEV permet de créer en un tempsrecord les applications les plus com-plètes et les plus performantes. Vousutiliserez la puissante Base de Donnéesintégrée ou toute autre base de don-nées du marché.WINDEV, WINDEV Mobile et WEBDEVsont compatibles; leur environnementde développement est similaire. Ils par-tagent les projets, les objets, le code,les classes, les états, l’analyse...

VOUS AVEZ DÉJÀ UNEXISTANT ?Grâce à son ouverture totale, WEBDEVpermet de se relier à toute applicationet toute base de données existante, viaODBC, OLE DB ou en accès natif.

Vous atteindrez facilementvos objectifs avec WEBDEV22.

FRONT OFFICE, BACK OFFICE

PLUS DE 1000 EXEMPLES EN LIGNEPour tester des sites réalisés en WEBDEV, le plus simple estde se connecter sur www.pcsoft.fr. Dans la rubriqueWEBDEV, une page propose une liste de plus de mille sitesréalisés par des utilisateurs de WEBDEV.

TOUS LES DOMAINES, TOUTES LESLANGUESIl s’agit de sites dans tous les domaines, dans toutes leslangues, réalisés en WEBDEV par différents types de socié-tés.

LES SITES INTRANETPour des raisons évidentes de confidentialité, les sites Intranetet Extranet ne peuvent pas figurer dans cette liste. Des sociétés multinationales ont développé des Intranet etExtranet stratégiques qui sont diffusés dans leurs centainesd’agences et filiales, avec consolidation sur une base centrale.

TESTEZ PLUS DE 1000 SITESRÉALISÉS EN WEBDEV

www.pcsoft.fr • 55

N°1 EN FRANCE

Page 29: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

Partagez l’expériencede sociétés presti-gieuses en deman-dant ce numéro spé-cial de la revue«01Net» consacré àWINDEV et WEBDEV.(140 pages)

100+ TÉMOIGNAGES

• Editeur de pages visuel WYSIWYG• Support de Ajax, XML, Java, PHP...• RAD applicatif, pour créer des

sites en répondant simplement àquelques questions

• RAD page, pour créer des pagesd’un site en quelques clics

• Génération PHP • Import de page HTML, Import de

fenêtre et d’application WINDEV• Editeur de code, gérant le L5G, et

permettant la saisie directe decode Javascript, HTML et PHP

• Webservices Rest et SOAP• Editeur d’images• Modélisation (UML, Merise), pour

décrire les tables de données, lestraitements, les relations...

• Gestionnaire de règles métier• Centres de Contrôle• Tableau de bord• Générateur de dossier d’analyse

et de programmation• Base de Données librement

distribuable• Accès à toutes les bases de

données du marché via ODBCou OLE DB• Connecteur natif à MySQL,

SQLite, PostgreSQL, Oracle*,SQL Server*, AS/400*,Informix*, DB2*, Sybase*,Progress*, MariaDB et MS-Access • Langage L5G, générant

automatiquement le codeHTML et Javascript

• Gestionnaire de Sources, • Profiler• Editeur d’états avec PDF et

codes-barres• Générateur de procédure

d’installation et administra-tion locale et à distance

• Sites prêts à l’emploi• Moteur de test interactif, pour

tester en direct les sites créés,avec des données

• Centre de tests unitaires et demontée en charge

• Jeu de manuels complets, enfrançais (tout est en français)

• Hot Line gratuite...

01 INFORMATIQUEUn générateur de sites WEB avecSGBD intégré

PROGRAMMEZWEBDEV, nous l’avons essayé,beaucoup l’adopteront

LOGICIELS ET SYSTÈMESWEBDEV, un AGL dédié aux appli-cations Internet et Intranet

LE MONDE INFORMATIQUEPC SOFT a repris les principes debase de son célèbre Atelier de GénieLogiciel et les a transposés dansWEBDEV

WINDOWS NEWSLes exemples et applications fournispar l’éditeur permettent une priseen main rapide du logiciel WEBDEV.

L’avis de la presse spécialisée

56 • WEBDEV 22 : Développez 10 fois plus vite

3 manuels en français sontlivrés: cours d’auto-forma-tion pour découvrir le pro-duit, manuel des conceptspour maîtriser le produit,manuel de l’éditeur d’étatset de l’éditeur de requêtes.

Une aide en ligne com-plète (10.000+ pages) estégalement disponible surInternet.La formation à WEBDEVdemande en général unesemaine à un développeur

généraliste. Un développeur connais-sant déjà WINDEV est opé-rationnel en 2 jours.PC SOFT organise égale-ment chaque semaine desséminaires de formation.

WEBDEV EST LIVRÉ AVEC UNE DOCUMENTATION COMPLÈTE.

EXTRAIT DU SOMMAIRE

10 CHATEAU MARGAUX14 PHILIPS16 VINCI AUTOROUTES18 QUICK14 LYONNAISE DES EAUX22 SYSTEME U29 FEDERATION FRAN-

ÇAISE DE BASKET32 BOLORRÉ34 CASIO40 TAITTINGER62 SIEMENS VAI68 TRUFFAUT71 AIR CALÉDONIE78 HONDA EUROPE82 PRONUPTIA98 HOPITAUX DE PARIS

102 SOCIÉTÉ GÉNÉRALE121 PHOTOMATON128 GROUPAMA129 CPAM134 REEF TAHITI...

TOUT EST LIVRÉ EN STANDARD

WEBDEV 22 EST COMPOSÉ DES MODULES SUIVANTS, TOUS LIVRÉS EN STANDARD

AU SERVICE DES DÉVELOP-PEURS DEPUIS 25 ANSDepuis plus de 25 ans, PC SOFT créedes outils de développement. Plusieurs millions d'applications déve-loppées avec des outils PC SOFT sonten service dans le monde, dans tous lesdomaines d'activité.

SE FORMER RAPIDE-MENT À WEBDEVDe nombreux moyens, simples, effi-caces, accessibles, sont à votre dispo-sition pour vous former rapidement àWEBDEV:• Cours d'auto-formation (500 pages,

livré en standard)

• Séminaires de formation PC SOFT• Consultants• Assistance Directe®

LE SUPPORT TECHNIQUE(HOT LINE): GRATUITUn simple mail ou un coup de fil à laHot Line peut faire économiser desheures ou des jours entiers !Nous avons tellement confiance en nosoutils que nous vous offrons 15requêtes gratuites5 (téléphone ouemail) au Support technique. Notez que la plupart des «hot lines» denos concurrents coûtent plus cher quele simple prix d’achat deWEBDEV.

POUR VOS DÉVELOPPE-MENTS STRATÉGIQUES:«ASSISTANCE DIRECTE®»Si vous désirez un niveau de supportavancé, PC SOFT propose un serviced'assistance téléphonique spécifique,appelé «Assistance Directe».Ce service, complémentaire duSupport Technique gratuit,répond à vos questions,effectue des tâches d’au-dit, de test de vos appli-cations, d’écriture deroutines, d’aide à laconfiguration...

Votre interlocuteurconnaît vos développe-ments, et peut ainsivous aiguiller etvous aider pluseff icace-ment.

LST: UN MAGAZINETECHNIQUE (+ DVD), ENFRANÇAIS SUR WEBDEVTous les 3 mois paraît un magazinetechnique en français, en couleurs,qui contient articles de fond, trucset astuces, exemples de pro-grammes avec code source sur lesDVD d'accompagnement, et desmises à jour intermédiaires com-plètes de WEBDEV.La LST est le meilleur moyen de res-ter à l'écoute de WEBDEV.

LA FORMATIONPC SOFT organise chaque semaineà Paris des séminaires de formationde différents niveaux sur WEBDEV.Ces séminaires permettent dedécouvrir et de maîtriser WEBDEVselon un plan efficace. Ils sontassurés par des ingénieurs PC SOFT,maitrisant parfaitement le produit.

Ces séminaires peuvent égalementêtre organisés dans vos locaux, enFrance et à l’étranger.

UN CONSULTANT PC SOFTDANS VOS LOCAUXPC SOFT peut mettre à votre disposi-

tion dans vos locaux un ingénieurexpérimenté, pour une durée de 1à 5 jours. En votre présence permanente, leconsultant PC SOFT vous guidera

pour exploiter au mieux les fonction-nalités de WEBDEV dans votre projet.

WEBDEV: LOGICIEL DEGRANDE DIFFUSIONEn utilisant un outil diffusé àgrande échelle, vous bénéficiez del'expérience des dizaines de milliersd’autres développeurs profession-nels!

La diffusion à grande échelle permetégalement de proposer WEBDEV à untarif ridicule eu égard à ses possibili-tés.

Et rappelez-vous qu'un dévelop-peur généraliste est opérationnelen 5 jours en moyenne...

Pour tous vos développe-ments Internet et Intranet,PC SOFT est présent pourvous assurer le servicepersonnalisé de qualité quevous attendez.Avec WEBDEV 22 vousréussissez vos projets.M

algré

le so

in ap

porté

à sa

réda

ction

, ce d

ocum

ent n

’est

pas c

ontra

ctuel.

WEB

DEV

est r

éser

vé à

un u

sage

pro

fess

ionn

el. N

’hés

itez j

amais

à co

ntac

ter d

irecte

men

t PC

SOFT

pou

r tou

t asp

ect i

mpo

rtant

pou

r vou

s.To

utes

mar

ques

dép

osée

s par

leur

s pro

priét

aires

resp

ectif

s. *

: opt

ion;

5:

15

requ

êtes g

ratu

ites;

assu

ré su

r la v

ersio

n en

cour

s de c

omm

ercia

lisati

on; s

eul l

’app

el es

t à v

otre

char

ge. C

onsu

ltez l

a lice

nce.

www.pcsoft.fr • 57

PC SOFT À VOTRE SERVICE

Page 30: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

Le meilleurmoyen de tirer

profitd’Internet

WEBDEV®

VOUS ÊTES DÉCIDEURVous avez besoin d’une solution qui permette à voséquipes de DÉVELOPPER PLUS VITE les puissantesapplications Internet et Intranet dont votre entreprise

a besoin: WEBDEV 22 s’impose. WEBDEV 22 vous garantit le respect du budget,

des performances et du délai prévu.

VOUS ÊTESDÉVELOPPEUR

Vous savez développer. Avec WEBDEV22 vous saurez immédiatement

créer des sites statiques et dyna-miques.

WEBDEV 22 permet unedémarche méthodolo-

gique naturelle, qui aboutit àla RÉUSSITE DE TOUS VOS

PROJETS.

VOUS ÊTES SPÉCIA-LISTE INTERNET

WEBDEV 22 apporte la solution à votreproblématique: utilisation conjointe à des

sites statiques existants, aspiration desites, sites dynamiques connectés aux

bases de données en temps réel. Vous pourrez RÉ-UTILISER sans limites

votre existant Web.

LA COMPATIBILITÉ AVECWINDEV

WINDEV est l’AGL Windows le plus utilisé enFrance. WEBDEV 22 est COMPATIBLE avec

WINDEV et WINDEV Mobile.Le mode opératoire des logiciels est identique.

Il est très facile de transformer une applicationWINDEV en un site Internet ou Intranet WEBDEV,

et vice versa.

GESTION DU CYCLE DE VIE DESSITESWEBDEV 22 est une PLATEFORME DE DÉVELOP-PEMENT COMPLÈTE, intégralement en français, quiintègre tous les modules nécessaires au développe-ment.Cela assure le succès de vos projets. WEBDEV 22 est réputé pour sa FACILITÉ DE PRISEEN MAIN.

ACHETEZ WEBDEV 22 AUJOUR-D’HUI !Chaque jour qui passe, vous-même et vos équipes per-dez un temps précieux.WEBDEV 22 vous permet d’être efficace très rapide-ment dans le développement des SITES INTERAC-TIFS PERFORMANTS, aujourd’hui nécessaires àtoutes les sociétés.Ne laissez pas vos concurrents vous dépasser, utilisezvous aussi le plus puissant, le plus intégré, le plus faciledes environnements de développement professionnelsde sites Internet et Intranet efficaces.

WEBDEV 22 est un environnement très com-plet, très puissant, mais très facile d’utilisation.Le «Retour Sur Investissement» (ROI) est trèsrapide: vous réaliserez vite des économiesimportantes grâce à WEBDEV 22.

PASSEZ À L’ACTION:COMMANDEZ VOTRE

WEBDEV 22 DÈS AUJOURD’HUI

Développez 10 fois plus viteVous aussi...

58 • WEBDEV 22 : Développez 10 fois plus vite

NE LAISSEZ PAS LA RÉVOLUTIONINTERNET SE FAIRE SANS VOUS

PHPSaaS

CloudLinux

Wamp, LampHTML5

SPAResponsive

...

Voici des exemples de sites etd’applications que vous pourrezcréer facilement avec WEBDEV(cette liste n’est pas exhaus-tive).Certains sites sont des Intranet,d’autres des Extranet, d’autresdes sites Internet.

• Site de commerce électroniqueavec paiement sécurisé

• Télépaiement de factures parInternet

• Gestion des commandes de vosclients

• Prise de commande générale• Consultation par vos clients de

l’état d’avancement de leur com-mande (commande reçue, saisie,traitée, correcte, partie à telleheure,...)

• Accès aux stocks réels• Création dynamique d’image en

fonction de paramètres saisis:- essayage virtuel de vêtements - présentation d’une automobile

avec la couleur et les optionschoisies

- personnalisation de T-Shirt enfonction d’une image fournie(uploadée) par le client

• Définition en ligne des optionsd’un progiciel, calcul du prix decession de la licence, et télé-chargement immédiat aprèspaiement

• Réservation de places d’avion oude bateau, en choisissant sonsiège ou sa cabine sur un plan

• Tableau de bord Dirigeant à jouren temps réel avec CA de l’en-treprise, Marge prévisible, Etatdes stocks...

• Planning partagé d’une équipedispersée géographiquement

• Planning de prise de rendez-vousde personnel itinérant

• Planning d’intervention d’uneéquipe de maintenance

• Pour une société de VPC, mise enligne de la documentation tech-nique de toutes les notices desproduits commercialisés

• Moteur de recherche en langagenaturel d’informations (FAQ,...)dans une base de données texte

• Scan et archivage de tous lesdocuments comptables reçus(factures, BL,...) dans le but depouvoir les visualiser à toutmoment, même des annéesaprès (archives)

• Prise d’inscription à un événe-ment: présentation, repas, sor-tie,...

• Gestion d’un annuaire partagé:salariés de l’entreprise, étu-diants d’une école, anciens étu-diants, membres d’unclub,...

• Petites annoncesimmobilières, voi-tures, enchères ...

• Gestion des analyses médicales• Saisie des frais de déplacement• Gestion de parc matériel• Site de rencontre• Gestion d’un wiki• Portail BtoB• Forum de discussion• Flux RSS• Suivi de livraison de colis• Gestion de mailing-Liste• Gestion des points «bonus» liés

à une carte de fidélité: rappel dunombre de points, échéance,affichage automatique desprimes accordables, gestion dela demande des primes,...

• GED• Suivi à distance de l’état d’une

chaîne de robotisation et de pro-duction

• Portail Intranet d’entreprise

Et tout autre site dont vousavez l’idée !

WEBDEV 22 :DÉVELOPPEZWEB !

Découvrez plus de 1000 exemples de sites WEBDEVsur www.pcsoft.fr

Développez tous les types de sites et d’applications web

Page 31: WEB DÉVELOPPEMENT INTÉGRÉE DE PLATEFORME · PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT WEB Internet, Intranet, Cloud ... d une part, la formation est ... La conception Le dossier

Siège Montpellier : 3 Rue de Puech Villa BP 444 08 34197 MONTPELLIER, France Tél: 04.67.032.032 Fax: 04.67.03.07.87 Agence Paris : 142 Avenue des Champs Elysées 75008 PARIS, France Tél: 01.48.01.48.88

PC SOFT Informatique - SAS au capital de 2 297 548 Euros SIRET 330 318 270 00064 - Code APE 5829B

www.pcsoft.fr

PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT