Ubuntu-fr

fran_studio

[abandon] Bonjour - besoin d'aide pour proposer un tutoriel

Bonjour, j'aimerais proposer le tutoriel suivant, mais je ne vois pas du tout comment on rajoute un article dans la documentation de Ubuntu. Voici le tutoriel que j'aimerai proposer:

Tutoriel UIkit

Présentation:

UIkit est un léger Front-End modulaire permettant de créer des pages web statiques et dynamiques, mais aussi de travailler sur des interfaces web rapides et puissantes. Un créateur de thèmes Wordpress et Joomla est proposé en version pro. Des modules JS et CSS sont proposés à l'utilisateur sous licence MIT par l'utilisateur janschoenherr sur GitHub. Les supports de lecture-écriture left-to-right et right-to-left sont proposés. On peut modifier automatiquement ces feuilles de style ou les inclure dans un autre projet, un compilateur LESS et un SASS sont proposés, et pour éviter des conflits lors de l'intégration d'autres styles, tous les sélecteurs de classe et les attributs commencent par le préfixe uk-. On peut migrer facilement la version de UIkit grâce à un outil JS dans un signet. Compatible avec les dernières versions de: Mozilla Firefox, Google Chrome, Internet Explorer, Microsoft Edge, Safari Web Browser, Opera Web Browser ainsi que leurs dérivés.

Installation avec npm:

mkdir UIkit-npm
cd ./UIkit-npm
sudo apt install nodejs npm
npm install uikit

Description des fichiers:

/src   Contient tous les Less, JavaScript ainsi que les images.
/dist   Contient les CSS et JS compilés, mis à jour à chaque sortie.
/tests   Contient les fichiers test HTML de tous les composants.

Plugins permettant de compléter automatiquement les feuilles de style avec les sélecteurs de classe et les sélecteurs d'identifiants normalisés par UIkit:
- Atom : uikit-atom
- Sublime Text 3: uikit-sublime

Autres plugins:
Celui-ci permet de rajouter automatiquement quelques templates:
- PHPstorm: intellij-uikit

Exemple d'utilisation pour la construction d'un simple site web statique:

Pour créer une page web statique, c'est le contenu de /dist qui nous intéresse. Il faut choisir entre la version uikit.css gauche-à-droite, .rtl droite-à-gauche, .min minimaliste. On ne peut que utiliser un fichier.css par page, mais on peut rajouter autant de fichiers.js que l'on souhaite, les fichiers -core, -icons et ceux dans /dist/js/components/ pourraient être rajoutés en plus.

Pour savoir comment inclure les sélecteurs de classe et les sélecteurs d'identifiants, il faut regarder la rubrique Components. Il n'y a pas exactement la même chose dans les pages de test, ça se complète puisque l'un est orienté CSS et l'autre JS. On peut isoler les codes avec le signet Aardvark pour comprendre comment ils fonctionnent, puis supprimer manuellement peu à peu le surplus de code, jusqu'à trouver le plus simple code décapé.

Créez votre dossier page web.

* Exemple de dossier page web:

page07.html
[fonts] -  amadeus-webfont.ttf amadeus-webfont.woff amadeus-webfont.woff2 arimakoshi-bold-sans-serif.otf arimakoshi-bold-sans-serif-webfont.woff
 arimakoshi-bold-sans-serif-webfont.woff2 'Freeware License.txt' kelvinch-roman-serif.otf kelvinch-roman-serif-webfont.woff kelvinch-roman-serif-webfont.woff2 'SIL Open Font License1.txt' 'SIL Open Font License2.txt' 'UBUNTU FONT LICENCE.txt' ubuntumono-bi-monospace-webfont.ttf ubuntumono-bi-monospace-webfont.woff ubuntumono-bi-monospace-webfont.woff2

[page07_images] - dark.jpg  light.jpg  photo.jpg
[style-uikit] - [css] - uikit.css
[style-uikit] - [js] - uikit-icons.js uikit.js

Il existe deux manières différentes de changer uikit.css pour importer ses polices de caractères, automatique ou manuelle.

* Configuration automatique de nouvelles polices de caractère à défaut sous LESS:

Les auteurs conseillent d'appliquer les modifications suivantes dans le fichier _base.less:

@base-body-font-family: "My New Body Font", Arial, sans-serif;
@base-heading-font-family: "My New Heading Font", Arial, sans-serif;
@base-code-font-family: "My New Monospaced Font", Courier, serif;
@navbar-nav-font-family: "My New Navbar Font", Arial, sans-serif;

* Modification manuelle de uikit.css pour personnaliser ses polices de caractère:

