SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Downloaden Sie, um offline zu lesen
PLATEFORME
INTÉGRÉE DE
DÉVELOPPEMENT
Internet, Intranet, Cloud
Web 2.0, Ajax, HTML 5, PHP
Toutes les Bases de Données
CODE MULTI-PLATEFORMES :
Windows, .Net, Linux, Java,
PHP, Internet, Ajax,
Android, Windows Phone,
iOS (iPhone, iPad) ...
DĂ©veloppement en L5G
Nouvelle
Version
Des sites toujours Ă  jour, qui
partagent en toute sécurité
les données de
l’entreprise
NATIONAL AWARD
Aujourd’hui
les sites Internet
et Intranet sont
reliés en temps
réel aux données
de l’entreprise et se
comportent comme
de véritables applica-
tions.
WEBDEV 19 est la
meilleure solution pour
créer ces sites.
Avec WEBDEV 19, vos Ă©quipes
créent ces sites et ces applications 10
fois plus vite. Vos budgets sont respectés.
Comme des dizaines de milliers de développeurs
en France, choisissez la plateforme la plus perfor-
mante pour développer et publier vos sites et vos
applications Internet et Intranet: WEBDEV 19.
S o m m a i r e
3 Le cycle complet
4 Questions/RĂ©ponses
6 Exemples
8 Sites statiques et dynamiques
10 Toutes les bases de données
11 Compatibilité navigateurs
12 Le RAD
14 IDE: l’environnement intĂ©grĂ©
WYSIWYG
17 La techno des «7 onglets»
18 Des contrĂŽles (champs)
adaptés au Web
24 Le champ ZTR
26 Ajax
27 HTML 5
28 Intranet, Export Word,
XML...
29 Templates,
Vos sites sur mobiles
30 Le Langage L5G
31 Editeur de code
32 Le débogueur, tests unitaires
33 Les composants, Sécurité par mot
de passe (Groupware utilisateur)
34 Webservices, CSS3
35 AccĂšs natif Google, Lotus Notes...
36 PHP
37 GĂ©nĂ©rateur d’états & PDF
38 Versionning (GDS /SCM)
39 Centres de ContrĂŽle,
Tableau de Bord
40 Modélisation UML et Merise
41 Base de Données HFSQL
42 GĂ©nĂ©rateur de requĂȘtes
43 SaaS et Cloud
44 Import HTML & WINDEV
45 Front Office, Back Office,
64 langues
46 DĂ©ploiement
48 L’hĂ©bergement
49 Administration, Référencement
50 Paiement sécurisé
51 Les statistiques
53 Les services PC SOFT
55 Exemples de sites
BIENVENUE
DANS LE MONDE DE
L’INTERNET INTERACTIF !
Fournisseur Officiel de la PrĂ©paration Olympique www.pcsoft.fr ‱ 3
GRÂCE À WEBDEV 19
CRÉEZ TRÈS VITE DES SITES
INTERNET, INTRANET
ET SAAS QUI
GÈRENT DES
DONNÉES
4 ‱ DĂ©veloppez 10 fois plus vite
1 A qui est destiné WEBDEV 19 ? A toutes les sociétés et tous les développeurs qui désirent réaliser
des sites et des applications INTERNET, INTRANET et SaaS.
2 Quels types de sites et d’applications
peut-on créer ?
Tous les types de sites, mais WEBDEV est spécialisé dans les sites «dyna-
miques», c’est-Ă -dire qui se comportent comme de vĂ©ritables applications,
et qui gÚrent des données en temps réel.
3 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 avec le
manuel d’auto-formation livrĂ© en standard.
4 Faut-il des connaissances particuliĂšres
sur INTERNET ?
Non. Vos équipes de développement produiront des sites robustes
et efficaces. Tout le code (HTML, Javascript, Serveur) est généré
par WEBDEV 19.
5 Comment créer un traitement AJAX
avec WEBDEV 19 ?
Il suffit de cliquer sur le bouton «Ajax» du traitement... Il n’y a pas
plus simple.
6 Quel est l’avantage principal de
WEBDEV par rapport à d’autres outils?
Il y en a plusieurs, comme: l’intĂ©gration totale, la simplicitĂ©, la
vitesse de dĂ©veloppement, 3 Ă  10 fois plus rapide, ou encore l’accĂšs
aux bases de données.
7 WEBDEV s’appuie-t-il sur des technolo-
gies standard ?
Oui, comme HTML, HTML5, XML, CSS, Javascript ou PHP. Mais vous
n’avez pas besoin de connaĂźtre ces technologies, WEBDEV gĂ©nĂšre
automatiquement le code nécessaire.
8 Je possĂšde un existant. Pourrais-je le
récupérer avec WEBDEV ?
Oui. Vous pouvez aspirer des pages HTML existantes. Vous pouvez
Ă©galement mixer des pages WEBDEV avec un site existant, en
conservant votre existant.
9 On n’a pas besoin de connaütre Java, HTML
PHP ou Javascript pour créer des sites ?
Non, c’est inutile. WEBDEV gĂ©nĂšre automatiquement le code HTML,
Javascript, CSS et PHP optimisé qui est nécessaire.
10 Et si je veux saisir du HTML, ou récupé-
rer un existant Javascript par exemple ?
WEBDEV est ouvert. Il est possible de saisir du code HTML, PHP ou
Javascript directement dans l’éditeur (ou de copier un code
Javascript ou HTML existant), voire mĂȘme un script JSP ou ASP.
11 J’ai lu que WEBDEV est compatible
WINDEV; il faut posséder WINDEV ?
WEBDEV est une plate-forme totalement autonome. Aucun autre
outil n’est nĂ©cessaire pour dĂ©velopper avec WEBDEV.
12 Et si je possÚde déjà WINDEV ?
Dans ce cas, d’une part, la formation est plus rapide, d’autre part
vous pourrez automatiquement transformer vos applications
WinDev en applications Web...
13 L’éditeur de «pages» est-il WYSIWYG? Oui, au pixel prĂšs !
14 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, ...
15 Ajax, XML, Flash, CSS, W3C, JSON,
JQuery sont-ils supportés ?
Oui.
16 WEBDEV permet-il de développer des
sites de grande envergure ?
Oui, c’est mĂȘme dans ces projets qu’il excelle: sites Internet,
Intranet et SaaS.
17 Quel Support Technique est disponible? C’est trùs simple: le Support Technique WEBDEV est gratuit
(15 requĂȘtes personnalisĂ©es gratuites par tĂ©lĂ©phone ou par email)
19 Qui utilise WEBDEV ?
Tous les types de structures professionnelles: SSII, constructeurs,
services informatiques, ingénieurs de laboratoire, ministÚres, admi-
nistrations, indépendants...
19 Je peux générer des sites en pur
«PHP» avec WEBDEV 19 ? Oui, c’est une fonctionnalitĂ© standard.
20 En France WEBDEV est donc «le» standard
pour créer des sites dynamiques ?
Oui, certainement.
Nous
répondons ici
aux questions
que l’on nous
pose le plus
souvent sur
WEBDEV.
Vous y
retrouverez
certainement
les réponses à
quelques-unes
de vos
interrogations.
Vous avez
d’autres
questions?
Appelez-nous,
nous y
répondrons
avec plaisir.
Consultez le numéro spécial de
«01» consacré à WEBDEV et WINDEV pour
découvrir 100 témoignages de sociétés
prestigieuses.
HĂ©bergement
sous Windows ou
sous Linux !
(et dans le Cloud)
QUESTIONS
REPONSES
www.pcsoft.fr ‱ 5
WEBDEV 19
gĂšre le cycle
de vie complet
des sites
TOUTES LES PHASES DU DÉVELOPPEMENT SONT
PRISES EN COMPTE EN STANDARD PAR WEBDEV 19
WEBDEV 19 GÈRE TOUTES LES PHASES
DE LA CRÉATION D’UN SITE
‱ Le maquettage
‱  La conception
‱  Le dossier d’analyse et de programma-
tion
‱  La liaison avec les sites statiques exis-
tants
‱  Les Bases de DonnĂ©es
‱  La programmation (L5G, Ajax,
Webservice, .NET, J2EE, HTML, HTML5,
Javascript...)
‱  La reprise de l’existant
‱  Les Ă©tats (PDF, codes-barres,...)
‱  Le paiement sĂ©curisĂ©
‱ La crĂ©ation et l’utilisation
de composants
‱  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 les infographistes
‱  L’installation chez l’hĂ©bergeur
‱  Les tests de non-rĂ©gression
‱  Les tests de performance
‱  L’intĂ©gration continue
‱ La maintenance et les Ă©volutions
‱  Les statistiques de frĂ©quentation
‱  L’assistance au dĂ©veloppe-
ment
WEBDEV, c’est
l’assurance d’un
produit complet
et totalement
intégré: la
formation est
plus rapide,
le support
technique est
meilleur
(et gratuit).
Les sites
«dynamiques»
sont maintenant
la norme de
l’INTERNET et
de l’INTRANET.
Ces sites sont
faciles Ă 
développer et à
maintenir avec
WEBDEV 19.
DES SITES RÉUTILISABLES, ET
PERSONNALISABLES SONT LIVRÉS
WEBDEV 19 est livré avec de nombreux sites «exemples»,
déjà développés. Le code source et les pages sont livrés: vous
pouvez utiliser directement ces sites, les modifier, les per-
sonnaliser, les revendre...
UN ASPECT DIDACTIQUE
Vous pouvez Ă©galement Ă©tudier l’analyse et le code de ces
sites, dans un but didactique.
PARMI LES SITES LIVRÉS...
Voici une sélection de quelques exemples livrés :
‱ Commerce Ă©lectronique
Gestion des rayons, du chariot, du paiement.
‱ Petites annonces
Gestion de plusieurs critÚres de sélection.
‱ Annuaire partagĂ©
En Intranet, l’annuaire pourra ĂȘtre
partagé dans une entreprise.
En Internet, l’annuaire pourra ĂȘtre
partagé 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ùre
Recherche d’un bien en fonction de nombreux critùres.
‱ CMS
SystĂšme de gestion de contenu.
‱ Gestion d’une base documentaire
Pour archiver et retrouver des documents en fonction de
mots-clés que vous décidez.
‱ Paiement sĂ©curisĂ©
(voir détail page 50)
‱ Gestion d’agence de voyage
Présentation des hÎtels, des disponibilités, sélection selon de
nombreux critĂšres, ...
‱ News, Forum, Blog, Site associatif...
... et tout un ensemble d’autres exemples immĂ©diatement uti-
lisables.
ETC...
De nombreux autres exemples sont également livrés sous
forme de pages, ou sous forme d’objets dans le dictionnaire
interactif.
Une partie du dictionnaire interactif de WEBDEV
GAGNEZ DU TEMPS
Les sites livrés, que vous pourrez adapter à vos besoins, vous
permettront de gagner beaucoup de temps lors de vos déve-
loppements.
RĂ©utilisez
les exemples
dans vos sites
WEBDEVÂź
WEBDEVÂź 19
DE NOMBREUX SITES EXEMPLES
PRÊTS À L’EMPLOI SONT LIVRÉS
EnraisondesĂ©volutionspermanentes,l’aspectdessiteslivrĂ©setprĂ©sentĂ©speutdiffĂ©rer.
6 ‱ DĂ©veloppez 10 fois plus vite
Honolulu :
portail Intranet
Un portail Intranet com-
plet, avec toutes ses
applications (messageries,
news, recherche
documentaire,...), est
également livré.
Directement utilisable, il
peut Ă©galement ĂȘtre
adapté à vos besoins
(source livré).
Honolulu a déjà été diffusé
Ă  plusieurs centaines de
milliers d’exemplaires
DES SITES EN WEBDEV
Parmi les dizaines de milliers de sites réalisés en
WEBDEV, en voici quelques-uns. Retrouvez-en
plus de 1000 sur le site www.pcsoft.fr.
www.pcsoft.fr ‱ 7
WEBDEVÂź 19
DES DIZAINES DE MILLIERS
DE SITES
Des milliers
d’autres sites à
découvrir sur
www.pcsoft.fr
RAPPEL : SITE STATIQUE
Un SITE STATIQUE est un site qui présente des pages figées,
reliées de maniÚre définie les unes aux autres.
Il s’agit en gros d’un «ensemble de pages» sur Internet, que
l’on peut juste consulter.
En général ce site présente des informations de base sur la
sociĂ©tĂ©, le groupe ou l’association: activitĂ©, adresse, les pro-
duits, et quelquefois des tarifs, une page de contacts...
Les limites des sites statiques se font vite sentir: Ă  chaque
modification d’une donnĂ©e, il faut la reporter dans le site, et
ré-installer les pages concernées.
Pour que les produits prĂ©sentĂ©s restent d’actualitĂ©, il faut
effectuer Ă  chaque fois les modifications sur le site statique.
QU’EST-CE QU’UN SITE DYNAMIQUE ?
Un SITE DYNAMIQUE crée «à la volée» les pages vues par
les internautes, en fonction des actions de l’internaute et des
données présentes dans des bases de données.
Prenons l’exemple d’un catalogue qui contient 30.000
articles: un site statique devrait prévoir 30.000 pages HTML
statiques différentes !
Un site dynamique ne nĂ©cessitera qu’une seule page, prĂ©-
vue pour recevoir des données (les références du produit, sa
photo,...). Le serveur «assemblera» les éléments nécessaires
à la demande, à la volée.
TOUJOURS À JOUR
Les donnĂ©es du site dynamique sont TOUJOURS À JOUR,
puisqu’issues des bases de donnĂ©es de l’entreprise.
Vous affichez les stocks rĂ©els, vous indiquez Ă  l’internaute
la date rĂ©elle d’envoi de sa commande, vous gĂ©rez des plan-
nings,...
DES SITES QUI SONT DE
VÉRITABLES APPLICATIONS
Autre aspect intéressant des sites dynamiques réalisés avec
WEBDEV 19, ils se comportent comme de VÉRITABLES
APPLICATIONS. Toute la puissance de l’informatique est à
votre disposition.
FACILITÉ DE RÉALISATION
GrĂące Ă  la puissance de son environnement complet et Ă  sa
richesse fonctionnelle, il est extrĂȘmement FACILE Ă  tout
développeur, sans compétence particuliÚre en Internet, de
réaliser des sites dynamiques sophistiqués, de haute fiabilité,
rapides et Ă©volutifs.
8 ‱ DĂ©veloppez 10 fois plus vite
AJOUTER UNE PARTIE «DYNAMIQUE»
À UN SITE STATIQUE EXISTANT
WEBDEVÂź 19
UN SITE DYNAMIQUE C’EST QUOI ?
Aujourd’hui, la plupart des sociĂ©tĂ©s possĂš-
dent un site statique, mais désirent profiter
de fonctionnalités dynamiques.
AVEC WEBDEV 19, RÉUTILISEZ VOTRE
EXISTANT
Pour réutiliser un EXISTANT, vous pouvez, à 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
‱ ...
MIXER STATIQUE ET DYNAMIQUE
MIXER statique et dynymique est la solution la plus rapide.
Souvent un site statique existe dans l’entreprise.
Le site statique est CONSERVÉ, et les pages dynamiques
sont RAJOUTÉES, ou remplacent certaines pages statiques.
Il est Ă©galement facile de relier de maniĂšre transparente 2
sites, un statique et l’autre dynamique.
IMPORTER LES PAGES STATIQUES
WEBDEV 19 propose une puissante fonctionnalitĂ© d’import
de pages statiques et de templates (voir page 44).
Les pages existantes sont ainsi IMPORTÉES dans l’environ-
nement, et sont transformées en pages WEBDEV 19.
LE BESOIN DE «TEMPS RÉEL»
Un tarif change dans le systùme de gestion de l’entreprise ?
Immédiatement, le site est à jour.
Une nouvelle référence de produit est créée ?
Automatiquement et immédiatement ce produit est présent
sur le site dynamique.
Le stock Ă©volue ? Automatiquement, le client qui passe com-
mande est informé.
Sans avoir Ă  installer en permanence, Ă  modifier et mettre Ă 
jour les pages, un site dynamique affiche automatiquement
des DONNÉES À JOUR.
LE «DYNAMIQUE» EST INDISPENSABLE
Aujourd’hui, vos sites doivent se comporter comme des appli-
cations ! Vos sites doivent ĂȘtre des sites dynamiques.
WEBDEVÂź 19
www.pcsoft.fr ‱ 9
WYSIWYG:
créez en visuel
WEBDEVÂź
CRÉATION DE PAGE :
UNE MÉTHODE RÉVOLUTIONNAIRE
WEBDEVÂź 19
Créez vos sites «à la souris», WEBDEV 19
génÚre automatiquement le code HTML, le
code Javascript et le code Serveur néces-
saires au site. Et sur demande, WEBDEV 19
gĂ©nĂšre mĂȘme le site en PHP.
CLIQUEZ AU LIEU DE CODER
WEBDEV 19 est un environnement complet, intégré.
L’ensemble du dĂ©veloppement s’effectue avec un seul envi-
ronnement et un seul et unique langage: le WLangage, L5G
d’une trùs grande PUISSANCE, et FACILE à apprendre.
WEBDEV 19 permet ainsi de s’affranchir des connaissances
inutilement complexes de l’Internet.
Par ailleurs, les traitements sont totalement séparés des
pages, il n’y a pas de mĂ©lange comme avec des langages tra-
ditionnels.
Les pages se créent facilement en positionnant les champs à
la souris (voir encadré page 14).
Des zones de champs peuvent ĂȘtre crĂ©Ă©es pour les dĂ©place-
ments et dĂ©calages d’un bloc.
HTML ET JAVASCRIPT
Inutile de connaßtre ni HTML ni Javascript pour réaliser de
superbes et puissants sites dynamiques.
WEBDEV 19 génÚre tout le code qui est nécessaire à votre
place.
Mais WEBDEV 19 est OUVERT, et si cela est nécessaire, il
est toujours possible de taper (ou coller) directement du code
de bas niveau: HTML, Javascript, scripts ASP, JSP, Applets Java,
PHP...
Avec WEBDEV 19, vos équipes développent
10 FOIS PLUS VITE tous les types de sites
et d’applications, Internet, Intranet, Extranet
et SaaS.
L’éditeur de WEBDEV : visuel,
création des pages et des
champs Ă  la souris !
Code HTML qu’il fallait
taper soi-mĂȘme Code Javascript qu’il fallait taper
soi-mĂȘme
Le WLangage de WEBDEV:
simplifiez et réduisez le code !
La création et le paramétrage
s’effectuent visuellement, en
WYSIWIG, Ă  la souris, pour les
pages et les puissants champs.
Inutile de connaĂźtre HTML pour
créer des pages sophistiquées.
WEBDEV 19
est fourni en
standard avec
accĂšs natif Ă 
SAP,
Lotus Notes,
Excel,
SalesForce,
Google
et Outlook
WEBDEVÂź 19
TOUTES LES BASES DE DONNÉES: MYSQL,
ORACLE, AS/400, SQL SERVER, INFORMIX...
Une description de structures de données sous WEBDEV
10 ‱ DĂ©veloppez 10 fois plus vite
Un site dynamique utilise des données.
WEBDEV 19 accĂšde Ă  toutes les bases de don-
nées du marché.
WEBDEV est ouvert, il permet de ré-utiliser et
de cohabiter avec un existant.
TOUTES LES BASES DE DONNÉES SONT
SUPPORTÉES (LISTE NON EXHAUSTIVE)
WEBDEV peut lire et écrire dans toutes les bases de données.
Parmi ces bases, on trouve les suivantes:
*: accĂšs natif standard **: accĂšs natif en option
HFSQL, UNE PUISSANTE BASE DE
DONNÉES SQL EN STANDARD
WEBDEV est livré avec HFSQL, une puissante base de don-
nées SQL Client/Serveur, déjà utilisée sur des millions de sites.
HFSQL est décrit en détail page 41.
ACCÈS EN MODE NATIF
WEBDEV peut accéder en mode natif à MySQL, Oracle, SQL
Server, PostgreSQL, SQLite, AS/400, DB2, Informix, Sybase
directement (modules disponibles séparément).
L’installation de ces accĂšs natifs est extrĂȘmement simple (un
fichier de taille réduite).
Les champs de type BLOB ou Long Raw sont
supportés.
Les performances d’accùs sont remarquables.
SUPPORT NATIF DES BASES
«AS/400» ET «ISERIES»
WEBDEV accùde à l’AS/400 directement
(module disponible séparément), sans driver
ODBC, OLE DB et sans ActiveX. WEBDEV sait
récupérer et exporter des DDS, lancer des
commandes CL, gérer une
Dataqueue,...
L’intĂ©gration Ă  l’environnement est
totale, et la vitesse est Ă©poustou-
flante.
Demandez la brochure spéci-
fique !
TOUTES LES BASES DE DONNÉES VIA
ODBC OU OLE DB
WEBDEV 19 accÚde à toute base de données possédant un
driver ODBC ou OLE DB.
SCRIPT SQL = ANALYSE WEBDEV
Une analyse dĂ©finie sous WEBDEV peut ĂȘtre convertie en
script SQL pour créer de nouvelles bases SQL, et tout script
SQL peut ĂȘtre converti automatiquement en analyse WEBDEV
pour exploiter un existant.
Cela offre une ouverture totale.
La rĂ©cupĂ©ration des structures existantes s’effectue le plus
souvent par un simple «drag&drop» vers l’éditeur d’analyses.
LES PROCÉDURES STOCKÉES
Si la Base de Données tierce supporte les procédures stoc-
kées, celles-ci sont accessibles par des applications écrites
avec WEBDEV.
LA PROGRAMMATION EST IDENTIQUE
QUELLE QUE SOIT LA BASE DE DONNÉES
Quelle que soit la base de données, vous pourrez utiliser indif-
féremment la programmation par SQL ou par les ordres du
L5G de WEBDEV, le WLangage (hLitSuivant,...).
Cela offre encore fois une grande ouverture, et la possibilité
de changer de base de données trÚs facilement.
VOUS UTILISEZ WINDEV...
Si vous utilisez WINDEV, notez que vous pouvez partager le
projet et ses Ă©lĂ©ments (code, classes, fenĂȘtres, requĂȘtes, Ă©tats,
...) entre les 2 environnements, et exporter vos applications
vers WEBDEV.
WEBDEV 19 permet de créer un nouveau
site et ses données, ou de créer des sites
reliés à des données existantes, quelle que
soit la Base de Données.
- HFSQL*
- MySQL*
- Oracle**
- Informix**
- SQLServer**
- PostgreSQL*
- SQLite*
- IBM DB2**
- IBM AS/400**
- Sybase**
- Netware SQL
- Ingres
- Progress**
- XML*
- Bull DPS
- FoxPro
- Paradox
- Access
- xBase*
- ASCII*
- Excel*
- Etc...
WEBDEVÂź 19
Internet Explorer
sous Windows
Firefox
sous Windows
Firefox
sous Linux
Tablette
sous Android
iPad
Chrome
sous Windows
Safari
sur Mac
WEBDEV
génÚre à la
demande des
sites compa-
tibles avec la
norme W3C
transitional
www.pcsoft.fr ‱ 11
LES SITES CRÉÉS
AVEC WEBDEV
SONT
COMPATIBLES
AVEC TOUS LES
NAVIGATEURS
Les navigateurs propo-
sent tous leurs particu-
larités, qui diffÚrent
mĂȘme selon les ver-
sions.
WEBDEV génÚre un
code générique, qui est
reconnu par quasiment
tous les navigateurs
standard du marché.
Voici la consultation du
mĂȘme site sous diffĂ©-
rents navigateurs et
systĂšmes.
LE MÊME SITE
WEBDEV S’AFFICHE
SUR TOUS LES
NAVIGATEURS
iPhone
VOS SITES COMPATIBLES TOUS NAVIGATEURS
La méthode RAD (facultative) de construction
automatique de sites de WEBDEV (RAD: «Rapid
Application Development») permet de générer
automatiquement des sites INTERNET et
INTRANET directement utilisables.
Tout est personnalisable et modifiable.
Un site dynamique complet est réalisable en
quelques dizaines de minutes !
AprÚs avoir spécifié la description des tables de données (ana-
lyse), créer un site complet avec WEBDEV est automatique:
menu, pages, code...
Si la description des données qui sert au développement est
déjà décrite (base de données existante par exemple), il suf-
fit de récupérer cette description.
Le site généré est totalement modifiable bien sûr.
Voici sur un exemple le processus de crĂ©ation d’un site avec
le RAD.
ïżœ INDIQUEZ la base de donnĂ©es Ă  utiliser (analyse).
Visualisation des liens entre tables
ïżœ CLIQUEZ sur l'icone «RAD» de la barre d'icones.
Notez que vous pouvez générer le site en PHP.
ïżœ DiffĂ©rentes prĂ©sentations possibles (les TEM-
PLATES, ou «modÚles de pages») sont proposées.
ïżœ SÉLECTIONNEZ les tables Ă  utiliser. Les relations
entre les tables seront automatiquement gérées.
La puissance de WEBDEV en un clic...
ïżœ GÉNÉREZ! Le site dynamique est crĂ©Ă©!
Il est immédiatement opérationnel, avec les pages de saisie
de données, les liaisons entre pages,... Mais vous pouvez bien
sûr le personnaliser, le modifier, ajouter des pages statiques,
des illustrations, modifier le code des traitements, ajouter de
nouveaux traitements, etc... Il n’y a aucune limite: vous ĂȘtes
le maßtre de vos développements.
ïżœ Lorsque vous dĂ©sirez INSTALLER le site, lancez la
création automatique de «procédure d'installation» et
WEBDEV crée pour vous la procédure d'installation.
Si vous avez utilisé la Base de Données HFSQL (librement dif-
fusable), la procĂ©dure inclura mĂȘme le moteur de la Base de
Données.
La présence de WEBDEV n'est bien sûr pas nécessaire chez
l’hĂ©bergeur, il suffit d’un serveur d’application WEBDEV ou
d’un moteur PHP selon le type de site que vous avez gĂ©nĂ©rĂ©.
Voilà, le site est créé, en quelques minutes !
GÉNÉREZ VOTRE PROPRE CODE
Grùce à la fonctionnalité de «pattern», WEBDEV vous per-
met de définir le code qui sera généré. Le RAD utilisera votre
code, vos classes, vos procédures !
RAD PHP: EN STANDARD
WEBDEV 19 permet de générer des sites dynamiques en PHP.
Inutile de connaßtre PHP, WEBDEV 19 génÚre le code néces-
saire. Voir page 36 pour le détail sur PHP.
RÉPONDEZ PLUS VITE À UN CAHIER DES
CHARGES
RĂ©pondre Ă  un cahier des charges pour remporter un contrat
est facile avec WEBDEV !
Vous aurez plus de chances de gagner la confrontation en
présentant chez le futur client un site réel généré rapidement
avec le RAD. Vous personnaliserez ensuite le site aux goûts
et besoins du client.
Un site rĂ©el est plus spectaculaire qu’une simple proposition
Ă©crite remise au prospect !
12 ‱ DĂ©veloppez 10 fois plus vite
WEBDEVÂź
WEBDEVÂź 19
LE RAD WEB : DÉVELOPPER UN SITE
INTERACTIF EN QUELQUES CLICS
VOICI UN EXEMPLE DE PAGES
GÉNÉRÉES AUTOMATIQUEMENT
PAR LE RAD
Et ainsi de suite pour chaque choix.
Chaque page générée est totalement modifiable.
RAD «APPLICATIF»
Complément du RAD, le «RAD applicatif» propose des sites déjà
dĂ©veloppĂ©s, qu’il suffit de paramĂ©trer Ă  ses besoins. Le site peut ĂȘtre
utilisé tel quel, ou
inclus dans un site
existant.
Parmi les sites
proposés: com-
merce Ă©lectro-
nique, blog, CMS
(SystĂšme de
Gestion de
Contenu), site
associatif,
Forum,...
www.pcsoft.fr ‱ 13
WEBDEV
est compatible
WINDEV et
WINDEV Mobile
PORTABILITÉ UNIVERSELLE
Le développement multi-cibles (Windows, Linux, .Net,
Internet, Intranet, SaaS, Smartphone, Tablette, Android,
iOS, terminal, Mac, sur serveur Windows ou Linux...) est
rendu possible par la compatibilité entre les versions 19
de WEBDEV, WINDEV Mobile et WINDEV.
Depuis le mĂȘme code, crĂ©ez un site Internet et une appli-
cation Windows par exemple !
Site WEBDEV
sur serveur Linux
Application Windows
avec WINDEV
Application Linux
avec WINDEV
Site WEBDEV
sur iPad, iPhone
et Android
Site PHP
avec WEBDEV
Application Java
avec WINDEV
Les boutons de choix sont générés
automatiquement, et modifiables
Le choix «Frais» ouvre la
page suivante, générée auto-
matiquement, et modifiable
Un clic sur un bouton ouvre
la page suivante, générée
automatiquement
et bien sûr modifiable
Le bouton «Projet» ouvre la
page suivante.
Le bouton «Modifier»
ouvre la page suivante,
générée automatiquement,
et modifiable
Votre code est
Ă©galement
compatible
Android,
Windows Phone
et iOS (iPhone
et iPad)
Java AJAX iOS
14 ‱ DĂ©veloppez 10 fois plus vite
La méthode la
plus intuitive
WEBDEV 19 propose certainement l’environ-
nement de travail le plus puissant, le plus
facile et le plus intégré du marché !
Vos équipes créeront facilement de superbes
sites. Aucune connaissance préalable de la
programmation Internet n’est nĂ©cessaire.
Le générateur de pages de WEBDEV permet de réaliser faci-
lement de superbes pages.
PC SOFT bénéficie d'une expérience de plus de 20 ans dans la
conception d'outils de création d'IHM. Cette expérience a été
mise Ă  profit pour WEBDEV.
Notez que les pages suivantes détaillent de nombreuses fonc-
tionnalités présentées dans ce chapitre.
LES CHAMPS DANS LES PAGES:
WYSIWYG RÉVOLUTIONNAIRE !
Les différents champs (saisie, table, image...) sont créés et
positionnés visuellement, en interactif sous l'éditeur. Ce que
vous voyez sous l’éditeur correspond Ă  ce que l’internaute
verra dans son navigateur.
Les pages (avec les champs, leurs caractéristiques détaillées
définie par les 7 onglets, et leur code) sont sauvegardées
comme éléments réutilisables.
Cette technique permet de simplifier la programmation, en
gérant les pages comme des objets évolués.
L’éditeur de pages permet de crĂ©er et de modifier visuelle-
ment les champs, indépendamment du code source.
Il est possible de s’abonner aux Ă©ventuelles modifications
d’un Ă©lĂ©ment partagĂ© entre plusieurs dĂ©veloppeurs (hĂ©ri-
tage).
Avec WEBDEV 19, il est bien sûr possible d'intervenir par pro-
gramme pour modifier les propriétés d'un champ: cible, cou-
leur, visibilité,...
Par exemple, selon le profil de l’internaute, il est possible de
rendre des champs visibles ou invisibles, ... Tout est dyna-
mique !
Cette technique de gestion des pages et des champs fait
gagner un temps considérable lors de la maintenance des
sites, et apporte un gain de robustesse.
Et un simple «GO» permet de tester immédiatement le site.
UN POSITIONNEMENT PRÉCIS AVEC OU
SANS CSS
WEBDEV inclut de maniĂšre transparente des algorithmes de
positionnement (Ă  la souris) trĂšs puissants, et permet un posi-
tionnement au pixel prĂšs.
WEBDEV peut faire appel, si vous le désirez, aux feuilles de
styles à la norme CSS. Les feuilles de styles se créent facile-
ment depuis l’environnement (voir Ă©galement CSS3 p34)
Les tables de positionnement optimisent
le poids des pages
TOUS LES CHAMPS POUR INTERNET
L'éditeur de WEBDEV permet de créer et manipuler tous les
champs dont vous aurez besoin pour réaliser rapidement de
superbes interfaces (voir pages 18 Ă  25).
Les principaux objets gérés par l'éditeur d'IHM sont:
‱ Texte, libellĂ© HTML
‱ 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
WEBDEVÂź
WEBDEVÂź 19
UN PUISSANT ENVIRONNEMENT VISUEL
Sous l’environnement intĂ©grĂ©
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 17)
www.pcsoft.fr ‱ 15
‱ Champ HTML
‱ Champ Applet Java, Objet Flash
‱ Champ «rĂ©glette» de parcours
‱ Superchamp, Modùle de champs,
‱ IFrame, Page interne
‱ SiteMapPath, Plan du site,
‱ Graphe, Calendrier
‱ Onglets, etc...
Les masques de saisie HTML5 sont
gérés.
POSITIONNEMENT PAR
ANCRAGE
Les ancrages définissent la maniÚre
dont le contenu d’une page va se com-
porter lorsque la page est agrandie par
l’internaute.
La gestion des ancrages en WEBDEV 19
est trĂšs facile.
LE CHAMP
«ZONE RÉPÉTÉE»
WEBDEV permet la création de zones
répétées multicolonnes, remplies auto-
matiquement par liaison fichier, ou par
programmation personnalisée (voir
page 19).
DÉFINIR UN LIEN
Pour définir un lien depuis un bouton graphique ou un
champ lien, il suffit de pointer la page à afficher à l’aide du
mini-modifieur.
Ce lien peut ĂȘtre redĂ©fini par programmation si nĂ©cessaire.
LES GRAPHIQUES DE GESTION
Un grapheur est livré avec WEBDEV; il permet de réaliser faci-
lement des histogrammes, des courbes, des camemberts,
boursiers... en 2D ou en relief. On retrouve encore ici la sim-
plicité phénoménale de WEBDEV !
DES BOUTONS INTELLIGENTS
Le «multi-clic» sur les boutons de validation est neutralisé par
défaut. Un internaute qui clique 3 fois sur le bouton «vali-
der» ne recevra pas 3 fois sa commande...
PLAN DU SITE
Le plan du site est calculĂ© par rĂ©tro-analyse de l’existant, en
fonction des liens fixes et programmés.
Un champ «plan du site» est automatiquement crĂ©Ă© pour ĂȘtre
inclus dans le site généré.
DES AMBIANCES POUR
TOUS LES USAGES
WEBDEV 19 est livré avec de
nombreuses ambiances de page,
permettant ainsi de réaliser faci-
lement des sites pour toutes les
cibles (comme par exemple ci-
contre, sur un Apple iPhone).
CRÉEZ FACILEMENT VOS PAGES
DE BELLES PAGES FACILEMENT
La crĂ©ation des pages s’effectue facilement, en visuel, et vous
disposez d’un arsenal impressionnant de champs (contrîles)
trÚs puissants. Un «champ de saisie» WEBDEV avec toutes ses
fonctionnalités intégrées, qui se pose par un simple
«glisser/déplacer» à la souris correspond à plus de 50 lignes
Javascript ! Vous imaginez facilement le code que vous Ă©cono-
misez.
DĂ©couvrez dans les pages suivantes
les principales possibilités offertes
par l’éditeur intĂ©grĂ© de WEBDEV 19.
16 ‱ DĂ©veloppez 10 fois plus vite
La méthode la
plus simple et la
plus intuitive
WEBDEVÂź
WEBDEVÂź 19
UN ENVIRONNEMENT DE CRÉATION WEB
INTÉGRÉ ET INTUITIF
L’environnement de travail WYSIWYG de
WEBDEV apporte un confort propice Ă  la pro-
ductivité.
Vos équipes réaliseront facilement les sites
que vous devez développer, et que vos clients
et utilisateurs attendent.
WEBDEV 19 est facile Ă  prendre en main: une
semaine suffit en général à un développeur.
Tout est en français: c’est plus clair (version anglaise Ă©gale-
ment disponible).
Tout est intĂ©grĂ© avec le mĂȘme mode opĂ©ratoire, tout est
visuel, tout est inclus: vos équipes développent plus vite !
Le Support Technique5
est également inclus, ce qui représente
encore un confort et des économies non négligeables, ainsi
qu’un gain de temps de dĂ©veloppement supplĂ©mentaire.
Notez que les projets peuvent ĂȘtre sauvĂ©s dans le Cloud, ce
qui facilite le travail en Ă©quipe.
WEBDEV 19 est compatible WINDEV 19.
Roue chromatique dans l’environnement
L’environnement
intégré est trÚs
intuitif.
Un petit carré
jaune indique que
le champ fait par-
tie du modĂšle
(template)
Un menu contextuel
(clic droit) est dispo-
nible pour un accĂšs
rapide aux différentes
fonctionnalités
Un menu contextuel
(clic droit) est dispo-
nible pour le para-
métrage des barres
d’icones.
Les volets proposent des
composants, des
champs, du code,...
pour vous faire gagner du
temps
Volet: il donne
une vision glo-
bale du projet; un
double-clic (ou
un drag & drop)
sur un élément
l’ouvre immĂ©dia-
tement
Ruban & boĂźtes Ă  outils
déplaçables, visibles ou
pas, et paramétrables
Barre d’informa-
tion indiquant le
nom de la page en
cours, taille,...
L’interface des Ă©diteurs est
vraiment 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
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’Internet
n’est nĂ©cessaire, tout est dĂ©crit en français lim-
pide.
Les caractéristiques de chaque contrÎle (champ) se définissent par
l’intermĂ©diaire d’un mode de dialogue exclusif, trĂšs facile et trĂšs
puissant: 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Ă©tail
des 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 de pages efficaces.
www.pcsoft.fr ‱ 17
Les 7 onglets
facilitent les
créations de
page: il suffit de
cliquer
WEBDEVÂź
TECHNOLOGIE 7 ONGLETS : DES CONTRÔLES
PUISSANTS EN QUELQUES CLICS
WEBDEVÂź 19
Onglet
«Général»: nom,
libellé, type du
champ, visuali-
sation du style...
Ici masques pro-
posés
1
4
5
6
7
2
3
WEBDEV 19 propose tous les types de champs
(«contrÎles») nécessaires à la création des
pages Internet et Intranet. Voici quelques-
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 un
contenu. Ce champ trÚs puissant est présenté en détail en
pages 24 et 25.
CHAMP DE SAISIE RICHE HTML
Ce type de champ permet de créer et mettre en page des
textes avec enrichissement.
Une barre d’outils apparaĂźt automatiquement en tĂȘte du
champ, et permet 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 19 permettent, comme les
autres champs, de définir de nombreux paramÚtres, de
maniÚre visuelle et intuitive à travers les «7 onglets» ou par
programmation. Il est facile de définir de puissants masques
de 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 de
fichier, adresse email, code postal...
PERSONNALISER LE LISERÉ DES CHAMPS
Un champ peut posséder un liseré.
Un usage habituel de ce liseré est de mettre en valeur le
champ qui a le focus.
3 exemples de liserés différents,
matérialisant le champ en saisie
Il est facile de personnaliser l’apparence du liserĂ©, selon les
actions sur le champ: prise de focus, survol,...
TABLES SERVEUR, NAVIGATEUR ET
TABLES AJAX
Les tables sont gérées par WEBDEV 19.
Une table «habituelle» est une table serveur, qui effectue des
requĂȘtes sur le serveur pour se remplir.
Le mode Ajax est géré sur les tables serveur, ce qui élimine
le rĂ©affichage complet de la page Ă  chaque modification d’un
élément de la table. La page 26 détaille des fonctionnalités
offertes sur les tables Ajax.
Une table peut Ă©galement ĂȘtre en mode «Navigateur», c’est
Ă  dire n’exĂ©cuter aucun code serveur.
Le champ «Table Navigateur» est un champ table complÚte-
ment autonome sur le navigateur.
Il n’y a pas d’aller-retour avec le serveur d’application.
Son contenu peut ĂȘtre initialisĂ© directement sous l’éditeur de
WEBDEV, en saisissant les données à afficher !
Ce type de champ peut ĂȘtre utilisĂ© Ă  la fois dans les sites sta-
tiques et des sites dynamiques !
Le champ «Table Navigateur» propose des fonctionnalités
automatiques de :
‱ filtre,
‱ recherche,
‱ dĂ©placement de colonne,
18 ‱ DĂ©veloppez 10 fois plus vite
Tous les
champs du
Web,
et plus...
WEBDEVÂź
WEBDEVÂź 19
DE PUISSANTS CONTRÔLES (CHAMPS)
POUR LES PAGES
En entrant dans le champ, le masque apparaĂźt:
notez la barre qui permet d’enrichir le texte
‱ colonne redimensionnable,
‱ en-tĂȘte de colonne, sur-entĂȘte de colonne...
Le champ «Table Navigateur» peut Ă©galement ĂȘtre manipulĂ©
et rempli par programmation en code navigateur.
UNE ZONE RÉPÉTÉE EST UN CONCEPT
TRÈS PUISSANT
Une «zone répétée» est un ensemble de champs qui se
répÚte horizontalement, verticalement et/ou linéairement un
nombre de fois défini ou indéterminé.
Les zones répétées sont soit alimentées par programme, soit
par 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 nombre
d’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
La zone répétée peut adapter dynamiquement le nombre
d’é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 AUTOMATIQUE
La réglette de parcours rapide des pages (avec son code) est
générée automatiquement pour une zone répétée, tout
comme pour une table,...
Exemples de réglette automatique
MENUS DÉROULANTS & POP-UP
WEBDEV permet de créer des menus déroulants (verticaux et
horizontaux) en mode WYSIWYG, des menus «onglet», et
des menus «Pop-up».
Il est possible d’ajouter dynamiquement (par programmation)
des choix de menus, des sous-menus, etc...
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é
www.pcsoft.fr ‱ 19
Des champs
sophistiqués trÚs
faciles à créer
WEBDEVÂź
‱‱‱suite page 20
CHAMP VIGNETTE
(STATIQUE OU DYNAMIQUE)
Un site Web gĂšre souvent des images ou des photos qui sont
par ailleurs utilisées sous forme de vignette (imagette), par
exemple pour leur sélection.
WEBDEV 19 gÚre automatiquement la génération dynamique
automatique de ces vignettes: elles sont créées en fonction
de l’image initiale.
WEBDEV 19 offre un deuxiĂšme mode de fonctionnement
pour ces vignettes: le mode statique. Dans ce mode, la
vignette est crĂ©Ă©e par l’infographiste, avec un contenu qui
peut ĂȘtre diffĂ©rent de celui de l’image principale pour qu’elle
soit mieux visible ou représentative.
CHAMP CALENDRIER ET CHAMP DE
SAISIE DATE AVEC POPUP CALENDRIER
Le champ calendrier permet soit de créer un champ intégré
dans une page, soit d’ouvrir une «popup» calendrier pour la
saisie 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 dates
dé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 lors
d’un affichage ou d’un choix de date.
Le champ calendrier est trùs pratique à l’usage
CAPTCHA CODE
La gestion des «captcha», ces codes de sécurité à saisir par
l’internaute, est totalement automatique.
Le champ captcha calcule et affiche automatiquement
l’image dĂ©formĂ©e correspondant Ă  un texte.
Ce texte est soit généré automatiquement par le champ, soit
dĂ©fini par l’application.
La déformation change à chaque affichage.
CHAMP GRAPHE (AJAX)
Le champ graphe de WEBDEV 19 propose de nombreux types
de graphes, en mode 2D et relief: courbes, barres, hémicycle,
camembert, ...
L’interaction de l’internaute avec les graphes est assurĂ©e en
mode Ajax, par une barre d’outils permettant de modifier
dynamiquement certains paramĂštres: type de graphe, affi-
chage de légende,...
IMAGES, IMAGES CLIQUABLES
Le 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.
IMAGE AVEC ZOOM AUTOMATIQUE
Lorsque l’effet de zoom est activĂ© sur une image, le survol
de l’image par le curseur de souris ouvre automatiquement
une zone à cÎté de cette image, zone dans laquelle la par-
tie de l’image originale pointĂ©e est affichĂ©e agrandie, ce qui
20 ‱ DĂ©veloppez 10 fois plus vite
La méthode la
plus simple et la
plus intuitive
WEBDEVÂź
WEBDEVÂź 19
DES CHAMPS PUISSANTS POUR LES PAGES
suite de la page 19
‱‱‱
met en avant le détail de cette partie.
La taille de la PopUp zoomée est paramétrable, ainsi que le
facteur 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
EFFET MOUVEMENT AUTOMATIQUE
D’IMAGE
Cet effet donne vie Ă  vos pages !
L’effet «mouvement automatique» simule le dĂ©placement
lĂ©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 automatiquement
des photos de produit: bien immobilier, produit de luxe,...
SUPPORT DU JPEG PROGRESSIF
Le JPEG Progressif est un format d’affichage qui affiche une
image progressivement, pendant que le navigateur charge
l’image; l’image devient plus nette au fil des secondes.
Quand une image est insérée dans un site, WEBDEV 19 per-
met de transformer cette image au format JPEG Progressif.
CHAMP SLIDER & RANGE SLIDER
Les champs potentiomÚtre linéaire (Slider) et potentiomÚtre
d’intervalle (range Slider) sont proposĂ©s.
ZONES DE CLIQUAGE (MAP AREA)
Les zones de clicage permettent de réaliser des traitements
d’hypertexte: en fonction de la zone d’une image sur laquelle
l’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 le
milieu médical.
CHAMP «VIDEO»
Le champ «Vidéo» permet de jouer des vidéos Flash (Flv),
QuickTime (Mov), Microsoft (Wmv),...
Les fonctionnalités de lecture, pause, avance rapide,... sont
gérées.
L’affichage de vidĂ©os est Ă©galement gĂ©rĂ© par HTML 5 si le
navigateur le supporte (voir page 27)
CHAMP «FLASH»
Le champ «Flash» permet d’inclure des champs flash dans
une page WEBDEV: bandeau animé....
CHAMP FLEX
Le format Flex permet de créer des animations, des banniÚres,
des effets et des formulaires. Il est facile d’intĂ©grer des fichiers
Flex (et Silverlight) dans une page WEBDEV.
CHAMP NOTATION
Ce 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
www.pcsoft.fr ‱ 21
La méthode la
plus simple et la
plus intuitive
WEBDEVÂź
‱‱‱suite page 22
22 ‱ DĂ©veloppez 10 fois plus vite
La méthode la
plus simple et la
plus intuitive
WEBDEVÂź
WEBDEVÂź 19
CHAMPS PLANNING & AGENDA
Le 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 des
tĂą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 rendez-vous sont compatibles avec
l’environnement «multi-touch», et peuvent donc s’effectuer
avec le doigt.
Un champ «Agenda» est également disponible.
SITEMAPPATH (CHEMIN DE NAVIGATION)
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
génération de cette ligne est automatique.
Un plan du site est également automatiquement généré.
La navigation devient facile
LA FONCTION «UPLOAD»
Le champ Upload permet de télécharger depuis le Navigateur
un fichier vers le serveur. Sélecteur de fichiers, multi sélec-
tion, 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Ă©.
GFI AUTOMATIQUE
Le GFI (Grisage de FenĂȘtre Inactive) de page sur page est gĂ©rĂ©
automatiquement. La page inactive est assombrie dĂšs
qu’une page de dialogue s’ouvre.
CHAMP RÉSEAU SOCIAL
Le champ «RĂ©seau social» est une barre d’outils composĂ©e
de pictogrammes faisant le lien vers les principaux réseaux
sociaux du Web : Facebook, Tweeter, Google+, LinkedIn.
TABLEAU HTML
Le champ Tableau HTML permet de créer facilement des
tableaux de présentation dans les pages.
ZONE FIXE SUR L’ÉCRAN (FIXED)
L’ancrage fixe permet de maintenir visibles un ou plusieurs
champs lors du dĂ©placement par l’internaute de l’ascenseur
(scrolling) du navigateur. La zone est dite «épinglée».
DES CHAMPS PUISSANTS POUR LES PAGES
suite de la page 19
‱‱‱
Le saviez-vous ?
Il est facile de
créer des «bulles
de survol» sur
tous les champs.
MĂȘme si l’internaute fait dĂ©filer la page vers le bas, le
panier reste visible au mĂȘme endroit
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 page
défile.
EFFETS CSS3 SUR LES CHAMPS
WEBDEV 19 permet de définir facilement des effets CSS3 sur
les champs de type image: accélération, clipping, fondu,
zoom automatique, fondu, grossissement en survol, effet
photo, mouvement panoramique, clignotement, décalage,
balayage, inclinaison, rotation, ...
Morphing
Inclinaison de champ en 1 clic...
Le cornage de page est également géré.
Il est mĂȘme possible de crĂ©er ses propres transitions et trans-
formations.
CHAMP BOUTON IMAGE
Comme leur nom l’indique, les boutons image sont basĂ©s sur
une 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é.
Des exemples de boutons graphiques livrés avec
WEBDEV 19
Ces images des diffĂ©rents Ă©tats peuvent ĂȘtre contenues dans
une planche d’images, gĂ©rĂ©e automatiquement, avec un affi-
chage fluide.
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 peut
contenir (ou pas) une ou des images.
Un bouton CSS peut proposer jusqu’à 5 Ă©tats Ă©galement, qui
sont des éléments du style CSS (pseudo-classes).
Le bouton CSS3 est automatiquement adapté selon le navi-
gateur.
CLIPART COMPLET DE 10.000 IMAGES ET
BOUTONS
WEBDEV 19 est livré avec un clipart comprenant plus de
10.000 éléments.
Il est possible de référencer ses propres images et illustrations
pour enrichir le catalogue.
Le contenu du clipart est riche et varié: images, icones,
cadres, animations, boutons graphiques, bandeaux, formes.
TOUS LES CHAMPS WEB
WEBDEV 19 propose également les champs «Treeview»,
Webcam, Applet Java, Iframe... Vous avez tout.
(voir Ă©galement le champ de mise en page trĂšs puissant
«Zone de Texte Riche», ZTR, ci-aprÚs).
www.pcsoft.fr ‱ 23
Les champs du
Web
WEBDEVÂź
WEBDEVÂź 19
‱‱‱suite page 24
24 ‱ DĂ©veloppez 10 fois plus vite
La méthode la
plus simple et la
plus intuitive
WEBDEVÂź
WEBDEVÂź 19
CHAMP «ZONE DE TEXTE RICHE» (ZTR) :
NOUVEAUTÉ PHARE DE LA VERSION 19
WEBDEV 19 propose un type de champ extrĂȘmement puis-
sant : il s’agit du champ «Zone de Texte Riche» (abrĂ©gĂ© en
ZTR).
Le champ Zone de Texte Riche est fondamental pour l’édi-
tion des pages statiques et dynamiques: saisir un texte riche
devient enfantin.
La saisie du texte et son enrichissement s’effectuent comme
dans un traitement de texte: insertion des images avec
habillage, insertion des liens, enrichissement du texte...
Tout se passe en WYSIWYG.
Sous l’éditeur, lors de saisie de texte, le champ s’agrandit
automatiquement lorsque cela est nécessaire.
Il n’est plus nĂ©cessaire comme avant de crĂ©er des champs dif-
férents à positionner cÎte à cÎte.
Comme pour tous les champs, le code HTML est automati-
quement généré par WEBDEV.
Ce code HTML est standard, optimisé et modifiable.
ZTR : MISE EN FORME DU TEXTE LUI-
MÊME
Le champ ZTR permet déjà, bien entendu, de spécifier les
caractéristiques de chaque texte, 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 tra-
duit en «Strong» dans le code HTML, ce qui facilite auto-
matiquement le référencement par les moteurs de recherche
(Google...).
Les balises adéquates sont insérées avant et aprÚs le texte
dans sa forme HTML.
Par exemple :
Bonjour
sera stocké sous la forme
<strong> Bonjour </strong>.
La balise <strong>, que le navigateur reconnait et interprĂšte,
signifie qu’il s’agit d’un mot «important».
Le navigateur affichera en général le texte entre balises en
gras, selon les prĂ©fĂ©rences du navigateur de l’internaute.
Le navigateur reconnait ces balises, et les interprĂšte.
Les moteurs de recherche utilisent Ă©galement ce type de
balise pour le rĂ©fĂ©rencement des pages. L’utilisation de ces
balises dans un texte augmente son référencement naturel.
ZTR : MISE EN FORME LOGIQUE
DE PARAGRAPHES
Le champ ZTR permet de mettre en forme les paragraphes:
titre, sous-titre, sous sous-titre, bas de page, adresse email,
note, haut de page...
La mise en forme est logique: par exemple, un titre sera
mémorisé automatiquement dans sa forme HTML comme un
texte de type <h1>.
<h1> est une balise HTML qui définit un titre de page.
Le navigateur reconnait ces balises, et les interprÚte: en géné-
ral le texte sera affiché en gros et gras !
Les moteurs de recherche utilisent Ă©galement ce type de
balise pour le référencement des pages: pour le moteur de
recherche, un titre aura plus de poids qu’un texte simple.
ZTR : MISE EN FORME PHYSIQUE
DE PARAGRAPHE
En plus de cette mise en forme logique, une mise en forme
physique est disponible: alignement des paragraphes, inden-
tation, couleur, ...
ZTR : DES PUCES
Des paragraphes peuvent ĂȘtre indentĂ©s, automatiquement,
avec ou sans puce (<li>).
Les puces peuvent ĂȘtre numĂ©rotĂ©es ou pas.
ZTR : STYLES CSS
Il est possible d’appliquer un style contenu dans le projet à
une sĂ©lection de texte d’une ZTR.
ZTR : INSERTION DE CHAMP
A tout endroit d’un texte dans une ZTR, il est actuellement
possible d’insĂ©rer un champ WEBDEV, de type :
‱ lien
‱ image.
Le champ est positionné au fil du texte, relativement au texte.
Le champ est «ancré» sur le texte.
C’est une nouvelle façon («au fil du texte») de mettre en
page avec WEBDEV !
LE CHAMP ZTR : ZONE DE TEXTE RICHE
suite de la page 21
‱‱‱
Visualisation
d’un unique
champ
«Zone de Texte
Riche» de
WEBDEV 19
www.pcsoft.fr ‱ 25
WEBDEVÂź 19
Une ZTR en crĂ©ation sous l’éditeur de pages
ZTR : INSERTION DE LIEN
Une ZTR peut contenir un ou plusieurs champs de type
«lien».
Il y a plusieurs façons d’insĂ©rer un champ lien dans une ZTR
:
‱ Transformer une sĂ©lection de texte en lien
‱ CrĂ©er un champ lien dans le texte
‱ Copier un champ lien existant.
Le champ lien prĂ©sent dans une ZTR offre les mĂȘmes possi-
bilitĂ©s qu’un champ lien habituel.
Le champ lien présent dans la ZTR est éditable avec la tech-
nologie «7 onglets».
Les fonctionnalités proposées par les «7 onglets» dans ce
contexte sont simplifiĂ©es pour s’adapter au contexte ZTR.
ZTR : INSERTION D’IMAGE
L’insertion d’une image dans un texte de ZTR peut prendre
plusieurs formes.
L’image peut ĂȘtre collĂ©e, ou l’image peut ĂȘtre insĂ©rĂ©e.
L’image elle-mĂȘme peut ĂȘtre recopiĂ©e dans le projet, ou son
lien peut juste ĂȘtre utilisĂ©, sans que l’image ne soit recopiĂ©e
dans le projet, au choix.
Les images ne sont jamais altérées par WEBDEV. Elles conser-
vent leur nom et leur taille d’origine.
Un style du projet peut ĂȘtre appliquĂ© Ă  l’image.
L’image est positionnĂ©e dans le texte, au fil de l’eau.
Des paramùtres d’habillage sont disponibles: gauche, droite,
paragraphe, dans le texte,...
ZTR : ACCÈS AU CODE HTML,
SAUVEGARDE DES MODIFICATIONS DE
HTML BRUT
L’accùs au code HTML de la ZTR est possible, et le code HTML
généré par WEBDEV dans la ZTR est volontairement clair et
lisible, au lieu d’ĂȘtre compressĂ©.
Un développeur qui maßtrise le code HTML peut modifier le
code HTML généré pour le champ ZTR, en édition, mais éga-
lement par programmation, lors de l’exĂ©cution du site.
Ce qui a été modifié directement dans le code HTML sera
visualisĂ© Ă©galement sous l’éditeur.
Les modifications effectuées sont conservées lors des futures
générations.
Exemple de code gĂ©nĂ©rĂ© et modifiable pour la fenĂȘtre ci-des-
sous :
<header>
<h1 class="CollectionTitre">La nouvelle collection arrive!</h1>
<div class="dzA2" id="dzA2">
<img src="vignette_collection.jpg" alt="" id="A2" class="padding">
</div>
<p class="CollectionCommentaire">
<img src="bulle.png" alt="" style=" width:16px; height:16px;" id="A1
Commentaires (<span class="NbCommentaires">24</span>)
</p>
<h2>La nouvelle collection arrive bientĂŽt dans nos boutiques et sur Internet :
</header>
<section>
<p>
<img src="fl%C3%A8che.png" alt="" style=" width:16px; height:16px;" id="A3
<a href="tendances.htm" target="_self" id="A9" class="padding CollectionLi
Venez découvrir en avant-premiÚre les <strong>nouvelles tendances </strong
</a>
</p>
<p>
Et ce n’est pas tout, en tant qu’abonnĂ© Ă  la newsletter, vous bĂ©nĂ©ficiez
réduction exclusive de 10%</strong> sur toute la <em>nouvelle collection<
</p>
<ul>
<li>10 % de remise pour les abonnés à la newsletter</li>
<li>AccÚs immédiat et exclusif à la nouvelle collection</li>
</ul>
</section>
<footer>...</footer>
La technologie Web 2.0 permet aux applica-
tions Web d’apporter un comportement d’IHM
proche d’une interface traditionnelle sous
Windows.
Un élément déterminant du Web 2.0 est
«AJAX» qui permet au navigateur de ne
rafraßchir que la partie modifiée de la page.
SANS AJAX...
En WEB traditionnel, lorsque l'application souhaite modifier un
seul élément dans une page affichée (par exemple un prix, une
liste de véhicules...), le serveur doit renvoyer la page entiÚre sur
la machine de l'internaute.
Cela charge le serveur, occupe de la «bande passante», produit
un effet visuel de «repaint» sous le navigateur de l'internaute,
et l'affichage peut ĂȘtre lent puisque le navigateur doit rĂ©inter-
préter et réafficher la page entiÚre...
AVEC AJAX...
Avec la technologie AJAX, point central du «WEB 2.0», il
devient possible de n'envoyer sur la machine de l'internaute
«que» les données modifiées, sans rafraßchir la totalité de la
page.
Les avantages sont multiples : le serveur est moins sollicité,
les informations qui circulent sont de taille réduite, l'affichage
pour l'internaute est immédiat et sans effet visuel.
UTILISER AJAX DANS UN SITE WEBDEV:
1 CLIC !
Vous n'avez rien de spécifique à programmer.
Vous bénéficiez automatiquement de AJAX.
Vous continuez Ă  programmer en L5G (WLangage). WEBDEV
s'occupe de tout !
Un choix «AJAX» apparaßt dans la barre de titre de l'éditeur de
code. Si vous désirez activer AJAX sur le traitement, il suffit
de cliquer ... sur le bouton «AJAX».
Le libellé change et devient «AJAX activé».
26 ‱ DĂ©veloppez 10 fois plus vite
le Web 2.0
apporte la
convivialité à
vos sites et
applications
WEBDEVÂź
Quelques fonctionnalités disponibles dans les tables «AJAX»
Ces fonctionnalités sont disponibles pour les sites Internet et Intranet
Le fond du ban-
deau de sélection
peut ĂȘtre une
image
Il est possible de
redimensionner
les colonnes
Un ascenseur rem-
place automatique-
ment la rĂšglette
Ancrage et ascen-
seur automatique
Gestion automatique
d’un «cache» (fetch par-
tiel) qui ne charge que les
donnĂ©es nĂ©cessaires Ă  l’af-
fichage et au parcours
fluide Ă  vitesse humaine
Si un traitement est
long, un sablier s’affiche
automatiquement.
Les cellules de
table peuvent ĂȘtre
en «saisie»
Les lignes de la
table sont «multi
sélection»
Le tri des
colonnes est
disponible
La recherche dans
la table est possible
via la loupe
WEBDEVÂź 19
IMPLÉMENTEZ AJAX EN 1 CLIC
www.pcsoft.fr ‱ 27
AJAX en un clic
WEBDEVÂź
LA SÉCURITÉ
De par sa technologie, AJAX permet le lancement de procé-
dures et traitements «serveur» depuis un appel du naviga-
teur. Pour sécuriser vos sites, les traitements WEBDEV sont
protégés de tout appel illégal (tentative de détournement de
session,...).
Vous dĂ©cidez d’un simple clic dans l’éditeur de code des pro-
cĂ©dures qui peuvent ĂȘtre appelĂ©es en mode «Ajax».
LA TECHNOLOGIE AJAX DE WEBDEV SUR
LES CHAMPS
Suite Ă  une requĂȘte Ajax sur une page, tous les champs
concernés sont automatiquement mis à jour en fonction de
leur valeur sur le serveur.
Il n’y a rien Ă  coder: ni code Javascript, ni interprĂ©tation XML,
tout est 100% automatique.
TABLES AJAX
La technologie «AJAX» des tables permet une sophistication
des fonctionnalités.
Le champ «table» propose automatiquement, sans qu’au-
cune programmation ne soit nécessaire :
‱ Un ascenseur vertical apparaĂźt si nĂ©cessaire;
‱ Sont lus dans la table les enregistrements visualisĂ©s, ainsi
que quelques enregistrements précédents et suivants (buf-
fer automatique, qui permet le fetch partiel automatique):
le temps de chargement est réduit au minimum, la fluidité
est totale;
‱ Un ascenseur horizontal apparaĂźt si la largeur des donnĂ©es
à visualiser dépasse la largeur de la table;
‱ Le tri des colonnes est possible en cliquant simplement sur
l’en-tĂȘte de colonne;
‱ La recherche par la «loupe» est proposĂ©e en standard;
‱ La saisie est possible directement dans les cellules de la
table, toujours sans programmation (ni sur le serveur, ni en
Javascript sur le navigateur).
Ces fonctionnalités permettent un meilleur partage de code
avec les applications WINDEV qui utilisent des tables. Le pas-
sage d’une application WINDEV à WEBDEV n’en est que faci-
lité !
HTML 5
HTML5 représente une évolution importante de la norme
Internet. La présentation élaborée des pages Internet se stan-
dardise et de nouvelles fonctionnalités apparaissent. Les fonc-
tionnalités HTML5 sont utilisables sur les navigateurs récents.
MASQUES DE CHAMPS DE SAISIE
La norme HTML 5 permet le «typage» des champs, qui induit
le support direct par le navigateur de masques sur les champs
de saisie.
Avec ce type de masque, le site laisse la gestion de la saisie
et son contrîle au navigateur. Ce n’est plus la page (le site)
qui effectue les contrĂŽles, mais directement 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,...
UTILISATION DE SITE DÉCONNECTÉ
(OFFLINE)
WEBDEV 19 permet d’indiquer qu’un site ou un ensemble
de pages données peuvent fonctionner en mode déconnecté
(sans connexion Internet).
Dans ce cas, l’ensemble des ressources (pages, images, fichier
.js, fichier .css, ..) utilisées par le site ou les pages est auto-
matiquement mis en cache par le navigateur sur le poste de
l’internaute. Ainsi le site peut ĂȘtre utilisĂ© sans se reconnec-
ter Ă  Internet.
STOCKAGE LOCAL (WEB STORAGE)
WEBDEV 19 permet à un site de stocker un ensemble d’in-
formations sur le poste de l’internaute.
Ces informations sont stockées dans un contexte propre au
navigateur.
ACCÈS EN MODE
LOCAL À UNE
BASE DE DON-
NÉES (SQLITE)
WEBDEV 19 permet Ă 
un site de crĂ©er et d’accĂ©der Ă  une base de donnĂ©es crĂ©Ă©e
par le navigateur, sur le poste de l’internaute en code navi-
gateur.
Cette fonctionnalitĂ© permet d’envisager de saisir des donnĂ©es
en mode déconnecté, et par exemple de les transmettre auto-
matiquement au serveur dĂšs que la connexion Ă  Internet est
Ă©tablie.
GÉO-LOCALISATION PAR GPS
WEBDEV 19 offre un jeu de fonctions navigateur qui permet
d’interagir avec les fonctionnalitĂ©s GPS du matĂ©riel, si ce
matériel en dispose: position, déplacement,...
DESSIN EN MODE NAVIGATEUR
WEBDEV 19 propose des fonctions de dessin basées sur la
norme HTML5.
La célÚbre famille des fonctions de dessin du WLangage est
Ă©galement disponible en code navigateur.
Cela est trĂšs pratique pour annoter une carte ou un plan
interactif, ou dans le domaine de la réalité augmentée.
VIDEO SANS PLAYER
Un site réalisé en WEBDEV 19 utilisé par un navigateur sup-
portant la norme HTML5 ne nécessite pas de plug-in spéci-
fique (Windows Media Player, QuickTime ou encore Flash...)
pour jouer des vidéos.
Cela permet d'interagir avec la vidéo grùce au WLangage, et
de personnaliser l'affichage.
Ici une carte
affichée par un
champ «image»:
le trajet a été
dessiné avec
les fonctions de
dessin en mode
«navigateur»
(sans retour au
serveur)
Ajaxsans code
supplémentaire.
28 ‱ DĂ©veloppez 10 fois plus vite
La méthode la
plus simple et la
plus intuitive
WEBDEVÂź
EXPORT AUTOMATIQUE VERS XML, WORD,
EXCEL ET OPEN OFFICE
Pour les tables et les zones rĂ©pĂ©tĂ©es, un menu d’export auto-
matique vers XML, Word, Excel et Open Office est proposé
à l’internaute.
Les données contenues dans la table ou la zone répétée
seront automatiquement exportĂ©es vers le format et l’outil
choisi.
Pour un export vers XML, la feuille de styles XSL permettant
une Ă©dition immĂ©diate sur Navigateur est mĂȘme gĂ©nĂ©rĂ©e.
En utilisation Intranet, les utilisateurs peuvent réaliser facile-
ment leurs simulations sous Excel !
RIEN À PROGRAMMER
Il n’y a rien Ă  programmer pour bĂ©nĂ©ficier de cette fonc-
tionnalité.
Vous pouvez bien sûr désactiver cette fonctionnalité.
UNE OUVERTURE TOTALE
Si vous désirez programmer des exports automatiques dans
vos sites, des ordres de programmation du L5G de WEBDEV
sont Ă  votre disposition.
Les ordres hExporteXML,TableVersXML,XMLPremier,
vous permettent de personnaliser tous les traitements.
MENU D’EXPORT VERS WORD,
EXCEL, XML, OPEN OFFICE
WEBDEV 19 IDÉAL POUR CRÉER UN
INTRANET OU UN EXTRANET
WEBDEV est l'outil idéal pour créer des sites Intranet et
Extranet.
Un site Intranet est un site interne Ă  un ensemble d'utilisa-
teurs: sociétés, clients, fournisseurs...
Il peut ĂȘtre utilisĂ© au sein d'une entreprise, ou Ă  l'extĂ©rieur.
L'accĂšs se fait par identification et mot de passe, ce qui est
automatiquement géré par WebDev (voir page 33).
SÉCURITÉ TOTALE AUTOMATIQUE
La sécurité du site est assurée automatiquement, les pages
d’un site Intranet rĂ©alisĂ© en WEBDEV n'Ă©tant pas rĂ©fĂ©rencĂ©es
par les moteurs de recherche.
Le fonctionnement dynamique (chaque page est créée dyna-
miquement sur le serveur avant son affichage) protĂšge les
requĂȘtes et leurs rĂ©sultats, qui peuvent ĂȘtre cryptĂ©s.
AUCUNE LIMITE
La richesse fonctionnelle de WEBDEV permet de développer
des sites qui se comportent comme de véritables applications,
vous n'ĂȘtes pas limitĂ©: gestion de frais, catalogue fournisseur
avec tarifs remisés, prise de commande d'un réseau, diffusion
d'informations confidentielles, abonnement Ă  un service
payant, gestion de comptes bancaires, portail...
WEBDEV est l'outil idéal pour créer des sites Intranet et des
Extranet, et c'est pour cette raison que des milliers de grandes
sociétés ont créé leur Intranet avec WEBDEV.
Site sécurisé de gestion de frais de déplacement
des collaborateurs d’une entreprise
INTRANET :
WEBDEV EST ROI !
WEBDEVÂź 19
www.pcsoft.fr ‱ 29
ModĂšles de
pages,
ambiances,
héritage et
surcharge
permettent une
gestion facile
des Ă©volutions
WEBDEVÂź
Un site au printemps... Le mĂȘme site pendant la saison d’hiver: les modifications
sont reportées automatiquement sur tout le site
TEMPLATE, POUR DÉFINIR LA
STRUCTURE DES PAGES
Un «template» (ou «modÚle de pages») est une page de réfé-
rence, qui sera utilisée par toute nouvelle page créée. Le tem-
plate contient la présentation «par défaut» de la page, le
positionnement par défaut des éléments de la page et per-
met d’assurer que chaque page crĂ©Ă©e respectera ce posi-
tionnement.
Un template peut contenir des images, des champs, du code,
des procédures,... Héritage et surcharge sont gérés.
AMBIANCE, POUR DÉFINIR LE LOOK DES
PAGES
Une ambiance définit une palette de couleurs, les illustra-
tions, les polices,... Changer d’ambiance permet de changer
le look du site, sans changer la structure des pages.
De nombreuses ambiances sont livrées avec WEBDEV 19.
L’ENVIRONNEMENT DE WEBDEV 19
S’ADAPTE
La plupart des matériels mobiles permettent de visualiser
des sites Internet.
Certains sites sont créés (ou adaptés) spécifiquement pour
ĂȘtre utilisĂ©s sur des mobiles.
La version 19 de WEBDEV permet de spécifier dÚs la créa-
tion de projet que celui-ci est destiné à fonctionner sur
mobile.
Les diffĂ©rents choix proposĂ©s par l’environnement tout au
long du développement de ce projet (ambiances et modÚles
prédéfinis proposés, GO,...) seront alors adaptés aux mobiles.
CIBLER LA PLATEFORME D’EXECUTION DU
SITE
WEBDEV 19 permet de connaßtre en temps réel la plateforme
(iPhone, iPad, Android, Windows Mobile, BlackBerry, 
), la
famille de navigateur (Internet Explorer, Firefox, Chrome,
Safari, 
) et sa version, et permet d’adapter dynamiquement
le format et le contenu des pages d’un site.
GESTURE
La gesture (les manipulations au doigt) est supportée par
les sites mobiles créés en WEBDEV 19.
TEMPLATE & AMBIANCES :
LA CHARTE GRAPHIQUE FACILE !
WEBDEVÂź 19
Un site
WEBDEV
sur une
tablette
Un site
WEBDEV
sur un
téléphone
VOS SITES SUR LES MOBILES
30 ‱ DĂ©veloppez 10 fois plus vite
90% de code
en moins
Pour consulter
la liste
exhaustive des
ordres du L5G,
téléchargez
l’aide de
WEBDEV 19
sur le site de
PC SOFT
WEBDEVÂź
WEBDEVÂź 19
Le WLangage, le langage L5G intégré de
WEBDEV, permet de décrire tous les traite-
ments que vous dĂ©sirez. Vos Ă©quipes n’auront
pas Ă  se plonger dans HTML ni Javascript. Le
WLangage facilite la programmation Internet
et Intranet.
LA PROGRAMMATION INTERNET N’A
JAMAIS ÉTÉ AUSSI FACILE
Le langage L5G de WEBDEV (le WLangage, déjà uti-
lisé par des centaines de milliers de professionnels) apporte
un confort qui permet de développer beaucoup plus vite tous
les types de traitements.
COMMENT PROGRAMMER
LES TRAITEMENTS ?
Sous Internet le code est donc de deux
types :
‱ le code qui s’exĂ©cute sur le serveur
de l’hĂ©bergeur (Ă  saisir sous le ban-
deau jaune - voir ci-contre)
‱ le code qui s’exĂ©cute sur le naviga-
teur de l’Internaute (à saisir sous le
bandeau vert - voir ci-contre).
Notez que ce code peut ĂȘtre automa-
tiquement généré par le RAD et les
assistants de WEBDEV.
GÉNÉRATION AUTOMATIQUE DE HTML ET
JAVASCRIPT
Un Navigateur ne comprend que le code HTML et Javascript.
Le code WLangage destinĂ© Ă  s’exĂ©cuter sous le Navigateur
génÚre donc automatiquement le code HTML et Javascript
optimisé correspondant.
Le code est immédiatement fiable, beaucoup plus concis, et
plus facile Ă  maintenir.
GÉNÉRATION AUTOMATIQUE DE CODE PHP
Les pages crĂ©Ă©es et le code peuvent ĂȘtre transformĂ©s auto-
matiquement en code PHP. Sans connaßtre PHP, vous créez
facilement des sites dynamiques PHP ! (voir page 36).
CONNAISSANCE DE JAVASCRIPT ET HTML:
INUTILE
Il est inutile de connaĂźtre Javascript ou HTML ou PHP pour
développer avec WEBDEV.
Toutefois, si pour une raison quelconque vos équipes dési-
rent utiliser ou récupérer du code Javascript, HTML ou PHP,
WEBDEV le permet Ă©videmment.
AJAX AUTOMATIQUEMENT
Pour qu’un traitement soit «Ajax», il suffit de cliquer sur un
bouton (voir page 26).
IMPOSSIBLE D’ÊTRE BLOQUÉ
Le L5G de WEBDEV est extrĂȘmement puissant. Vous ne serez
jamais bloqué.
Par ailleurs, il est possible de saisir du code HTML, Javascript
ou PHP, d’inclure des applets Java, des animations Flash et
CSS3, de l’ASP ou du JSP...
APPLET JAVA
WEBDEV 19 permet d’utiliser dans un site une ou des applets
Java (Ă©crites en WINDEV par exemple): cela simplifie leur
développement !
LE WLANGAGE: PUISSANT, INTUITIF
Le WLangage est disponible en français et en anglais.
Le français permet une programmation intuitive, et une main-
tenance 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 grande vitesse de programmation,
et une meilleure qualité du code.
Un ordre du WLangage correspond souvent Ă  des dizaines
(ou des centaines) de lignes de code en Javascript: vos
équipes développent plus vite.
EXEMPLE : ENVOYER UN EMAIL
Il est facile d’envoyer un email.
L’ordre s’appelle simplement eMailEnvoieMessage.
Vous pouvez joindre des piĂšces attachĂ©es. L’envoi de mail
s’effectue en tñche de fond.
INTÉGRATION OPTIMALE DES BASES DE
DONNÉES
Le WLangage est optimisé pour manipuler les données de
tables: la complétion automatique propose les noms de tables
et de colonnes.
GESTION PUISSANTE DES CHAÎNES
Le WLangage propose une gestion de chaĂźnes vraiment trĂšs
performante!
Elle permet une programmation plus rapide:
‱ taille dynamique gĂ©rĂ©e automatiquement
‱ concatĂ©nation par l'opĂ©rateur «+»
‱ conversion automatique «numĂ©rique vers texte» et rĂ©ci-
proquement
‱ fonctions Ă©voluĂ©es de recherche
‱ tests multiples (CASE, SELON,...).
PROFILER: OPTIMISEZ LA VITESSE DE
VOTRE CODE
WEBDEV 19 est livré avec un «profiler», outil qui mesure la
vitesse de chaque instruction de votre code.
JQUERY
WEBDEV 19 permet d’appeler des points d’entrĂ©e de la
bibliothùque jQuery. Cette fonction s’utilise en code naviga-
teur, elle est donc utilisable dans tous les sites, y compris les
sites statiques.
JSON
Le WLangage interprÚte (sérialise et désérialise)
nativement JSON.
LA POO (OBJET)
La Programmation Orientée Objet est supportée par WEBDEV:
héritage multiple, constructeur, destructeur, public, privé, poly-
morphisme... L’utilisation de la POO est optionnelle, et peut
ĂȘtre mixĂ©e avec la programmation traditionnelle.
Le WLangage apporte un L5G structuré au
développement Internet. Les outils de
productivité livrés sont un réel atout.
PROGRAMMATION DE 5ÈME GÉNÉRATION :
PUISSANCE ET FACILITÉ
PHP
sans
connaĂźtre
PHP
www.pcsoft.fr ‱ 31
WEBDEVÂź
L’éditeur de code participe Ă  la puissance et Ă 
la productivité de WEBDEV.
La saisie du code est intuitive, plus rapide et
se fait directement dans le champ concerné.
UNE MÉTHODE RÉVOLUTIONNAIRE
La technologie exclusive de l’éditeur de code participe Ă  la
crĂ©ation d’un code de qualitĂ©, et permet de dĂ©velopper plus
vite.
LA MÉTHODE WEBDEV
Les événements les plus utiles sur un champ sont proposés
par dĂ©faut dans l’éditeur de code, et matĂ©rialisĂ©s par un ban-
deau de couleur.
Par exemple, pour un champ de type «saisie», les événements
par défaut sont: initialisation du champ, entrée dans le
champ, sortie du champ, Ă  chaque modification. Il suffit de
taper le code correspondant dans la partie adéquate.
Le code qui s’exĂ©cutera sur le Navigateur peut ĂȘtre saisi en
WLangage, ou en Javascript, au choix.
CODE SERVEUR ET CODE NAVIGATEUR
Il suffit de saisir votre code sous le bandeau correspondant.
Le bandeau jaune indique que le code saisi est du
WLangage et s’exĂ©cutera sur le Serveur.
Le bandeau vert indique que le code saisi est du
WLangage et s’exĂ©cutera sous le Navigateur.
Le bandeau rose signifie que le code saisi est du PHP.
Le bandeau bleu signifie que le code saisi est du code
Javascript.
C’est visuel et trùs intuitif !
TOUS LES ÉVÉNEMENTS SONT GÉRÉS
Les événements moins habituels sont proposés par les icones
en bas de la fenĂȘtre.
Tous les événements sont gérés: clic, double clic, touche pres-
sée, touche maintenue enfoncée, touche relùchée, bouton
de souris enfoncé, bouton de souris relùché, souris en dehors
de l’objet, souris au-dessus de l’objet, perte de focus, prise
de focus, modification, sélection du contenu du champ,
appel de l’aide, chargement, envoi du formulaire,...
COLORATION SYNTAXIQUE
Pour un plus grand confort et une meilleure lisibilité, chaque
mot est coloré en fonction de son type.
AJAX
Concernant AJAX, il suffit de cliquer
sur le bouton «Ajax» de la ligne pour
utiliser cette technologie (voir p 26).
COMPLÉTION AUTOMATIQUE
Lors de la frappe d’un ordre, le type
de paramÚtre attendu est proposé
dans une liste déroulante. Une bulle
d’aide apporte Ă©galement des infor-
mations précieuses sur chaque para-
mÚtre de la fonction utilisée.
ERREURS EN TEMPS RÉEL
Si une erreur de syntaxe est com-
mise, elle sera dĂ©tectĂ©e sous l’éditeur
de code, avant mĂȘme la compilation
du projet ! Les erreurs sont matérialisées par un souligné
rouge sous la fonction dont la syntaxe est incorrecte.
ENROULÉ/DÉROULÉ
L'Ă©diteur de code dispose d’un mĂ©canisme confortable d’en-
roulé/déroulé de code: vous masquez le code connu et tes-
tez pour plus de lisibilité!
UML
WEBDEV 19 supporte UML et crée automatiquement le dia-
gramme de classes en rétro analysant le code.
Inversement, un diagramme UML génÚre le code des classes.
GESTIONNAIRE DE SOURCES
WEBDEV 19 est livré en standard avec un outil de version-
ning, le Gestionnaire de Sources collaboratif (GDS, voir page
38).
L’éditeur de code participe Ă  l’ergonomie
générale, et à la facilité légendaire de
WEBDEV 19.
Le WLangage
est un langage
de 5° génération:
il Ă©limine 90%
du code, il sim-
plifie énormé-
ment la pro-
grammation,
tout en appor-
tant une puis-
sance hors du
commun.
‱ Initialisation du champ
‱ EntrĂ©e dans le champ (on focus)
‱ Modification en sortie (on change)
‱ Sortie du champ (on blur)
L’EDITEUR DE CODE VOUS ASSISTE
WEBDEVÂź 19
32 ‱ DĂ©veloppez 10 fois plus vite
WEBDEVÂź
La phase de tests automatisĂ©s n’est qu’une
partie du cheminement qui amÚne la qualité du
logiciel, mais c'est une phase importante.
WEBDEV 19 propose en plus des tests de non-
régression, la réalisation de tests unitaires, de
tests d’intĂ©gration, de tests de charge.
TEST UNITAIRE DE PROCÉDURES ET DE
CLASSES
Le processus de création des tests est totalement inté-
grĂ© Ă  l’environnement. Pour tester directement une pro-
cĂ©dure ou une classe, il suffit d’utiliser le menu contex-
tuel qui propose de créer (et ensuite de rejouer) un nou-
veau test unitaire.
TAUX DE VALIDATION DE
L’APPLICATION
Le centre de tests permet d’afficher la liste des tests
existants, la version du site sur lequel chacun de ces
tests est passé et le résultat de chaque test.
Ces informations sont également affichées en mode
résumé dans le «Tableau de bord» du projet.
L’ÉDITEUR DE SCÉNARIOS DE TEST
Lors de l’exĂ©cution d’un test, si une erreur est dĂ©tectĂ©e
dans le site, le clic sur l’erreur d’exĂ©cution du script posi-
tionne directement dans le code à l’emplacement de l’er-
reur.
LA VÉRIFICATION DES TESTS LORS DES
PROCESSUS COURANTS
Chaque Ă©lĂ©ment modifiĂ© qui n’a pas Ă©tĂ© validĂ© en pas-
sant des tests est signalé. Le Centre de Tests signale
aussi toutes les erreurs qui n’ont pas Ă©tĂ© corrigĂ©es, ainsi
que toutes les régressions.
Un historique des taux de validation est automatique-
ment mĂ©morisĂ©, ce qui permet le suivi de l’évolution de
la qualité du site.
Cette vérification est également effectuée lorsque vous
réintégrez des éléments dans le gestionnaire de sources.
DÉBOGUEUR PUISSANT ET CONVIVIAL
Pour mettre au point les sites Internet interactifs, le débogueur
permet l'exĂ©cution en pas Ă  pas d’un traitement du site, en
visualisant ou en modifiant le contenu de variables choisies.
DES FONCTIONNALITÉS AVANCÉES
Le débogueur est trÚs puissant et propose des fonctionnalités
avancées:
‱ exĂ©cution en pas Ă  pas, saut de fonctions, sortie immĂ©diate
de fonction, exĂ©cution jusqu’à une ligne donnĂ©e,...
‱ autostop, qui arrĂȘte l’exĂ©cution Ă  chaque changement de
valeur d’une variable ou d’une expression dĂ©finie
‱ visualisation automatique (dĂ©branchable) de toutes les
variables de la ligne en cours d’exĂ©cution («Watch»)
‱ visualisation d’expressions contenant des fonctions
‱ affichage de la valeur de la variable survolĂ©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 À DISTANCE
Il est possible de déboguer un serveur à distance: vous débo-
guez par exemple le serveur en place chez l’hĂ©bergeur sans vous
déplacer.
DÉBOGUEUR PHP ET AWP
Le débogueur fonctionne en mode «AWP» (le mode des
contextes semi-automatiques). En PHP, il est possible de débo-
guer l’application initiale.
Le débogueur permet un gain de temps
précieux lors des phases de mise au point.
Il devient vite indispensable !
Le débogueur
apporte une
productivité
professionnelle
WEBDEVÂź 19
DÉBOGUEUR INTÉGRÉ:
MISE AU POINT FACILE DE VOTRE CODE
QUALITÉ DE VOS SITES: TESTS UNITAIRES
www.pcsoft.fr ‱ 33
Ne ré-inventez
pas la roue,
ré-utilisez !
WEBDEVÂź
WEBDEVÂź 19
La notion de «composant» simplifie drasti-
quement le dĂ©veloppement: il s’utilise comme
une «boßte noire», en toute facilité, en toute
sécurité.
Un composant peut contenir du code, des
pages, des images, des classes, une analyse,
et mĂȘme des tables de donnĂ©es.
LE DÉVELOPPEMENT FIABILISÉ GRÂCE
AUX COMPOSANTS
Un composant est une «boßte noire», une «brique logicielle»,
dont le développeur utilisateur connaßt seulement les points
d’entrĂ©e et la nature des informations Ă©ventuellement
retournées.
La possibilité de créer des composants élaborés aussi sim-
plement que des parties de sites traditionnels vous permet
de simplifier vos développements.
Des composants dans l’environnement
SÉCURISEZ VOS COMPOSANTS
Les composants que vous crĂ©ez sont «sĂ©curisĂ©s», c’est-Ă -dire
que personne ne pourra Ă©tudier ou voir ou copier le code
source, l’analyse,...
COMPOSANTS MULTICIBLES
Les composants sont compatibles entre WINDEV, WINDEV
Mobile et WEBDEV. Cela permet une meilleure ré-utilisabi-
lité.
DE NOMBREUX COMPOSANTS
PRÊT-À-L’EMPLOI LIVRÉS
WEBDEV 19 est livré avec
de nombreux compo-
sants (avec leur source)
que vous pourrez utiliser
dans vos sites:
‱ demande de docu-
mentation
‱ papier (pour
commerce
Ă©lectronique)
‱ paiement
sécurisé...
SÉCURITÉ DE VOS SITES ASSURÉE :
ACCÈS PAR MOT DE PASSE
CONTRÔLEZ L’ACCÈS AUX PAGES DES
SITES
La sĂ©curitĂ© d’accĂšs aux sites ou Ă  certaines pages peut ĂȘtre
nĂ©cessaire: c’est en standard dans WEBDEV 19 !
La fonctionnalité de «groupware utilisateur» permet de défi-
nir des mots de passe pour des personnes et des groupes.
Le contrĂŽle d’accĂšs se dĂ©finit simplement sous l’éditeur.
Aucune programmation n’est nĂ©cessaire pour assurer la sĂ©cu-
ritĂ© d’accĂšs Ă  vos applications, il suffit d’activer l’option
«Groupware».
UN CONTRÔLE SÉCURISÉ TRÈS FIN
Le contrîle d’accùs permet de filtrer l’accùs à de nom-
breux éléments: choix de menus, boutons, champs,
groupes de champs, pages, Ă©tats, ...
Les éléments interdits seront inactifs et à votre choix
grisés ou invisibles.
LE MODE SUPERVISEUR
Le superviseur du site livré pourra à tout moment para-
métrer facilement les droits des utilisateurs. Un éditeur
convivial permet de définir et gérer ces droits.
Si vous le désirez, les droits des utilisateurs ou des
groupes d’utilisateurs, pourront ĂȘtre crĂ©Ă©s ou modifiĂ©s
par programme.
LDAP
Si vous désirez utiliser une base de login déjà existante
en LDAP, le contrîle d’accùs en fera usage.
SAAS
WEBDEV 19 propose des fonctionnalités avancées de
gestion d’applications SaaS (voir page 43).
SĂ©curisez automatiquement vos sites, sans
avoir Ă  coder !
LES COMPOSANTS:
RÉUTILISABILITÉ DE VOTRE CODE
LA FACILITÉ DE WEBDEV AU SERVICE DES
WEBSERVICES
WEBDEV 19 permet de consommer, créer, déployer et
héberger facilement des Webservices.
CONSOMMATION DE WEBSERVICES
Il est trùs facile d’utiliser un Webservice depuis
WebDev. Les structures du fichier WSDL sont automati-
quement converties depuis en types natifs du
WLangage.
CRÉATION FACILE DE WEBSERVICES
La crĂ©ation de Webservices s’effectue facilement: il
suffit de définir la collection de procédures qui constitue
l’interface du Webservice.
Le fichier de description WDSL est généré automatique-
ment.
DÉPLOIEMENT FACILE DE WEBSERVICES
Les Webservices sont hébergés sur une machine dispo-
sant d’un serveur d’application WEBDEV.
La procĂ©dure d’installation est automatiquement gĂ©nĂ©-
rée.
HÉBERGEMENT FACILE DE WEBSERVICES
La technologie d’hĂ©bergement est basĂ©e sur le robuste
serveur d’application standard de WEBDEV.
Cette technologie permet d’assurer la disponibilitĂ© du
Webservice, ainsi que sa vitesse.
Les demandes sont exécutées simultanément, dans des
process séparés, ce qui garantit la sécurité.
Les Webservices peuvent ĂȘtre consommĂ©s par tout type
d’application, crĂ©Ă©es en WINDEV, WEBDEV ou avec tout
autre langage tiers.
34 ‱ DĂ©veloppez 10 fois plus vite
La méthode la
plus simple et la
plus intuitive
WEBDEVÂź
WEBDEVÂź 19
LES WEBSERVICES: FACILE
CRÉATION DE STYLE :
CSS SANS CONNAITRE CSS
Pour créer un style avec WEBDEV 19, il est tout à fait inutile
au développeur ou au webdesigner de connaitre CSS3:
WEBDEV 19 gĂ©nĂšre lui-mĂȘme le style qui est crĂ©Ă© en visuel
grùce à la technologie des «7 onglets».
Les styles WEBDEV sont stockés sous forme de feuilles de
styles au standard CSS3.
Les styles sont modifiables Ă  tout moment sous l’éditeur,
les modifications étant bien entendu répercutées à toutes
les pages et champs utilisant le style modifié.
MODIFICATION DES STYLES WEBDEV
DIRECTEMENT EN CSS
Les styles WEBDEV 19 sont stockés sous forme de feuilles
de styles au standard CSS3.
Le code CSS3 gĂ©nĂ©rĂ© peut si nĂ©cessaire ĂȘtre modifiĂ© direc-
tement dans le fichier .css .
Cette ouverture est offerte dans le but de permettre aux spé-
cialistes CSS3 de réutiliser leur savoir-faire dans ce domaine.
Un style CSS3 crĂ©Ă© par WEBDEV 19 et modifiĂ© depuis l’ex-
tĂ©rieur de WEBDEV est toujours reconnu par l’éditeur.
Le style modifiĂ© peut ĂȘtre appliquĂ© de la mĂȘme maniĂšre
qu’un style WEBDEV sur les champs et les pages.
IMPORTATION DE STYLE CSS EXISTANT
Des styles CSS3 existants peuvent ĂȘtre importĂ©s dans
WEBDEV 19, depuis des feuilles de styles CSS3.
La fonctionnalitĂ© d’import permet de sĂ©lectionner les styles
Ă  importer, et ceux Ă  ne pas importer.
Dans l’environnement de WEBDEV 19, les styles importĂ©s
sont proposés avec les styles créés dans WEBDEV.
INTÉGRER UNE ANIMATION EXTERNE
DANS UN CHAMP
L’environnement de WEBDEV propose l’ajout automatique
d’effets d’animation sur les champs : clignotement, fondu,
grossissement, rotation, pirouette 3D,

