Trouver les informations de votre navigateur - le hollandais volant

#16129, par {lien_auteur}

J’ai refaite ma page, un peu.

J’ai ajouté quelques informations système, comme le niveau de batterie mais aussi une détection plus poussée du FAI (à l’aide d’une API externe, mais avec le fallback basique interne à PHP).

Peut-être j’ajouterai la détection du GPS (géolocalisation html5), une photo de la webcam (souriez !), et diverses informations hardware (j’ai vu qu’on pouvait avoir les capabilités GPU/CPU maintenant, et tout ce qui concerne les capteurs des smartphones : luminosité, orientation, accéléromètre…).

GitHub - timovn/simple-js-toc: Creating a table-of-contents in a HTML file, based on h1, h2, h3… elements

#16044, par {lien_auteur}

Un bout de JS pour faire un TOC dans un document HTML.

Marre d’avoir seulement des scripts avec jQuery pour faire ça, ou alors des codes soit utilisant des regex, soit utilisant innerHTML (qui est lent) ou qui n’utilisent pas la gestion du dom correctement, soit utilisant des div/p, soit produisant un code non-valide.
Voici ce que j’ai et qui pallie à tous ces problèmes.

Résultat visible ici : http://lehollandaisvolant.net/linux/checklist

placeholder-shown — Can I use... Support tables for HTML5, CSS3, etc

#14514, par {lien_auteur}

Pour la couleur d’un placeholder en CSS, il y a une propriété officielle maintenant. Il faut utiliser la pseudo-classe "placeholder-shown".

input:placeholder-shown { color: white; }


Elle est encore très peu supportée, donc pour le moment on s’en tient à ça :
input::-webkit-input-placeholder { color: white; }
input::-moz-placeholder { color: white; }
input:-ms-input-placeholder { color: white; }
input:placeholder-shown { color: white; }


Par défaut, Gecko affiche la couleur du texte avec une opacité réduite : la couleur du placeholder hérite la couleur du texte du input.
Dans Webkit, la couleur est un gris à l’opacité réduite quelque soit la couleur initiale.

http://caniuse.com/#search=placeholder-shown

[PHP] Note : Parser du texte pour en faire des paragraphes

#14486, par {lien_auteur}

Dans un CMS, quand on doit parser le texte en du HTML, on utilise par exemple le nl2br() pour transformer les retours à la ligne en <br/>. Pour faire beau, on met tout ça dans un <div> et basta.

Sauf que ce n’est pas bien propre.
Le mieux c’est d’utiliser des balises <p>, les <br/> quand il faut (le second en cas d’un retour à la ligne, le premier en bas de deux retours à la ligne successifs, donc avec une ligne blanche entre les deux.

Ça semble simple.
Ça ne l’est pas.

Si votre texte contient déjà du HTML, vous vous retrouverez avec des <p>, des <ul> ou des éléments de type block dans des paragraphes. Ceci n’est pas valide W3C et c’est mal.

Voici une fonction qui prend du texte avec du HTML dedans et qui transforme ça en paragraphes : http://sebsauvage.net/paste/?39bac6fcd6d7e61e#EMx40oNNZwiVmkn3j5FYmjLHudTj9NkZ6J3PQvhNRmM=

Le fonctionnement est simple :
— 1) il analyse la première ligne.
— 2) si c’est un élément HTML de type block, il le passe dans le nl2br(), met ça de côté et retourne au 1)
— 3) sinon, si c’est du texte brute ou un élément de type inline, il grep le texte jusqu’à trouver deux retours à la ligne successifs (marquant le début d’un autre paragraphe) ou un élément de type block. Il capture le texte, le passe au nl2br(), le met entre deux balises <p>, met ça de côté et retourne au 1).

Ainsi, ligne après ligne, le texte est placé entre paragraphes ou conservé si c’est déjà un type block et on reconstitue un code HTML avec des paragraphes.

Mon code n’est pas parfait (il peut encore ajouter des <br/> là où il ne faut pas, par exemple dans un <pre> ou du code HTML mal indenté) mais fonctionne assez bien.

Note : h1, w3c, sémantique, etc.

#14431, par {lien_auteur}