@font-face {
   font-family: 'body-font-family';
       src: url('../../fonts/kelvinch-roman-serif-webfont.woff2') format('woff2'),
            url('../../fonts/kelvinch-roman-serif-webfont.woff') format('woff'),
            url('../../fonts/kelvinch-roman-serif.otf') format('opentype');
            font-weight: 400;
            font-style: regular;
   }

 @font-face {
   font-family: 'heading-font-family';
   src: url('../../fonts/amadeus-webfont.woff2') format('woff2'),
        url('../../fonts/Amadeus.ttf') format('truetype'),
        url('../../fonts/amadeus-webfont.woff') format('woff');
        font-weight: 400;
        font-style: regular;
}

 @font-face {
   font-family: 'code-font-family';
   src: url('../../fonts/ubuntumono-bi-monospace-webfont.woff2') format('woff2'),
        url('../../fonts/ubuntumono-bi-monospace-webfont.ttf') format('truetype'),
        url('../../fonts/ubuntumono-bi-monospace-webfont.woff') format('woff');
        font-weight: 700;
        font-style: bold, italic;
}

 @font-face {
   font-family: 'nav-font-family';
   src: url('../../fonts/ubuntumono-bi-monospace-webfont.woff2') format('woff2'),
        url('../../fonts/ubuntumono-bi-monospace-webfont.ttf') format('truetype'),
        url('../../fonts/ubuntumono-bi-monospace-webfont.woff') format('woff');
        font-weight: 700;
        font-style: bold, italic;
}

 @font-face {
   font-family: 'logo-font-family';
   src: url('../../fonts/arimakoshi-bold-sans-serif-webfont.woff2') format('woff2'),
        url('../../fonts/arimakoshi-bold-sans-serif.otf') format('opentype'),
        url('../../fonts/arimakoshi-bold-sans-serif-webfont.woff') format('woff');
        font-weight: 700;
        font-style: bold;
}


ligne  48:   font-family: 'body-font-family', serif;
ligne 122:   font-family: 'code-font-family', monospace;
ligne 278:   font-family: 'heading-font-family', sans-serif;
ligne 444:   font-family: 'code-font-family', monospace;
ligne 3930:  font-family: 'nav-font-family', sans-serif;
ligne 7892:  font-family: 'logo-font-family', sans-serif;

* page07.html:

<html dir="ltr" lang="fr"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Page d'exemple: Article et Slideshow avec UIkit</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style-uikit/css/uikit.css">
        <!-- Les polices de caractère se changent au niveau de uikit.css-->
        <script src="style-uikit/js/uikit.js" defer="defer"></script>
        <script src="style-uikit/js/uikit-icons.js" defer="defer"></script>
</head>

    <body style="width: 50%; background: white none repeat scroll 0% 0%; text-align: left; margin: auto">

        <article class="uk-article">

            <h1 class="uk-article-title"><a class="uk-link-reset" href=""><u>Page d'exemple: Article et Slideshow avec UIkit</u></a></h1>

            <p class="uk-article-meta">Rédigé par <a href="#">Super Utilisateur</a> le 11 Décembre 2018. Edité sur <a href="#">cette page web</a></p>

            <p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Code: <pre> sudo apt-get install oneko; oneko</pre></p>

        </article>

    <div class="uk-h3">Disparaître - Fade</div>

        <div class="uk-position-relative uk-visible-toggle uk-light uk-slideshow" uk-slideshow="animation: fade">

            <ul class="uk-slideshow-items" style="min-height: 752.063px;">
                <li class="" style="">
                    <img src="page07_images/photo.jpg" alt="" uk-cover="" class="uk-cover" style="height: 892px; width: 1338px;">
                </li>
                <li class="" style="">
                    <img src="page07_images/dark.jpg" alt="" uk-cover="" class="uk-cover" style="height: 892px; width: 1338px;">
                </li>
                <li class="uk-active uk-transition-active" style="">
                    <img src="page07_images/light.jpg" alt="" uk-cover="" class="uk-cover" style="height: 892px; width: 1338px;">
                </li>
            </ul>

            <a class="uk-position-center-left uk-position-small uk-hidden-hover uk-slidenav-previous uk-icon uk-slidenav" href="#" uk-slidenav-previous="" uk-slideshow-item="previous"><svg width="14" height="24" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-previous"><polyline fill="none" stroke="#000" stroke-width="1.4" points="12.775,1 1.225,12 12.775,23 "></polyline></svg></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover uk-slidenav-next uk-icon uk-slidenav" href="#" uk-slidenav-next="" uk-slideshow-item="next"><svg width="14" height="24" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-next"><polyline fill="none" stroke="#000" stroke-width="1.4" points="1.225,23 12.775,12 1.225,1 "></polyline></svg></a>
        </div>

        <article class="uk-article">
            <p>&nbsp;</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </article>

    </div></body></html>

Dernière modification par fran_studio (Le 12/12/2018, à 12:04)

Roschan

Re : [abandon] Bonjour - besoin d'aide pour proposer un tutoriel

Je ne suis pas sûr que le wiki d'Ubuntu-fr.org, destiné aux utilisateurs de bureau avant tout, soit l'endroit idéal pour donner des tutoriels de programmation web

bruno

Re : [abandon] Bonjour - besoin d'aide pour proposer un tutoriel

Bonjour,

Effectivement je ne pense pas que le wiki soit le bon endroit pour ce type de tutoriels. Mais tu peux en discuter sur la liste de diffusion du wiki.

fran_studio

Re : [abandon] Bonjour - besoin d'aide pour proposer un tutoriel

Bonjour, d'accord, ce n'est pas grave, je le mettrais sur mon site web quand je le ferai.

Merci