Imprimer la Page | Close Window

Les tutos de Larsène

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=20090
Date: 24 Juin 2019 à 21:42
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: Les tutos de Larsène
Posté par: Larsene
Sujet: Les tutos de Larsène
Posté le: 26 Oct 2014 à 18:30
Hello,

Retrouvez les tuto vidéos que j'ai fait pour Open Element :

Afficher une fenêtre modale
Créer une fenêtre qui s'affiche lors du clic sur un élément et grisage du site pour mise en évidence

http://forum.openelement.com/fr/forum_posts.asp?TID=18771&title=afficher-une-fentre-modale-popup" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=18771&title=afficher-une-fentre-modale-popup



Page d'accueil dynamique et classes personnalisées
travail sur les classes personnalisées pour une page d'accueil dynamique et rapide à mettre à jour

http://forum.openelement.com/fr/forum_posts.asp?TID=20085&title=page-daccueil-dynamique-et-classes-personnalises" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20085&title=page-daccueil-dynamique-et-classes-personnalises



Flat design, photos et dynamisme...
Page d'accueil avec effets au survol des photos, apparitions d'éléments, travail sur les classes personnalisées

http://forum.openelement.com/fr/forum_posts.asp?TID=20086&title=flat-design-photos-et-dynamisme" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20086&title=flat-design-photos-et-dynamisme




Volet d'accueil, fluidité et abeilles

mise en page fluide et variation entre éléments "fixed" et "relative". Démonstration des panneaux en usage "relative"

http://forum.openelement.com/fr/forum_posts.asp?TID=20188&title=volet-daccueil-fluidit-et-abeilles" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20188&title=volet-daccueil-fluidit-et-abeilles



Chouette, c'est responsive
Principes de création d'une page web responsive : panneaux d'éléments uniquement en mode relative, adaptation en pourcentages et media queries

http://forum.openelement.com/fr/forum_posts.asp?TID=20701&PID=129052&title=tutochouette-cest-responsive#129052" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20701&PID=129052&title=tutochouette-cest-responsive#129052



Et si ce tutoriel vous a plût et qu'il vous apporte de l'aide et des idées, n'hésitez pas à me faire un don, au regard du travail nécessaire pour le construire, le réaliser, le mettre en ligne, le commenter, etc !
https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=G39GM7UC9EDWG&lc=FR&item_name=Larsene%20%2d%20%20Tutoriels&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" rel="nofollow">Faire un don


-------------
http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime



Réponses:
Posté par: Bridet
Posté le: 27 Oct 2014 à 18:56
Mais tu es un bienfaiteur public!


Posté par: brolysan
Posté le: 28 Oct 2014 à 09:41
surprise Larsène Wink


Posté par: Larsene
Posté le: 28 Oct 2014 à 11:30
Une super bonne surprise, même Big smile ! Merci bcp brolysan Smile ! J'espère que ces tutos te conviennent !

J'en ai deux autres en tête, notamment pour mettre en place un header en plusieurs partie avec une bannière qui se replie (collapsing header), et une page d'accueil full responsive.

Je pense qu'aborder petit à petit du code, c'est aussi tirer les compétences de chacun vers le haut ! C'est pourquoi j'embête Dmit pour faciliter l'accès à ce code pour nous tous (heureusement, il est patient ^^) et porter petit à petit OE plus vers des utilisateurs un peu plus pro. Car ce sont ces utilisateurs qui sont prêts à payer pour l'outil qu'ils utilisent.


Posté par: brolysan
Posté le: 28 Oct 2014 à 11:35
Message posté par Larsene Larsene a écrit:

Une super bonne surprise, même Big smile ! Merci bcp brolysan Smile ! J'espère que ces tutos te conviennent !

J'en ai deux autres en tête, notamment pour mettre en place un header en plusieurs partie avec une bannière qui se replie (collapsing header), et une page d'accueil full responsive.