Il existe d’autres types d’effets plus particuliers, disponibles
sur le marchĂ© sous forme d’animations CSS. Par exemple:
balancier, flottement, explosion... Pour appliquer ce type
d’animation à un champ il suffit d’importer la feuille de styles
CSS contenant la description de l’animation, et de spĂ©cifier
dans le style du champ le nom de l’animation à utiliser, sa
durée, et sa répétition.
ASSOCIEZ UN SCRIPT JS OU JQUERY À VOS
CHAMPS
Une «classe CSS» peut ĂȘtre rĂ©fĂ©rencĂ©e dans un script
Javascript externe ou un script jQuery pour appliquer des
modifications sur le champ auquel elle est attribuée.
Il est ainsi possible de modifier de maniĂšre dynamique les pro-
priĂ©tĂ©s des champs et d’en modifier le comportement.
Par exemple: pouvoir déplacer un champ à la souris, chan-
ger son style, le mettre en mouvement en réaction à cer-
tains Ă©vĂšnements, le faire interagir avec d’autres champs...
CSS3
WEBDEV AU SERVICE DE SAP
SAP R/3 est un ERP trÚs utilisé. Un site réalisé en
WEBDEV 19 peut accĂ©der aux donnĂ©es d’un ERP SAP en
natif (via BAPI). L’accĂšs aux donnĂ©es est directement rĂ©alisĂ©
par SAP, la traçabilité des accÚs est maintenue, la gestion
des priorités également.
Une famille de fonctions permet d’établir une connexion
(avec authentification) et d’appeler des BAPI en passant
des paramùtres. Un assistant permet d’importer automa-
tiquement les structures manipulées.
Il est inutile d’installer le module SAP GUI.
Toutes les fonctionnalités de WEBDEV sont disponibles.
DES REQUÊTES
SUR SAP
Le gĂ©nĂ©rateur d’états
(voir p 37) peut ĂȘtre
utilisé pour créer des
requĂȘtes sur des
données contenues
dans une base SAP.
ACCÈS NATIF À LOTUS NOTES
Les sites WEBDEV peuvent accéder en natif à Lotus Notes.
L’accĂšs aux mails prĂ©sents sur le serveur de mails de Lotus
Notes (Domino), en envoi et réception, est standard en
mode natif. L’accùs aux contacts, aux rendez-vous, aux
tùches et aux documents présents sur le serveur est facile.
Cela permet de rĂ©aliser des Intranet qui s’intĂšgrent totale-
ment au S.I. en place.
La sécurité habituelle de Lotus Notes est bien entendu
respectée, via le certificat de Lotus.
ACCÈS NATIF À OUTLOOK
Les sites WEBDEV peuvent accéder en natif à Outlook.
L’accĂšs aux mails de Outlook, en envoi et rĂ©ception, est
standard.
L’accùs aux contacts, aux rendez-vous et aux tñches est
facile, en lecture et en Ă©criture.
Cela permet de rĂ©aliser des Intranet qui s’intĂšgrent totale-
ment au S.I. en place.
ACCÈS NATIF À GOOGLE APPS
Indépendamment des possibilités de connexion aux applica-
tions Google Ă  travers le Mashup, WEBDEV 19 propose un
accÚs natif aux données des applications Google: Google
Agenda, Google Maps, Google Contacts, Picasa...
Cela permet de récupérer des données qui seront réaffichées
dans un format personnalisé sur le site.
Voici un exemple de code qui liste les contacts de Gmail et
les affiche dans une table WEBDEV.
Connexion est une gglConnexion
Connexion.Email=”WebDev19@gmail.com”
Connexion.MotDePasse=”motdepasse”
GglConnecte(Connexion)
Contacts est un tableau de gglContact
Contacts=GglListeContact(Connexion)
TableAffiche(TABLE_Contacts)
www.pcsoft.fr ‱ 35
L’ouverture à
tous les stan-
dards
WEBDEVÂź
ACCÈS NATIFS: GOOGLE APPS, SAP, LOTUS NOTES...
WEBDEVÂź 19
Exemple d’accùs natif à Google Agenda,
pour ensuite ĂȘtre utilisĂ©
directement dans une page WEBDEV 19
PHP SANS CONNAÎTRE PHP !
Toute la puissance de WEBDEV (Ă©diteur WYSIWYG, Ă©diteur
d’analyses, UML, Ă©diteur de requĂȘtes, champs Ă©voluĂ©s,
WLangage 
) est disponible pour créer des sites en PHP. Si
vous le désirez, les pages et le code (en WLangage) sont
transformés automatiquement en code PHP (il est également
possible de saisir directement du code PHP).
Sans connaßtre PHP, vous créez facilement des sites dyna-
miques PHP !
RAD PHP
La méthode RAD WEB est également disponible pour géné-
rer des sites PHP en quelques clics.
GĂ©nĂ©rez automatiquement vos sites Ă  partir de l’analyse des
données (voir pages 12 et 13).
SAISIE DIRECTE DE CODE PHP
Sous l’éditeur de code de WEBDEV, il est possible d’écrire (ou
coller) du code PHP.
Ici, dans le traitement de couleur rouge,
du code PHP.
Vous n’ĂȘtes jamais bloquĂ©.
Dans une mĂȘme page, il est possible de mixer du code PHP
et du code WLangage.
DES CHAMPS ÉVOLUÉS EN STANDARD
En plus des champs classiques (champ de saisie, libellé,...)
la plupart des champs sophistiqués de WEBDEV 19 sont dis-
ponibles en PHP: table avec ascenseurs automatiques, zone
répétée, calendrier, onglet, champ de saisie riche, libellé
HTML, réglette automatique

