Free Font GoodDog by Fonthead Design This license can also be found at this permalink: ———————————————————————————————————— Fonthead Design End User License Agreement———————————————————————————————————— By downloading and/or installing Fonthead Design fonts ("software") you agree to the following user license terms: 1) Grant of License: The purchase of this software grants to you ("user") as licensee, the non-exclusive right to use and display the software at a single home or business location on a maximum of 5 CPUs. You also may give a copy of this software to any service bureau which you hire to output your film, paper or color proofs, provided that they do not use the font software for any purpose other than outputing your work. They may keep the font software on file for use with future jobs on your behalf. 2) Backup: One copy of the software may be made for backup. 6) Ownership of software: The software and all subsequent copies are the property of Fonthead Design.
calculetteVw The responsive web have taken over the Internet long time ago, but common practice is still static values when defining the font-size attribute (...or at least semi static font sizes targeting different viewport widths with media queries). A consequence of this approach is that the line lengths varies a lot between different viewport widths, causing both aesthetic and legibility problems. But with improved modern CSS support we now have new features such as CSS viewport units. This opens up for a more complete responsive approach when it comes to defining font sizes (without using JS). This is very useful stuff, and in my mind every developer building responsive websites should pick this up ASAP. To help you get started with font-size viewport units, we have developed a handy measurement calculation tool to enable you to convert your old measurements to the new world. Viewport width unit 'vw' is short for 'viewport width' and a percent value of the width of the viewport.
The vanilla Javascript basics to know before learning React JS - DEV Background Story If you just finished JavaScript online courses or other self-taught resources going to your first JS framework can be scary. One thing I would like to encourage you is that we all have some doubts as a beginner. But pushing through the 'fear/doubt' of I don't think 'I am ready enough' or 'smart enough' is something that you go through. Let's get started with the vanilla javascript basics In the process of learning React JS, I have found a few things you should understand before starting it. Es6/ES7 classesArrow functionslet and constImports and ExportsSpread and rest operatorDestructuringArray functions especially filter and map Using Let and Const variables Before var was used to set new variables but with the ES6 updates let and const were introduced. For more about const take a look at W3Schools section on const Arrow functions When I started learning about arrow functions, I immediately loved them. Named functions without arguments Named functions with arguments
Srcset et size L’attribut srcset L’attribut srcset, est un attribut pour les balises images qui permet de résoudre les problèmes que pose l’intégration de site responsive avec des images. Cet attribut vient en corrélation de l’attribut src habituel d’une image et permet de spécifier une liste d’image à afficher selon certain critère. Cela ressemble étrangement au média queries, mais la façon de penser est un peu différente. En effet une média querie vas dire : utilise ceci quand la taille du conteneur est moyenne, alors que srcset vas dire dire : cette image est de taille moyenne. en pratique cela donne ce morceau de code : Si l’attribut srcset n’est pas supporté, c’est l’attribut src qui par défaut prend le relais. Pour connaitre les limites techniques des navigateurs à l’heure actuelle sur cet attribut je vous laisse regarder can i use. Descripteurs On peut aussi voir que chaque images précisé dans le srcset est suivi d’un chiffre et d’un w. w : est un indicateur de la taille de l’image pour le navigateur.
Découvrez le fonctionnement des sites web - Apprenez à créer votre site web avec HTML5 et CSS3 Bonjour et bienvenue à toutes et à tous ! Voici donc le premier chapitre de ce cours pour débutants, qui va vous apprendre à créer votre site web ! Nous allons passer un certain temps ensemble, tout dépendra de la vitesse à laquelle vous apprendrez. Si vous lisez ce cours régulièrement et à une bonne vitesse, vous l'aurez terminé en une à deux semaines. Je vous propose de commencer par la question la plus simple mais aussi la plus importante : comment fonctionnent les sites web ? Le fonctionnement des sites web Comment fonctionnent les sites web ? Non, n'ayez pas peur de poser des questions, même si vous pensez qu'elles sont « bêtes ». Je suis certain que vous consultez des sites web tous les jours. Avec le navigateur, vous pouvez consulter n'importe quel site web. Je suis sûr que vous avez l'habitude d'utiliser un navigateur web ! J'ai entendu parler de HTML, de CSS, est-ce que cela a un rapport avec le fonctionnement des sites web ? Tout à fait ! Les rôles de HTML et CSS L'éditeur de texte
srcset Le gros problème du Responsive Web Design tient probablement dans la gestion des ressources chargées et utilisées sur une page web, utiles à notre terminal et adaptées à notre écran ou notre fenêtre de consultation. Stéphanie nous en parlait déjà avec Responsive Webdesign - présent et futur de l'adaptation mobile. Je vous avais parlé l'an dernier de l'annonce du moteur WebKit (12 août 2013) concernant son support de l'attribut srcset ; c'est aujourd'hui Google qui publie la version 34.0.1847.116 (retenez 34, ça suffira) de son navigateur Chrome (qui est passé sous moteur Blink, fork récent de WebKit). Parmi les mises à jour, on retrouve les corrections de sécurité habituelles, mais également la prise en charge partielle de l'attribut srcset pour les éléments images <img>. L'attribut srcset, principes Lorsque vous insérez une image dans votre page web, il y a de fortes chances pour que vous utilisiez un code semblable à : Attribut srcset : exemple Et un peu plus élaboré : Démonstration
Les balises HTML et leur rôle - Apprendre le développement web Cet article aborde les bases de HTML : les balises et comment les utiliser. HTML (HyperText Markup Language) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.). Un document HTML est un fichier texte qui contient des balises (ou tag en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Le navigateur n'affiche pas les balises telles quelles. La syntaxe des balises Les balises HTML respectent une syntaxe simple et stricte : Un chevron ouvrant (<) Le nom de la balise Des attributs (optionnels). Voici quelques exemples : Les éléments HTML Généralement, les balises fonctionnent par paires. Un élément HTML se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante : La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres : Les balises HTML <div> et <span> <ul>, <ol> et <li>
C'est quoi le Responsive Web Design ? - Alsacreations Consacré "mot-clé de l'année 2013" par le célèbre magazine Mashable, le Responsive Web design (RWD) est aujourd'hui incontournable dans nos projets web (et dans les cahiers des charges de nos clients)… mais demeure toujours aussi confus et insaisissable même chez les professionnels ! Voici donc une petite introduction pour mieux comprendre ce phénomène... Ébauche de définition Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau). Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages. Le terme de "Responsive Web design" a été introduit par Ethan Marcotte dans un article de A List Apart publié en mai 2010. Site dédié, application ou responsive ? Un site dédié
Qu'est-ce que le contrôle de version ? Le contrôle de version, également appelé contrôle de source, désigne la pratique consistant à suivre et à gérer les changements apportés au code d'un logiciel. Les systèmes de contrôle de version sont des outils logiciels qui permettent aux équipes de développement de gérer les changements apportés au code source au fil du temps. Avec l'accélération des environnements de développement, les systèmes de contrôle de version aident les équipes de développement à travailler plus rapidement et plus intelligemment. Les logiciels de contrôle de version gardent une trace de chaque changement apporté au code dans un type spécial de base de données. Pour la plupart des projets de développement, le code source est comme les joyaux de la couronne : un bien précieux dont la valeur doit être protégée. Les développeurs qui travaillent en équipe écrivent continuellement du nouveau code source et modifient le code source existant. Un historique complet des changements à long terme de chaque fichier.
Media et Meta Quand vous travaillez sur un nouveau design de site Web, une des choses auxquelles il faut penser est le « responsive design ». Est-ce que le site que vous allez développer a besoin d'un « responsive design » ? Tous les sites Web aujourd'hui devraient prendre en considération l'aspect « responsive design ». Le « responsive design » c'est lorsque le design de votre site s'adapte à la résolution de l'écran de votre visiteur. Les différents paramétrages définissent chacun une fourchette de largeur qui utilisera un style particulier. Vous pouvez définir ces paramétrages directement avec une largeur en pixels ou bien avec un ratio minimum en pixels. Le code suivant peut vous aider à démarrer avec les « media queries ». Le méta tag « viewport » dicte au navigateur quel comportement il doit adopter pour afficher une page ; vous pouvez spécifier la largeur qu'adoptera le « viewport ». Le « viewport » correspond à la partie de la page affichée à l'écran.
Qu'est-ce que Git : devenez un pro de Git grâce à ce guide Git est de loin le système de contrôle de version le plus largement utilisé aujourd'hui. Git est un projet open source avancé, qui est activement maintenu. À l'origine, il a été développé en 2005 par Linus Torvalds, le créateur bien connu du noyau du système d'exploitation Linux. De plus en plus de projets logiciels reposent sur Git pour le contrôle de version, y compris des projets commerciaux et en open source. Les développeurs qui travaillent avec Git sont bien représentés dans le pool de talents disponible, et la solution fonctionne bien sur une vaste gamme de systèmes d'exploitation et d'environnements de développement intégrés (IDE). Par sa structure décentralisée, Git illustre parfaitement ce qu'est un système de contrôle de version décentralisé (DVCS). En plus d'être décentralisé, Git a été conçu pour répondre à trois objectifs : performances, sécurité et flexibilité. Performances Les performances brutes de Git sont très élevées par rapport à de nombreuses alternatives. Sécurité
Viewport Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial
Définitions et usages du HTML et du CSS – Pierre Giraud Nous allons dans cette leçon poser une première définition du HTML et du CSS et comprendre plus précisément quel va être leur rôle dans la création d’un site Internet. On va ainsi expliquer ce qu’on peut faire et ce qu’on ne peut pas faire avec chacun de ces deux langages. Le HTML : langage de balisage Le HTML est un langage qui a été créé en 1991. Les sigles « HTML » sont l’abréviation de « HyperText Markup Language » ou « langage de balisage hypertexte » en français. Le HTML est donc un langage de balisage, c’est-à-dire un langage qui va nous permettre de définir les différents contenus d’une page. Pourquoi est-il si important de définir les différents contenus d’une page ? Ici, je vais essayer de rester le plus simple possible. Pour que les différentes ressources constituant un site internet soient toujours accessibles, on les héberge généralement sur un serveur d’un hébergeur professionnel comme OVH par exemple. Comment accède-t-on à une page d’un site internet ?
Pourquoi Si vous ne disposez pas (encore) d'un site web Responsive Design, c'est sans doute parce que vous ne percevez pas tous les avantages que vous pouvez en tirer. Il y a même de fortes probabilités que vous ne captiez pas les mobinautes et que vous perdiez une part grandissante de trafic. Aujourd'hui, 50% du trafic web se fait en mobilité (13% il y a seulement un an....) et 60% des emailing sont désormais lus sur tablette et/ou smartphone (source Statcounter). Je vais tenter de vous expliquer (et de vous convaincre) pourquoi un site web Responsive Design vous aidera à obtenir plus de visiteurs, et comment ne pas adopter cette conception graphique pourrait être pénalisant votre activité. S'adapter aux plateformes mobiles La plupart de vos visiteurs actuels (et potentiels) sont probablement arrivés sur votre site en utilisant un appareil mobile (tablette ou smartphone). Améliorer l'expérience utilisateur Optimisation marketing Augmenter sa visibilité sur les moteurs de recherche Rester pertinent