Différences entre les versions de « W3.CSS »

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Pros, comp with Bootstrap)
 
(Install, using library, ressources)
Ligne 1 : Ligne 1 :
 
== Introduction ==
 
== Introduction ==
  
[https://www.w3schools.com/w3css/ W3.CSS] est comme un framework uniquement conçu pour [[CSS]]. Il permet le développement d'application web "responsive", c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).
+
[https://www.w3schools.com/w3css/ W3.CSS] est comme un framework uniquement conçu pour [[CSS]]. Il permet le développement d'applications web "réactives" (en anglais : 'responsive'), c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).
  
 
=== Avantages ===
 
=== Avantages ===
Ligne 9 : Ligne 9 :
 
* '''Facilité d'utilisation''' : si vous savez implémenter une classe dans une balise, c'est tout ce qu'il faut.
 
* '''Facilité d'utilisation''' : si vous savez implémenter une classe dans une balise, c'est tout ce qu'il faut.
  
== Comparaison avec Bootstrap == Traduit de [https://blog.hubspot.com/website/w3-css-vs-bootstrap]
+
== Comparaison avec Bootstrap ==  
  
* '''Facilité d'utilisation'''
+
''Traduit de https://blog.hubspot.com/website/w3-css-vs-bootstrap''
** W3.CSS n'utilise que [[HTML]] et [[CSS]]. À l'inverse, Bootstrap utilise aussi [[Javascript]] mais surtout pour les menus déroulants donc la plupart du temps le framework Bootstrap se fera sans JavaScript.
+
 
** W3.CSS est considéré comme un framework plus facile de prise en main et plus rapide à apprendre.
+
;Facilité d'utilisation
** Cependant si vous vous donnez du temps à apprendre Bootstrap, vous aurez accès à plus de puissance avec ce dernier (menus déroulants, carousels, etc.)
+
* W3.CSS n'utilise que [[HTML]] et [[CSS]]. À l'inverse, Bootstrap utilise aussi [[Javascript]] mais surtout pour les menus déroulants donc la plupart du temps le framework Bootstrap se fera sans JavaScript.
* '''Rapidité'''
+
* W3.CSS est considéré comme un framework plus facile de prise en main et plus rapide à apprendre.
** Si vous téléchargez chaque framework dans leur entièreté, W3.CSS est plus léger en terme d'espace mémoire, donc plus rapide.
+
* Cependant si vous vous donnez du temps à apprendre Bootstrap, vous aurez accès à plus de puissance avec ce dernier (menus déroulants, carousels, etc.)
** Cependant vous n'êtes pas obligés de télécharger Bootstrap dans son entièreté et il est conseillé de choisir ce dont il faut faut.
+
; '''Rapidité'''
* '''Utilisation'''
+
* Si vous téléchargez chaque framework dans leur entièreté, W3.CSS est plus léger en terme d'espace mémoire, donc plus rapide.
** Bootstrap semble être le framework le plus populaire sur internet comparativement à W3CSS. Mais à noter que W3CSS a été publié en 2016, soit six ans après la première version de Bootstrap.
+
* Cependant vous n'êtes pas obligés de télécharger Bootstrap dans son entièreté et il est conseillé de choisir ce dont il vous faut.
 +
; '''Utilisation dans le web'''
 +
* W3.CSS semble être un framework moins populaire sur internet comparativement à Bootstrap. Mais à noter que W3CSS a été publié en 2016, soit six ans après la première version de Bootstrap.
  
 
== Installation ==
 
== Installation ==
  
== Utilisation de la bibliothèque ==
+
W3.CSS peut être installé tout simplement en incorporant le fichier .css dans la page HTML qui l'utilise. Pour ce faire vous pouvez :
 +
 
 +
# Télécharger la dernière version (4.15 au moment de l'écriture de cette page, version de Décembre 2020) depuis le [https://www.w3schools.com/w3css/4/w3.css site officiel]
 +
# Utilisez le lien en ligne de w3.css.
 +
 
 +
=== Fichier téléchargé ===
 +
 
 +
Téléchargez votre fichier w3.css depuis le [https://www.w3schools.com/w3css/4/w3.css site officiel].
 +
 
 +
Puis incorporez le fichier w3.css comme lien dans l'entête de votre code :
 +
 
 +
<source lang="HTML5">
 +
<!DOCTYPE html>
 +
<html>
 +
<title>Ma page web</title>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
 +
<link rel="stylesheet" href="/mondossierquicontient/w3.css">
 +
</source>
 +
 
 +
'''Pensez à bien modifier le chemin d'accès à votre fichier w3.css'''
 +
 
 +
=== Lien au site ===
 +
 
 +
Le site officiel vous conseille d'utiliser le chemin de sa propre page web qui propose la dernière version de la bibliothèque :
 +
 
 +
<source lang="HTML5">
 +
<!DOCTYPE html>
 +
<html>
 +
<title>Ma page web</title>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
 +
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 +
</source>
 +
 
 +
== Quelles utilisations de la bibliothèque ==
 +
 
 +
Vous aurez la possibilité de modifier toutes vos balises selon vos envies. Par exemple, vous pourrez modifier la taille des '[https://www.w3schools.com/w3css/w3css_containers.asp containers]', des '[https://www.w3schools.com/w3css/w3css_panels.asp panels]', la [https://www.w3schools.com/w3css/w3css_colors.asp couleur], créer des [https://www.w3schools.com/w3css/w3css_tables.asp tableaux], rendre la page '[https://www.w3schools.com/w3css/w3css_responsive.asp réactive]', ajouter des [https://www.w3schools.com/w3css/w3css_animate.asp animations], créer des [https://www.w3schools.com/w3css/w3css_progressbar.asp barres de progression], montrer du [https://www.w3schools.com/w3css/w3css_code.asp code] et bien plus encore.
 +
 
 +
W3.CSS permet ''in fine'' d'éviter d'écrire votre propre fichier .css.
 +
 
 +
Un aperçu '''global''' des fonctionnalités de W3.CSS se trouve '''[https://www.w3schools.com/w3css/w3css_intro.asp ici]'''.
 +
 
 +
L''''intégralité''' des fonctionnalités de W3.CSS se trouve sur le bandeau de gauche de '''[https://www.w3schools.com/w3css/default.asp cette page]'''.
 +
 
 +
== Comment utiliser la bibliothèque ==
 +
 
 +
En général, il suffit d'ajouter une classe à la balise que vous souhaitez modifier et le tour est joué.
 +
 
 +
À noter que chaque classe de w3.css commence par le préfixe '''w3-''' , par exemple : '''w3-'''container, '''w3-'''teal, '''w3-'''input, etc.
 +
 
 +
Par exemple, pour une animation d'un texte arrivant de la droite il suffit d'ajouter à la balise souhaitée la classe ''w3-animate-right'' :
 +
 
 +
<source lang="HTML5">
 +
<div>
 +
  <h1 class="w3-animate-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
 +
</div>
 +
</source>
 +
 
 +
L'exemple peut être testé [https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_animate-right ici].
  
 
== Ressources ==
 
== Ressources ==
Ligne 31 : Ligne 92 :
 
* [https://blog.hubspot.com/website/w3-css-vs-bootstrap Comparaison avec Bootstrap]  
 
* [https://blog.hubspot.com/website/w3-css-vs-bootstrap Comparaison avec Bootstrap]  
  
[[Catégorie: JavaScript]]
+
[[Catégorie: CSS]]
 
[[Category: Ressources STIC]]
 
[[Category: Ressources STIC]]

Version du 31 janvier 2022 à 10:21

1 Introduction

W3.CSS est comme un framework uniquement conçu pour CSS. Il permet le développement d'applications web "réactives" (en anglais : 'responsive'), c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).

1.1 Avantages

  • Égalité d'implémentation quelque soit le moteur de recherche que vous utilisez (Chrome, Fireforx, Edge, IE, Safari, Opera) et quelque soit le support utilisé (Ordinateur de bureau/ portable, tablette, mobile).
  • CSS uniquement : pas besoin d'utiliser de bibliothèques comme jQuery ou JavaScript.
  • Facilité d'utilisation : si vous savez implémenter une classe dans une balise, c'est tout ce qu'il faut.

2 Comparaison avec Bootstrap

Traduit de https://blog.hubspot.com/website/w3-css-vs-bootstrap

Facilité d'utilisation
  • W3.CSS n'utilise que HTML et CSS. À l'inverse, Bootstrap utilise aussi Javascript mais surtout pour les menus déroulants donc la plupart du temps le framework Bootstrap se fera sans JavaScript.
  • W3.CSS est considéré comme un framework plus facile de prise en main et plus rapide à apprendre.
  • Cependant si vous vous donnez du temps à apprendre Bootstrap, vous aurez accès à plus de puissance avec ce dernier (menus déroulants, carousels, etc.)
Rapidité
  • Si vous téléchargez chaque framework dans leur entièreté, W3.CSS est plus léger en terme d'espace mémoire, donc plus rapide.
  • Cependant vous n'êtes pas obligés de télécharger Bootstrap dans son entièreté et il est conseillé de choisir ce dont il vous faut.
Utilisation dans le web
  • W3.CSS semble être un framework moins populaire sur internet comparativement à Bootstrap. Mais à noter que W3CSS a été publié en 2016, soit six ans après la première version de Bootstrap.

3 Installation

W3.CSS peut être installé tout simplement en incorporant le fichier .css dans la page HTML qui l'utilise. Pour ce faire vous pouvez :

  1. Télécharger la dernière version (4.15 au moment de l'écriture de cette page, version de Décembre 2020) depuis le site officiel
  2. Utilisez le lien en ligne de w3.css.

3.1 Fichier téléchargé

Téléchargez votre fichier w3.css depuis le site officiel.

Puis incorporez le fichier w3.css comme lien dans l'entête de votre code :

<!DOCTYPE html>
<html>
<title>Ma page web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/mondossierquicontient/w3.css">

Pensez à bien modifier le chemin d'accès à votre fichier w3.css

3.2 Lien au site

Le site officiel vous conseille d'utiliser le chemin de sa propre page web qui propose la dernière version de la bibliothèque :

<!DOCTYPE html>
<html>
<title>Ma page web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

4 Quelles utilisations de la bibliothèque

Vous aurez la possibilité de modifier toutes vos balises selon vos envies. Par exemple, vous pourrez modifier la taille des 'containers', des 'panels', la couleur, créer des tableaux, rendre la page 'réactive', ajouter des animations, créer des barres de progression, montrer du code et bien plus encore.

W3.CSS permet in fine d'éviter d'écrire votre propre fichier .css.

Un aperçu global des fonctionnalités de W3.CSS se trouve ici.

L'intégralité des fonctionnalités de W3.CSS se trouve sur le bandeau de gauche de cette page.

5 Comment utiliser la bibliothèque

En général, il suffit d'ajouter une classe à la balise que vous souhaitez modifier et le tour est joué.

À noter que chaque classe de w3.css commence par le préfixe w3- , par exemple : w3-container, w3-teal, w3-input, etc.

Par exemple, pour une animation d'un texte arrivant de la droite il suffit d'ajouter à la balise souhaitée la classe w3-animate-right :

<div>
  <h1 class="w3-animate-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>

L'exemple peut être testé ici.

6 Ressources

6.1 Liens