Cela permet de simplifier énormément les phases de codage,
et apporte une grande sécurité à vos sites par la présence de
masques de saisie qui ne permettent pas la saisie de données
hors format.
WEB 2.0: AJAX EN PHP
De nombreux champs et traite-
ments sont compatibles
«AJAX» en mode PHP: vous
créez des sites PHP Web 2.0
grĂące Ă  WEBDEV 19! (voir page
26)
TYPES ÉVOLUÉS
En plus des types classiques de
PHP, WEBDEV 19 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 don-
nées, tableau associatif, structures, numérique...
Les syntaxes et les opérateurs puissants sont également dis-
ponibles: POUR TOUT, manipulation des chaßnes, concaté-
nation optionnelle, opérateur «commence par»,...
PARTAGE DU CODE
Le codage en WLangage permet de partager du code unique
entre des pages et des sites PHP, WEBDEV classique, et mĂȘme
avec des applications WINDEV !
Cela permet un gain de temps appréciable, et une fiabilité
accrue par la réutilisabilité.
GESTION FACILE ET AUTOMATIQUE DES
SESSIONS PHP
La gestion des sessions (contextes) PHP est automatique. Il
suffit de dĂ©clarer les variables qui doivent ĂȘtre retrouvĂ©es dans
une prochaine exécution de la page.
Il n’y a aucun traitement de sĂ©rialisation Ă  coder.
COMPATIBILITÉ PHP 5 & PHP 4
WEBDEV 19 génÚre du code PHP compatible à la fois avec
PHP 4 et avec PHP 5.
ACCÈS A HFSQL
L’accĂšs Ă  HFSQL (Classic, RĂ©seau et Client/Serveur) est assurĂ©
via les ordres SQL.
ACCÈS A MYSQL, POSTGRESQL, ORACLE
L’accĂšs aux bases de donnĂ©es MySQL, PostgreSQL et Oracle
est assuré.
Notez que toutes les bases qui proposent 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).
APPEL DE SCRIPTS PHP
Il est possible d’appeler un script externe .php depuis une
page PHP ou WEBDEV classique, grĂące Ă  la commande
PHPExĂ©cute. Il est possible d’utiliser soit une mĂ©thode POST,
soit une méthode GET, le résultat est renvoyé dans une
chaĂźne.
WAMP & LAMP
Acronymes souvent utilisés, les technologies basées sur 4
composants, WAMP (Windows, Apache, MySQL, PHP) et
LAMP (Linux, Apache, MySQL, PHP) sont supportées en stan-
dard par WEBDEV 19.
EASYPHP: CONFIGURATION ET PARAMÉ-
TRAGE AUTOMATIQUE DE WEBDEV
Lors de l’installation du serveur d’application WEBDEV 19, les
serveurs Web «Apache» (utilisés en particulier par EasyPHP)
sont détectés et automatiquement paramétrés, comme les
serveurs Apache isolés.
ACCÈS AUX HÉBERGEURS GRATUITS
La gĂ©nĂ©ration d’un site en PHP permet (parmi d’autres solu-
tions) l’accĂšs aux hĂ©bergeurs «gratuits» de sites dynamiques.
Cette possibilitĂ© peut ĂȘtre utile aux sites d’associations et de
petites structures qui ne désirent pas un hébergement dédié.
Avec WEBDEV 19, PHP c’est facile !
36 ‱ DĂ©veloppez 10 fois plus vite
La méthode la
plus simple et la
plus intuitive
WEBDEVÂź
WEBDEVÂź 19
GÉNÉREZ DU CODE PHP
Un Ă©diteur d’états rĂ©sout la problĂ©matique du
reporting sur Internet.
Et il simplifie la création des impressions.
Son usage est double:
‱ d’une part pour les applications Intranet
‱ d’autre part pour la gĂ©nĂ©ration dynamique
d’états qui seront envoyĂ©s Ă  l’internaute
(facture PDF par exemple).
PDF EN STANDARD
Les Ă©tats peuvent ĂȘtre crĂ©Ă©s au format PDF en standard (sans
frais supplémentaires, sans module complémentaire à acqué-
rir ou Ă  installer).
Un état PDF généré avec WEBDEV 19
CRÉER UN ÉTAT: FACILE
Un assistant est systématiquement proposé pour générer des
états de haute qualité; il pose les questions permettant de
n'oublier aucun élément !
En Intranet, les Ă©tats s’impriment sur une imprimante acces-
sible depuis le serveur.
Pour Internet, l’état sera envoyĂ© Ă  l’internaute sous une forme
spécifique: HTML, RTF, PDF...
Le choix du type d’état Ă  crĂ©er
TOUTES LES SOURCES DE DONNÉES
Les donnĂ©es utilisĂ©es pour un Ă©tat peuvent provenir de n’im-
porte quelle source: HFSQL, Oracle, Access..., requĂȘte, fichier
texte, zone mémoire, table de page,...
GESTION DES FONDS DE PAGE PDF
L’éditeur d’états gĂšre les fonds de page et les formulaires des-
tinĂ©s Ă  ĂȘtre imprimĂ©s, par exemple les formulaires fiscaux.
INCLURE DES IMAGES: AUTOMATIQUE
Inclure des images (BMP, TIFF, PCX, GIF, JPEG, PNG...) dans
des Ă©tats est d'une simplicitĂ© totale. L'image peut ĂȘtre fixe
(logo,...), ou provenir du traitement ou d’un fichier (photo
du produit,...).
Il est également facile d'imprimer des dessins créés par pro-
gramme.
DU CODE SOURCE OÙ VOUS DÉSIREZ
WebDev permet d'inclure tout code source exécutable
(WLangage) à tout endroit d'un état: vous pourrez ainsi réa-
liser les traitements les plus particuliers, sans jamais rencon-
trer de blocages.
CODE-BARRES AUTOMATIQUES
WEBDEV 19 imprime auto-
matiquement les codes-
barres (horizontalement ou
verticalement).
Les formats sup-
portés sont: QR
Code, UPCA, UPCE, EAN13, EAN8, CODE128,
CODE39, CODE93, CODE11, intervaled 2 of 5,
CODABAR, CB_MSI, Datamatrix, PDF417...
MAILEZ DES ÉTATS
Avec WEBDEV il est facile de créer un état dynamiquement
(par exemple une facture des produits que vient d’acheter
l’internaute en ligne!) et de le mailer immĂ©diatement (au for-
mat PDF par exemple).
DIFFUSION LIBRE DES ÉTATS
Il n’y a pas de redevances ou de royalties à verser pour dif-
fuser les Ă©tats avec vos sites WEBDEV.
Avec WEBDEV 19, les états sophistiqués
c’est vraiment facile !
www.pcsoft.fr ‱ 37
Un Ă©diteur
d’états
WYSIWYG, au
pixel prĂšs
WEBDEVÂź
ÉDITEUR DE RAPPORTS : GÉNÉREZ
DES PDF EN TEMPS RÉEL (FACTURES...)
WEBDEVÂź 19
Un Ă©tat en cours
de création sous
l’environnement
LA BASE DES SOURCES
Avec le GDS (Gestionnaire De Sources - appelé SCM en
anglais), les éléments du projet sont regroupés dans une base
de donnĂ©es. Avant d’ĂȘtre utilisĂ© un Ă©lĂ©ment est extrait, aprĂšs
avoir été modifié, il est ré-intégré. Chaque membre de
l’équipe utilise donc des Ă©lĂ©ments Ă  jour.
Le GDS stocke tous les éléments du projet: procédures, col-
lections, classes, fenĂȘtres, Ă©tats, composants, requĂȘtes, ana-
lyses, dépendances (images,...), ...
TOTALEMENT INTÉGRÉ
Totalement intĂ©grĂ© aux diffĂ©rents Ă©diteurs, l’outil de ver-
sionning (GDS) permet le développement en équipe, la
conservation de l’historique des modifications et des ver-
sions, la gestion simultanĂ©e de plusieurs versions d’un
mĂȘme site, et l’automatisation de la sauvegarde des
sources.
Le gestionnaire de versions apporte confort, souplesse,
sécurité et vitesse.
Dimensionné pour des équipes de 1 à 100 développeurs, le
GDS favorise et normalise sans contrainte les Ă©changes entre
développeurs.
DE PUISSANTES
FONCTIONNALITÉS
‱ Le GDS est totalement intĂ©grĂ© Ă  l'environnement; par
exemple le GDS propose d’extraire l’élĂ©ment lors d’une
modification.
‱ La base gùre plusieurs projets; si plusieurs projets utilisent
un mĂȘme Ă©lĂ©ment, celui-ci peut ĂȘtre partagĂ©.
‱ Un historique de tous les Ă©lĂ©ments (pages, codes,
requĂȘtes,...), depuis leur crĂ©ation, est mĂ©morisĂ© dans la
base (une purge totale ou partielle est toujours possible).
‱ Le projet est Ă©galement prĂ©sent sur chaque machine de
développement; il est donc possible de développer avec la
machine déconnectée.
‱ La gestion des branches est assurĂ©e.
‱ Le «Diff» (diffĂ©rences) entre 2 Ă©lĂ©ments est
disponible: source, page,...
‱ Vous pouvez consulter à tout moment la liste
des modifications effectuées entre 2 versions,
par vous-mĂȘme et/ou par d’autres dĂ©velop-
peurs ou webmasters...
CONNECTÉ ET À DISTANCE
Le GDS permet un fonctionnement Ă  distance,
connecté via Internet. Il est ainsi possible de tra-
vailler sur un projet depuis un site client, sans
crainte de perte des modifications effectuées.
Si vous ĂȘtes connectĂ© (par exemple en ADSL),
les modifications que vous effectuez seront
immédiatement disponibles pour les autres
développeurs.
DÉVELOPPEUR ISOLÉ
MĂȘme en dĂ©veloppant seul, l’outil de ver-
sionning a de l’intĂ©rĂȘt: il conserve l’historique
des modifications de tous les éléments, et agit
donc comme une fonctionnalité de sauvegarde
et d’archivage des versions.
La gestion des branches permet de gérer faci-
lement plusieurs versions d’un mĂȘme site.
38 ‱ DĂ©veloppez 10 fois plus vite
WEBDEVÂź 19
TRAVAIL EN ÉQUIPE
OUTIL DE VERSIONNING (GDS /SCM)
Le GDS gĂšre
automatique-
ment les
«dépen-
dances»: les
fichiers utilisés
(images,...).
Le GDS les
détecte dans le
projet, et les
sauvegarde
avec le reste
du projet.
DĂ©veloppez
au bureau,
en déplace-
ment, et
mĂȘme Ă  la
plage !
www.pcsoft.fr ‱ 39
POUR GÉRER LE CYCLE DE
VIE
Un Centre de ContrĂŽle est une appli-
cation de «supervision» d’un aspect du
cycle de vie d’un site.
Un Centre de Contrîle permet d’avoir
une vision globale du domaine couvert,
que ce soit en phase de développe-
ment, sur un site d’exploitation, ou
encore pour les aspects de mainte-
nance et d’évolution.
Les Centres de Contrîle que l’on uti-
lise le plus dans le cadre d’un dĂ©velop-
pement Web sont les suivants:
‱ Centre de Suivi de Projets
‱ Centre de ContrĂŽle QualitĂ©
‱ Centre de ContrĂŽle d’hĂ©bergement.
Les Centres de ContrĂŽle sont totale-
ment intĂ©grĂ©s Ă  l’environnement; les
informations sont partagées.
ALM : CENTRE DE CONTRÔLE DE SUIVI
DE PROJETS
Ce centre permet le suivi des plannings, des tùches affectées
et rĂ©alisĂ©es par chaque membre de l’équipe, et effectue le
suivi de la gestion des «exigences».
GĂ©rez le planning de l’équipe de dĂ©veloppement
en temps réel
GESTION DES EXIGENCES ET DES TÂCHES
Le Centre de Suivi de Projets permet de définir et suivre
l’avancement des «exigences» de chaque version du projet.
Une exigence correspond à une fonctionnalité à développer
dans le logiciel.
A chaque exigence peuvent ĂȘtre liĂ©es des tĂąches (tĂąche de
développement, de test, de documentation,...), des bogues,
des rÚgles métier...
CENTRE DE CONTRÔLE QUALITÉ
Ce centre permet le suivi des incidents de développement et per-
met le suivi aisé des retours utilisateurs (incidents et suggestions).
Analyse d’impact
CENTRE DE CONTRÔLE
D’HÉBERGEMENT
Le Centre de ContrĂŽle d’hĂ©bergement permet de configu-
rer un profil d’hĂ©bergement type, et de maintenir le serveur
d’hĂ©bergement. La gestion des comptes et des serveurs Web
est également effectuée à travers ce centre (voir p 46 à 49).
TABLEAU DE BORD DE PROJET
Le Tableau de Bord permet une vision globale du projet, de
son Ă©tat d’avancement et de sa qualitĂ©.
Des voyants alertent lorsque certains seuils (paramétrables)
sont franchis: nombre de bogues, retard de planning... et
indiquent les optimisations Ă  effectuer.
La gouvernance de projets devient facile.
PILOTEZ VOS PROJETS: TABLEAU DE BORD
WEBDEVÂź 19
GÉREZ LE CYCLE DE VIE: CENTRES DE CONTRÔLE
Publication
Publication
Publication
Publication
Publication
Publication
Publication
Publication
Publication