Je pense qu'aborder petit à petit du code, c'est aussi tirer les compétences de chacun vers le haut ! C'est pourquoi j'embête Dmit pour faciliter l'accès à ce code pour nous tous (heureusement, il est patient ^^) et porter petit à petit OE plus vers des utilisateurs un peu plus pro. Car ce sont ces utilisateurs qui sont prêts à payer pour l'outil qu'ils utilisent.

tu as bien raison.

Je bosse aussi de mon côté...avec 2 "amis" développeurs, on travaille sur 2 projets :
- une gestion immobilière
- une partie ecommerce

le tout facilement incorporable (en théorie) avec OE.

Mais continues tes tutos, je "valide" Wink


Posté par: Larsene
Posté le: 28 Oct 2014 à 11:47
J'utilise bcp WebDev et WinDev pour ce genre de projet. La gestion des BDD avec est tellement simplifiée !

Mon projet en cours là dessus est une "Bourse aux locaux". Toute la partie gestion des annonces immo est faite dans WebDev (qui permet facilement la gestion des stats, rapports des annonces en PDF téléchargeables, exports aux format excel, etc.) et sera intégrée en iFrame sur un site OE pour la partie publique, et un backoffice complet Webdev.

J'ai fait aussi des systèmes de génération de tickets wifi interfacé avec un firewall PfSence, un système de dématérialisation de courrier (bannettes electroniques), etc


Posté par: brolysan
Posté le: 28 Oct 2014 à 11:49
super ca!!!! :D

effectivement, WinDev...;)


Posté par: space33
Posté le: 24 Nov 2014 à 21:08
Bonsoir Larsène,

Après nos échanges de fin octobre je teste enfin le tutos sur le Flat Design.
J'ai fait l'exercice, en suivant la démo pas à pas : très clair et pédagogique. Du travail et du temps passé.
J'ai juste une question sur le chargement de Transit : à quel moment faire ce chargement, voire où ?
S'agit-il de 'sous programmes' appelés par le corps de la page (HTML, Jvascript, .. confondus) ?
Est-ce simplement pour l'utilisation en local ?
Si oui qu'en est-il ensuite lors le site est chargé chez mon hébergeur ?
Sur ce point particulier, autant de questions de néophyte ...
Merci
PS : c'est promis, je penserai au petit bouton 'Make ...'


-------------
WINDOWS 10 /0E 1.57R9/
Passeur d'information
http://www.passeurdinformations.fr


Posté par: Larsene
Posté le: 24 Nov 2014 à 22:06
Hello !

Transit est un plugin jQuery, c'est à dire un "programme additionnel". Celui-ci a d'autres algorithmes de déplacements/redimensionnements et le rendu est plus fluide que ceux de jQuery.

