Can I email… Support tables for #HTML and #CSS in #emails
▻https://www.caniemail.com
A site that offers support info on more than 50 HTML and CSS features tested across 25 email clients.
#html
-
-
The “One HTML Page Challenge”, a great example of view-source culture / Boing Boing
►https://boingboing.net/2019/08/23/the-one-html-page-challenge.htmlWhen I was interviewing developers for my latest book Coders, all the ones who grew up during the late 90s and early 00s web talked about how powerful view-source was in teaching themselves to code and make stuff online.
But web development these days has grown byzantine in its complexity; if newbie is trying to learn, view-source is liable to just cough up a slurry of incomprehensible, minified javascript. It closes off the easy onramps that existed back in the earlier days of the web.
So, projects like this one-page challenge are awesome, because the whole goal is to encourage the writing of web-site code that’s more legible and tractable.
#programmation #développement #HTML #Javascript #CSS #éducation
-
le site du challenge : ▻https://onehtmlpagechallenge.com
-
-
Paradigm Shift (#HTML5up)
Squelette « one page » adapté du thème Paradigm Shift de HTML5 UP pour #SPIP
▻https://contrib.spip.net/Paradigm-Shift-HTML5up
Attention : contrib en chantier
-
How to Section Your HTML
▻https://css-tricks.com/how-to-section-your-htmlThe sectioning elements in #HTML5 are
<nav>,<aside>,<article>, and<section>.<body>is also kind of a sectioning element since all content lying inside of it is part of the default document section. -
Solid State (HTML5up)
Squelette adapté du thème Solid State de #HTML5_UP
▻https://contrib.spip.net/Solid-State-HTML5up
#spip #spip_blog #intégration #web
-
“I charged $18,000 for a Static HTML Page ... and got away with it.” A tale of #corporate_bureaucracy.
-
C’est tellement ça. Actuellement sur une refonte qui devait durer 3 mois maximum tel que planifié dans le contrat. Le client n’a rien fait pour son site depuis 8 mois malgré indications et conseils pour le soutenir dans sa réécriture. Son mail reçu hier pour demander ce qu’il doit faire en priorité me laisse bouche bée.
#exploitation #travail_du_web
-
-
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
▻https://frontendmasters.com/books/front-end-handbook/2019 -
Chrome, Safari et d’autres navigateurs ne vont plus permettre de désactiver l’audit de lien, qui permet de suivre les clics sur les liens de sites
▻https://www.developpez.com/actu/255113/Chrome-Safari-et-d-autres-navigateurs-ne-vont-plus-permettre-de-desactivL’article original : ▻https://lapcatsoftware.com/articles/Safari-link-tracking.html
L’audit de lien dont il est question ici est l’attribut « ping » des balises « a » (= lien hypertexte) qui entraîne un POST tout à fait irrespectueux de la vie privée sur l’URL donnée dans la valeur de l’attribut : cf la doc de cet attribut sur MDN : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Element/a#attr-ping qui précise bien :
Cet attribut est généralement utilisé pour tracer un utilisateur.
Cet attribut a été introduit par la version 5.3 de HTML5 : cf ▻https://www.w3.org/TR/html53/links.html#sec-hyperlink-auditing
A noter un début de discussion remettant en cause la pertinence technique du mécanisme utilisé qui pose clairement ses enjeux pour le W3C :Hyperlink auditing is important because advertising and referral-based user tracking are two of the primary means of generating revenue via Web sites. However, by its very nature, such tracking must be comprehensive, accurate, and unavoidable by a typical user or it simply won’t be relied upon by site owners and advertisers.
(cf le premier message de ▻https://lists.w3.org/Archives/Public/public-html/2009Dec/thread.html#msg183)
...ce qui donne un exemple typique des intérêts et de la partialité du W3C dans la fabrication des standards du web !
#navigateur #vie_privée #ping #hyperlink-auditing #html5 #w3c #standard #lobby
-
Overview of how does #css works behind the scenes?
▻https://hackernoon.com/overview-of-how-does-css-works-behind-the-scenes-498d98b0e404?source=rssFrontamentalsLet’s start by understanding what actually happens to our CSS code when we load up a web page in a browser.When a browser starts to load the initial #html file, it takes the loaded HTML code and parses it, which means that it will decode the code line by line. By this process, the browser builds the so-called DOM (Document Object Modal) which describes the entire web document in a tree with parent, children and sibling elements.HTML ParsingAs the browser parses the HTML, it also finds the stylesheets included in the HTML head and just like HTML, CSS is also parsed.But the parsing of CSS bit more complex.There are two main steps that are performed during the CSS parsing phase :1. Conflicting CSS declarations are resolved (also known a cascading)2. Process final CSS values (for (...)
-
Learn basic #html
▻https://hackernoon.com/learn-basic-html-be230361457?source=rss----3a8144eabfe3---4HTML is the language for creating Web pages and the HTML elements are actually blocks that are used to build a page. Learn the basics to become a front-end professional.(This article was initially posted on ▻https://www.developermate.com)HTML stands for HyperText Markup Language. The first web pages was released in 1990 and the pages were only used for presentation. Today the web is a very important piece in our daily lives. You may use many different web browsers to look at web-pages, like: Google Chrome, Opera, Internet Explorer and Firefox.HTML Page StructureIt is important to understand the HTML page structure.The <head> is used for the title and meta-tags. Only content inside the <body> section (the white area) is displayed by the web browser.HTML TagsHTML tags are (...)
-
HTML5 Pre-resize images before uploading - Stack Overflow
▻https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploadingExemple de manipulation d’image par le navigateur (redimensionnement) avant son POST vers un serveur
Le billet original sur mozilla-dev : ►https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploaderLa doc de l’API File de HTML5 : ▻https://developer.mozilla.org/fr/docs/Web/API/File/Using_files_from_web_applications
-
The Box Model
▻https://hackernoon.com/the-box-model-44fc2c04a935?source=rss----3a8144eabfe3---4This article will brief you about the #css Box Model.What is The Box Model?Every element in the #html document comprised of one or more rectangular boxes. CSS box model describes how these rectangular boxes are laid out on a web page. The Box Model describes how the padding, border, and margin are added to the content to create this rectangle. In other words, we can say that every box has a content area and an optional surrounding margin, padding, and border.by republic.comThe innermost rectangle is the content box. The width and height of this depend on the element’s content (text, images, videos and any child elements ).Then we have the padding box (defined by the padding property). If there is no padding width defined, the padding edge is equal to the content edge.Next, the border box (...)
-
Mettre en page un livre avec uniquement du #logiciel_libre (non, pas LaTeX), un cas réel raconté par le maquettiste/typographe ▻https://polylogue.org/addictions-sur-ordonnance-making-of-dune-collection-liberee #HTML #CSS #JavaScript #PDF #UI
-
Admiring The Poetry Of Code
▻https://hackernoon.com/admiring-the-poetry-of-code-f879da267fb?source=rss----3a8144eabfe3---4Why I Still Love Writing #html, CSS, and JavaScriptBelieve it or not, I’ve made a career for the past decade out of writing pure HTML, CSS, and #javascript. While I do run my own business as a software engineer, coding mostly with PHP and JavaScript, I am still learning how to write code in NodeJS and ReactJS, because that is technically what most tech companies are looking for nowadays. Most companies won’t even acknowledge you if you have no experience with JavaScript, but my actual living for the past decade has come from web design, specifically in writing pure HTML, CSS, and JavaScript — and for the past few months, I’ve also found great work as a technical writer for RunCloud.A recent article made me realize just how much the world of web design is starting to experience The Great (...)
-
7 Common Web Development problems which every developer from Beginners to Experts should know [with…
▻https://hackernoon.com/7-common-web-development-problems-which-every-developer-from-beginners-t7 Common Web Development problems which every developer from Beginners to Experts should know [with multiple solutions]Web Development can be a complex task because it involves working in many technologies and languages like #html, #javascript and PHP, ASP.NET, My SQL and AJAX. There can be some problem where you can get stuck from a few hours to a few days. It may be very frustrating since there happens to be no place to go, and find your solution. In my web development career I happened to stuck on many problems but fortunately I got their solutions on time.I therefore decided to write this tutorial to point out 5 Common Web Development problems which every Beginner, intermediate or Expert developer should know to solve. So without wasting any further time let us start with them one by (...)
-
TouchEvent | MDN
▻https://developer.mozilla.org/en-US/docs/Web/API/TouchEventLa documentation de l’API TouchEvent pour gérer les évènements de type « touch » dans une application web
#TouchEvent #html5 #api #mdn #documentation
-
An Introduction to #pug
▻https://hackernoon.com/an-introduction-to-pug-1dbe7cfcacd8?source=rss----3a8144eabfe3---4Pug (formerly known as Jade) is a preprocessor which simplifies the task of writing #html. It also adds a ton of functionality, such as #javascript objects, conditionals, loops, mixins and templates. The syntax is arguably a lot cleaner to read and it can be a real time-saver when working with a lot of HTML (especially frameworks such as Bootstrap, Foundation, etc).Lets take a peek at some Pug syntax & compare it to regular HTML..// index.pugdoctype html html(lang=’en’) head title Pug demo body h1 Welcome to Pug Life div.container p I’m a p that needs to be contained!Note the use of indentation to nest our HTML as we require. And the lack of closing tags!And here’s the standard HTML output:// index.html<!DOCTYPE html> <html lang="en"> (...)
-
What Web Can Do Today
▻https://whatwebcando.todaypanorama des fonctionnalités HTML5 pour les progressives web apps :
– support
– description et liens vers documentations -
Paged.js – Paged Media
▻https://www.pagedmedia.org/paged-jsaged.js is an open-source library to paginate content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules. The development was launch as an open-source community driven initiative of it’s still experimental. The core team behind paged.js includes Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet.
-
Très intéressant, nous qui essayons de rédiger et générer nos documents papiers longs (cahier des charges, documentation finale, etc) depuis SPIP… Enfin « essayons », non, on y arrive assez bien maintenant, mais toujours avec PrinceXML qui n’est pas libre. Et on reteste Weasy (libre python) régulièrement car il évolue bien.
►https://seenthis.net/messages/734575À suivre de prêt, cette initiative…
« Supported by Shuttleworth fundation »
-
-
-
20 Best Free HTML5, #css3, Bootstrap Landing Page Templates in 2018
▻https://hackernoon.com/20-best-free-html5-css3-bootstrap-landing-page-templates-in-2018-717488cWebsite template is the best solution for site building. Here are 20 Best Free Bootstrap landing page templates in 2018 for creative and powerful website building.Your landing page is fundamental in persuading new visitors to take certain actions when visiting your site. Whether it be having users sign up, register, or even buy your product or service, designing an excellent landing page will help you realise this goal.But how do you quickly build a quality landing page? Using a powerful and flexible landing page template may be your best choice. Most HTML5, Bootstrap, and CSS3 templates include features that can help you effortlessly create a page. In addition, web designers and developers readily share free responsive landing page templates on the Internet for you to use. Mockplus (...)
-
Read it when someone looks down at your Web site, saying “you should pay a designer”:
“A website’s materials aren’t #HTML tags, #CSS, or #JavaScript code. Rather, they are its content and the context in which it’s consumed”
And
“By default, a website that uses HTML as intended and has no custom styling will be readable on all screens and devices. Only the act of design can make the content less readable” (for those who keep repeating “responsive” without understanding it)
-
Home Page - WeasyPrint
▻https://weasyprint.orgUn logiciel serveur pour générer les PDF à partir de pages HTML + CSS (nécessite python 3.8)
Dépot github : ▻https://github.com/Kozea/WeasyPrint
La revue de Linuxfr.org : ▻https://seenthis.net/messages/734549
(on va tester pour faire des retours d’usages...)-
On a testé de manière assez poussé en comparaison avec Prince. En testant plein de trucs sur les pages, les trucs à mettre dans les marges, le CSS3…
Weasy est libre et bouge régulièrement alors ça se trouve il y a eu des ajouts depuis il y a quelques mois, mais ça ne gère vraiment pas autant que Prince, notamment en CSS3.
Mais quand on a une maquette graphique pas trop complexe, ça marche parfaitement très bien, et du coup ça permet de générer tout en libre, et donc possiblement côté serveur aussi.
On imaginait peut-être un plugin SPIP qui appellerait une génération sur le serveur… (mais encore une fois, ça dépend de la maquette).
-
#intégration #CSS #HTML #print #impression
Une initiative en lien, à suivre :
▻https://seenthis.net/messages/742687
-
-
Signaler les champs obligatoires
▻http://romy.tetue.net/signaler-les-champs-obligatoiresComment bien signaler les champs de saisie obligatoire ? Avec l’astérisque conventionnelle, mais attention : c’est moins simple qu’il n’y paraît ! Voyons cela pas à pas… Baliser les champs obligatoires comme tels Cela se fait très simplement avec l’attribut HTML5 dédié, required, qui s’utilise comme suit…
#required #HTML5 #a11yDesign #a11y #formulaires #forms #astérisque #tutoriel
-
Vers un système modulaire de publication : éditer avec le numérique – Antoine Fauchié
Le domaine du livre, et plus particulièrement l’édition, connaît des mutations profondes au contact du numérique. Après des phases successives d’informatisation, l’une des manifestations les plus visibles de ces bouleversements est probablement l’ebook. Si le livre numérique est une approche inédite de l’écrit tant dans sa diffusion que dans sa réception, il y a en filigrane des transformations plus essentielles dans la manière de faire des livres. Des structures d’édition imaginent des nouvelles chaînes de publication originales et non conventionnelles pour générer des versions imprimée et numériques d’ouvrages et de documents, remplaçant les traditionnels traitements de texte et logiciels de publication par des méthodes et des technologies issues du développement web. Ainsi un système modulaire de publication peut se substituer à des chaînes linéaires, repositionnant l’humain au cœur des machines ou des programmes. À travers des commentaires de textes et des analyses de cas nous étudions les évolutions du livre avec un regard plus global sur notre rapport à la technique, et nous exposons les principes fondateurs d’un nouveau modèle.
Mémoire d’Antoine Fauchié dans le cadre du Master Sciences de l’information et des bibliothèques, spécialité Publication numérique, de l’Enssib, sous la direction d’Anthony Masure, maître de conférences en design à l’université Toulouse – Jean-Jaurès et de Marcello Vitali-Rosati, professeur au département des littératures de langue française de l’Université de Montréal et titulaire de la Chaire de recherche du Canada sur les écritures numériques.
#publications_hybrides #prepostprint #web2print #digital-first_publishing #système_modulaire_de_publication
-
-
-
-
Enfin tout lu…
TL ;DR : le dernier chapitre suffit :)
▻https://memoire.quaternum.net/3-un-systeme-modulaire/3-2-les-principes-d-un-nouveau-modele-de-publicationTL ;DR :
– Un système et non plus une chaine
– Interopérabilité + Modularité + Multiformité
– Un format de syntaxe légère (par ex Markdown)
– Un format de description pour les méta-données (par ex YAML)
– Un suivi de version de textes bruts (par ex Git)
– Des convertisseurs vers des formats connus de lecture (HTML, EPUB, etc)
– Un générateur de HTML/XML+styles vers PDF, pour l’instant PrinceXML avec recherche d’alternatives libres
– Chaque élément pouvant être remplacé facilement un jour par autre chose.Lien avec le post sur WeasyPrint donc, alternative libre en Python à PrinceXML (mais qui n’est pas encore aussi avancé).
►https://seenthis.net/messages/734575Et @tetue citée dans le texte et la bibliographie. :)
Que deux étoiles depuis trois mois, alors @maieul que ça peut intéresser, et qui d’autre… @hlc aussi, @jluc/@passerelle
#print #impression #publication #édition #web #HTML #CSS #EPUB #PrinceXML #WeasyPrint
-
Oui, on me l’avait signalé via je ne sais plus quel reseau (irc, je crois, notamment parce que je suis cité).
Il y a des choses encore à creuser. Par ex sur la bibliographie. Là il eécrit en dur <code>(Rouquette et al., 2012)</code>. Ca veut dire que le jour où il veut changer de formatage bibliographique (par ex, passer en note de bas de page avec référence complète), il l’a dans l’os.
Le problème, c’est que MD ne permet pas en soi la gestion de bibliographie. Au mieux on peut brancher sur du Zotero. Mais les styles Zotero sont limités en terme de gestion fine (il y a plein de style, mais toujours pour des cas simples). De même le modèle de bibliographie de Zotero est problématique car il n’a pas de système d’héritage.
Mais bon, à ce jour le plus complet c’est BibLaTeX. mais ca dépend de LaTeX, et donc pas du tout multiplateforme.
-
C’est pas forcément en dur non, puisque les méta-data sont proposées à être stockées dans des YAML (qui parfois peuvent être inclus en début du MD, parfois dans un fichier dédié). Exemple chez Getty dont il parle :
▻https://github.com/gettypubs/quire/blob/master/content/guide/citation-bibliographies.mdAprès on peut dire qu’il manque tel ou tel truc quand on est hyper spécialisé, mais le format YAML permet des imbrications comme on veut, donc c’est pas un blocage pour décrire des choses compliquées. Et ensuite ya des shortcodes pour insérer dans le texte. Il y a donc bien une séparation entre la donnée, puis l’insertion, puis la présentation finale.
D’ailleurs lui-même pour ce mémoire, sa bibliographie est bien à part en fait, dans des fichiers bib :
▻https://gitlab.com/antoinentl/systeme-modulaire-de-publication/blob/master/_bibliographie/bibliographie.bib#L740Et ensuite il insère pas en dur, où as tu vu ça ?
▻https://gitlab.com/antoinentl/systeme-modulaire-de-publication/blob/master/_memoire/3-un-systeme-modulaire/-3-2-les-principes-d-un-nouveau-modele-de-publication.md{% cite rouquette_xelatex_2012 %} -
my bad, je suis tombé sur un brouillon (mais qui ressemblait furieusement à la forme finale)
▻https://gitlab.com/antoinentl/systeme-modulaire-de-publication/blob/master/materiaux/partie-3/les-principes-d-un-systeme-modulaire-de-publication/index.md#L55
Le système que tu cite chez Getty n’est pas un vrai système de biblio (pas de séparation du formatage et de la structure de donnée). Mais apparement il y a trouvé une manière de brancher son MD sur du bibtex.
Après je dis pas que c’est impossible d’avoir des systèmes « complexe » (encore que pas tant que cela, juste fréquent dans certains domaines) de biblio avec MD mais que, en l’état cela n’existe pas.
-
De ce que je comprends, jamais il ne s’agira de faire de la biblio, complexe ou pas, avec MD. Ce dernier ne sert qu’à rédiger du texte. La biblio ce sont des méta-données complexes, donc YAML, Bib, ou autre. Et ensuite dans le MD on insère juste des shortcodes, comme des modèles SPIP quoi, pour afficher soit telle référence précise, soit la liste complète.
Du coup apparemment ça existe bien, puisqu’il a effectivement des shorcodes qui viennent insérer (avec le HTML qu’il décide) dans son MD des choses venant de son bib.
-
certes « avec markdown » était un raccourcis.
Et oui visiblement il est possible d’avoir des shortcut pour gérer de la biblio qui fait appel ensuite à un moteur de formatage de bibliographie. La question qui se pose est de savoir quelles possibilités sont offertes par ce moteur de formatage de bibliographie. Et, à ma connaissance, on ne fait pas aujourd’hui plus puissant aujoud’hui que le couple biblatex+biber pour ca.
-
-
HTML Minifier - Ladnet
▻https://ladnet.net/html-minifierSite officiel du plugin HTML-minifier pour SPIP
et son dépot git : ▻https://gitea.ladnet.net/ladnet/htmlminifier-
Bientôt sur la zone & contrib pour une publication dans #spip_blog ;)
-
-