Weitere Àhnliche Inhalte

Was ist angesagt?

HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteRaphaël Goetter
 
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Thierry Pigot
 
Atelier numĂ©rique n°1 de l'Office de tourisme Luberon Durance. OĂč en ĂȘtes vou...
Atelier numĂ©rique n°1 de l'Office de tourisme Luberon Durance. OĂč en ĂȘtes vou...Atelier numĂ©rique n°1 de l'Office de tourisme Luberon Durance. OĂč en ĂȘtes vou...
Atelier numĂ©rique n°1 de l'Office de tourisme Luberon Durance. OĂč en ĂȘtes vou...Office de Tourisme Luberon Durance
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Chamseddine Ouerhani
 
Seocamp2016 : javascript et indexation, oĂč en est-on ?
Seocamp2016 : javascript et indexation, oĂč en est-on ?Seocamp2016 : javascript et indexation, oĂč en est-on ?
Seocamp2016 : javascript et indexation, oĂč en est-on ?Madeline Pinthon
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementHoracio Gonzalez
 

Was ist angesagt? (7)

HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014
 
Atelier numĂ©rique n°1 de l'Office de tourisme Luberon Durance. OĂč en ĂȘtes vou...
Atelier numĂ©rique n°1 de l'Office de tourisme Luberon Durance. OĂč en ĂȘtes vou...Atelier numĂ©rique n°1 de l'Office de tourisme Luberon Durance. OĂč en ĂȘtes vou...
Atelier numĂ©rique n°1 de l'Office de tourisme Luberon Durance. OĂč en ĂȘtes vou...
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
 
Seocamp2016 : javascript et indexation, oĂč en est-on ?
Seocamp2016 : javascript et indexation, oĂč en est-on ?Seocamp2016 : javascript et indexation, oĂč en est-on ?
Seocamp2016 : javascript et indexation, oĂč en est-on ?
 
Concevez votre site web avec php et mysql
Concevez votre site web avec php et mysqlConcevez votre site web avec php et mysql
Concevez votre site web avec php et mysql
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
 

Andere mochten auch

Jonathan trabajo
Jonathan trabajoJonathan trabajo
Jonathan trabajoyonathan_perez
 
Catalogue textile Yonex Larde Sports 2014
Catalogue textile Yonex Larde Sports 2014Catalogue textile Yonex Larde Sports 2014
Catalogue textile Yonex Larde Sports 2014LardeSports
 
Calendario Bacardi 2007
Calendario Bacardi 2007Calendario Bacardi 2007
Calendario Bacardi 2007V Sanchez
 
A Galipedia, libre e colaborativa, tamén para a aprendizaxe e o ensino
 A Galipedia, libre e colaborativa, tamén para a aprendizaxe e o ensino A Galipedia, libre e colaborativa, tamén para a aprendizaxe e o ensino
A Galipedia, libre e colaborativa, tamén para a aprendizaxe e o ensinoousli07
 
Herramientas De Dibujo En Google Maps
Herramientas De Dibujo En Google MapsHerramientas De Dibujo En Google Maps
Herramientas De Dibujo En Google Mapssmestref
 
La aplicacion de las redes sociales en la educacion
La aplicacion de las redes sociales en la educacionLa aplicacion de las redes sociales en la educacion
La aplicacion de las redes sociales en la educacionIsabel Conde
 
Activision Blizzard - Korbas Nguyen
Activision Blizzard - Korbas NguyenActivision Blizzard - Korbas Nguyen
Activision Blizzard - Korbas Nguyensyzix
 
Duales Studium BWL ausbildungsbegleitend
Duales Studium BWL ausbildungsbegleitendDuales Studium BWL ausbildungsbegleitend
Duales Studium BWL ausbildungsbegleitendBusiness School Magdeburg
 
Teoria de la Ducha
Teoria de la DuchaTeoria de la Ducha
Teoria de la DuchaV Sanchez
 
L'Internet libre et confidentiel...le changement c'est maintenant !
L'Internet libre et confidentiel...le changement c'est maintenant ! L'Internet libre et confidentiel...le changement c'est maintenant !
L'Internet libre et confidentiel...le changement c'est maintenant ! With_it_app
 
Recursos Para La Diversidad
Recursos Para La DiversidadRecursos Para La Diversidad
Recursos Para La DiversidadTxano Ansa Erice
 
Culturilla General
Culturilla GeneralCulturilla General
Culturilla Generalpaquitaguapa
 
lineas de tiempo de tecnologia
lineas de tiempo de tecnologialineas de tiempo de tecnologia
lineas de tiempo de tecnologiajhonatan wilson
 
La SindicaciĂł De Continguts Amb Thunderbird
La SindicaciĂł De Continguts Amb ThunderbirdLa SindicaciĂł De Continguts Amb Thunderbird
La SindicaciĂł De Continguts Amb ThunderbirdJosep Maria Soler Maylinch
 
Gotas de agua, disfraz de nube
Gotas de agua, disfraz de nubeGotas de agua, disfraz de nube
Gotas de agua, disfraz de nubelolabielsa
 

Andere mochten auch (20)

Jonathan trabajo
Jonathan trabajoJonathan trabajo
Jonathan trabajo
 
Catalogue textile Yonex Larde Sports 2014
Catalogue textile Yonex Larde Sports 2014Catalogue textile Yonex Larde Sports 2014
Catalogue textile Yonex Larde Sports 2014
 
150402 - FFBB Infos 044
150402 - FFBB Infos 044150402 - FFBB Infos 044
150402 - FFBB Infos 044
 
Calendario Bacardi 2007
Calendario Bacardi 2007Calendario Bacardi 2007
Calendario Bacardi 2007
 
A Galipedia, libre e colaborativa, tamén para a aprendizaxe e o ensino
 A Galipedia, libre e colaborativa, tamén para a aprendizaxe e o ensino A Galipedia, libre e colaborativa, tamén para a aprendizaxe e o ensino
A Galipedia, libre e colaborativa, tamén para a aprendizaxe e o ensino
 
Herramientas De Dibujo En Google Maps
Herramientas De Dibujo En Google MapsHerramientas De Dibujo En Google Maps
Herramientas De Dibujo En Google Maps
 
La aplicacion de las redes sociales en la educacion
La aplicacion de las redes sociales en la educacionLa aplicacion de las redes sociales en la educacion
La aplicacion de las redes sociales en la educacion
 
Activision Blizzard - Korbas Nguyen
Activision Blizzard - Korbas NguyenActivision Blizzard - Korbas Nguyen
Activision Blizzard - Korbas Nguyen
 
Duales Studium BWL ausbildungsbegleitend
Duales Studium BWL ausbildungsbegleitendDuales Studium BWL ausbildungsbegleitend
Duales Studium BWL ausbildungsbegleitend
 
Teoria de la Ducha
Teoria de la DuchaTeoria de la Ducha
Teoria de la Ducha
 
L'Internet libre et confidentiel...le changement c'est maintenant !
L'Internet libre et confidentiel...le changement c'est maintenant ! L'Internet libre et confidentiel...le changement c'est maintenant !
L'Internet libre et confidentiel...le changement c'est maintenant !
 
Recursos Para La Diversidad
Recursos Para La DiversidadRecursos Para La Diversidad
Recursos Para La Diversidad
 
La Ranita
La RanitaLa Ranita
La Ranita
 
Laviejecita
LaviejecitaLaviejecita
Laviejecita
 
Culturilla General
Culturilla GeneralCulturilla General
Culturilla General
 
lineas de tiempo de tecnologia
lineas de tiempo de tecnologialineas de tiempo de tecnologia
lineas de tiempo de tecnologia
 
PresentaciĂł "GuĂ­a para la correcta implantaciĂłn de comunidades de prĂĄctica en...
PresentaciĂł "GuĂ­a para la correcta implantaciĂłn de comunidades de prĂĄctica en...PresentaciĂł "GuĂ­a para la correcta implantaciĂłn de comunidades de prĂĄctica en...
PresentaciĂł "GuĂ­a para la correcta implantaciĂłn de comunidades de prĂĄctica en...
 
La SindicaciĂł De Continguts Amb Thunderbird
La SindicaciĂł De Continguts Amb ThunderbirdLa SindicaciĂł De Continguts Amb Thunderbird
La SindicaciĂł De Continguts Amb Thunderbird
 
Nagellack marken
Nagellack markenNagellack marken
Nagellack marken
 
Gotas de agua, disfraz de nube
Gotas de agua, disfraz de nubeGotas de agua, disfraz de nube
Gotas de agua, disfraz de nube
 

Ähnlich wie Publication

Journée Agences Web - Scénario Présence en ligne
Journée Agences Web - Scénario Présence en ligneJournée Agences Web - Scénario Présence en ligne
Journée Agences Web - Scénario Présence en ligneChristophe Lauer
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOGroupe Neper
 
No Code et SEO sont ils compatibles ? Philippe Yonnet Neper
No Code et SEO sont ils compatibles ? Philippe Yonnet NeperNo Code et SEO sont ils compatibles ? Philippe Yonnet Neper
No Code et SEO sont ils compatibles ? Philippe Yonnet NeperPhilippe YONNET
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEOPhilippe YONNET
 
Atelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée RennesAtelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée Renneswpalex
 
Votre site eCommerce avec Drupal Commerce dans le cloud Azure
Votre site eCommerce avec Drupal Commerce dans le cloud AzureVotre site eCommerce avec Drupal Commerce dans le cloud Azure
Votre site eCommerce avec Drupal Commerce dans le cloud AzureAnne-Sophie Picot
 
Les avantages d'un CMS open-source
Les avantages d'un CMS open-source Les avantages d'un CMS open-source
Les avantages d'un CMS open-source Antoine Générau
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
 
DĂ©veloppement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
DĂ©veloppement d'un site web pour la promotion de pme 2011   cld 20 avril 2011DĂ©veloppement d'un site web pour la promotion de pme 2011   cld 20 avril 2011
DĂ©veloppement d'un site web pour la promotion de pme 2011 cld 20 avril 2011MXO | agence totale
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !Rossi Oddet
 
Bureau Metier - Version 20061010
Bureau Metier - Version 20061010Bureau Metier - Version 20061010
Bureau Metier - Version 20061010Didier Girard
 