Son chargement se fait dans OE via un "code source" HTML en "StartBody" (c'est à dire en début de page) via :
<script type="text/javascript" src="jquery.transit.min.js"></script>
dans ce cas, il faut le copier/coller dans le dossier du projet (et le mettre en ligne via FileZilla)

sinon on peut le charger directement depuis un CDN spécialisé (Content Delivery Network, ce sont des serveurs hyper rapides hébergeant ce genre de ressources) :
<script type="text/javascript" src="cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>


Il est ensuite utilisé dans le script jquery lorsqu'on fait appel à 
$("#exemple").transition({})


Sinon, merci pour les remarques, et pour le bouton "make ... " Wink


Posté par: space33
Posté le: 25 Nov 2014 à 08:59
Bonjour,
Encore une petite question sur ce programme Transit : depuis le lien donné, le téléchargement (V0.9.12) aboutit .... à une page de code ((function ...undefined)) ! Faut-il recopier ce code directement à la place du nom dans src="jquery.transit.min.js"></script> ?



-------------
WINDOWS 10 /0E 1.57R9/
Passeur d'information
http://www.passeurdinformations.fr


Posté par: Larsene
Posté le: 25 Nov 2014 à 09:04
En fait, il faut faire un clic droit, puis enregistrer sous ...


Posté par: space33
Posté le: 25 Nov 2014 à 09:55
OK, donc copier ce code dans le fichier "jquery.transit.min.js", fichier qui doit être ensuite mis à la racine du projet.
Et, pour une mise en ligne, fichier à transférer chez l'hébergeur (non fait par la mise en ligne interne OE).
Merci


-------------
WINDOWS 10 /0E 1.57R9/
Passeur d'information
http://www.passeurdinformations.fr


Posté par: Dmit OE
Posté le: 25 Nov 2014 à 10:59
Vous pouvez mettre des fichiers-scripts dans Files/Other (et utiliser des bons chemins dans le code qui les utilise), dans ce cas OE les met en ligne automatiquement.


Posté par: space33
Posté le: 25 Nov 2014 à 18:51
C'est certain, je dois me planter quelque part : mais pas d'effet de déplacement au passage de la souris (test en prévisualisation). A l'image près, j'ai fait exactement comme le modèle proposé, même dimensions.
Où pourrait être l'erreur ? Fichier "jquery.transit.min.js" mis au même niveau que le fichier index ?
Les blocs de code (copies des originaux) ? Le nom du panneau d'éléments a bien été remplacé ...



-------------
WINDOWS 10 /0E 1.57R9/
Passeur d'information
http://www.passeurdinformations.fr


Posté par: Larsene
Posté le: 25 Nov 2014 à 19:43
Si c'est en prévisualisation, ne pas oublier de placer ce fichier dans le répertoire du projet également ... ou de le charger via le CDN (voir msg précédent) ...

Sinon .... un lien vers la page fautive me serait utile pour t'aider !


Posté par: space33
Posté le: 25 Nov 2014 à 20:16
Le fichier "jquery.transit.min.js" est bien au même niveau que le fichier index, à la racine du projet.
Est-ce normal que, quand j'édite (avec Notepad++) le fichier  jquery.transit.min.js, le nom du fichier sur l'onglet est  jquery.transit.min.js.js ?



-------------
WINDOWS 10 /0E 1.57R9/
Passeur d'information
http://www.passeurdinformations.fr


Posté par: Larsene
Posté le: 25 Nov 2014 à 20:19
Hum, non, ce n'est pas normal ... je pense que tu as identifié le problème ... Wink


Posté par: space33
Posté le: 25 Nov 2014 à 20:30
Certes ... mais à l'insu de mon plein gré.
Pour créer le fichier "jquery.transit.min.js" j'ai simplement copié le code du lien  http://ricostacruz.com/jquery.transit/" rel="nofollow - http://ricostacruz.com/jquery.transit/  que j'ai collé dans mon éditeur Notepad.
Puis j'ai enregistré avec le nom  "jquery.transit.min.js" avec l'option type de fichier .js
Est-ce là l'erreur ?
Si oui, que faire d'autre (pourtant cela me parait logique) ?
merci



-------------
WINDOWS 10 /0E 1.57R9/
Passeur d'information
http://www.passeurdinformations.fr


Posté par: Larsene
Posté le: 25 Nov 2014 à 21:35
Oui, c'est là l'erreur... si tu sélectionnes une extension, il ne faut pas la retaper dans le nom du fichier... sinon, il ne faut pas choisir de type de fichier !

(un clic droit enregistrer-sous était plus simple, pour le coup !)


Posté par: space33
Posté le: 26 Nov 2014 à 08:39
Comme la particule du même nom, c'était ... élémentaire !
Merci



-------------
WINDOWS 10 /0E 1.57R9/
Passeur d'information
http://www.passeurdinformations.fr


Posté par: running59
Posté le: 26 Nov 2014 à 17:52
Un grand merci Larsène, c'est un travail formidable et c'est un grand plaisir de mettre en pratique ces tutos pour un néophyte comme moi et de voir le résultat s'afficher du premier coup.
impatient de lire les suivants(j'espère qu'il y en aura encore d'autres) et encore bravo et merci !!!!


-------------
running59


Posté par: Larsene
Posté le: 27 Nov 2014 à 09:56
Merci Embarrassed ! Il faut dire que c'est pas mal de boulot pour le construire, le simplifier le plus possible, et construire en live en vidéo sans accro.

Pour tout dire, certains m'ayant encouragé via le bouton "make...", j'ai effectivement prévu d'autres didacticiels. Cela montre tout ce que l'on peut faire avec OE, en sortant des modèles proposés, et encourage vraiment son utilisation !

Un autre est fini (concept, code, exemple) et va rejoindre ceux-ci, il me reste à faire la vidéo, mais avec la grippe, la voix est ... altérée ! Ce soir peut-être ?


Posté par: Larsene
Posté le: 30 Nov 2014 à 19:58
Et voilà ! un nouveau didacticiel permettant la réalisation d'un site assez graphique qui convient bien à un photographe ou artisanat d'art par exemple ...

De plus, il permet de découvrir et prendre en main les panneaux d'élément en mode relative, propose une solution pour un accueil fluide du site internet, et donne des solutions pour passer dynamiquement un objet en affichage fixed ou relative selon le besoin (utilisé pour le menu)


L'exemple est visible ici : http://stalagtic.com/BeesDemo" rel="nofollow - http://stalagtic.com/BeesDemo

Tutoriel disponible ici : http://www.youtube.com/watch?v=wq9inenYV_4" rel="nofollow - https://www.youtube.com/watch?v=wq9inenYV_4

Page du forum consacrée : http://forum.openelement.com/fr/forum_posts.asp?TID=20188&title=volet-daccueil-fluidit-et-abeilles" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20188&title=volet-daccueil-fluidit-et-abeilles


Posté par: Michocko
Posté le: 30 Nov 2014 à 20:11
meme avec la grippe.... ben j'aime bien l'idée.... Wink

belle affaire que cette demo qui ressemble a un "responsive"

trop fort Larsene meme malade Thumbs Up



Posté par: Larsene
Posté le: 30 Nov 2014 à 22:17
ah, voilà ! en ligne !


Posté par: space33
Posté le: 09 Dec 2014 à 18:01
Bonjour Larsène,

Il ne faut pas s'absenter du forum, ne serait-ce que quelques jours ... !
8 jours de vacances et, hop, il y a déjà du nouveau. Voire être dépassé par la quantité d'informations nouvelles.
J'avais testé le 'Flat Design' avant de partir : maintenant je vais pouvoir "jouer" avec.
Et ce nouveau tuto parait au moins aussi intéressant.
Je ne suis qu'utilisateur occasionnel :  le gain de temps est d'autant plus énorme. 
Moyen de se lancer doucement, même si je l'ai pratiquée en d'autres temps et fort longtemps pour d'autres langages, dans la programmation js, css et autres.
Merci encore à vous pour votre investisssement envers la communauté.
Vous devriez et mériteriez, vous et les 4 ou 5 principaux contributeurs de ce forum, vous associer encore plus étroitement avec Dmit !


-------------
WINDOWS 10 /0E 1.57R9/
Passeur d'information
http://www.passeurdinformations.fr


Posté par: Larsene
Posté le: 11 Dec 2014 à 10:34
Merci Embarrassed!

J'espère au travers de ces tutos donner envie d'aller plus loin et d'expérimenter...




Posté par: Bridet
Posté le: 11 Dec 2014 à 10:43
Larsène, c'est très beau mais pour le moment seule la demo est en ligne (donc seule la page d'accueil) ou j'ai raté quelque chose?

J'en profite pour balancer un hors-sujet ci-après une vidéo qui explique pourquoi les abeilles disparaissent suivie d'une pétition (il en va de notre survie). http://actions.pollinis.org/actions/stop-neonics-fr/


Posté par: Larsene
Posté le: 11 Dec 2014 à 11:50
oui, tu as lu mon message antépénultième en diagonal !

une vidéo est bien disponible, en plus de la démo, et un sujet est dédié à chaque tuto (cf premier post).

Dernier tuto :

http://forum.openelement.com/fr/forum_posts.asp?TID=20188&title=tuto-volet-daccueil-fluidit-et-abeilles" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20188&title=tuto-volet-daccueil-fluidit-et-abeilles


Posté par: Bridet
Posté le: 11 Dec 2014 à 12:13
Ah mais non, je ne voulais pas voir la video (j'ai bien vu le lien) je voulais simplement savoir si ce site sur les abeilles (ou allait exister) existe vraiment en complet pour le visiter ;-).


Posté par: Larsene
Posté le: 11 Dec 2014 à 13:47
Non, c'est une démo .... Je me baserai peut être dessus si un jour le syndicat apicole souhaite un site, oui ...Mais les photos sont bien réelles - et les miennes !


Posté par: Larsene
Posté le: 09 Mar 2015 à 17:01
Prochain tuto : Un site responsive avec OE, sans partir d'un modèle (mode teasing ^^)


Posté par: brolysan
Posté le: 09 Mar 2015 à 17:07
Message posté par Larsene Larsene a écrit:

Prochain tuto : Un site responsive avec OE, sans partir d'un modèle (mode teasing ^^)

j'attends de voir alors....je suis sur un la, et j'avoue, pas au bout de mes surprises!!!

j'attends de voir larsène alors. Clap


Posté par: Larsene
Posté le: 09 Mar 2015 à 17:16
oui, le site démo est fini. Par contre, maintenant, il faut que je démonte tout et que je capture avec CamStudio.

C'est à mon avis très intéressant, car je trouve que l'usage des panneaux d'éléments en mode relative est bien plus performant qu'en absolu, et presque personne l'utilise ici, de ce que je vois.

Visuellement, on m'a dit en plus que le site est classe, j'espère que ce tuto va tous nous profiter !




Posté par: brolysan
Posté le: 09 Mar 2015 à 17:18
wait alors...Star


Posté par: Maurice306
Posté le: 09 Mar 2015 à 18:10
J'abandonne mes désirs de travailler sur le Responsive OE pour le mobile et on attend avec espoir Hug

-------------
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!


Posté par: Larsene
Posté le: 30 Mar 2015 à 18:19
Mise à jour :

Chouette, c'est responsive
Principes de création d'une page web responsive : panneaux d'éléments uniquement en mode relative, adaptation en pourcentages et media queries

http://forum.openelement.com/fr/forum_posts.asp?TID=20701&PID=129052&title=tutochouette-cest-responsive#129052" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20701&PID=129052&title=tutochouette-cest-responsive#129052




Posté par: brolysan
Posté le: 06 Jan 2016 à 11:55
tiens au fait, je viens de m'apercevoir d'un truc. tes boutons scrollto ne sont pas pris en compte si on les détourne de leur utilisations premières, dans le cas d'une utilisations d'un formulaire. L'ID n'apparait pas. 

-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: Larsene
Posté le: 06 Jan 2016 à 14:48
Hé ! faut pas les détourner du droit chemin ! :-D

-------------
http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime


Posté par: brolysan
Posté le: 06 Jan 2016 à 15:01
Message posté par Larsene Larsene a écrit:

Hé ! faut pas les détourner du droit chemin ! :-D


hoooo comme si c'etait pas mon genre !!!!! Embarrassed


-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: Bridet
Posté le: 06 Jan 2016 à 17:58
Les boutons scrollto, c'est pas pour la chouette, si?

Sinon, dans 20 questions, personne ne retrouvera ta mise à jour, ne vaudrait-il pas mieux la remplacer dans le post initial (à moins que ce soit fait)?


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be


Posté par: brolysan
Posté le: 06 Jan 2016 à 18:02
Message posté par Bridet Bridet a écrit:

Les boutons scrollto, c'est pas pour la chouette, si?

Sinon, dans 20 questions, personne ne retrouvera ta mise à jour (à moins que tu l'aies changée dans le post initial).


non, c'est tout simplement un élément qu'a créer Larsène.


-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk