Recommandations pour l’#intégration d’e‑mails
Ce document a pour but de présenter plusieurs principes que vous pouvez appliquer pour coder des e‑mails #HTML. Chaque recommandation est objectivement justifiée pour se conformer aux clients de messagerie modernes, et se dégrader gracieusement ailleurs.
▻https://github.com/hteumeuleu/email-guidelines/tree/master/translations/fr-FR
#email #template #intégration_web #web #bonnes_pratiques #guidelines
Free email template builder - Responsive mail editor and designer | Mosaico.io
▻https://mosaico.io
Via @azerttyu un outil graphique pour aider à produire un HTML d’email bien pourri (styles head + inline). Ça peut accélérer le travail, et ensuite on insère des boucles SPIP à l’intérieur pour utiliser le contenu dynamique.
Design and code an email that works on every device and client is a huge and demanding work also for professionals.
Mosaico allows you to realize a beautiful and effective template,
without a team of professionals and hours of testing to make it work everywhere.
#email #template #intégration #web
Débat sur l’euthanasie. Une histoire drôle du même azerttyu
▻https://km.azerttyu.net/Debat-sur-l-euthanasie
Petite histoire amusante :
Ma femme et moi étions assis dans le lit la nuit dernière, discutant des choses de la vie.
Nous parlions de l’idée de vivre ou mourir.
Je lui dis :
« Ne me laisse jamais vivre dans un état végétatif, dépendant d’une machine et de liquides. Si tu me vois dans cet état, débranche tous les éléments qui me maintiennent en vie. »
Sur ce, elle s’est levée, a débranché le câble de la TV et m’a enlevé ma biére.
La conne !!!
artf/grapesjs : Free and Open source Web Builder Framework. Next generation tool for building templates without coding
▻https://github.com/artf/grapesjs
Un framework de templating par interface, mais autonome, pas propre à un CMS (comme Gutemberg ou autre). Ça peut servir à faire un CMS complet. Mais ça pourrait servir à faire aussi juste un logiciel de maquettage rapide aussi, mais… qui produit du HTML/CSS responsive du coup. Comme Bootstrap Studio, sauf que c’est en web et libre là… (vraiment ça fait tout pareil que bootstrap studio quasiment).
Peu aussi être inspirant pour les systèmes de blocs configurables, d’interface pour construire une page par blocs.
GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates.
#template #maquette #interface #blocs #HTML #CSS #responsive
ping @drbouvierleduc @smellup
Super outil, complètement personnalisable et qu’on peut utiliser pour plein de situations. On est en train de le mettre en place dans une appli web pour la partie éditoriale/marketing, comme ça on va contenter nos collègues qui sont habitués au confort de Wordpress (Gutemberg donc), qui est super bien foutu à ce niveau.
merci pour le retour :)
bon ça reste que pour enregistrer du HTML directement… il me semble que dans son genre Gutemberg fait mieux (même si très lié à WP donc difficile d’utiliser ailleurs) : ça sérialise des paramètres, qu’eux mettent à plat avec leur format (des commentaires HTML avec du JSON) mais qu’on pourrait parfaitement décider d’enregistrer comme on veut + des styles CSS générés (avec un id unique pour chaque bloc). Et du coup ça peut possiblement générer autre chose que du HTML ou ça peut être personnaliser (si jamais pour un bloc ayant tel sens, on voudrait que ce soit pas « div » mais « section » ou « blockquote » un autre jour ou dans tel autre contexte qu’une page web).
Enfin bon c’est très intéressant à creuser quand même. Ne serait-ce que pour faire du maquettage rapide (mais est-ce qu’il existe un vrai logiciel qui utilise déjà cette lib pour faire ça ? ou même pour éditer des pages en général tout court, que ce soit maquette ou vraie page… un frontpage moderne en webapp quoi)
Oui le souci de Gutemberg c’est qu’il faut sortir de wordpress. On a cherché plusieurs outils pour faire le même taf (sans tout redévelopper) et GrapesJS est ce qu’on a trouvé de mieux, même si c’est pas tout à fait ce pour quoi il est prévu à la base. On a adapté ça avec notre CSS custom et donc en quelques instants on peut construire une page assez librement tout en étant contraint par notre design system.
Pour le maquettage pur sinon, il y a Penpot qui vient de sortir : ►https://penpot.app
oui déjà signalé ici :) ►https://seenthis.net/messages/900030
Mais justement Penpot ne produit PAS du HTML CSS responsive mais des SVG, de l’image… Alors que c’est tout l’intérêt de maquetter directement en HTML, c’est de base responsive, mobile first, etc. (ce que fait Bootstrap Studio, mais dans un soft pas libre, et pas collaboratif, pas non plus versionnable avec git, etc)
Clairement oui, le but premier de GrapesJS c’est de pouvoir maquetter directement en HTML+CSS, après je l’ai pas utilisé dans cette optique et je sais pas ce que ça vaut par rapport à Bootstrap Studio (pas utilisé non plus).
Project Aura — GDG Chapter website template
▻https://github.com/gdg-x/aura
#firebase #vuejs #meetup #event #template #openSource #organization
Project Hoverboard — Conference website template
▻https://github.com/gdg-x/hoverboard
« A conference website template that helps you to set up mobile first conference website with blog, speakers and schedule management in a few minutes.
The template is created based on 7 years of GDG Lviv team experience of running conferences and feedback from more than 500 event organizers from all around the world who were using previous Hoverboard versions.
Our goal is to allow event organizers to set up professional conference website with minimum resources.
To get started you need only basic knowledge of web technologies and a free Firebase account. »
#firebase #polymer #conference #template #openSource #organization
Firebase Pricing | Firebase
https://firebase.google.com/pricing
#Free #HTML Website #Templates
▻https://freebiesbug.com/code-stuff/html-website-templates
A curated collection of free HTML/CSS website templates ready to be used
Free, mais impossible de trouver une mention des licences utilisées...
New status by milouse
▻https://mastodon.social/users/milouse/updates/2544293
Je découvre également le dialecte de #template #html #slim (▻http://slim-lang.com). Va falloir que je me penche un peu dessus. Moins cabalistique que #haml mais en conservant le côté dépouillé. Ça semble chouette
#free #responsive Mobile Website #templates Designs - w3layouts.com
▻https://w3layouts.com/page/2
Free Responsive Mobile Website Templates
Free Responsive Email Templates by Litmus
▻https://litmus.com/resources/free-responsive-email-templates
#email_template_free_Litmus_RWD
FigDice, un Templating System efficace et original
▻http://connect.ed-diamond.com/GNU-Linux-Magazine/GLMF-158/FigDice-un-Templating-System-efficace-et-original
FigDice
▻http://figdice.org/en/intro.html
The fundamental principle of FigDice is to make the view itself responsible for calling the data it needs. This means FigDice places the view at the centre of the application and only the screens know the services invoked to produce them.
The controller no longer reassembles the data from the various services to inject them into a template - the template itself invokes the services, manipulates their data and decides which are to be presented and how.
Un moteur de #template pour #PHP qui inverse la responsabilité MVC habituelle, où le contrôleur passe les données à la vue (cf Smarty etc).
Ici, c’est la vue elle même qui va chercher les données dont elle a besoin.
Ça ressemble beaucoup à ce que fait #SPIP, mais avec un formalisme xml valide.
Exemple : une boucle sur des tweets
<fig:feed class="TwitterFeed" target="tweets" />
<ul>
<li fig:walk="tweets" fig:text="body" />
</ul>
Quick trick: using #template to delay loading of images | Christian Heilmann
▻http://christianheilmann.com/2015/09/08/quick-trick-using-template-to-delay-loading-of-images
Tags: #HTML template #lazyload #image #clevermarks
OpenCageData/address-formatting · GitHub
▻https://github.com/OpenCageData/address-formatting
This repository contains templates for various #address formats used in territories around the world. It also contains test cases.The intended use-case is database or geocoding systems (forward, reverse, autocomplete) where we know both the country of the address and the language of the user/reader. The address is displayed to a consumer (for example in an app) and not used to print on an envelope for actual postal delivery. We use it to format output from the OpenCage #geocoder . Our goal with this repository is a series of (programming) language independent templates. Those templates can then be processed by whatever software you (...)
BootstrapBay - Bootstrap Themes & Templates
▻http://bootstrapbay.com
MDwiki - Markdown based wiki done 100% on the client via javascript
▻http://dynalon.github.io/mdwiki/?_escaped_fragment_=index.md#!index.md
Requirements
Webspace (or a web server that can serve static files)
Any modern Webbrowser
mdwiki.html file
How does it work?
Just drop the mdwiki.html available from the download page along with your markdown files on a webspace somewhere. You can pass any url (relative to the mdwiki.html file) to mdwiki after the hashbang #!:
▻http://www.example.com/mdwiki.html#!myfile.md
If you rename the mdwiki.html into index.html, you can omit the filename on most webservers:
▻http://www.example.com/#!myfile.md
MDwiki will load a file called index.md from the same directory as the index.html by default, so if you use an index.md file as entry point, all you have to do is enter your domain name:
Note: There are lots more features over regular Markdown, check out the quickstart tutorial.
#cccp ?
Je viens de tester MDwiki.
Résultat sous Ubuntu/Linaro 4.7.2-2ubuntu1
FF29 - après 18 secondes affichage d’un message d’erreur, la page est affichée quand on clique « contunuer »
Chromium 34 - la page s’affiche après moins de deux secondes.
Conclusion - trop lent dans le brouteur principal.
Essayez vous-même :
▻http://www.revolte.de
Je crois qu’on continuera encore longtemps à utiliser des systèmes côté serveur aussi efficaces que #SPIP .
En effet... J’ai cuit une douzaine d’oeufs sur le boitier du PC après avoir tenté d’ouvrir la page de test avec FF...
Simple Invoice Template | PrepBootstrap
▻http://www.prepbootstrap.com/bootstrap-template/simple-invoice
This #free #bootstrap #template demonstrates simple invoice layout.
It contains a header, as well as purchase details and summary.It can further be extended to contain user details and purchase histrory.
#pro2spipr :-p
SmartBiz - Responsive Theme
▻https://wrapbootstrap.com/theme/smartbiz-responsive-theme-WB006P073
Thème html5 #bootstrap 2 Tags : #templates bootstrap #wrapbootstrap
Flattern - Flat and trendy #bootstrap site template
▻http://iweb-studio.com/wrapbootstrap/flattern/blog-right-sidebar.html
Thème bootstrap 2 Tags: #templates bootstrap #wrapbootstrap
#HTML5 UP! Responsive HTML5 and CSS3 Site #templates
►http://html5up.net
Tags: HTML5 templates #creativecommons #rwd
50 best free html responsive templates | Creative Nerds
▻http://creativenerds.co.uk/freebies/50-best-free-html-responsive-templates
This blog post is compilation of free premium looking responsive web templates just without the premium price tag all 100% free. You may be a web designer who wants to gain a better understanding of how responsive website templates works, theres no better starting point than downloading template playing around with it. You can also download templates and have a ready built site just simply change around content.
#html5 #rwd #responsive #templates
Rendering on the Server and #client in #Node.js
▻http://artsy.github.io/blog/2013/11/30/rendering-on-the-server-and-client-in-node-dot-js
“At Artsy we’ve been building Node.js applications that share code and rendering between the server and browser. We’ve seen many benefits from this – pages load faster, we can optimize #SEO, developers are more productive, and #JavaScript coding is just an overall better experience.” Tags: Node.js #serveur client #template #Ezel SEO #webperf #Backbone.js JavaScript
Cerberus - Responsive Email Patterns
▻http://tedgoas.github.io/Cerberus
A few simple, but solid patterns for responsive HTML emails. Even in Outlook.
#MailChimp Email #template Reference
▻http://templates.mailchimp.com
“Coding an #HTML email isn’t much different than coding a website was back in the late ’90s. The same design tools are used to produce your final result. And the same general design principles are still in play: contrast, repetition, proximity, and alignment are all important.” Tags: #e-mail #mailing MailChimp template #intégration HTML #CSS
Studiofolio | News & Blog
▻http://demo.undsgn.com/studiofolio/news-blog