site-noCODE-ericacademy.pdf
site-noCODE-ericacademy.pdfsite-noCODE-ericacademy.pdf
site-noCODE-ericacademy.pdfEricKeita
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptdavrous
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptMicrosoft
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPressAurélien Denis
 
Atelier Info Tonic : Les rĂšgles d’or pour crĂ©er son site Web
Atelier Info Tonic : Les rĂšgles d’or pour crĂ©er son site WebAtelier Info Tonic : Les rĂšgles d’or pour crĂ©er son site Web
Atelier Info Tonic : Les rĂšgles d’or pour crĂ©er son site Webambin_fr
 

Ähnlich wie Publication (20)

Journée Agences Web - Scénario Présence en ligne
Journée Agences Web - Scénario Présence en ligneJournée Agences Web - Scénario Présence en ligne
Journée Agences Web - Scénario Présence en ligne
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
 
No Code et SEO sont ils compatibles ? Philippe Yonnet Neper
No Code et SEO sont ils compatibles ? Philippe Yonnet NeperNo Code et SEO sont ils compatibles ? Philippe Yonnet Neper
No Code et SEO sont ils compatibles ? Philippe Yonnet Neper
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEO
 
Do you speak technique ?
Do you speak technique ?Do you speak technique ?
Do you speak technique ?
 
Atelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée RennesAtelier WordPress - Freelance fair tour - La cordée Rennes
Atelier WordPress - Freelance fair tour - La cordée Rennes
 
Votre site eCommerce avec Drupal Commerce dans le cloud Azure
Votre site eCommerce avec Drupal Commerce dans le cloud AzureVotre site eCommerce avec Drupal Commerce dans le cloud Azure
Votre site eCommerce avec Drupal Commerce dans le cloud Azure
 
Les avantages d'un CMS open-source
Les avantages d'un CMS open-source Les avantages d'un CMS open-source
Les avantages d'un CMS open-source
 
Dictionnaire duweb
Dictionnaire duwebDictionnaire duweb
Dictionnaire duweb
 
2016 Création Refonte Site
2016 Création Refonte Site2016 Création Refonte Site
2016 Création Refonte Site
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
DĂ©veloppement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
DĂ©veloppement d'un site web pour la promotion de pme 2011   cld 20 avril 2011DĂ©veloppement d'un site web pour la promotion de pme 2011   cld 20 avril 2011
DĂ©veloppement d'un site web pour la promotion de pme 2011 cld 20 avril 2011
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
 
Bureau Metier - Version 20061010
Bureau Metier - Version 20061010Bureau Metier - Version 20061010
Bureau Metier - Version 20061010
 
site-noCODE-ericacademy.pdf
site-noCODE-ericacademy.pdfsite-noCODE-ericacademy.pdf
site-noCODE-ericacademy.pdf
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPress
 
Atelier Info Tonic : Les rĂšgles d’or pour crĂ©er son site Web
Atelier Info Tonic : Les rĂšgles d’or pour crĂ©er son site WebAtelier Info Tonic : Les rĂšgles d’or pour crĂ©er son site Web
Atelier Info Tonic : Les rĂšgles d’or pour crĂ©er son site Web
 