Je viens d’en parler par email à un lecteur, je le publie ici car ça peut servir : c’est à propos de l’élément <h1> dans une page web, et le fait qu’il ne doit y en avoir qu’un seul.

Aujourd’hui, un H1 peut être utilisé dans un élément "article" ou "section" : sémantiquement, et en HTML5, il représente alors le titre de cet article (ou cette section).

L’élément "article" est en fait considéré comme un objet isolable de la page, pouvant accueillir un titre H1 (et sa propre structure H1/H2/H3…).

http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824 (en)
https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document (en)
http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html (fr)

Je sais que le validateur HTML du W3 génère un avertissement si vous avez plusieurs <h1> dans une page, mais justement : c’est un avertissement, pas une erreur.

Tu peux évidemment le changer en H2, c’est comme tu veux et rien n’est ni faux ni vrai :
– soit tu considère toute la page comme un document entier et consistant
– soit tu considère la page comme une liste d’articles indépendants et isolables.

C’est ce qu’on appelle la sémantique : le HTML, avec la version 5 (HTML5) n’est plus seulement un langage de mise en page, mais il apporte également des informations supplémentaires : un "article" représente un article, un "footer" c’est soit un pied d’article, soit un pied de page…

Là où avant, un "div" c’était juste un bloc, sans véritable sens à lui seul.

Les moteurs de recherche (comme le dit un des liens précédents) préfèrent la sémantique : c’est plus organisé et plus structuré, et ça leur permet de mieux trier tes articles.


Concernant la sémantique et la SEO, j’expérimente toujours quelques trucs à des fins d’études du fonctionnement d’un moteur de recherche. Actuellement sur Couleur-science, vous pouvez regarder le code source, j’ai placé des marqueurs de données structurée, avec "itemscope".

Ainsi, au lieu de mettre 

<article>
<p>publié par Timo</p>
…

je mets ça :

<article itemscope itemtype="http://schema.org/BlogPosting">
<p itemprop="author" itemscope itemtype="https://schema.org/Person">Publié par <span itemprop="name" rel="author">Timo<span></p>
…


Peut-être que c’est lourd un peu, mais ces choses sont utilisées par les moteurs de recherche et les navigateurs pour afficher des informations supplémentaires. Ce sont un peu des données EXIF pour les page web.
On définit ainsi l’auteur, la date de publication, les images, les logo, les articles, etc.

C’est intéressant.

http://lehollandaisvolant.net/?mode=links&id=20160202182838

Aptivate Low Bandwidth Simulator

#14400, par {lien_auteur}

Tester le rendu de votre site avec une connexion 56k (ou 20k, ou 9,6k).

1) Entrez une URL
2) cliquez sur "original" pour la page entière (avec CSS/JS) et sur "loband" pour le HTML seul.

Il est dit qu’une connexion 20k est la moyenne d’une connexion d’une université africaine.

http://www.loband.org/loband/simulator.jsp

Quiz pour tester ses connaissances web - Alsacreations

#14389, par {lien_auteur}

Des quiz JS, HTML, CSS, PHP…

C’est marrant, tout le monde dit que le HTML et le CSS ne sont pas vrai langages mais en attendant le CSS a les scores les plus bas dans toutes la liste :p


Sinon, en CSS facile/moyen/difficile j’ai 10, 9, 8 et je viens d’apprendre un truc.

(lien via)

Resizable HTML5 Canvas

#14355, par {lien_auteur}

Faire des canvas responsives.

Mettre #canvas { width: 100% } ne marchera pas : c’est comme mettre ça sur une image : ça l’étire. Il faut aussi modifier le $canvas.width en JS.

Solution :
– ajouter un event "resize" sur la fenêtre que va être déclenché que la fenêtre change de taille (et au chargement de la page).
– cet event va calculer la nouvelle taille du conteneur d’un canvas et et donner cette taille au canvas
– et va refaire tous les tracés.

Si on ne fait pas ça, le tracé est étiré ou comprimé si la taille du canvas dans les attributs width/height ne correspondent pas aux dimensions spécifiées en CSS.

Démo : http://ameijer.nl/demo/respondCanvas.html
(Ctrl+Alt+M pour resize dans Firefox)