canal Web 6 | developpez.com | topic | labo participatif » Labs https://blog.developpez.com/canalweb6 Sat, 23 Mar 2013 00:27:17 +0000 fr-FR hourly 1 https://wordpress.org/?v=4.1.42 Avant de commencer… https://blog.developpez.com/canalweb6/p11856/labs/avant-de-commencer https://blog.developpez.com/canalweb6/p11856/labs/avant-de-commencer#comments Fri, 22 Mar 2013 18:04:50 +0000 http://blog.developpez.com/canalweb6/?p=85 Lire la suite →]]> En réfléchissant au premier topic que j’allais ouvrir, je me suis rendu compte qu’un atelier sans outils c’est comme un cadran solaire sans soleil, ça fonctionne pas !

Alors pour bien commencer et sans hésiter :

Création d’un Template pour les tests en HTML5 / CSS / JS.

Voici donc le Template.html, toutes les indications sont à l’intérieur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html lang="fr">
<head>
    <!-- UTF8, logiquement sans cache (mais j'ai des doutes), et utilisation de la dernière version de IE installé  -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <META http-equiv="EXPIRES" content="0">
    <META http-equiv="Pragma" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
       
    <!-- Titre de la page  -->     
    <title>Canal Web 6 | Avant de Commencer</title>
   
    <!-- Feuilles de style  -->  
   <!--  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" href="public/frontDesign/topics/style.css">
   
    <!-- Feuilles javascript  -->
     <!--<script src="http://jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"></script> -->
    <script src="library/Jusc/js/jusc.js"></script>
   
    <!-- Auteur de la page  -->  
    <meta name='Author' content="Ascito" />
   
     <!-- Pour les mobiles et tablettes  -->    
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <!--
   <script>
   $(document).ready(function() {
       console.log('jQuery est bien chargé ! ');
   });
   </script>
   -->  
</head>
<body>
   
<div id='page' >
    <div class='center'>
       <div class='jusc-grid'>
       <div id="header" class='color2 r2' >header</div>
       <div id="menu" class='color5 r1' >menu</div>
       <div id="content" class='color1 r7' >content</div>
       <div id="footer" class='color3 r1' >footer</div>
       </div>
    </div>
</div>  
</body>
</html>

Ainsi que le fichier css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/*
 * Auteur Ascito 20/03/2013
 *
 */
*{margin:0;padding:0;border:0;}
html,body {width:100%;height:100%;font-size:1em;background:#000;cursor:default;font-family:Arial, Verdana,sans-serif; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}
a{color:#38b8a8;cursor:pointer;}
.left{float:left;}
.right{float:right;}
.hidden {display:none;}
.visible{visibility:visible;}

#page{height:inherit;}

.jusc-grid div, h1, h2, h3, h4, h5, h6{float:left;width:100%;}
.jusc-grid.center, .jusc-grid .center,.center{width:980px;margin: 0 auto 0;}

#header{}
#content{}
#menu{}
#footer{}

.black{background:#000;}
.color0{background:#000;}
.color1{background:#889fa0;}
.color2{background:#189ba0;}
.color3{background:#22e7b6;}
.color4{background:#d824f3;}
.color5{background:#e68ff3;}



.jusc-grid .m3{margin:3px;}
.jusc-grid .m4{margin:4px;}
.jusc-grid .m7{margin:7px;}
.jusc-grid .m14{margin:14px;}
.jusc-grid .m17{margin:17px;}
.jusc-grid .p3{padding:3px;}
.jusc-grid .p4{padding:4px;}
.jusc-grid .p7{padding:7px;}
.jusc-grid .p14{padding:14px;}


.jusc-grid .c1{width:35px;}
.jusc-grid .c2{width:70px;}
.jusc-grid .c3{width:105px;}
.jusc-grid .c4{width:140px;}
.jusc-grid .c5{width:175px;}
.jusc-grid .c6{width:210px;}
.jusc-grid .c7{width:245px;}
.jusc-grid .c8{width:280px;}
.jusc-grid .c9{width:315px;}
.jusc-grid .c10{width:350px;}
.jusc-grid .c11{width:385px;}
.jusc-grid .c12{width:420px;}
.jusc-grid .c13{width:455px;}
.jusc-grid .c14{width:490px;}
.jusc-grid .c15{width:525px;}
.jusc-grid .c16{width:560px;}
.jusc-grid .c17{width:595px;}
.jusc-grid .c18{width:630px;}
.jusc-grid .c19{width:665px;}
.jusc-grid .c20{width:700px;}
.jusc-grid .c21{width:735px;}
.jusc-grid .c22{width:770px;}
.jusc-grid .c23{width:805px;}
.jusc-grid .c24{width:840px;}
.jusc-grid .c25{width:875px;}
.jusc-grid .c26{width:910px;}
.jusc-grid .c27{width:945px;}
.jusc-grid .c28{width:980px;}
.jusc-grid .c29{width:1015px;}
.jusc-grid .c30{width:1050px;}

.jusc-grid .r1{height:35px;}
.jusc-grid .r2{height:70px;}
.jusc-grid .r3{height:105px;}
.jusc-grid .r4{height:140px;}
.jusc-grid .r5{height:175px;}
.jusc-grid .r6{height:210px;}
.jusc-grid .r7{height:245px;}
.jusc-grid .r8{height:280px;}
.jusc-grid .r9{height:315px;}
.jusc-grid .r10{height:350px;}
.jusc-grid .r11{height:385px;}
.jusc-grid .r12{height:420px;}
.jusc-grid .r13{height:455px;}
.jusc-grid .r14{height:490px;}
.jusc-grid .r15{height:525px;}
.jusc-grid .r16{height:560px;}
.jusc-grid .r17{height:595px;}
.jusc-grid .r18{height:630px;}
.jusc-grid .r19{height:665px;}
.jusc-grid .r20{height:700px;}
.jusc-grid .r21{height:735px;}
.jusc-grid .r22{height:770px;}
.jusc-grid .r23{height:805px;}
.jusc-grid .r24{height:840px;}
.jusc-grid .r25{height:875px;}
.jusc-grid .r26{height:910px;}
.jusc-grid .r27{height:945px;}
.jusc-grid .r28{height:980px;}
.jusc-grid .r29{height:1015px;}
.jusc-grid .r30{height:1050px;}

 
@media screen and (max-width: 1015px)
{
.center{width:630px ;margin : 0 auto 0;   }
}
 
@media only screen
and (min-width : 768px)
and (max-width: 1024px) {
.center{width:630px ;margin : 0 auto 0;   }
}

@media screen and (max-width: 665px)
{
.center{width:315px ; overflow:hidden;  }
}

Le fichier .css comprend un reset minimal, ainsi qu’une grille base 7, j’ai choisi d’utiliser 35px comme tranche. Je suis assez surpris et convaincu du résultat et des combinaisons que l’on peut obtenir avec facilité tout en gardant à l’esprit l’intégration pour tablettes et mobiles.

Comme largeur pour la zone centrale, vous trouverez 980px, ce qui correspond donc à 28 segments de 35px. C’est un tout petit peu moins que 1024 : cela permet d’avoir une « marge » de manœuvre et de passer en largeur inférieure sans problème. En regardant de plus près le créneau 945 quant à lui dispose de 3 zones de 315px, qui est un tout petit moins que 320 utilisé par les mobiles.

Dans ce fichier .css j’utilise le préfixe « jusc », que nous retrouverons tout au long des topics et qui correspond au domaine principal de la librarie JS/PHP que nous allons créer. C’est en quelque sorte le noyau de la bécane.

Il nous servira en javascript à protéger nos Class, nos variables mais aussi à créer des widgets jQuery respectueux des recommandations… Le lien css se fera directement. En php il aura pour principale vocation de gérer le gestionnaire d’exception.

Le fichier Javascript contient pour l’instant la déclaration de la class mère « jusc »

1
2
3
4
5
6
7
8
9
10
11
12
/*
 * Auteur Ascito 20/03/2013
 * Version 1.1
 * Class jusc, Object window.jusc, domaine jusc
 */
var jusc = {
   
    init:function(){
        return false;
    }
   
}

Merci à Symlink pour sa re-lecture et pour m’avoir soumis l’idée d’ajouter l’arborescence type du projet.

arbo

Premiers outils[FAIT], fin prêt pour une prochaine aventure.

N’hésitez pas à laisser vos commentaires, correctifs possibles, idées, etc..

]]> 0