Publication

  • 1. PLATEFORME INTÉGRÉE DE DÉVELOPPEMENT Internet, Intranet, Cloud Web 2.0, Ajax, HTML 5, PHP Toutes les Bases de DonnĂ©es CODE MULTI-PLATEFORMES : Windows, .Net, Linux, Java, PHP, Internet, Ajax, Android, Windows Phone, iOS (iPhone, iPad) ... DĂ©veloppement en L5G Nouvelle Version
  • 2. Des sites toujours Ă  jour, qui partagent en toute sĂ©curitĂ© les donnĂ©es de l’entreprise NATIONAL AWARD Aujourd’hui les sites Internet et Intranet sont reliĂ©s en temps rĂ©el aux donnĂ©es de l’entreprise et se comportent comme de vĂ©ritables applica- tions. WEBDEV 19 est la meilleure solution pour crĂ©er ces sites. Avec WEBDEV 19, vos Ă©quipes crĂ©ent ces sites et ces applications 10 fois plus vite. Vos budgets sont respectĂ©s. Comme des dizaines de milliers de dĂ©veloppeurs en France, choisissez la plateforme la plus perfor- mante pour dĂ©velopper et publier vos sites et vos applications Internet et Intranet: WEBDEV 19. S o m m a i r e 3 Le cycle complet 4 Questions/RĂ©ponses 6 Exemples 8 Sites statiques et dynamiques 10 Toutes les bases de donnĂ©es 11 CompatibilitĂ© navigateurs 12 Le RAD 14 IDE: l’environnement intĂ©grĂ© WYSIWYG 17 La techno des «7 onglets» 18 Des contrĂŽles (champs) adaptĂ©s au Web 24 Le champ ZTR 26 Ajax 27 HTML 5 28 Intranet, Export Word, XML... 29 Templates, Vos sites sur mobiles 30 Le Langage L5G 31 Editeur de code 32 Le dĂ©bogueur, tests unitaires 33 Les composants, SĂ©curitĂ© par mot de passe (Groupware utilisateur) 34 Webservices, CSS3 35 AccĂšs natif Google, Lotus Notes... 36 PHP 37 GĂ©nĂ©rateur d’états & PDF 38 Versionning (GDS /SCM) 39 Centres de ContrĂŽle, Tableau de Bord 40 ModĂ©lisation UML et Merise 41 Base de DonnĂ©es HFSQL 42 GĂ©nĂ©rateur de requĂȘtes 43 SaaS et Cloud 44 Import HTML & WINDEV 45 Front Office, Back Office, 64 langues 46 DĂ©ploiement 48 L’hĂ©bergement 49 Administration, RĂ©fĂ©rencement 50 Paiement sĂ©curisĂ© 51 Les statistiques 53 Les services PC SOFT 55 Exemples de sites BIENVENUE DANS LE MONDE DE L’INTERNET INTERACTIF ! Fournisseur Officiel de la PrĂ©paration Olympique www.pcsoft.fr ‱ 3 GRÂCE À WEBDEV 19 CRÉEZ TRÈS VITE DES SITES INTERNET, INTRANET ET SAAS QUI GÈRENT DES DONNÉES
  • 3. 4 ‱ DĂ©veloppez 10 fois plus vite 1 A qui est destinĂ© WEBDEV 19 ? A toutes les sociĂ©tĂ©s et tous les dĂ©veloppeurs qui dĂ©sirent rĂ©aliser des sites et des applications INTERNET, INTRANET et SaaS. 2 Quels types de sites et d’applications peut-on crĂ©er ? Tous les types de sites, mais WEBDEV est spĂ©cialisĂ© dans les sites «dyna- miques», c’est-Ă -dire qui se comportent comme de vĂ©ritables applications, et qui gĂšrent des donnĂ©es en temps rĂ©el. 3 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 avec le manuel d’auto-formation livrĂ© en standard. 4 Faut-il des connaissances particuliĂšres sur INTERNET ? Non. Vos Ă©quipes de dĂ©veloppement produiront des sites robustes et efficaces. Tout le code (HTML, Javascript, Serveur) est gĂ©nĂ©rĂ© par WEBDEV 19. 5 Comment crĂ©er un traitement AJAX avec WEBDEV 19 ? Il suffit de cliquer sur le bouton «Ajax» du traitement... Il n’y a pas plus simple. 6 Quel est l’avantage principal de WEBDEV par rapport Ă  d’autres outils? Il y en a plusieurs, comme: l’intĂ©gration totale, la simplicitĂ©, la vitesse de dĂ©veloppement, 3 Ă  10 fois plus rapide, ou encore l’accĂšs aux bases de donnĂ©es. 7 WEBDEV s’appuie-t-il sur des technolo- gies standard ? Oui, comme HTML, HTML5, XML, CSS, Javascript ou PHP. Mais vous n’avez pas besoin de connaĂźtre ces technologies, WEBDEV gĂ©nĂšre automatiquement le code nĂ©cessaire. 8 Je possĂšde un existant. Pourrais-je le rĂ©cupĂ©rer avec WEBDEV ? Oui. Vous pouvez aspirer des pages HTML existantes. Vous pouvez Ă©galement mixer des pages WEBDEV avec un site existant, en conservant votre existant. 9 On n’a pas besoin de connaĂźtre Java, HTML PHP ou Javascript pour crĂ©er des sites ? Non, c’est inutile. WEBDEV gĂ©nĂšre automatiquement le code HTML, Javascript, CSS et PHP optimisĂ© qui est nĂ©cessaire. 10 Et si je veux saisir du HTML, ou rĂ©cupĂ©- rer un existant Javascript par exemple ? WEBDEV est ouvert. Il est possible de saisir du code HTML, PHP ou Javascript directement dans l’éditeur (ou de copier un code Javascript ou HTML existant), voire mĂȘme un script JSP ou ASP. 11 J’ai lu que WEBDEV est compatible WINDEV; il faut possĂ©der WINDEV ? WEBDEV est une plate-forme totalement autonome. Aucun autre outil n’est nĂ©cessaire pour dĂ©velopper avec WEBDEV. 12 Et si je possĂšde dĂ©jĂ  WINDEV ? Dans ce cas, d’une part, la formation est plus rapide, d’autre part vous pourrez automatiquement transformer vos applications WinDev en applications Web... 13 L’éditeur de «pages» est-il WYSIWYG? Oui, au pixel prĂšs ! 14 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, ... 15 Ajax, XML, Flash, CSS, W3C, JSON, JQuery sont-ils supportĂ©s ? Oui. 16 WEBDEV permet-il de dĂ©velopper des sites de grande envergure ? Oui, c’est mĂȘme dans ces projets qu’il excelle: sites Internet, Intranet et SaaS. 17 Quel Support Technique est disponible? C’est trĂšs simple: le Support Technique WEBDEV est gratuit (15 requĂȘtes personnalisĂ©es gratuites par tĂ©lĂ©phone ou par email) 19 Qui utilise WEBDEV ? Tous les types de structures professionnelles: SSII, constructeurs, services informatiques, ingĂ©nieurs de laboratoire, ministĂšres, admi- nistrations, indĂ©pendants... 19 Je peux gĂ©nĂ©rer des sites en pur «PHP» avec WEBDEV 19 ? Oui, c’est une fonctionnalitĂ© standard. 20 En France WEBDEV est donc «le» standard pour crĂ©er des sites dynamiques ? Oui, certainement. Nous rĂ©pondons ici aux questions que l’on nous pose le plus souvent sur WEBDEV. Vous y retrouverez certainement les rĂ©ponses Ă  quelques-unes de vos interrogations. Vous avez d’autres questions? Appelez-nous, nous y rĂ©pondrons avec plaisir. Consultez le numĂ©ro spĂ©cial de «01» consacrĂ© Ă  WEBDEV et WINDEV pour dĂ©couvrir 100 tĂ©moignages de sociĂ©tĂ©s prestigieuses. HĂ©bergement sous Windows ou sous Linux ! (et dans le Cloud) QUESTIONS REPONSES www.pcsoft.fr ‱ 5 WEBDEV 19 gĂšre le cycle de vie complet des sites TOUTES LES PHASES DU DÉVELOPPEMENT SONT PRISES EN COMPTE EN STANDARD PAR WEBDEV 19 WEBDEV 19 GÈRE TOUTES LES PHASES DE LA CRÉATION D’UN SITE ‱ Le maquettage ‱  La conception ‱  Le dossier d’analyse et de programma- tion ‱  La liaison avec les sites statiques exis- tants ‱  Les Bases de DonnĂ©es ‱  La programmation (L5G, Ajax, Webservice, .NET, J2EE, HTML, HTML5, Javascript...) ‱  La reprise de l’existant ‱  Les Ă©tats (PDF, codes-barres,...) ‱  Le paiement sĂ©curisĂ© ‱ La crĂ©ation et l’utilisation de composants ‱  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 les infographistes ‱  L’installation chez l’hĂ©bergeur ‱  Les tests de non-rĂ©gression ‱  Les tests de performance ‱  L’intĂ©gration continue ‱ La maintenance et les Ă©volutions ‱  Les statistiques de frĂ©quentation ‱  L’assistance au dĂ©veloppe- ment WEBDEV, c’est l’assurance d’un produit complet et totalement intĂ©grĂ©: la formation est plus rapide, le support technique est meilleur (et gratuit). Les sites «dynamiques» sont maintenant la norme de l’INTERNET et de l’INTRANET. Ces sites sont faciles Ă  dĂ©velopper et Ă  maintenir avec WEBDEV 19.
  • 4. DES SITES RÉUTILISABLES, ET PERSONNALISABLES SONT LIVRÉS WEBDEV 19 est livrĂ© avec de nombreux sites «exemples», dĂ©jĂ  dĂ©veloppĂ©s. Le code source et les pages sont livrĂ©s: vous pouvez utiliser directement ces sites, les modifier, les per- sonnaliser, les revendre... UN ASPECT DIDACTIQUE Vous pouvez Ă©galement Ă©tudier l’analyse et le code de ces sites, dans un but didactique. PARMI LES SITES LIVRÉS... Voici une sĂ©lection de quelques exemples livrĂ©s : ‱ Commerce Ă©lectronique Gestion des rayons, du chariot, du paiement. ‱ Petites annonces Gestion de plusieurs critĂšres de sĂ©lection. ‱ Annuaire partagĂ© En Intranet, l’annuaire pourra ĂȘtre partagĂ© dans une entreprise. En Internet, l’annuaire pourra ĂȘtre partagĂ© 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Ăšre Recherche d’un bien en fonction de nombreux critĂšres. ‱ CMS SystĂšme de gestion de contenu. ‱ Gestion d’une base documentaire Pour archiver et retrouver des documents en fonction de mots-clĂ©s que vous dĂ©cidez. ‱ Paiement sĂ©curisĂ© (voir dĂ©tail page 50) ‱ Gestion d’agence de voyage PrĂ©sentation des hĂŽtels, des disponibilitĂ©s, sĂ©lection selon de nombreux critĂšres, ... ‱ News, Forum, Blog, Site associatif... ... et tout un ensemble d’autres exemples immĂ©diatement uti- lisables. ETC... De nombreux autres exemples sont Ă©galement livrĂ©s sous forme de pages, ou sous forme d’objets dans le dictionnaire interactif. Une partie du dictionnaire interactif de WEBDEV GAGNEZ DU TEMPS Les sites livrĂ©s, que vous pourrez adapter Ă  vos besoins, vous permettront de gagner beaucoup de temps lors de vos dĂ©ve- loppements. RĂ©utilisez les exemples dans vos sites WEBDEVÂź WEBDEVÂź 19 DE NOMBREUX SITES EXEMPLES PRÊTS À L’EMPLOI SONT LIVRÉS EnraisondesĂ©volutionspermanentes,l’aspectdessiteslivrĂ©setprĂ©sentĂ©speutdiffĂ©rer. 6 ‱ DĂ©veloppez 10 fois plus vite Honolulu : portail Intranet Un portail Intranet com- plet, avec toutes ses applications (messageries, news, recherche documentaire,...), est Ă©galement livrĂ©. Directement utilisable, il peut Ă©galement ĂȘtre adaptĂ© Ă  vos besoins (source livrĂ©). Honolulu a dĂ©jĂ  Ă©tĂ© diffusĂ© Ă  plusieurs centaines de milliers d’exemplaires DES SITES EN WEBDEV Parmi les dizaines de milliers de sites rĂ©alisĂ©s en WEBDEV, en voici quelques-uns. Retrouvez-en plus de 1000 sur le site www.pcsoft.fr. www.pcsoft.fr ‱ 7 WEBDEVÂź 19 DES DIZAINES DE MILLIERS DE SITES Des milliers d’autres sites Ă  dĂ©couvrir sur www.pcsoft.fr
  • 5. RAPPEL : SITE STATIQUE Un SITE STATIQUE est un site qui prĂ©sente des pages figĂ©es, reliĂ©es de maniĂšre dĂ©finie les unes aux autres. Il s’agit en gros d’un «ensemble de pages» sur Internet, que l’on peut juste consulter. En gĂ©nĂ©ral ce site prĂ©sente des informations de base sur la sociĂ©tĂ©, le groupe ou l’association: activitĂ©, adresse, les pro- duits, et quelquefois des tarifs, une page de contacts... Les limites des sites statiques se font vite sentir: Ă  chaque modification d’une donnĂ©e, il faut la reporter dans le site, et rĂ©-installer les pages concernĂ©es. Pour que les produits prĂ©sentĂ©s restent d’actualitĂ©, il faut effectuer Ă  chaque fois les modifications sur le site statique. QU’EST-CE QU’UN SITE DYNAMIQUE ? Un SITE DYNAMIQUE crĂ©e «à la volĂ©e» les pages vues par les internautes, en fonction des actions de l’internaute et des donnĂ©es prĂ©sentes dans des bases de donnĂ©es. Prenons l’exemple d’un catalogue qui contient 30.000 articles: un site statique devrait prĂ©voir 30.000 pages HTML statiques diffĂ©rentes ! Un site dynamique ne nĂ©cessitera qu’une seule page, prĂ©- vue pour recevoir des donnĂ©es (les rĂ©fĂ©rences du produit, sa photo,...). Le serveur «assemblera» les Ă©lĂ©ments nĂ©cessaires Ă  la demande, Ă  la volĂ©e. TOUJOURS À JOUR Les donnĂ©es du site dynamique sont TOUJOURS À JOUR, puisqu’issues des bases de donnĂ©es de l’entreprise. Vous affichez les stocks rĂ©els, vous indiquez Ă  l’internaute la date rĂ©elle d’envoi de sa commande, vous gĂ©rez des plan- nings,... DES SITES QUI SONT DE VÉRITABLES APPLICATIONS Autre aspect intĂ©ressant des sites dynamiques rĂ©alisĂ©s avec WEBDEV 19, ils se comportent comme de VÉRITABLES APPLICATIONS. Toute la puissance de l’informatique est Ă  votre disposition. FACILITÉ DE RÉALISATION GrĂące Ă  la puissance de son environnement complet et Ă  sa richesse fonctionnelle, il est extrĂȘmement FACILE Ă  tout dĂ©veloppeur, sans compĂ©tence particuliĂšre en Internet, de rĂ©aliser des sites dynamiques sophistiquĂ©s, de haute fiabilitĂ©, rapides et Ă©volutifs. 8 ‱ DĂ©veloppez 10 fois plus vite AJOUTER UNE PARTIE «DYNAMIQUE» À UN SITE STATIQUE EXISTANT WEBDEVÂź 19 UN SITE DYNAMIQUE C’EST QUOI ? Aujourd’hui, la plupart des sociĂ©tĂ©s possĂš- dent un site statique, mais dĂ©sirent profiter de fonctionnalitĂ©s dynamiques. AVEC WEBDEV 19, RÉUTILISEZ VOTRE EXISTANT Pour rĂ©utiliser un EXISTANT, vous pouvez, Ă  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 ‱ ... MIXER STATIQUE ET DYNAMIQUE MIXER statique et dynymique est la solution la plus rapide. Souvent un site statique existe dans l’entreprise. Le site statique est CONSERVÉ, et les pages dynamiques sont RAJOUTÉES, ou remplacent certaines pages statiques. Il est Ă©galement facile de relier de maniĂšre transparente 2 sites, un statique et l’autre dynamique. IMPORTER LES PAGES STATIQUES WEBDEV 19 propose une puissante fonctionnalitĂ© d’import de pages statiques et de templates (voir page 44). Les pages existantes sont ainsi IMPORTÉES dans l’environ- nement, et sont transformĂ©es en pages WEBDEV 19. LE BESOIN DE «TEMPS RÉEL» Un tarif change dans le systĂšme de gestion de l’entreprise ? ImmĂ©diatement, le site est Ă  jour. Une nouvelle rĂ©fĂ©rence de produit est crĂ©Ă©e ? Automatiquement et immĂ©diatement ce produit est prĂ©sent sur le site dynamique. Le stock Ă©volue ? Automatiquement, le client qui passe com- mande est informĂ©. Sans avoir Ă  installer en permanence, Ă  modifier et mettre Ă  jour les pages, un site dynamique affiche automatiquement des DONNÉES À JOUR. LE «DYNAMIQUE» EST INDISPENSABLE Aujourd’hui, vos sites doivent se comporter comme des appli- cations ! Vos sites doivent ĂȘtre des sites dynamiques. WEBDEVÂź 19 www.pcsoft.fr ‱ 9 WYSIWYG: crĂ©ez en visuel WEBDEVÂź CRÉATION DE PAGE : UNE MÉTHODE RÉVOLUTIONNAIRE WEBDEVÂź 19 CrĂ©ez vos sites «à la souris», WEBDEV 19 gĂ©nĂšre automatiquement le code HTML, le code Javascript et le code Serveur nĂ©ces- saires au site. Et sur demande, WEBDEV 19 gĂ©nĂšre mĂȘme le site en PHP. CLIQUEZ AU LIEU DE CODER WEBDEV 19 est un environnement complet, intĂ©grĂ©. L’ensemble du dĂ©veloppement s’effectue avec un seul envi- ronnement et un seul et unique langage: le WLangage, L5G d’une trĂšs grande PUISSANCE, et FACILE Ă  apprendre. WEBDEV 19 permet ainsi de s’affranchir des connaissances inutilement complexes de l’Internet. Par ailleurs, les traitements sont totalement sĂ©parĂ©s des pages, il n’y a pas de mĂ©lange comme avec des langages tra- ditionnels. Les pages se crĂ©ent facilement en positionnant les champs Ă  la souris (voir encadrĂ© page 14). Des zones de champs peuvent ĂȘtre crĂ©Ă©es pour les dĂ©place- ments et dĂ©calages d’un bloc. HTML ET JAVASCRIPT Inutile de connaĂźtre ni HTML ni Javascript pour rĂ©aliser de superbes et puissants sites dynamiques. WEBDEV 19 gĂ©nĂšre tout le code qui est nĂ©cessaire Ă  votre place. Mais WEBDEV 19 est OUVERT, et si cela est nĂ©cessaire, il est toujours possible de taper (ou coller) directement du code de bas niveau: HTML, Javascript, scripts ASP, JSP, Applets Java, PHP... Avec WEBDEV 19, vos Ă©quipes dĂ©veloppent 10 FOIS PLUS VITE tous les types de sites et d’applications, Internet, Intranet, Extranet et SaaS. L’éditeur de WEBDEV : visuel, crĂ©ation des pages et des champs Ă  la souris ! Code HTML qu’il fallait taper soi-mĂȘme Code Javascript qu’il fallait taper soi-mĂȘme Le WLangage de WEBDEV: simplifiez et rĂ©duisez le code ! La crĂ©ation et le paramĂ©trage s’effectuent visuellement, en WYSIWIG, Ă  la souris, pour les pages et les puissants champs. Inutile de connaĂźtre HTML pour crĂ©er des pages sophistiquĂ©es.
  • 6. WEBDEV 19 est fourni en standard avec accĂšs natif Ă  SAP, Lotus Notes, Excel, SalesForce, Google et Outlook WEBDEVÂź 19 TOUTES LES BASES DE DONNÉES: MYSQL, ORACLE, AS/400, SQL SERVER, INFORMIX... Une description de structures de donnĂ©es sous WEBDEV 10 ‱ DĂ©veloppez 10 fois plus vite Un site dynamique utilise des donnĂ©es. WEBDEV 19 accĂšde Ă  toutes les bases de don- nĂ©es du marchĂ©. WEBDEV est ouvert, il permet de rĂ©-utiliser et de cohabiter avec un existant. TOUTES LES BASES DE DONNÉES SONT SUPPORTÉES (LISTE NON EXHAUSTIVE) WEBDEV peut lire et Ă©crire dans toutes les bases de donnĂ©es. Parmi ces bases, on trouve les suivantes: *: accĂšs natif standard **: accĂšs natif en option HFSQL, UNE PUISSANTE BASE DE DONNÉES SQL EN STANDARD WEBDEV est livrĂ© avec HFSQL, une puissante base de don- nĂ©es SQL Client/Serveur, dĂ©jĂ  utilisĂ©e sur des millions de sites. HFSQL est dĂ©crit en dĂ©tail page 41. ACCÈS EN MODE NATIF WEBDEV peut accĂ©der en mode natif Ă  MySQL, Oracle, SQL Server, PostgreSQL, SQLite, AS/400, DB2, Informix, Sybase directement (modules disponibles sĂ©parĂ©ment). L’installation de ces accĂšs natifs est extrĂȘmement simple (un fichier de taille rĂ©duite). Les champs de type BLOB ou Long Raw sont supportĂ©s. Les performances d’accĂšs sont remarquables. SUPPORT NATIF DES BASES «AS/400» ET «ISERIES» WEBDEV accĂšde Ă  l’AS/400 directement (module disponible sĂ©parĂ©ment), sans driver ODBC, OLE DB et sans ActiveX. WEBDEV sait rĂ©cupĂ©rer et exporter des DDS, lancer des commandes CL, gĂ©rer une Dataqueue,... L’intĂ©gration Ă  l’environnement est totale, et la vitesse est Ă©poustou- flante. Demandez la brochure spĂ©ci- fique ! TOUTES LES BASES DE DONNÉES VIA ODBC OU OLE DB WEBDEV 19 accĂšde Ă  toute base de donnĂ©es possĂ©dant un driver ODBC ou OLE DB. SCRIPT SQL = ANALYSE WEBDEV Une analyse dĂ©finie sous WEBDEV peut ĂȘtre convertie en script SQL pour crĂ©er de nouvelles bases SQL, et tout script SQL peut ĂȘtre converti automatiquement en analyse WEBDEV pour exploiter un existant. Cela offre une ouverture totale. La rĂ©cupĂ©ration des structures existantes s’effectue le plus souvent par un simple «drag&drop» vers l’éditeur d’analyses. LES PROCÉDURES STOCKÉES Si la Base de DonnĂ©es tierce supporte les procĂ©dures stoc- kĂ©es, celles-ci sont accessibles par des applications Ă©crites avec WEBDEV. LA PROGRAMMATION EST IDENTIQUE QUELLE QUE SOIT LA BASE DE DONNÉES Quelle que soit la base de donnĂ©es, vous pourrez utiliser indif- fĂ©remment la programmation par SQL ou par les ordres du L5G de WEBDEV, le WLangage (hLitSuivant,...). Cela offre encore fois une grande ouverture, et la possibilitĂ© de changer de base de donnĂ©es trĂšs facilement. VOUS UTILISEZ WINDEV... Si vous utilisez WINDEV, notez que vous pouvez partager le projet et ses Ă©lĂ©ments (code, classes, fenĂȘtres, requĂȘtes, Ă©tats, ...) entre les 2 environnements, et exporter vos applications vers WEBDEV. WEBDEV 19 permet de crĂ©er un nouveau site et ses donnĂ©es, ou de crĂ©er des sites reliĂ©s Ă  des donnĂ©es existantes, quelle que soit la Base de DonnĂ©es. - HFSQL* - MySQL* - Oracle** - Informix** - SQLServer** - PostgreSQL* - SQLite* - IBM DB2** - IBM AS/400** - Sybase** - Netware SQL - Ingres - Progress** - XML* - Bull DPS - FoxPro - Paradox - Access - xBase* - ASCII* - Excel* - Etc... WEBDEVÂź 19 Internet Explorer sous Windows Firefox sous Windows Firefox sous Linux Tablette sous Android iPad Chrome sous Windows Safari sur Mac WEBDEV gĂ©nĂšre Ă  la demande des sites compa- tibles avec la norme W3C transitional www.pcsoft.fr ‱ 11 LES SITES CRÉÉS AVEC WEBDEV SONT COMPATIBLES AVEC TOUS LES NAVIGATEURS Les navigateurs propo- sent tous leurs particu- laritĂ©s, qui diffĂšrent mĂȘme selon les ver- sions. WEBDEV gĂ©nĂšre un code gĂ©nĂ©rique, qui est reconnu par quasiment tous les navigateurs standard du marchĂ©. Voici la consultation du mĂȘme site sous diffĂ©- rents navigateurs et systĂšmes. LE MÊME SITE WEBDEV S’AFFICHE SUR TOUS LES NAVIGATEURS iPhone VOS SITES COMPATIBLES TOUS NAVIGATEURS
  • 7. La mĂ©thode RAD (facultative) de construction automatique de sites de WEBDEV (RAD: «Rapid Application Development») permet de gĂ©nĂ©rer automatiquement des sites INTERNET et INTRANET directement utilisables. Tout est personnalisable et modifiable. Un site dynamique complet est rĂ©alisable en quelques dizaines de minutes ! AprĂšs avoir spĂ©cifiĂ© la description des tables de donnĂ©es (ana- lyse), crĂ©er un site complet avec WEBDEV est automatique: menu, pages, code... Si la description des donnĂ©es qui sert au dĂ©veloppement est dĂ©jĂ  dĂ©crite (base de donnĂ©es existante par exemple), il suf- fit de rĂ©cupĂ©rer cette description. Le site gĂ©nĂ©rĂ© est totalement modifiable bien sĂ»r. Voici sur un exemple le processus de crĂ©ation d’un site avec le RAD. ïżœ INDIQUEZ la base de donnĂ©es Ă  utiliser (analyse). Visualisation des liens entre tables ïżœ CLIQUEZ sur l'icone «RAD» de la barre d'icones. Notez que vous pouvez gĂ©nĂ©rer le site en PHP. ïżœ DiffĂ©rentes prĂ©sentations possibles (les TEM- PLATES, ou «modĂšles de pages») sont proposĂ©es. ïżœ SÉLECTIONNEZ les tables Ă  utiliser. Les relations entre les tables seront automatiquement gĂ©rĂ©es. La puissance de WEBDEV en un clic... ïżœ GÉNÉREZ! Le site dynamique est crĂ©Ă©! Il est immĂ©diatement opĂ©rationnel, avec les pages de saisie de donnĂ©es, les liaisons entre pages,... Mais vous pouvez bien sĂ»r le personnaliser, le modifier, ajouter des pages statiques, des illustrations, modifier le code des traitements, ajouter de nouveaux traitements, etc... Il n’y a aucune limite: vous ĂȘtes le maĂźtre de vos dĂ©veloppements. ïżœ Lorsque vous dĂ©sirez INSTALLER le site, lancez la crĂ©ation automatique de «procĂ©dure d'installation» et WEBDEV crĂ©e pour vous la procĂ©dure d'installation. Si vous avez utilisĂ© la Base de DonnĂ©es HFSQL (librement dif- fusable), la procĂ©dure inclura mĂȘme le moteur de la Base de DonnĂ©es. La prĂ©sence de WEBDEV n'est bien sĂ»r pas nĂ©cessaire chez l’hĂ©bergeur, il suffit d’un serveur d’application WEBDEV ou d’un moteur PHP selon le type de site que vous avez gĂ©nĂ©rĂ©. VoilĂ , le site est crĂ©Ă©, en quelques minutes ! GÉNÉREZ VOTRE PROPRE CODE GrĂące Ă  la fonctionnalitĂ© de «pattern», WEBDEV vous per- met de dĂ©finir le code qui sera gĂ©nĂ©rĂ©. Le RAD utilisera votre code, vos classes, vos procĂ©dures ! RAD PHP: EN STANDARD WEBDEV 19 permet de gĂ©nĂ©rer des sites dynamiques en PHP. Inutile de connaĂźtre PHP, WEBDEV 19 gĂ©nĂšre le code nĂ©ces- saire. Voir page 36 pour le dĂ©tail sur PHP. RÉPONDEZ PLUS VITE À UN CAHIER DES CHARGES RĂ©pondre Ă  un cahier des charges pour remporter un contrat est facile avec WEBDEV ! Vous aurez plus de chances de gagner la confrontation en prĂ©sentant chez le futur client un site rĂ©el gĂ©nĂ©rĂ© rapidement avec le RAD. Vous personnaliserez ensuite le site aux goĂ»ts et besoins du client. Un site rĂ©el est plus spectaculaire qu’une simple proposition Ă©crite remise au prospect ! 12 ‱ DĂ©veloppez 10 fois plus vite WEBDEVÂź WEBDEVÂź 19 LE RAD WEB : DÉVELOPPER UN SITE INTERACTIF EN QUELQUES CLICS VOICI UN EXEMPLE DE PAGES GÉNÉRÉES AUTOMATIQUEMENT PAR LE RAD Et ainsi de suite pour chaque choix. Chaque page gĂ©nĂ©rĂ©e est totalement modifiable. RAD «APPLICATIF» ComplĂ©ment du RAD, le «RAD applicatif» propose des sites dĂ©jĂ  dĂ©veloppĂ©s, qu’il suffit de paramĂ©trer Ă  ses besoins. Le site peut ĂȘtre utilisĂ© tel quel, ou inclus dans un site existant. Parmi les sites proposĂ©s: com- merce Ă©lectro- nique, blog, CMS (SystĂšme de Gestion de Contenu), site associatif, Forum,... www.pcsoft.fr ‱ 13 WEBDEV est compatible WINDEV et WINDEV Mobile PORTABILITÉ UNIVERSELLE Le dĂ©veloppement multi-cibles (Windows, Linux, .Net, Internet, Intranet, SaaS, Smartphone, Tablette, Android, iOS, terminal, Mac, sur serveur Windows ou Linux...) est rendu possible par la compatibilitĂ© entre les versions 19 de WEBDEV, WINDEV Mobile et WINDEV. Depuis le mĂȘme code, crĂ©ez un site Internet et une appli- cation Windows par exemple ! Site WEBDEV sur serveur Linux Application Windows avec WINDEV Application Linux avec WINDEV Site WEBDEV sur iPad, iPhone et Android Site PHP avec WEBDEV Application Java avec WINDEV Les boutons de choix sont gĂ©nĂ©rĂ©s automatiquement, et modifiables Le choix «Frais» ouvre la page suivante, gĂ©nĂ©rĂ©e auto- matiquement, et modifiable Un clic sur un bouton ouvre la page suivante, gĂ©nĂ©rĂ©e automatiquement et bien sĂ»r modifiable Le bouton «Projet» ouvre la page suivante. Le bouton «Modifier» ouvre la page suivante, gĂ©nĂ©rĂ©e automatiquement, et modifiable Votre code est Ă©galement compatible Android, Windows Phone et iOS (iPhone et iPad) Java AJAX iOS
  • 8. 14 ‱ DĂ©veloppez 10 fois plus vite La mĂ©thode la plus intuitive WEBDEV 19 propose certainement l’environ- nement de travail le plus puissant, le plus facile et le plus intĂ©grĂ© du marchĂ© ! Vos Ă©quipes crĂ©eront facilement de superbes sites. Aucune connaissance prĂ©alable de la programmation Internet n’est nĂ©cessaire. Le gĂ©nĂ©rateur de pages de WEBDEV permet de rĂ©aliser faci- lement de superbes pages. PC SOFT bĂ©nĂ©ficie d'une expĂ©rience de plus de 20 ans dans la conception d'outils de crĂ©ation d'IHM. Cette expĂ©rience a Ă©tĂ© mise Ă  profit pour WEBDEV. Notez que les pages suivantes dĂ©taillent de nombreuses fonc- tionnalitĂ©s prĂ©sentĂ©es dans ce chapitre. LES CHAMPS DANS LES PAGES: WYSIWYG RÉVOLUTIONNAIRE ! Les diffĂ©rents champs (saisie, table, image...) sont crĂ©Ă©s et positionnĂ©s visuellement, en interactif sous l'Ă©diteur. Ce que vous voyez sous l’éditeur correspond Ă  ce que l’internaute verra dans son navigateur. Les pages (avec les champs, leurs caractĂ©ristiques dĂ©taillĂ©es dĂ©finie par les 7 onglets, et leur code) sont sauvegardĂ©es comme Ă©lĂ©ments rĂ©utilisables. Cette technique permet de simplifier la programmation, en gĂ©rant les pages comme des objets Ă©voluĂ©s. L’éditeur de pages permet de crĂ©er et de modifier visuelle- ment les champs, indĂ©pendamment du code source. Il est possible de s’abonner aux Ă©ventuelles modifications d’un Ă©lĂ©ment partagĂ© entre plusieurs dĂ©veloppeurs (hĂ©ri- tage). Avec WEBDEV 19, il est bien sĂ»r possible d'intervenir par pro- gramme pour modifier les propriĂ©tĂ©s d'un champ: cible, cou- leur, visibilitĂ©,... Par exemple, selon le profil de l’internaute, il est possible de rendre des champs visibles ou invisibles, ... Tout est dyna- mique ! Cette technique de gestion des pages et des champs fait gagner un temps considĂ©rable lors de la maintenance des sites, et apporte un gain de robustesse. Et un simple «GO» permet de tester immĂ©diatement le site. UN POSITIONNEMENT PRÉCIS AVEC OU SANS CSS WEBDEV inclut de maniĂšre transparente des algorithmes de positionnement (Ă  la souris) trĂšs puissants, et permet un posi- tionnement au pixel prĂšs. WEBDEV peut faire appel, si vous le dĂ©sirez, aux feuilles de styles Ă  la norme CSS. Les feuilles de styles se crĂ©ent facile- ment depuis l’environnement (voir Ă©galement CSS3 p34) Les tables de positionnement optimisent le poids des pages TOUS LES CHAMPS POUR INTERNET L'Ă©diteur de WEBDEV permet de crĂ©er et manipuler tous les champs dont vous aurez besoin pour rĂ©aliser rapidement de superbes interfaces (voir pages 18 Ă  25). Les principaux objets gĂ©rĂ©s par l'Ă©diteur d'IHM sont: ‱ Texte, libellĂ© HTML ‱ 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 WEBDEVÂź WEBDEVÂź 19 UN PUISSANT ENVIRONNEMENT VISUEL Sous l’environnement intĂ©grĂ© 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 17) www.pcsoft.fr ‱ 15 ‱ Champ HTML ‱ Champ Applet Java, Objet Flash ‱ Champ «rĂ©glette» de parcours ‱ Superchamp, ModĂšle de champs, ‱ IFrame, Page interne ‱ SiteMapPath, Plan du site, ‱ Graphe, Calendrier ‱ Onglets, etc... Les masques de saisie HTML5 sont gĂ©rĂ©s. POSITIONNEMENT PAR ANCRAGE Les ancrages dĂ©finissent la maniĂšre dont le contenu d’une page va se com- porter lorsque la page est agrandie par l’internaute. La gestion des ancrages en WEBDEV 19 est trĂšs facile. LE CHAMP «ZONE RÉPÉTÉE» WEBDEV permet la crĂ©ation de zones rĂ©pĂ©tĂ©es multicolonnes, remplies auto- matiquement par liaison fichier, ou par programmation personnalisĂ©e (voir page 19). DÉFINIR UN LIEN Pour dĂ©finir un lien depuis un bouton graphique ou un champ lien, il suffit de pointer la page Ă  afficher Ă  l’aide du mini-modifieur. Ce lien peut ĂȘtre redĂ©fini par programmation si nĂ©cessaire. LES GRAPHIQUES DE GESTION Un grapheur est livrĂ© avec WEBDEV; il permet de rĂ©aliser faci- lement des histogrammes, des courbes, des camemberts, boursiers... en 2D ou en relief. On retrouve encore ici la sim- plicitĂ© phĂ©nomĂ©nale de WEBDEV ! DES BOUTONS INTELLIGENTS Le «multi-clic» sur les boutons de validation est neutralisĂ© par dĂ©faut. Un internaute qui clique 3 fois sur le bouton «vali- der» ne recevra pas 3 fois sa commande... PLAN DU SITE Le plan du site est calculĂ© par rĂ©tro-analyse de l’existant, en fonction des liens fixes et programmĂ©s. Un champ «plan du site» est automatiquement crĂ©Ă© pour ĂȘtre inclus dans le site gĂ©nĂ©rĂ©. DES AMBIANCES POUR TOUS LES USAGES WEBDEV 19 est livrĂ© avec de nombreuses ambiances de page, permettant ainsi de rĂ©aliser faci- lement des sites pour toutes les cibles (comme par exemple ci- contre, sur un Apple iPhone). CRÉEZ FACILEMENT VOS PAGES DE BELLES PAGES FACILEMENT La crĂ©ation des pages s’effectue facilement, en visuel, et vous disposez d’un arsenal impressionnant de champs (contrĂŽles) trĂšs puissants. Un «champ de saisie» WEBDEV avec toutes ses fonctionnalitĂ©s intĂ©grĂ©es, qui se pose par un simple «glisser/dĂ©placer» Ă  la souris correspond Ă  plus de 50 lignes Javascript ! Vous imaginez facilement le code que vous Ă©cono- misez. DĂ©couvrez dans les pages suivantes les principales possibilitĂ©s offertes par l’éditeur intĂ©grĂ© de WEBDEV 19.
  • 9. 16 ‱ DĂ©veloppez 10 fois plus vite La mĂ©thode la plus simple et la plus intuitive WEBDEVÂź WEBDEVÂź 19 UN ENVIRONNEMENT DE CRÉATION WEB INTÉGRÉ ET INTUITIF L’environnement de travail WYSIWYG de WEBDEV apporte un confort propice Ă  la pro- ductivitĂ©. Vos Ă©quipes rĂ©aliseront facilement les sites que vous devez dĂ©velopper, et que vos clients et utilisateurs attendent. WEBDEV 19 est facile Ă  prendre en main: une semaine suffit en gĂ©nĂ©ral Ă  un dĂ©veloppeur. Tout est en français: c’est plus clair (version anglaise Ă©gale- ment disponible). Tout est intĂ©grĂ© avec le mĂȘme mode opĂ©ratoire, tout est visuel, tout est inclus: vos Ă©quipes dĂ©veloppent plus vite ! Le Support Technique5 est Ă©galement inclus, ce qui reprĂ©sente encore un confort et des Ă©conomies non nĂ©gligeables, ainsi qu’un gain de temps de dĂ©veloppement supplĂ©mentaire. Notez que les projets peuvent ĂȘtre sauvĂ©s dans le Cloud, ce qui facilite le travail en Ă©quipe. WEBDEV 19 est compatible WINDEV 19. Roue chromatique dans l’environnement L’environnement intĂ©grĂ© est trĂšs intuitif. Un petit carrĂ© jaune indique que le champ fait par- tie du modĂšle (template) Un menu contextuel (clic droit) est dispo- nible pour un accĂšs rapide aux diffĂ©rentes fonctionnalitĂ©s Un menu contextuel (clic droit) est dispo- nible pour le para- mĂ©trage des barres d’icones. Les volets proposent des composants, des champs, du code,... pour vous faire gagner du temps Volet: il donne une vision glo- bale du projet; un double-clic (ou un drag & drop) sur un Ă©lĂ©ment l’ouvre immĂ©dia- tement Ruban & boĂźtes Ă  outils dĂ©plaçables, visibles ou pas, et paramĂ©trables Barre d’informa- tion indiquant le nom de la page en cours, taille,... L’interface des Ă©diteurs est vraiment 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 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’Internet n’est nĂ©cessaire, tout est dĂ©crit en français lim- pide. Les caractĂ©ristiques de chaque contrĂŽle (champ) se dĂ©finissent par l’intermĂ©diaire d’un mode de dialogue exclusif, trĂšs facile et trĂšs puissant: 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Ă©tail des 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 de pages efficaces. www.pcsoft.fr ‱ 17 Les 7 onglets facilitent les crĂ©ations de page: il suffit de cliquer WEBDEVÂź TECHNOLOGIE 7 ONGLETS : DES CONTRÔLES PUISSANTS EN QUELQUES CLICS WEBDEVÂź 19 Onglet «GĂ©nĂ©ral»: nom, libellĂ©, type du champ, visuali- sation du style... Ici masques pro- posĂ©s 1 4 5 6 7 2 3
  • 10. WEBDEV 19 propose tous les types de champs («contrĂŽles») nĂ©cessaires Ă  la crĂ©ation des pages Internet et Intranet. Voici quelques- 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 un contenu. Ce champ trĂšs puissant est prĂ©sentĂ© en dĂ©tail en pages 24 et 25. CHAMP DE SAISIE RICHE HTML Ce type de champ permet de crĂ©er et mettre en page des textes avec enrichissement. Une barre d’outils apparaĂźt automatiquement en tĂȘte du champ, et permet 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 19 permettent, comme les autres champs, de dĂ©finir de nombreux paramĂštres, de maniĂšre visuelle et intuitive Ă  travers les «7 onglets» ou par programmation. Il est facile de dĂ©finir de puissants masques de 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 de fichier, adresse email, code postal... PERSONNALISER LE LISERÉ DES CHAMPS Un champ peut possĂ©der un liserĂ©. Un usage habituel de ce liserĂ© est de mettre en valeur le champ qui a le focus. 3 exemples de liserĂ©s diffĂ©rents, matĂ©rialisant le champ en saisie Il est facile de personnaliser l’apparence du liserĂ©, selon les actions sur le champ: prise de focus, survol,... TABLES SERVEUR, NAVIGATEUR ET TABLES AJAX Les tables sont gĂ©rĂ©es par WEBDEV 19. Une table «habituelle» est une table serveur, qui effectue des requĂȘtes sur le serveur pour se remplir. Le mode Ajax est gĂ©rĂ© sur les tables serveur, ce qui Ă©limine le rĂ©affichage complet de la page Ă  chaque modification d’un Ă©lĂ©ment de la table. La page 26 dĂ©taille des fonctionnalitĂ©s offertes sur les tables Ajax. Une table peut Ă©galement ĂȘtre en mode «Navigateur», c’est Ă  dire n’exĂ©cuter aucun code serveur. Le champ «Table Navigateur» est un champ table complĂšte- ment autonome sur le navigateur. Il n’y a pas d’aller-retour avec le serveur d’application. Son contenu peut ĂȘtre initialisĂ© directement sous l’éditeur de WEBDEV, en saisissant les donnĂ©es Ă  afficher ! Ce type de champ peut ĂȘtre utilisĂ© Ă  la fois dans les sites sta- tiques et des sites dynamiques ! Le champ «Table Navigateur» propose des fonctionnalitĂ©s automatiques de : ‱ filtre, ‱ recherche, ‱ dĂ©placement de colonne, 18 ‱ DĂ©veloppez 10 fois plus vite Tous les champs du Web, et plus... WEBDEVÂź WEBDEVÂź 19 DE PUISSANTS CONTRÔLES (CHAMPS) POUR LES PAGES En entrant dans le champ, le masque apparaĂźt: notez la barre qui permet d’enrichir le texte ‱ colonne redimensionnable, ‱ en-tĂȘte de colonne, sur-entĂȘte de colonne... Le champ «Table Navigateur» peut Ă©galement ĂȘtre manipulĂ© et rempli par programmation en code navigateur. UNE ZONE RÉPÉTÉE EST UN CONCEPT TRÈS PUISSANT Une «zone rĂ©pĂ©tĂ©e» est un ensemble de champs qui se rĂ©pĂšte horizontalement, verticalement et/ou linĂ©airement un nombre de fois dĂ©fini ou indĂ©terminĂ©. Les zones rĂ©pĂ©tĂ©es sont soit alimentĂ©es par programme, soit par 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 nombre d’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 La zone rĂ©pĂ©tĂ©e peut adapter dynamiquement le nombre d’é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 AUTOMATIQUE La rĂ©glette de parcours rapide des pages (avec son code) est gĂ©nĂ©rĂ©e automatiquement pour une zone rĂ©pĂ©tĂ©e, tout comme pour une table,... Exemples de rĂ©glette automatique MENUS DÉROULANTS & POP-UP WEBDEV permet de crĂ©er des menus dĂ©roulants (verticaux et horizontaux) en mode WYSIWYG, des menus «onglet», et des menus «Pop-up». Il est possible d’ajouter dynamiquement (par programmation) des choix de menus, des sous-menus, etc... 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Ă© www.pcsoft.fr ‱ 19 Des champs sophistiquĂ©s trĂšs faciles Ă  crĂ©er WEBDEVÂź ‱‱‱suite page 20
  • 11. CHAMP VIGNETTE (STATIQUE OU DYNAMIQUE) Un site Web gĂšre souvent des images ou des photos qui sont par ailleurs utilisĂ©es sous forme de vignette (imagette), par exemple pour leur sĂ©lection. WEBDEV 19 gĂšre automatiquement la gĂ©nĂ©ration dynamique automatique de ces vignettes: elles sont crĂ©Ă©es en fonction de l’image initiale. WEBDEV 19 offre un deuxiĂšme mode de fonctionnement pour ces vignettes: le mode statique. Dans ce mode, la vignette est crĂ©Ă©e par l’infographiste, avec un contenu qui peut ĂȘtre diffĂ©rent de celui de l’image principale pour qu’elle soit mieux visible ou reprĂ©sentative. CHAMP CALENDRIER ET CHAMP DE SAISIE DATE AVEC POPUP CALENDRIER Le champ calendrier permet soit de crĂ©er un champ intĂ©grĂ© dans une page, soit d’ouvrir une «popup» calendrier pour la saisie 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 dates dĂ©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 lors d’un affichage ou d’un choix de date. Le champ calendrier est trĂšs pratique Ă  l’usage CAPTCHA CODE La gestion des «captcha», ces codes de sĂ©curitĂ© Ă  saisir par l’internaute, est totalement automatique. Le champ captcha calcule et affiche automatiquement l’image dĂ©formĂ©e correspondant Ă  un texte. Ce texte est soit gĂ©nĂ©rĂ© automatiquement par le champ, soit dĂ©fini par l’application. La dĂ©formation change Ă  chaque affichage. CHAMP GRAPHE (AJAX) Le champ graphe de WEBDEV 19 propose de nombreux types de graphes, en mode 2D et relief: courbes, barres, hĂ©micycle, camembert, ... L’interaction de l’internaute avec les graphes est assurĂ©e en mode Ajax, par une barre d’outils permettant de modifier dynamiquement certains paramĂštres: type de graphe, affi- chage de lĂ©gende,... IMAGES, IMAGES CLIQUABLES Le 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. IMAGE AVEC ZOOM AUTOMATIQUE Lorsque l’effet de zoom est activĂ© sur une image, le survol de l’image par le curseur de souris ouvre automatiquement une zone Ă  cĂŽtĂ© de cette image, zone dans laquelle la par- tie de l’image originale pointĂ©e est affichĂ©e agrandie, ce qui 20 ‱ DĂ©veloppez 10 fois plus vite La mĂ©thode la plus simple et la plus intuitive WEBDEVÂź WEBDEVÂź 19 DES CHAMPS PUISSANTS POUR LES PAGES suite de la page 19 ‱‱‱ met en avant le dĂ©tail de cette partie. La taille de la PopUp zoomĂ©e est paramĂ©trable, ainsi que le facteur 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 EFFET MOUVEMENT AUTOMATIQUE D’IMAGE Cet effet donne vie Ă  vos pages ! L’effet «mouvement automatique» simule le dĂ©placement lĂ©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 automatiquement des photos de produit: bien immobilier, produit de luxe,... SUPPORT DU JPEG PROGRESSIF Le JPEG Progressif est un format d’affichage qui affiche une image progressivement, pendant que le navigateur charge l’image; l’image devient plus nette au fil des secondes. Quand une image est insĂ©rĂ©e dans un site, WEBDEV 19 per- met de transformer cette image au format JPEG Progressif. CHAMP SLIDER & RANGE SLIDER Les champs potentiomĂštre linĂ©aire (Slider) et potentiomĂštre d’intervalle (range Slider) sont proposĂ©s. ZONES DE CLIQUAGE (MAP AREA) Les zones de clicage permettent de rĂ©aliser des traitements d’hypertexte: en fonction de la zone d’une image sur laquelle l’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 le milieu mĂ©dical. CHAMP «VIDEO» Le champ «VidĂ©o» permet de jouer des vidĂ©os Flash (Flv), QuickTime (Mov), Microsoft (Wmv),... Les fonctionnalitĂ©s de lecture, pause, avance rapide,... sont gĂ©rĂ©es. L’affichage de vidĂ©os est Ă©galement gĂ©rĂ© par HTML 5 si le navigateur le supporte (voir page 27) CHAMP «FLASH» Le champ «Flash» permet d’inclure des champs flash dans une page WEBDEV: bandeau animĂ©.... CHAMP FLEX Le format Flex permet de crĂ©er des animations, des banniĂšres, des effets et des formulaires. Il est facile d’intĂ©grer des fichiers Flex (et Silverlight) dans une page WEBDEV. CHAMP NOTATION Ce 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 www.pcsoft.fr ‱ 21 La mĂ©thode la plus simple et la plus intuitive WEBDEVÂź ‱‱‱suite page 22
  • 12. 22 ‱ DĂ©veloppez 10 fois plus vite La mĂ©thode la plus simple et la plus intuitive WEBDEVÂź WEBDEVÂź 19 CHAMPS PLANNING & AGENDA Le 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 des tĂą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 rendez-vous sont compatibles avec l’environnement «multi-touch», et peuvent donc s’effectuer avec le doigt. Un champ «Agenda» est Ă©galement disponible. SITEMAPPATH (CHEMIN DE NAVIGATION) 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 gĂ©nĂ©ration de cette ligne est automatique. Un plan du site est Ă©galement automatiquement gĂ©nĂ©rĂ©. La navigation devient facile LA FONCTION «UPLOAD» Le champ Upload permet de tĂ©lĂ©charger depuis le Navigateur un fichier vers le serveur. SĂ©lecteur de fichiers, multi sĂ©lec- tion, 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Ă©. GFI AUTOMATIQUE Le GFI (Grisage de FenĂȘtre Inactive) de page sur page est gĂ©rĂ© automatiquement. La page inactive est assombrie dĂšs qu’une page de dialogue s’ouvre. CHAMP RÉSEAU SOCIAL Le champ «RĂ©seau social» est une barre d’outils composĂ©e de pictogrammes faisant le lien vers les principaux rĂ©seaux sociaux du Web : Facebook, Tweeter, Google+, LinkedIn. TABLEAU HTML Le champ Tableau HTML permet de crĂ©er facilement des tableaux de prĂ©sentation dans les pages. ZONE FIXE SUR L’ÉCRAN (FIXED) L’ancrage fixe permet de maintenir visibles un ou plusieurs champs lors du dĂ©placement par l’internaute de l’ascenseur (scrolling) du navigateur. La zone est dite «épinglĂ©e». DES CHAMPS PUISSANTS POUR LES PAGES suite de la page 19 ‱‱‱ Le saviez-vous ? Il est facile de crĂ©er des «bulles de survol» sur tous les champs. MĂȘme si l’internaute fait dĂ©filer la page vers le bas, le panier reste visible au mĂȘme endroit 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 page dĂ©file. EFFETS CSS3 SUR LES CHAMPS WEBDEV 19 permet de dĂ©finir facilement des effets CSS3 sur les champs de type image: accĂ©lĂ©ration, clipping, fondu, zoom automatique, fondu, grossissement en survol, effet photo, mouvement panoramique, clignotement, dĂ©calage, balayage, inclinaison, rotation, ... Morphing Inclinaison de champ en 1 clic... Le cornage de page est Ă©galement gĂ©rĂ©. Il est mĂȘme possible de crĂ©er ses propres transitions et trans- formations. CHAMP BOUTON IMAGE Comme leur nom l’indique, les boutons image sont basĂ©s sur une 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Ă©. Des exemples de boutons graphiques livrĂ©s avec WEBDEV 19 Ces images des diffĂ©rents Ă©tats peuvent ĂȘtre contenues dans une planche d’images, gĂ©rĂ©e automatiquement, avec un affi- chage fluide. 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 peut contenir (ou pas) une ou des images. Un bouton CSS peut proposer jusqu’à 5 Ă©tats Ă©galement, qui sont des Ă©lĂ©ments du style CSS (pseudo-classes). Le bouton CSS3 est automatiquement adaptĂ© selon le navi- gateur. CLIPART COMPLET DE 10.000 IMAGES ET BOUTONS WEBDEV 19 est livrĂ© avec un clipart comprenant plus de 10.000 Ă©lĂ©ments. Il est possible de rĂ©fĂ©rencer ses propres images et illustrations pour enrichir le catalogue. Le contenu du clipart est riche et variĂ©: images, icones, cadres, animations, boutons graphiques, bandeaux, formes. TOUS LES CHAMPS WEB WEBDEV 19 propose Ă©galement les champs «Treeview», Webcam, Applet Java, Iframe... Vous avez tout. (voir Ă©galement le champ de mise en page trĂšs puissant «Zone de Texte Riche», ZTR, ci-aprĂšs). www.pcsoft.fr ‱ 23 Les champs du Web WEBDEVÂź WEBDEVÂź 19 ‱‱‱suite page 24
  • 13. 24 ‱ DĂ©veloppez 10 fois plus vite La mĂ©thode la plus simple et la plus intuitive WEBDEVÂź WEBDEVÂź 19 CHAMP «ZONE DE TEXTE RICHE» (ZTR) : NOUVEAUTÉ PHARE DE LA VERSION 19 WEBDEV 19 propose un type de champ extrĂȘmement puis- sant : il s’agit du champ «Zone de Texte Riche» (abrĂ©gĂ© en ZTR). Le champ Zone de Texte Riche est fondamental pour l’édi- tion des pages statiques et dynamiques: saisir un texte riche devient enfantin. La saisie du texte et son enrichissement s’effectuent comme dans un traitement de texte: insertion des images avec habillage, insertion des liens, enrichissement du texte... Tout se passe en WYSIWYG. Sous l’éditeur, lors de saisie de texte, le champ s’agrandit automatiquement lorsque cela est nĂ©cessaire. Il n’est plus nĂ©cessaire comme avant de crĂ©er des champs dif- fĂ©rents Ă  positionner cĂŽte Ă  cĂŽte. Comme pour tous les champs, le code HTML est automati- quement gĂ©nĂ©rĂ© par WEBDEV. Ce code HTML est standard, optimisĂ© et modifiable. ZTR : MISE EN FORME DU TEXTE LUI- MÊME Le champ ZTR permet dĂ©jĂ , bien entendu, de spĂ©cifier les caractĂ©ristiques de chaque texte, 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 tra- duit en «Strong» dans le code HTML, ce qui facilite auto- matiquement le rĂ©fĂ©rencement par les moteurs de recherche (Google...). Les balises adĂ©quates sont insĂ©rĂ©es avant et aprĂšs le texte dans sa forme HTML. Par exemple : Bonjour sera stockĂ© sous la forme <strong> Bonjour </strong>. La balise <strong>, que le navigateur reconnait et interprĂšte, signifie qu’il s’agit d’un mot «important». Le navigateur affichera en gĂ©nĂ©ral le texte entre balises en gras, selon les prĂ©fĂ©rences du navigateur de l’internaute. Le navigateur reconnait ces balises, et les interprĂšte. Les moteurs de recherche utilisent Ă©galement ce type de balise pour le rĂ©fĂ©rencement des pages. L’utilisation de ces balises dans un texte augmente son rĂ©fĂ©rencement naturel. ZTR : MISE EN FORME LOGIQUE DE PARAGRAPHES Le champ ZTR permet de mettre en forme les paragraphes: titre, sous-titre, sous sous-titre, bas de page, adresse email, note, haut de page... La mise en forme est logique: par exemple, un titre sera mĂ©morisĂ© automatiquement dans sa forme HTML comme un texte de type <h1>. <h1> est une balise HTML qui dĂ©finit un titre de page. Le navigateur reconnait ces balises, et les interprĂšte: en gĂ©nĂ©- ral le texte sera affichĂ© en gros et gras ! Les moteurs de recherche utilisent Ă©galement ce type de balise pour le rĂ©fĂ©rencement des pages: pour le moteur de recherche, un titre aura plus de poids qu’un texte simple. ZTR : MISE EN FORME PHYSIQUE DE PARAGRAPHE En plus de cette mise en forme logique, une mise en forme physique est disponible: alignement des paragraphes, inden- tation, couleur, ... ZTR : DES PUCES Des paragraphes peuvent ĂȘtre indentĂ©s, automatiquement, avec ou sans puce (<li>). Les puces peuvent ĂȘtre numĂ©rotĂ©es ou pas. ZTR : STYLES CSS Il est possible d’appliquer un style contenu dans le projet Ă  une sĂ©lection de texte d’une ZTR. ZTR : INSERTION DE CHAMP A tout endroit d’un texte dans une ZTR, il est actuellement possible d’insĂ©rer un champ WEBDEV, de type : ‱ lien ‱ image. Le champ est positionnĂ© au fil du texte, relativement au texte. Le champ est «ancré» sur le texte. C’est une nouvelle façon («au fil du texte») de mettre en page avec WEBDEV ! LE CHAMP ZTR : ZONE DE TEXTE RICHE suite de la page 21 ‱‱‱ Visualisation d’un unique champ «Zone de Texte Riche» de WEBDEV 19 www.pcsoft.fr ‱ 25 WEBDEVÂź 19 Une ZTR en crĂ©ation sous l’éditeur de pages ZTR : INSERTION DE LIEN Une ZTR peut contenir un ou plusieurs champs de type «lien». Il y a plusieurs façons d’insĂ©rer un champ lien dans une ZTR : ‱ Transformer une sĂ©lection de texte en lien ‱ CrĂ©er un champ lien dans le texte ‱ Copier un champ lien existant. Le champ lien prĂ©sent dans une ZTR offre les mĂȘmes possi- bilitĂ©s qu’un champ lien habituel. Le champ lien prĂ©sent dans la ZTR est Ă©ditable avec la tech- nologie «7 onglets». Les fonctionnalitĂ©s proposĂ©es par les «7 onglets» dans ce contexte sont simplifiĂ©es pour s’adapter au contexte ZTR. ZTR : INSERTION D’IMAGE L’insertion d’une image dans un texte de ZTR peut prendre plusieurs formes. L’image peut ĂȘtre collĂ©e, ou l’image peut ĂȘtre insĂ©rĂ©e. L’image elle-mĂȘme peut ĂȘtre recopiĂ©e dans le projet, ou son lien peut juste ĂȘtre utilisĂ©, sans que l’image ne soit recopiĂ©e dans le projet, au choix. Les images ne sont jamais altĂ©rĂ©es par WEBDEV. Elles conser- vent leur nom et leur taille d’origine. Un style du projet peut ĂȘtre appliquĂ© Ă  l’image. L’image est positionnĂ©e dans le texte, au fil de l’eau. Des paramĂštres d’habillage sont disponibles: gauche, droite, paragraphe, dans le texte,... ZTR : ACCÈS AU CODE HTML, SAUVEGARDE DES MODIFICATIONS DE HTML BRUT L’accĂšs au code HTML de la ZTR est possible, et le code HTML gĂ©nĂ©rĂ© par WEBDEV dans la ZTR est volontairement clair et lisible, au lieu d’ĂȘtre compressĂ©. Un dĂ©veloppeur qui maĂźtrise le code HTML peut modifier le code HTML gĂ©nĂ©rĂ© pour le champ ZTR, en Ă©dition, mais Ă©ga- lement par programmation, lors de l’exĂ©cution du site. Ce qui a Ă©tĂ© modifiĂ© directement dans le code HTML sera visualisĂ© Ă©galement sous l’éditeur. Les modifications effectuĂ©es sont conservĂ©es lors des futures gĂ©nĂ©rations. Exemple de code gĂ©nĂ©rĂ© et modifiable pour la fenĂȘtre ci-des- sous : <header> <h1 class="CollectionTitre">La nouvelle collection arrive!</h1> <div class="dzA2" id="dzA2"> <img src="vignette_collection.jpg" alt="" id="A2" class="padding"> </div> <p class="CollectionCommentaire"> <img src="bulle.png" alt="" style=" width:16px; height:16px;" id="A1 Commentaires (<span class="NbCommentaires">24</span>) </p> <h2>La nouvelle collection arrive bientĂŽt dans nos boutiques et sur Internet : </header> <section> <p> <img src="fl%C3%A8che.png" alt="" style=" width:16px; height:16px;" id="A3 <a href="tendances.htm" target="_self" id="A9" class="padding CollectionLi Venez dĂ©couvrir en avant-premiĂšre les <strong>nouvelles tendances </strong </a> </p> <p> Et ce n’est pas tout, en tant qu’abonnĂ© Ă  la newsletter, vous bĂ©nĂ©ficiez rĂ©duction exclusive de 10%</strong> sur toute la <em>nouvelle collection< </p> <ul> <li>10 % de remise pour les abonnĂ©s Ă  la newsletter</li> <li>AccĂšs immĂ©diat et exclusif Ă  la nouvelle collection</li> </ul> </section> <footer>...</footer>
  • 14. La technologie Web 2.0 permet aux applica- tions Web d’apporter un comportement d’IHM proche d’une interface traditionnelle sous Windows. Un Ă©lĂ©ment dĂ©terminant du Web 2.0 est «AJAX» qui permet au navigateur de ne rafraĂźchir que la partie modifiĂ©e de la page. SANS AJAX... En WEB traditionnel, lorsque l'application souhaite modifier un seul Ă©lĂ©ment dans une page affichĂ©e (par exemple un prix, une liste de vĂ©hicules...), le serveur doit renvoyer la page entiĂšre sur la machine de l'internaute. Cela charge le serveur, occupe de la «bande passante», produit un effet visuel de «repaint» sous le navigateur de l'internaute, et l'affichage peut ĂȘtre lent puisque le navigateur doit rĂ©inter- prĂ©ter et rĂ©afficher la page entiĂšre... AVEC AJAX... Avec la technologie AJAX, point central du «WEB 2.0», il devient possible de n'envoyer sur la machine de l'internaute «que» les donnĂ©es modifiĂ©es, sans rafraĂźchir la totalitĂ© de la page. Les avantages sont multiples : le serveur est moins sollicitĂ©, les informations qui circulent sont de taille rĂ©duite, l'affichage pour l'internaute est immĂ©diat et sans effet visuel. UTILISER AJAX DANS UN SITE WEBDEV: 1 CLIC ! Vous n'avez rien de spĂ©cifique Ă  programmer. Vous bĂ©nĂ©ficiez automatiquement de AJAX. Vous continuez Ă  programmer en L5G (WLangage). WEBDEV s'occupe de tout ! Un choix «AJAX» apparaĂźt dans la barre de titre de l'Ă©diteur de code. Si vous dĂ©sirez activer AJAX sur le traitement, il suffit de cliquer ... sur le bouton «AJAX». Le libellĂ© change et devient «AJAX activé». 26 ‱ DĂ©veloppez 10 fois plus vite le Web 2.0 apporte la convivialitĂ© Ă  vos sites et applications WEBDEVÂź Quelques fonctionnalitĂ©s disponibles dans les tables «AJAX» Ces fonctionnalitĂ©s sont disponibles pour les sites Internet et Intranet Le fond du ban- deau de sĂ©lection peut ĂȘtre une image Il est possible de redimensionner les colonnes Un ascenseur rem- place automatique- ment la rĂšglette Ancrage et ascen- seur automatique Gestion automatique d’un «cache» (fetch par- tiel) qui ne charge que les donnĂ©es nĂ©cessaires Ă  l’af- fichage et au parcours fluide Ă  vitesse humaine Si un traitement est long, un sablier s’affiche automatiquement. Les cellules de table peuvent ĂȘtre en «saisie» Les lignes de la table sont «multi sĂ©lection» Le tri des colonnes est disponible La recherche dans la table est possible via la loupe WEBDEVÂź 19 IMPLÉMENTEZ AJAX EN 1 CLIC www.pcsoft.fr ‱ 27 AJAX en un clic WEBDEVÂź LA SÉCURITÉ De par sa technologie, AJAX permet le lancement de procĂ©- dures et traitements «serveur» depuis un appel du naviga- teur. Pour sĂ©curiser vos sites, les traitements WEBDEV sont protĂ©gĂ©s de tout appel illĂ©gal (tentative de dĂ©tournement de session,...). Vous dĂ©cidez d’un simple clic dans l’éditeur de code des pro- cĂ©dures qui peuvent ĂȘtre appelĂ©es en mode «Ajax». LA TECHNOLOGIE AJAX DE WEBDEV SUR LES CHAMPS Suite Ă  une requĂȘte Ajax sur une page, tous les champs concernĂ©s sont automatiquement mis Ă  jour en fonction de leur valeur sur le serveur. Il n’y a rien Ă  coder: ni code Javascript, ni interprĂ©tation XML, tout est 100% automatique. TABLES AJAX La technologie «AJAX» des tables permet une sophistication des fonctionnalitĂ©s. Le champ «table» propose automatiquement, sans qu’au- cune programmation ne soit nĂ©cessaire : ‱ Un ascenseur vertical apparaĂźt si nĂ©cessaire; ‱ Sont lus dans la table les enregistrements visualisĂ©s, ainsi que quelques enregistrements prĂ©cĂ©dents et suivants (buf- fer automatique, qui permet le fetch partiel automatique): le temps de chargement est rĂ©duit au minimum, la fluiditĂ© est totale; ‱ Un ascenseur horizontal apparaĂźt si la largeur des donnĂ©es Ă  visualiser dĂ©passe la largeur de la table; ‱ Le tri des colonnes est possible en cliquant simplement sur l’en-tĂȘte de colonne; ‱ La recherche par la «loupe» est proposĂ©e en standard; ‱ La saisie est possible directement dans les cellules de la table, toujours sans programmation (ni sur le serveur, ni en Javascript sur le navigateur). Ces fonctionnalitĂ©s permettent un meilleur partage de code avec les applications WINDEV qui utilisent des tables. Le pas- sage d’une application WINDEV Ă  WEBDEV n’en est que faci- litĂ© ! HTML 5 HTML5 reprĂ©sente une Ă©volution importante de la norme Internet. La prĂ©sentation Ă©laborĂ©e des pages Internet se stan- dardise et de nouvelles fonctionnalitĂ©s apparaissent. Les fonc- tionnalitĂ©s HTML5 sont utilisables sur les navigateurs rĂ©cents. MASQUES DE CHAMPS DE SAISIE La norme HTML 5 permet le «typage» des champs, qui induit le support direct par le navigateur de masques sur les champs de saisie. Avec ce type de masque, le site laisse la gestion de la saisie et son contrĂŽle au navigateur. Ce n’est plus la page (le site) qui effectue les contrĂŽles, mais directement 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,... UTILISATION DE SITE DÉCONNECTÉ (OFFLINE) WEBDEV 19 permet d’indiquer qu’un site ou un ensemble de pages donnĂ©es peuvent fonctionner en mode dĂ©connectĂ© (sans connexion Internet). Dans ce cas, l’ensemble des ressources (pages, images, fichier .js, fichier .css, ..) utilisĂ©es par le site ou les pages est auto- matiquement mis en cache par le navigateur sur le poste de l’internaute. Ainsi le site peut ĂȘtre utilisĂ© sans se reconnec- ter Ă  Internet. STOCKAGE LOCAL (WEB STORAGE) WEBDEV 19 permet Ă  un site de stocker un ensemble d’in- formations sur le poste de l’internaute. Ces informations sont stockĂ©es dans un contexte propre au navigateur. ACCÈS EN MODE LOCAL À UNE BASE DE DON- NÉES (SQLITE) WEBDEV 19 permet Ă  un site de crĂ©er et d’accĂ©der Ă  une base de donnĂ©es crĂ©Ă©e par le navigateur, sur le poste de l’internaute en code navi- gateur. Cette fonctionnalitĂ© permet d’envisager de saisir des donnĂ©es en mode dĂ©connectĂ©, et par exemple de les transmettre auto- matiquement au serveur dĂšs que la connexion Ă  Internet est Ă©tablie. GÉO-LOCALISATION PAR GPS WEBDEV 19 offre un jeu de fonctions navigateur qui permet d’interagir avec les fonctionnalitĂ©s GPS du matĂ©riel, si ce matĂ©riel en dispose: position, dĂ©placement,... DESSIN EN MODE NAVIGATEUR WEBDEV 19 propose des fonctions de dessin basĂ©es sur la norme HTML5. La cĂ©lĂšbre famille des fonctions de dessin du WLangage est Ă©galement disponible en code navigateur. Cela est trĂšs pratique pour annoter une carte ou un plan interactif, ou dans le domaine de la rĂ©alitĂ© augmentĂ©e. VIDEO SANS PLAYER Un site rĂ©alisĂ© en WEBDEV 19 utilisĂ© par un navigateur sup- portant la norme HTML5 ne nĂ©cessite pas de plug-in spĂ©ci- fique (Windows Media Player, QuickTime ou encore Flash...) pour jouer des vidĂ©os. Cela permet d'interagir avec la vidĂ©o grĂące au WLangage, et de personnaliser l'affichage. Ici une carte affichĂ©e par un champ «image»: le trajet a Ă©tĂ© dessinĂ© avec les fonctions de dessin en mode «navigateur» (sans retour au serveur) Ajaxsans code supplĂ©mentaire.
  • 15. 28 ‱ DĂ©veloppez 10 fois plus vite La mĂ©thode la plus simple et la plus intuitive WEBDEVÂź EXPORT AUTOMATIQUE VERS XML, WORD, EXCEL ET OPEN OFFICE Pour les tables et les zones rĂ©pĂ©tĂ©es, un menu d’export auto- matique vers XML, Word, Excel et Open Office est proposĂ© Ă  l’internaute. Les donnĂ©es contenues dans la table ou la zone rĂ©pĂ©tĂ©e seront automatiquement exportĂ©es vers le format et l’outil choisi. Pour un export vers XML, la feuille de styles XSL permettant une Ă©dition immĂ©diate sur Navigateur est mĂȘme gĂ©nĂ©rĂ©e. En utilisation Intranet, les utilisateurs peuvent rĂ©aliser facile- ment leurs simulations sous Excel ! RIEN À PROGRAMMER Il n’y a rien Ă  programmer pour bĂ©nĂ©ficier de cette fonc- tionnalitĂ©. Vous pouvez bien sĂ»r dĂ©sactiver cette fonctionnalitĂ©. UNE OUVERTURE TOTALE Si vous dĂ©sirez programmer des exports automatiques dans vos sites, des ordres de programmation du L5G de WEBDEV sont Ă  votre disposition. Les ordres hExporteXML,TableVersXML,XMLPremier, vous permettent de personnaliser tous les traitements. MENU D’EXPORT VERS WORD, EXCEL, XML, OPEN OFFICE WEBDEV 19 IDÉAL POUR CRÉER UN INTRANET OU UN EXTRANET WEBDEV est l'outil idĂ©al pour crĂ©er des sites Intranet et Extranet. Un site Intranet est un site interne Ă  un ensemble d'utilisa- teurs: sociĂ©tĂ©s, clients, fournisseurs... Il peut ĂȘtre utilisĂ© au sein d'une entreprise, ou Ă  l'extĂ©rieur. L'accĂšs se fait par identification et mot de passe, ce qui est automatiquement gĂ©rĂ© par WebDev (voir page 33). SÉCURITÉ TOTALE AUTOMATIQUE La sĂ©curitĂ© du site est assurĂ©e automatiquement, les pages d’un site Intranet rĂ©alisĂ© en WEBDEV n'Ă©tant pas rĂ©fĂ©rencĂ©es par les moteurs de recherche. Le fonctionnement dynamique (chaque page est crĂ©Ă©e dyna- miquement sur le serveur avant son affichage) protĂšge les requĂȘtes et leurs rĂ©sultats, qui peuvent ĂȘtre cryptĂ©s. AUCUNE LIMITE La richesse fonctionnelle de WEBDEV permet de dĂ©velopper des sites qui se comportent comme de vĂ©ritables applications, vous n'ĂȘtes pas limitĂ©: gestion de frais, catalogue fournisseur avec tarifs remisĂ©s, prise de commande d'un rĂ©seau, diffusion d'informations confidentielles, abonnement Ă  un service payant, gestion de comptes bancaires, portail... WEBDEV est l'outil idĂ©al pour crĂ©er des sites Intranet et des Extranet, et c'est pour cette raison que des milliers de grandes sociĂ©tĂ©s ont crĂ©Ă© leur Intranet avec WEBDEV. Site sĂ©curisĂ© de gestion de frais de dĂ©placement des collaborateurs d’une entreprise INTRANET : WEBDEV EST ROI ! WEBDEVÂź 19 www.pcsoft.fr ‱ 29 ModĂšles de pages, ambiances, hĂ©ritage et surcharge permettent une gestion facile des Ă©volutions WEBDEVÂź Un site au printemps... Le mĂȘme site pendant la saison d’hiver: les modifications sont reportĂ©es automatiquement sur tout le site TEMPLATE, POUR DÉFINIR LA STRUCTURE DES PAGES Un «template» (ou «modĂšle de pages») est une page de rĂ©fĂ©- rence, qui sera utilisĂ©e par toute nouvelle page crĂ©Ă©e. Le tem- plate contient la prĂ©sentation «par dĂ©faut» de la page, le positionnement par dĂ©faut des Ă©lĂ©ments de la page et per- met d’assurer que chaque page crĂ©Ă©e respectera ce posi- tionnement. Un template peut contenir des images, des champs, du code, des procĂ©dures,... HĂ©ritage et surcharge sont gĂ©rĂ©s. AMBIANCE, POUR DÉFINIR LE LOOK DES PAGES Une ambiance dĂ©finit une palette de couleurs, les illustra- tions, les polices,... Changer d’ambiance permet de changer le look du site, sans changer la structure des pages. De nombreuses ambiances sont livrĂ©es avec WEBDEV 19. L’ENVIRONNEMENT DE WEBDEV 19 S’ADAPTE La plupart des matĂ©riels mobiles permettent de visualiser des sites Internet. Certains sites sont crĂ©Ă©s (ou adaptĂ©s) spĂ©cifiquement pour ĂȘtre utilisĂ©s sur des mobiles. La version 19 de WEBDEV permet de spĂ©cifier dĂšs la crĂ©a- tion de projet que celui-ci est destinĂ© Ă  fonctionner sur mobile. Les diffĂ©rents choix proposĂ©s par l’environnement tout au long du dĂ©veloppement de ce projet (ambiances et modĂšles prĂ©dĂ©finis proposĂ©s, GO,...) seront alors adaptĂ©s aux mobiles. CIBLER LA PLATEFORME D’EXECUTION DU SITE WEBDEV 19 permet de connaĂźtre en temps rĂ©el la plateforme (iPhone, iPad, Android, Windows Mobile, BlackBerry, 
), la famille de navigateur (Internet Explorer, Firefox, Chrome, Safari, 
) et sa version, et permet d’adapter dynamiquement le format et le contenu des pages d’un site. GESTURE La gesture (les manipulations au doigt) est supportĂ©e par les sites mobiles crĂ©Ă©s en WEBDEV 19. TEMPLATE & AMBIANCES : LA CHARTE GRAPHIQUE FACILE ! WEBDEVÂź 19 Un site WEBDEV sur une tablette Un site WEBDEV sur un tĂ©lĂ©phone VOS SITES SUR LES MOBILES
  • 16. 30 ‱ DĂ©veloppez 10 fois plus vite 90% de code en moins Pour consulter la liste exhaustive des ordres du L5G, tĂ©lĂ©chargez l’aide de WEBDEV 19 sur le site de PC SOFT WEBDEVÂź WEBDEVÂź 19 Le WLangage, le langage L5G intĂ©grĂ© de WEBDEV, permet de dĂ©crire tous les traite- ments que vous dĂ©sirez. Vos Ă©quipes n’auront pas Ă  se plonger dans HTML ni Javascript. Le WLangage facilite la programmation Internet et Intranet. LA PROGRAMMATION INTERNET N’A JAMAIS ÉTÉ AUSSI FACILE Le langage L5G de WEBDEV (le WLangage, dĂ©jĂ  uti- lisĂ© par des centaines de milliers de professionnels) apporte un confort qui permet de dĂ©velopper beaucoup plus vite tous les types de traitements. COMMENT PROGRAMMER LES TRAITEMENTS ? Sous Internet le code est donc de deux types : ‱ le code qui s’exĂ©cute sur le serveur de l’hĂ©bergeur (Ă  saisir sous le ban- deau jaune - voir ci-contre) ‱ le code qui s’exĂ©cute sur le naviga- teur de l’Internaute (Ă  saisir sous le bandeau vert - voir ci-contre). Notez que ce code peut ĂȘtre automa- tiquement gĂ©nĂ©rĂ© par le RAD et les assistants de WEBDEV. GÉNÉRATION AUTOMATIQUE DE HTML ET JAVASCRIPT Un Navigateur ne comprend que le code HTML et Javascript. Le code WLangage destinĂ© Ă  s’exĂ©cuter sous le Navigateur gĂ©nĂšre donc automatiquement le code HTML et Javascript optimisĂ© correspondant. Le code est immĂ©diatement fiable, beaucoup plus concis, et plus facile Ă  maintenir. GÉNÉRATION AUTOMATIQUE DE CODE PHP Les pages crĂ©Ă©es et le code peuvent ĂȘtre transformĂ©s auto- matiquement en code PHP. Sans connaĂźtre PHP, vous crĂ©ez facilement des sites dynamiques PHP ! (voir page 36). CONNAISSANCE DE JAVASCRIPT ET HTML: INUTILE Il est inutile de connaĂźtre Javascript ou HTML ou PHP pour dĂ©velopper avec WEBDEV. Toutefois, si pour une raison quelconque vos Ă©quipes dĂ©si- rent utiliser ou rĂ©cupĂ©rer du code Javascript, HTML ou PHP, WEBDEV le permet Ă©videmment. AJAX AUTOMATIQUEMENT Pour qu’un traitement soit «Ajax», il suffit de cliquer sur un bouton (voir page 26). IMPOSSIBLE D’ÊTRE BLOQUÉ Le L5G de WEBDEV est extrĂȘmement puissant. Vous ne serez jamais bloquĂ©. Par ailleurs, il est possible de saisir du code HTML, Javascript ou PHP, d’inclure des applets Java, des animations Flash et CSS3, de l’ASP ou du JSP... APPLET JAVA WEBDEV 19 permet d’utiliser dans un site une ou des applets Java (Ă©crites en WINDEV par exemple): cela simplifie leur dĂ©veloppement ! LE WLANGAGE: PUISSANT, INTUITIF Le WLangage est disponible en français et en anglais. Le français permet une programmation intuitive, et une main- tenance 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 grande vitesse de programmation, et une meilleure qualitĂ© du code. Un ordre du WLangage correspond souvent Ă  des dizaines (ou des centaines) de lignes de code en Javascript: vos Ă©quipes dĂ©veloppent plus vite. EXEMPLE : ENVOYER UN EMAIL Il est facile d’envoyer un email. L’ordre s’appelle simplement eMailEnvoieMessage. Vous pouvez joindre des piĂšces attachĂ©es. L’envoi de mail s’effectue en tĂąche de fond. INTÉGRATION OPTIMALE DES BASES DE DONNÉES Le WLangage est optimisĂ© pour manipuler les donnĂ©es de tables: la complĂ©tion automatique propose les noms de tables et de colonnes. GESTION PUISSANTE DES CHAÎNES Le WLangage propose une gestion de chaĂźnes vraiment trĂšs performante! Elle permet une programmation plus rapide: ‱ taille dynamique gĂ©rĂ©e automatiquement ‱ concatĂ©nation par l'opĂ©rateur «+» ‱ conversion automatique «numĂ©rique vers texte» et rĂ©ci- proquement ‱ fonctions Ă©voluĂ©es de recherche ‱ tests multiples (CASE, SELON,...). PROFILER: OPTIMISEZ LA VITESSE DE VOTRE CODE WEBDEV 19 est livrĂ© avec un «profiler», outil qui mesure la vitesse de chaque instruction de votre code. JQUERY WEBDEV 19 permet d’appeler des points d’entrĂ©e de la bibliothĂšque jQuery. Cette fonction s’utilise en code naviga- teur, elle est donc utilisable dans tous les sites, y compris les sites statiques. JSON Le WLangage interprĂšte (sĂ©rialise et dĂ©sĂ©rialise) nativement JSON. LA POO (OBJET) La Programmation OrientĂ©e Objet est supportĂ©e par WEBDEV: hĂ©ritage multiple, constructeur, destructeur, public, privĂ©, poly- morphisme... L’utilisation de la POO est optionnelle, et peut ĂȘtre mixĂ©e avec la programmation traditionnelle. Le WLangage apporte un L5G structurĂ© au dĂ©veloppement Internet. Les outils de productivitĂ© livrĂ©s sont un rĂ©el atout. PROGRAMMATION DE 5ÈME GÉNÉRATION : PUISSANCE ET FACILITÉ PHP sans connaĂźtre PHP www.pcsoft.fr ‱ 31 WEBDEVÂź L’éditeur de code participe Ă  la puissance et Ă  la productivitĂ© de WEBDEV. La saisie du code est intuitive, plus rapide et se fait directement dans le champ concernĂ©. UNE MÉTHODE RÉVOLUTIONNAIRE La technologie exclusive de l’éditeur de code participe Ă  la crĂ©ation d’un code de qualitĂ©, et permet de dĂ©velopper plus vite. LA MÉTHODE WEBDEV Les Ă©vĂ©nements les plus utiles sur un champ sont proposĂ©s par dĂ©faut dans l’éditeur de code, et matĂ©rialisĂ©s par un ban- deau de couleur. Par exemple, pour un champ de type «saisie», les Ă©vĂ©nements par dĂ©faut sont: initialisation du champ, entrĂ©e dans le champ, sortie du champ, Ă  chaque modification. Il suffit de taper le code correspondant dans la partie adĂ©quate. Le code qui s’exĂ©cutera sur le Navigateur peut ĂȘtre saisi en WLangage, ou en Javascript, au choix. CODE SERVEUR ET CODE NAVIGATEUR Il suffit de saisir votre code sous le bandeau correspondant. Le bandeau jaune indique que le code saisi est du WLangage et s’exĂ©cutera sur le Serveur. Le bandeau vert indique que le code saisi est du WLangage et s’exĂ©cutera sous le Navigateur. Le bandeau rose signifie que le code saisi est du PHP. Le bandeau bleu signifie que le code saisi est du code Javascript. C’est visuel et trĂšs intuitif ! TOUS LES ÉVÉNEMENTS SONT GÉRÉS Les Ă©vĂ©nements moins habituels sont proposĂ©s par les icones en bas de la fenĂȘtre. Tous les Ă©vĂ©nements sont gĂ©rĂ©s: clic, double clic, touche pres- sĂ©e, touche maintenue enfoncĂ©e, touche relĂąchĂ©e, bouton de souris enfoncĂ©, bouton de souris relĂąchĂ©, souris en dehors de l’objet, souris au-dessus de l’objet, perte de focus, prise de focus, modification, sĂ©lection du contenu du champ, appel de l’aide, chargement, envoi du formulaire,... COLORATION SYNTAXIQUE Pour un plus grand confort et une meilleure lisibilitĂ©, chaque mot est colorĂ© en fonction de son type. AJAX Concernant AJAX, il suffit de cliquer sur le bouton «Ajax» de la ligne pour utiliser cette technologie (voir p 26). COMPLÉTION AUTOMATIQUE Lors de la frappe d’un ordre, le type de paramĂštre attendu est proposĂ© dans une liste dĂ©roulante. Une bulle d’aide apporte Ă©galement des infor- mations prĂ©cieuses sur chaque para- mĂštre de la fonction utilisĂ©e. ERREURS EN TEMPS RÉEL Si une erreur de syntaxe est com- mise, elle sera dĂ©tectĂ©e sous l’éditeur de code, avant mĂȘme la compilation du projet ! Les erreurs sont matĂ©rialisĂ©es par un soulignĂ© rouge sous la fonction dont la syntaxe est incorrecte. ENROULÉ/DÉROULÉ L'Ă©diteur de code dispose d’un mĂ©canisme confortable d’en- roulĂ©/dĂ©roulĂ© de code: vous masquez le code connu et tes- tez pour plus de lisibilitĂ©! UML WEBDEV 19 supporte UML et crĂ©e automatiquement le dia- gramme de classes en rĂ©tro analysant le code. Inversement, un diagramme UML gĂ©nĂšre le code des classes. GESTIONNAIRE DE SOURCES WEBDEV 19 est livrĂ© en standard avec un outil de version- ning, le Gestionnaire de Sources collaboratif (GDS, voir page 38). L’éditeur de code participe Ă  l’ergonomie gĂ©nĂ©rale, et Ă  la facilitĂ© lĂ©gendaire de WEBDEV 19. Le WLangage est un langage de 5° gĂ©nĂ©ration: il Ă©limine 90% du code, il sim- plifie Ă©normĂ©- ment la pro- grammation, tout en appor- tant une puis- sance hors du commun. ‱ Initialisation du champ ‱ EntrĂ©e dans le champ (on focus) ‱ Modification en sortie (on change) ‱ Sortie du champ (on blur) L’EDITEUR DE CODE VOUS ASSISTE WEBDEVÂź 19
  • 17. 32 ‱ DĂ©veloppez 10 fois plus vite WEBDEVÂź La phase de tests automatisĂ©s n’est qu’une partie du cheminement qui amĂšne la qualitĂ© du logiciel, mais c'est une phase importante. WEBDEV 19 propose en plus des tests de non- rĂ©gression, la rĂ©alisation de tests unitaires, de tests d’intĂ©gration, de tests de charge. TEST UNITAIRE DE PROCÉDURES ET DE CLASSES Le processus de crĂ©ation des tests est totalement intĂ©- grĂ© Ă  l’environnement. Pour tester directement une pro- cĂ©dure ou une classe, il suffit d’utiliser le menu contex- tuel qui propose de crĂ©er (et ensuite de rejouer) un nou- veau test unitaire. TAUX DE VALIDATION DE L’APPLICATION Le centre de tests permet d’afficher la liste des tests existants, la version du site sur lequel chacun de ces tests est passĂ© et le rĂ©sultat de chaque test. Ces informations sont Ă©galement affichĂ©es en mode rĂ©sumĂ© dans le «Tableau de bord» du projet. L’ÉDITEUR DE SCÉNARIOS DE TEST Lors de l’exĂ©cution d’un test, si une erreur est dĂ©tectĂ©e dans le site, le clic sur l’erreur d’exĂ©cution du script posi- tionne directement dans le code Ă  l’emplacement de l’er- reur. LA VÉRIFICATION DES TESTS LORS DES PROCESSUS COURANTS Chaque Ă©lĂ©ment modifiĂ© qui n’a pas Ă©tĂ© validĂ© en pas- sant des tests est signalĂ©. Le Centre de Tests signale aussi toutes les erreurs qui n’ont pas Ă©tĂ© corrigĂ©es, ainsi que toutes les rĂ©gressions. Un historique des taux de validation est automatique- ment mĂ©morisĂ©, ce qui permet le suivi de l’évolution de la qualitĂ© du site. Cette vĂ©rification est Ă©galement effectuĂ©e lorsque vous rĂ©intĂ©grez des Ă©lĂ©ments dans le gestionnaire de sources. DÉBOGUEUR PUISSANT ET CONVIVIAL Pour mettre au point les sites Internet interactifs, le dĂ©bogueur permet l'exĂ©cution en pas Ă  pas d’un traitement du site, en visualisant ou en modifiant le contenu de variables choisies. DES FONCTIONNALITÉS AVANCÉES Le dĂ©bogueur est trĂšs puissant et propose des fonctionnalitĂ©s avancĂ©es: ‱ exĂ©cution en pas Ă  pas, saut de fonctions, sortie immĂ©diate de fonction, exĂ©cution jusqu’à une ligne donnĂ©e,... ‱ autostop, qui arrĂȘte l’exĂ©cution Ă  chaque changement de valeur d’une variable ou d’une expression dĂ©finie ‱ visualisation automatique (dĂ©branchable) de toutes les variables de la ligne en cours d’exĂ©cution («Watch») ‱ visualisation d’expressions contenant des fonctions ‱ affichage de la valeur de la variable survolĂ©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 À DISTANCE Il est possible de dĂ©boguer un serveur Ă  distance: vous dĂ©bo- guez par exemple le serveur en place chez l’hĂ©bergeur sans vous dĂ©placer. DÉBOGUEUR PHP ET AWP Le dĂ©bogueur fonctionne en mode «AWP» (le mode des contextes semi-automatiques). En PHP, il est possible de dĂ©bo- guer l’application initiale. Le dĂ©bogueur permet un gain de temps prĂ©cieux lors des phases de mise au point. Il devient vite indispensable ! Le dĂ©bogueur apporte une productivitĂ© professionnelle WEBDEVÂź 19 DÉBOGUEUR INTÉGRÉ: MISE AU POINT FACILE DE VOTRE CODE QUALITÉ DE VOS SITES: TESTS UNITAIRES www.pcsoft.fr ‱ 33 Ne rĂ©-inventez pas la roue, rĂ©-utilisez ! WEBDEVÂź WEBDEVÂź 19 La notion de «composant» simplifie drasti- quement le dĂ©veloppement: il s’utilise comme une «boĂźte noire», en toute facilitĂ©, en toute sĂ©curitĂ©. Un composant peut contenir du code, des pages, des images, des classes, une analyse, et mĂȘme des tables de donnĂ©es. LE DÉVELOPPEMENT FIABILISÉ GRÂCE AUX COMPOSANTS Un composant est une «boĂźte noire», une «brique logicielle», dont le dĂ©veloppeur utilisateur connaĂźt seulement les points d’entrĂ©e et la nature des informations Ă©ventuellement retournĂ©es. La possibilitĂ© de crĂ©er des composants Ă©laborĂ©s aussi sim- plement que des parties de sites traditionnels vous permet de simplifier vos dĂ©veloppements. Des composants dans l’environnement SÉCURISEZ VOS COMPOSANTS Les composants que vous crĂ©ez sont «sĂ©curisĂ©s», c’est-Ă -dire que personne ne pourra Ă©tudier ou voir ou copier le code source, l’analyse,... COMPOSANTS MULTICIBLES Les composants sont compatibles entre WINDEV, WINDEV Mobile et WEBDEV. Cela permet une meilleure rĂ©-utilisabi- litĂ©. DE NOMBREUX COMPOSANTS PRÊT-À-L’EMPLOI LIVRÉS WEBDEV 19 est livrĂ© avec de nombreux compo- sants (avec leur source) que vous pourrez utiliser dans vos sites: ‱ demande de docu- mentation ‱ papier (pour commerce Ă©lectronique) ‱ paiement sĂ©curisĂ©... SÉCURITÉ DE VOS SITES ASSURÉE : ACCÈS PAR MOT DE PASSE CONTRÔLEZ L’ACCÈS AUX PAGES DES SITES La sĂ©curitĂ© d’accĂšs aux sites ou Ă  certaines pages peut ĂȘtre nĂ©cessaire: c’est en standard dans WEBDEV 19 ! La fonctionnalitĂ© de «groupware utilisateur» permet de dĂ©fi- nir des mots de passe pour des personnes et des groupes. Le contrĂŽle d’accĂšs se dĂ©finit simplement sous l’éditeur. Aucune programmation n’est nĂ©cessaire pour assurer la sĂ©cu- ritĂ© d’accĂšs Ă  vos applications, il suffit d’activer l’option «Groupware». UN CONTRÔLE SÉCURISÉ TRÈS FIN Le contrĂŽle d’accĂšs permet de filtrer l’accĂšs Ă  de nom- breux Ă©lĂ©ments: choix de menus, boutons, champs, groupes de champs, pages, Ă©tats, ... Les Ă©lĂ©ments interdits seront inactifs et Ă  votre choix grisĂ©s ou invisibles. LE MODE SUPERVISEUR Le superviseur du site livrĂ© pourra Ă  tout moment para- mĂ©trer facilement les droits des utilisateurs. Un Ă©diteur convivial permet de dĂ©finir et gĂ©rer ces droits. Si vous le dĂ©sirez, les droits des utilisateurs ou des groupes d’utilisateurs, pourront ĂȘtre crĂ©Ă©s ou modifiĂ©s par programme. LDAP Si vous dĂ©sirez utiliser une base de login dĂ©jĂ  existante en LDAP, le contrĂŽle d’accĂšs en fera usage. SAAS WEBDEV 19 propose des fonctionnalitĂ©s avancĂ©es de gestion d’applications SaaS (voir page 43). SĂ©curisez automatiquement vos sites, sans avoir Ă  coder ! LES COMPOSANTS: RÉUTILISABILITÉ DE VOTRE CODE
  • 18. LA FACILITÉ DE WEBDEV AU SERVICE DES WEBSERVICES WEBDEV 19 permet de consommer, crĂ©er, dĂ©ployer et hĂ©berger facilement des Webservices. CONSOMMATION DE WEBSERVICES Il est trĂšs facile d’utiliser un Webservice depuis WebDev. Les structures du fichier WSDL sont automati- quement converties depuis en types natifs du WLangage. CRÉATION FACILE DE WEBSERVICES La crĂ©ation de Webservices s’effectue facilement: il suffit de dĂ©finir la collection de procĂ©dures qui constitue l’interface du Webservice. Le fichier de description WDSL est gĂ©nĂ©rĂ© automatique- ment. DÉPLOIEMENT FACILE DE WEBSERVICES Les Webservices sont hĂ©bergĂ©s sur une machine dispo- sant d’un serveur d’application WEBDEV. La procĂ©dure d’installation est automatiquement gĂ©nĂ©- rĂ©e. HÉBERGEMENT FACILE DE WEBSERVICES La technologie d’hĂ©bergement est basĂ©e sur le robuste serveur d’application standard de WEBDEV. Cette technologie permet d’assurer la disponibilitĂ© du Webservice, ainsi que sa vitesse. Les demandes sont exĂ©cutĂ©es simultanĂ©ment, dans des process sĂ©parĂ©s, ce qui garantit la sĂ©curitĂ©. Les Webservices peuvent ĂȘtre consommĂ©s par tout type d’application, crĂ©Ă©es en WINDEV, WEBDEV ou avec tout autre langage tiers. 34 ‱ DĂ©veloppez 10 fois plus vite La mĂ©thode la plus simple et la plus intuitive WEBDEVÂź WEBDEVÂź 19 LES WEBSERVICES: FACILE CRÉATION DE STYLE : CSS SANS CONNAITRE CSS Pour crĂ©er un style avec WEBDEV 19, il est tout Ă  fait inutile au dĂ©veloppeur ou au webdesigner de connaitre CSS3: WEBDEV 19 gĂ©nĂšre lui-mĂȘme le style qui est crĂ©Ă© en visuel grĂące Ă  la technologie des «7 onglets». Les styles WEBDEV sont stockĂ©s sous forme de feuilles de styles au standard CSS3. Les styles sont modifiables Ă  tout moment sous l’éditeur, les modifications Ă©tant bien entendu rĂ©percutĂ©es Ă  toutes les pages et champs utilisant le style modifiĂ©. MODIFICATION DES STYLES WEBDEV DIRECTEMENT EN CSS Les styles WEBDEV 19 sont stockĂ©s sous forme de feuilles de styles au standard CSS3. Le code CSS3 gĂ©nĂ©rĂ© peut si nĂ©cessaire ĂȘtre modifiĂ© direc- tement dans le fichier .css . Cette ouverture est offerte dans le but de permettre aux spĂ©- cialistes CSS3 de rĂ©utiliser leur savoir-faire dans ce domaine. Un style CSS3 crĂ©Ă© par WEBDEV 19 et modifiĂ© depuis l’ex- tĂ©rieur de WEBDEV est toujours reconnu par l’éditeur. Le style modifiĂ© peut ĂȘtre appliquĂ© de la mĂȘme maniĂšre qu’un style WEBDEV sur les champs et les pages. IMPORTATION DE STYLE CSS EXISTANT Des styles CSS3 existants peuvent ĂȘtre importĂ©s dans WEBDEV 19, depuis des feuilles de styles CSS3. La fonctionnalitĂ© d’import permet de sĂ©lectionner les styles Ă  importer, et ceux Ă  ne pas importer. Dans l’environnement de WEBDEV 19, les styles importĂ©s sont proposĂ©s avec les styles crĂ©Ă©s dans WEBDEV. INTÉGRER UNE ANIMATION EXTERNE DANS UN CHAMP L’environnement de WEBDEV propose l’ajout automatique d’effets d’animation sur les champs : clignotement, fondu, grossissement, rotation, pirouette 3D,
 Il existe d’autres types d’effets plus particuliers, disponibles sur le marchĂ© sous forme d’animations CSS. Par exemple: balancier, flottement, explosion... Pour appliquer ce type d’animation Ă  un champ il suffit d’importer la feuille de styles CSS contenant la description de l’animation, et de spĂ©cifier dans le style du champ le nom de l’animation Ă  utiliser, sa durĂ©e, et sa rĂ©pĂ©tition. ASSOCIEZ UN SCRIPT JS OU JQUERY À VOS CHAMPS Une «classe CSS» peut ĂȘtre rĂ©fĂ©rencĂ©e dans un script Javascript externe ou un script jQuery pour appliquer des modifications sur le champ auquel elle est attribuĂ©e. Il est ainsi possible de modifier de maniĂšre dynamique les pro- priĂ©tĂ©s des champs et d’en modifier le comportement. Par exemple: pouvoir dĂ©placer un champ Ă  la souris, chan- ger son style, le mettre en mouvement en rĂ©action Ă  cer- tains Ă©vĂšnements, le faire interagir avec d’autres champs... CSS3 WEBDEV AU SERVICE DE SAP SAP R/3 est un ERP trĂšs utilisĂ©. Un site rĂ©alisĂ© en WEBDEV 19 peut accĂ©der aux donnĂ©es d’un ERP SAP en natif (via BAPI). L’accĂšs aux donnĂ©es est directement rĂ©alisĂ© par SAP, la traçabilitĂ© des accĂšs est maintenue, la gestion des prioritĂ©s Ă©galement. Une famille de fonctions permet d’établir une connexion (avec authentification) et d’appeler des BAPI en passant des paramĂštres. Un assistant permet d’importer automa- tiquement les structures manipulĂ©es. Il est inutile d’installer le module SAP GUI. Toutes les fonctionnalitĂ©s de WEBDEV sont disponibles. DES REQUÊTES SUR SAP Le gĂ©nĂ©rateur d’états (voir p 37) peut ĂȘtre utilisĂ© pour crĂ©er des requĂȘtes sur des donnĂ©es contenues dans une base SAP. ACCÈS NATIF À LOTUS NOTES Les sites WEBDEV peuvent accĂ©der en natif Ă  Lotus Notes. L’accĂšs aux mails prĂ©sents sur le serveur de mails de Lotus Notes (Domino), en envoi et rĂ©ception, est standard en mode natif. L’accĂšs aux contacts, aux rendez-vous, aux tĂąches et aux documents prĂ©sents sur le serveur est facile. Cela permet de rĂ©aliser des Intranet qui s’intĂšgrent totale- ment au S.I. en place. La sĂ©curitĂ© habituelle de Lotus Notes est bien entendu respectĂ©e, via le certificat de Lotus. ACCÈS NATIF À OUTLOOK Les sites WEBDEV peuvent accĂ©der en natif Ă  Outlook. L’accĂšs aux mails de Outlook, en envoi et rĂ©ception, est standard. L’accĂšs aux contacts, aux rendez-vous et aux tĂąches est facile, en lecture et en Ă©criture. Cela permet de rĂ©aliser des Intranet qui s’intĂšgrent totale- ment au S.I. en place. ACCÈS NATIF À GOOGLE APPS IndĂ©pendamment des possibilitĂ©s de connexion aux applica- tions Google Ă  travers le Mashup, WEBDEV 19 propose un accĂšs natif aux donnĂ©es des applications Google: Google Agenda, Google Maps, Google Contacts, Picasa... Cela permet de rĂ©cupĂ©rer des donnĂ©es qui seront rĂ©affichĂ©es dans un format personnalisĂ© sur le site. Voici un exemple de code qui liste les contacts de Gmail et les affiche dans une table WEBDEV. Connexion est une gglConnexion Connexion.Email=”WebDev19@gmail.com” Connexion.MotDePasse=”motdepasse” GglConnecte(Connexion) Contacts est un tableau de gglContact Contacts=GglListeContact(Connexion) TableAffiche(TABLE_Contacts) www.pcsoft.fr ‱ 35 L’ouverture Ă  tous les stan- dards WEBDEVÂź ACCÈS NATIFS: GOOGLE APPS, SAP, LOTUS NOTES... WEBDEVÂź 19 Exemple d’accĂšs natif Ă  Google Agenda, pour ensuite ĂȘtre utilisĂ© directement dans une page WEBDEV 19
  • 19. PHP SANS CONNAÎTRE PHP ! Toute la puissance de WEBDEV (Ă©diteur WYSIWYG, Ă©diteur d’analyses, UML, Ă©diteur de requĂȘtes, champs Ă©voluĂ©s, WLangage 
) est disponible pour crĂ©er des sites en PHP. Si vous le dĂ©sirez, les pages et le code (en WLangage) sont transformĂ©s automatiquement en code PHP (il est Ă©galement possible de saisir directement du code PHP). Sans connaĂźtre PHP, vous crĂ©ez facilement des sites dyna- miques PHP ! RAD PHP La mĂ©thode RAD WEB est Ă©galement disponible pour gĂ©nĂ©- rer des sites PHP en quelques clics. GĂ©nĂ©rez automatiquement vos sites Ă  partir de l’analyse des donnĂ©es (voir pages 12 et 13). SAISIE DIRECTE DE CODE PHP Sous l’éditeur de code de WEBDEV, il est possible d’écrire (ou coller) du code PHP. Ici, dans le traitement de couleur rouge, du code PHP. Vous n’ĂȘtes jamais bloquĂ©. Dans une mĂȘme page, il est possible de mixer du code PHP et du code WLangage. DES CHAMPS ÉVOLUÉS EN STANDARD En plus des champs classiques (champ de saisie, libellĂ©,...) la plupart des champs sophistiquĂ©s de WEBDEV 19 sont dis- ponibles en PHP: table avec ascenseurs automatiques, zone rĂ©pĂ©tĂ©e, calendrier, onglet, champ de saisie riche, libellĂ© HTML, rĂ©glette automatique
 Cela permet de simplifier Ă©normĂ©ment les phases de codage, et apporte une grande sĂ©curitĂ© Ă  vos sites par la prĂ©sence de masques de saisie qui ne permettent pas la saisie de donnĂ©es hors format. WEB 2.0: AJAX EN PHP De nombreux champs et traite- ments sont compatibles «AJAX» en mode PHP: vous crĂ©ez des sites PHP Web 2.0 grĂące Ă  WEBDEV 19! (voir page 26) TYPES ÉVOLUÉS En plus des types classiques de PHP, WEBDEV 19 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 don- nĂ©es, tableau associatif, structures, numĂ©rique... Les syntaxes et les opĂ©rateurs puissants sont Ă©galement dis- ponibles: POUR TOUT, manipulation des chaĂźnes, concatĂ©- nation optionnelle, opĂ©rateur «commence par»,... PARTAGE DU CODE Le codage en WLangage permet de partager du code unique entre des pages et des sites PHP, WEBDEV classique, et mĂȘme avec des applications WINDEV ! Cela permet un gain de temps apprĂ©ciable, et une fiabilitĂ© accrue par la rĂ©utilisabilitĂ©. GESTION FACILE ET AUTOMATIQUE DES SESSIONS PHP La gestion des sessions (contextes) PHP est automatique. Il suffit de dĂ©clarer les variables qui doivent ĂȘtre retrouvĂ©es dans une prochaine exĂ©cution de la page. Il n’y a aucun traitement de sĂ©rialisation Ă  coder. COMPATIBILITÉ PHP 5 & PHP 4 WEBDEV 19 gĂ©nĂšre du code PHP compatible Ă  la fois avec PHP 4 et avec PHP 5. ACCÈS A HFSQL L’accĂšs Ă  HFSQL (Classic, RĂ©seau et Client/Serveur) est assurĂ© via les ordres SQL. ACCÈS A MYSQL, POSTGRESQL, ORACLE L’accĂšs aux bases de donnĂ©es MySQL, PostgreSQL et Oracle est assurĂ©. Notez que toutes les bases qui proposent 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). APPEL DE SCRIPTS PHP Il est possible d’appeler un script externe .php depuis une page PHP ou WEBDEV classique, grĂące Ă  la commande PHPExĂ©cute. Il est possible d’utiliser soit une mĂ©thode POST, soit une mĂ©thode GET, le rĂ©sultat est renvoyĂ© dans une chaĂźne. WAMP & LAMP Acronymes souvent utilisĂ©s, les technologies basĂ©es sur 4 composants, WAMP (Windows, Apache, MySQL, PHP) et LAMP (Linux, Apache, MySQL, PHP) sont supportĂ©es en stan- dard par WEBDEV 19. EASYPHP: CONFIGURATION ET PARAMÉ- TRAGE AUTOMATIQUE DE WEBDEV Lors de l’installation du serveur d’application WEBDEV 19, les serveurs Web «Apache» (utilisĂ©s en particulier par EasyPHP) sont dĂ©tectĂ©s et automatiquement paramĂ©trĂ©s, comme les serveurs Apache isolĂ©s. ACCÈS AUX HÉBERGEURS GRATUITS La gĂ©nĂ©ration d’un site en PHP permet (parmi d’autres solu- tions) l’accĂšs aux hĂ©bergeurs «gratuits» de sites dynamiques. Cette possibilitĂ© peut ĂȘtre utile aux sites d’associations et de petites structures qui ne dĂ©sirent pas un hĂ©bergement dĂ©diĂ©. Avec WEBDEV 19, PHP c’est facile ! 36 ‱ DĂ©veloppez 10 fois plus vite La mĂ©thode la plus simple et la plus intuitive WEBDEVÂź WEBDEVÂź 19 GÉNÉREZ DU CODE PHP Un Ă©diteur d’états rĂ©sout la problĂ©matique du reporting sur Internet. Et il simplifie la crĂ©ation des impressions. Son usage est double: ‱ d’une part pour les applications Intranet ‱ d’autre part pour la gĂ©nĂ©ration dynamique d’états qui seront envoyĂ©s Ă  l’internaute (facture PDF par exemple). PDF EN STANDARD Les Ă©tats peuvent ĂȘtre crĂ©Ă©s au format PDF en standard (sans frais supplĂ©mentaires, sans module complĂ©mentaire Ă  acquĂ©- rir ou Ă  installer). Un Ă©tat PDF gĂ©nĂ©rĂ© avec WEBDEV 19 CRÉER UN ÉTAT: FACILE Un assistant est systĂ©matiquement proposĂ© pour gĂ©nĂ©rer des Ă©tats de haute qualitĂ©; il pose les questions permettant de n'oublier aucun Ă©lĂ©ment ! En Intranet, les Ă©tats s’impriment sur une imprimante acces- sible depuis le serveur. Pour Internet, l’état sera envoyĂ© Ă  l’internaute sous une forme spĂ©cifique: HTML, RTF, PDF... Le choix du type d’état Ă  crĂ©er TOUTES LES SOURCES DE DONNÉES Les donnĂ©es utilisĂ©es pour un Ă©tat peuvent provenir de n’im- porte quelle source: HFSQL, Oracle, Access..., requĂȘte, fichier texte, zone mĂ©moire, table de page,... GESTION DES FONDS DE PAGE PDF L’éditeur d’états gĂšre les fonds de page et les formulaires des- tinĂ©s Ă  ĂȘtre imprimĂ©s, par exemple les formulaires fiscaux. INCLURE DES IMAGES: AUTOMATIQUE Inclure des images (BMP, TIFF, PCX, GIF, JPEG, PNG...) dans des Ă©tats est d'une simplicitĂ© totale. L'image peut ĂȘtre fixe (logo,...), ou provenir du traitement ou d’un fichier (photo du produit,...). Il est Ă©galement facile d'imprimer des dessins crĂ©Ă©s par pro- gramme. DU CODE SOURCE OÙ VOUS DÉSIREZ WebDev permet d'inclure tout code source exĂ©cutable (WLangage) Ă  tout endroit d'un Ă©tat: vous pourrez ainsi rĂ©a- liser les traitements les plus particuliers, sans jamais rencon- trer de blocages. CODE-BARRES AUTOMATIQUES WEBDEV 19 imprime auto- matiquement les codes- barres (horizontalement ou verticalement). Les formats sup- portĂ©s sont: QR Code, UPCA, UPCE, EAN13, EAN8, CODE128, CODE39, CODE93, CODE11, intervaled 2 of 5, CODABAR, CB_MSI, Datamatrix, PDF417... MAILEZ DES ÉTATS Avec WEBDEV il est facile de crĂ©er un Ă©tat dynamiquement (par exemple une facture des produits que vient d’acheter l’internaute en ligne!) et de le mailer immĂ©diatement (au for- mat PDF par exemple). DIFFUSION LIBRE DES ÉTATS Il n’y a pas de redevances ou de royalties Ă  verser pour dif- fuser les Ă©tats avec vos sites WEBDEV. Avec WEBDEV 19, les Ă©tats sophistiquĂ©s c’est vraiment facile ! www.pcsoft.fr ‱ 37 Un Ă©diteur d’états WYSIWYG, au pixel prĂšs WEBDEVÂź ÉDITEUR DE RAPPORTS : GÉNÉREZ DES PDF EN TEMPS RÉEL (FACTURES...) WEBDEVÂź 19 Un Ă©tat en cours de crĂ©ation sous l’environnement
  • 20. LA BASE DES SOURCES Avec le GDS (Gestionnaire De Sources - appelĂ© SCM en anglais), les Ă©lĂ©ments du projet sont regroupĂ©s dans une base de donnĂ©es. Avant d’ĂȘtre utilisĂ© un Ă©lĂ©ment est extrait, aprĂšs avoir Ă©tĂ© modifiĂ©, il est rĂ©-intĂ©grĂ©. Chaque membre de l’équipe utilise donc des Ă©lĂ©ments Ă  jour. Le GDS stocke tous les Ă©lĂ©ments du projet: procĂ©dures, col- lections, classes, fenĂȘtres, Ă©tats, composants, requĂȘtes, ana- lyses, dĂ©pendances (images,...), ... TOTALEMENT INTÉGRÉ Totalement intĂ©grĂ© aux diffĂ©rents Ă©diteurs, l’outil de ver- sionning (GDS) permet le dĂ©veloppement en Ă©quipe, la conservation de l’historique des modifications et des ver- sions, la gestion simultanĂ©e de plusieurs versions d’un mĂȘme site, et l’automatisation de la sauvegarde des sources. Le gestionnaire de versions apporte confort, souplesse, sĂ©curitĂ© et vitesse. DimensionnĂ© pour des Ă©quipes de 1 Ă  100 dĂ©veloppeurs, le GDS favorise et normalise sans contrainte les Ă©changes entre dĂ©veloppeurs. DE PUISSANTES FONCTIONNALITÉS ‱ Le GDS est totalement intĂ©grĂ© Ă  l'environnement; par exemple le GDS propose d’extraire l’élĂ©ment lors d’une modification. ‱ La base gĂšre plusieurs projets; si plusieurs projets utilisent un mĂȘme Ă©lĂ©ment, celui-ci peut ĂȘtre partagĂ©. ‱ Un historique de tous les Ă©lĂ©ments (pages, codes, requĂȘtes,...), depuis leur crĂ©ation, est mĂ©morisĂ© dans la base (une purge totale ou partielle est toujours possible). ‱ Le projet est Ă©galement prĂ©sent sur chaque machine de dĂ©veloppement; il est donc possible de dĂ©velopper avec la machine dĂ©connectĂ©e. ‱ La gestion des branches est assurĂ©e. ‱ Le «Diff» (diffĂ©rences) entre 2 Ă©lĂ©ments est disponible: source, page,... ‱ Vous pouvez consulter Ă  tout moment la liste des modifications effectuĂ©es entre 2 versions, par vous-mĂȘme et/ou par d’autres dĂ©velop- peurs ou webmasters... CONNECTÉ ET À DISTANCE Le GDS permet un fonctionnement Ă  distance, connectĂ© via Internet. Il est ainsi possible de tra- vailler sur un projet depuis un site client, sans crainte de perte des modifications effectuĂ©es. Si vous ĂȘtes connectĂ© (par exemple en ADSL), les modifications que vous effectuez seront immĂ©diatement disponibles pour les autres dĂ©veloppeurs. DÉVELOPPEUR ISOLÉ MĂȘme en dĂ©veloppant seul, l’outil de ver- sionning a de l’intĂ©rĂȘt: il conserve l’historique des modifications de tous les Ă©lĂ©ments, et agit donc comme une fonctionnalitĂ© de sauvegarde et d’archivage des versions. La gestion des branches permet de gĂ©rer faci- lement plusieurs versions d’un mĂȘme site. 38 ‱ DĂ©veloppez 10 fois plus vite WEBDEVÂź 19 TRAVAIL EN ÉQUIPE OUTIL DE VERSIONNING (GDS /SCM) Le GDS gĂšre automatique- ment les «dĂ©pen- dances»: les fichiers utilisĂ©s (images,...). Le GDS les dĂ©tecte dans le projet, et les sauvegarde avec le reste du projet. DĂ©veloppez au bureau, en dĂ©place- ment, et mĂȘme Ă  la plage ! www.pcsoft.fr ‱ 39 POUR GÉRER LE CYCLE DE VIE Un Centre de ContrĂŽle est une appli- cation de «supervision» d’un aspect du cycle de vie d’un site. Un Centre de ContrĂŽle permet d’avoir une vision globale du domaine couvert, que ce soit en phase de dĂ©veloppe- ment, sur un site d’exploitation, ou encore pour les aspects de mainte- nance et d’évolution. Les Centres de ContrĂŽle que l’on uti- lise le plus dans le cadre d’un dĂ©velop- pement Web sont les suivants: ‱ Centre de Suivi de Projets ‱ Centre de ContrĂŽle QualitĂ© ‱ Centre de ContrĂŽle d’hĂ©bergement. Les Centres de ContrĂŽle sont totale- ment intĂ©grĂ©s Ă  l’environnement; les informations sont partagĂ©es. ALM : CENTRE DE CONTRÔLE DE SUIVI DE PROJETS Ce centre permet le suivi des plannings, des tĂąches affectĂ©es et rĂ©alisĂ©es par chaque membre de l’équipe, et effectue le suivi de la gestion des «exigences». GĂ©rez le planning de l’équipe de dĂ©veloppement en temps rĂ©el GESTION DES EXIGENCES ET DES TÂCHES Le Centre de Suivi de Projets permet de dĂ©finir et suivre l’avancement des «exigences» de chaque version du projet. Une exigence correspond Ă  une fonctionnalitĂ© Ă  dĂ©velopper dans le logiciel. A chaque exigence peuvent ĂȘtre liĂ©es des tĂąches (tĂąche de dĂ©veloppement, de test, de documentation,...), des bogues, des rĂšgles mĂ©tier... CENTRE DE CONTRÔLE QUALITÉ Ce centre permet le suivi des incidents de dĂ©veloppement et per- met le suivi aisĂ© des retours utilisateurs (incidents et suggestions). Analyse d’impact CENTRE DE CONTRÔLE D’HÉBERGEMENT Le Centre de ContrĂŽle d’hĂ©bergement permet de configu- rer un profil d’hĂ©bergement type, et de maintenir le serveur d’hĂ©bergement. La gestion des comptes et des serveurs Web est Ă©galement effectuĂ©e Ă  travers ce centre (voir p 46 Ă  49). TABLEAU DE BORD DE PROJET Le Tableau de Bord permet une vision globale du projet, de son Ă©tat d’avancement et de sa qualitĂ©. Des voyants alertent lorsque certains seuils (paramĂ©trables) sont franchis: nombre de bogues, retard de planning... et indiquent les optimisations Ă  effectuer. La gouvernance de projets devient facile. PILOTEZ VOS PROJETS: TABLEAU DE BORD WEBDEVÂź 19 GÉREZ LE CYCLE DE VIE: CENTRES DE CONTRÔLE