STRONG, B, I, EM : quelle balise utiliser et pourquoi ? - Alsacreations
▻https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html
Mémo pour l’utilisation des balises inline : mise en évidence et/ou présentation
#sémantique #balise #html
Éléments HTML5 de structure - romy.tetue.net
▻http://romy.tetue.net/elements-html-5-de-structure
Le mémo de romy.tetue.net pour l’organisation de la structure d’une page en HTML5
Sur les imbrications section/article voir aussi : ▻https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Sur la structuration implicite du plan des éléments de la page généré par ces balises, voir : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document
Responsive Images : comprendre srcset et sizes - Alsacreations
▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html
Images responsives : les attributs srcset et size de la balise <img> pour utilisation de multiples source et taille pour une image
Voir aussi : ▻https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web
#srcset #size #img #image #responsive #adaptive_image #HTML5 #CSS
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.
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.html
When 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-html
The 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-desactiv
L’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=rss
FrontamentalsLet’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---4
HTML 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-uploading
Exemple 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-uploader
La 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---4
This 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---4
Why 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-t
7 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/TouchEvent
La 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---4
Pug (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.today
panorama des fonctionnalités HTML5 pour les progressives web apps :
– support
– description et liens vers documentations
Paged.js – Paged Media
▻https://www.pagedmedia.org/paged-js
aged.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-717488c
Website 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.org
Un 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
