Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Wiki
Pages
Dernière activité
Quoi de neuf
Nouveaux messages
Nouveaux articles
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Magasin
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
HTML/CSS - Présentation et utilisation de divers Framework
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Anthony." data-source="post: 7019738" data-attributes="member: 467323"><p style="text-align: center"></p> <p style="text-align: center"><img src="http://img11.hostingpics.net/pics/384422headertuto.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">Savez-vous ce que sont des <strong><span style="color: #b30000">framework</span></strong> ? Présents sous la <strong><span style="color: #b30000">plus part des langages de programmation</span></strong>, ils permettent d'utiliser<span style="color: #b30000"> <strong>des outils pré-crées</strong></span> pour accélérer le développement de sites internet. Ils sont nombreux,<span style="color: #b30000"> <strong>et en particulier dans les langages que nous allons traiter dans ce topic</strong></span> : à savoir HTML et CSS.</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><strong><span style="color: #b30000">L'intéret d'utiliser des framework</span></strong> pour le front-end est de pouvoir réaliser un site, pour la plupart des framework <strong><span style="color: #b30000">responsive-design</span></strong>, qui soit aussi bien compatibles sur PC que sur mobile ou tablette.<span style="color: #b30000"> <strong>C'est donc un vrai plus</strong></span> car aujourd'hui, les petits écrans prennent de l'ampleur....</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">Je vais, dans ce topic vous présenter <strong><span style="color: #b30000">divers framework</span></strong> qui me paraissent les plus <strong><span style="color: #b30000">intéressants</span></strong> , ainsi que leur utilisation.</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">Pour information, Maxence à fait il y a 1 an et demi la présentation <strong><span style="color: #b30000">complète</span></strong> du framework <strong><span style="color: #b30000">Bootstrap</span></strong>, qui est épinglé depuis le début, je vous laisser <a href="https://reality-gaming.fr/threads/decouvrir-bootstrap-un-framework-tres-utile-et-connu.323074/" target="_blank"><span style="color: #0000ff">cliquer ici</span></a> pour le découvrir <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">Présentation de <strong><span style="color: #b30000">ces framework</span></strong>:</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">- <strong><span style="color: #b30000">Bootstrap</span></strong></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">- <strong><span style="color: #b30000">FontAwesome</span></strong> (c'est pas vraiment un framework mais je le considère comme)</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">- <strong><span style="color: #b30000">SemanticUI</span></strong></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">- <strong><span style="color: #b30000">Foundation</span></strong></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><img src="http://img11.hostingpics.net/pics/8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"></p> <p style="text-align: center"><img src="http://image.prntscr.com/image/e10ddaf1dcdd4d50a27ec4a81e0d03b3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-size: 22px">Présentation du framework <strong><span style="color: rgb(179, 0, 0)">Bootstrap</span></strong></span></p> <p style="text-align: center"></p> <p style="text-align: center">Je ne vais pas trop nous attarder sur le sujet car [USER=232782]@Maxence ES[/USER] a déjà présenté ce <strong><span style="color: #b30000">framwork</span></strong> il y a maintenant 1 an et demi : cette présentation est complète et est <a href="https://reality-gaming.fr/threads/decouvrir-bootstrap-un-framework-tres-utile-et-connu.323074/" target="_blank"><span style="color: #0000ff">disponible ici.</span></a></p> <p style="text-align: center">Dans cette catégorie je vais tout simplement résumer l'essentiel sur Bootstrap.</p> <p style="text-align: center"></p> <p style="text-align: center">C'est un framework plutôt connu qui regroupe <strong><span style="color: #b30000">diverses fonctionnalités</span></strong>, qui veut se montrer souple mais complet. Il s'adapte , et s'en est sa force à tout type de plateforme, qu'il soit grand écran ou petit écran. Il permet un design <span style="color: #b30000"><strong>simple</strong> </span>et <strong><span style="color: #b30000">épuré</span></strong> jusqu'à la conception de grands thèmes. Il peut être, pour les utilisateurs avancés en <span style="color: #b30000"><strong>combinaison avec ses propres codes CSS</strong>.</span></p> <p style="text-align: center"></p> <p style="text-align: center">Il incarne un système de <strong><span style="color: #b30000">grille</span>, </strong>qui permet de faire "floater" les éléments que l'on place dans chacune des <strong><span style="color: #b30000">12 grilles</span></strong>. Il incarne aussi divers class pré-crées, tableaux, formulaires, navbar, des icons, des alertes... <strong><span style="color: #b30000">Il est très puissant et très facile d'utilisation, notamment grâce à son site internet</span></strong> qui répertorie toutes ses fonctionnalités (HTML/CSS/JS)</p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="font-size: 18px"><a href="http://getbootstrap.com/" target="_blank">---> Accéder</a></span></strong></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><img src="http://img11.hostingpics.net/pics/8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><img src="http://image.prntscr.com/image/9919010321354d678d4800dca92f901b.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p><p></p><p style="text-align: center"><span style="font-size: 22px">Présentation du framework <span style="color: rgb(179, 0, 0)"><strong>FontAwesome</strong></span></span></p><p></p><p style="text-align: center"><span style="font-family: 'Gotham narrow'">Vous connaissez surement ce framework extrêmement populaire que <strong><span style="color: #b30000">aussi RealityGaming</span> </strong>utilise: FontAwesome. Disons que ce n'est pas un framework pour <strong><span style="color: #b30000">la conception d'un site internet</span></strong> ou d'une page mais plutôt à sa <strong><span style="color: #b30000">finition</span></strong>. Il permet au fait d'ajouter des <strong><span style="color: #b30000">centaines</span></strong> de petits icons , divers et variées , sous différentes tailles.</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">Pour l'utiliser, il suffit <strong><span style="color: #b30000">d'inclure le framework</span></strong> à votre page et "d<span style="color: #b30000">'<strong>appeler</strong></span>" votre icon.</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">Sur RG, vous l'utilisez peut être sous cette forme:[FA ]fa-<strong><span style="color: #b30000">car</span></strong>[/ FA]</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">En HTML, il faudra faire par exemple de cette forme:<i class="<strong><span style="color: #b30000">car</span></strong>"></i></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">Qui donnera, au final, <strong><span style="color: #b30000">ceci:</span></strong> [FA]fa-car[/FA]</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">Super simple d'utilisation, d'installation (juste inclure un .min.css dans <link>) et extrêmement performant, <strong><span style="color: #b30000">ce framework est indispensable</span></strong> dans la conception d'un site internet</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 18px"><strong><a href="http://fontawesome.io/" target="_blank">--> Accéder</a></strong></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 18px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 18px"><img src="http://img11.hostingpics.net/pics/8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><img src="http://i.imgur.com/twi3WOn.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 22px">Présentation du framework<strong><span style="color: #b30000"> Semantic UI</span></strong></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px">Passons maintenant à <strong><span style="color: #b30000">Semantic UI</span></strong>, un autre framework qui se rapproche lui à <strong><span style="color: #b30000">Bootstrap</span></strong> avec d'autres <strong><span style="color: #b30000">fonctionnalités</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px">En effet, il propose des <strong><span style="color: #b30000">objets CSS</span></strong> avec un code HTML simplifié. Il est récent et donc<span style="color: #b30000"> <strong>adapté aux sites d'aujourd'hui</strong></span>, c'est à dire qu'il propose un<span style="color: #b30000"> <strong>design flat</strong> </span>et<span style="color: #b30000"> <strong>épuré</strong>. </span></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px">Comparé à Bootstrap, Semantic UI propose une<span style="color: #b30000"> <strong>large personnalisation</strong></span> de son code. Par exemple, chaque couleur qui est utilisée dans les codes CSS n'est pas fixe, c'est une variable que l'on configure qui est utilisée. Par exemple, un bouton type "primary" sera noté [USER=68484]@Blue[/USER], mais on peut très bien faire [USER=68484]@Blue[/USER] = red. Et bien d'autres.</span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px">Vraiment, il sera impossible de résumer toutes ses fonctionnalités en 4 paragraphes, il faut savoir que sa documentation le fait très bien. C'est un framework difficile à maîtriser au début, <span style="color: rgb(179, 0, 0)"><strong>mais qui mâche considérablement le travail</strong> </span>! Son installation est très simple, c'est juste donc <span style="color: rgb(179, 0, 0)"><strong>des fichiers CSS , JS</strong> </span>à télécharger, et directement les<span style="color: rgb(179, 0, 0)"> <strong>inclure dans votre page.</strong></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 18px"><span style="color: #0059b3"><strong><a href="http://semantic-ui.com/" target="_blank">--> Accéder</a></strong></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 18px"><span style="color: #0059b3"></span></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><img src="http://img11.hostingpics.net/pics/8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 22px"><img src="http://img15.hostingpics.net/pics/268938Sanstitre2.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 22px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 22px">Présentation du framework <strong><span style="color: #b30000">Foundation</span></strong></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px">Maintenant nous allons parler de <strong><span style="color: #b30000">Fondation </span></strong>un framwork de chez <strong><span style="color: #b30000">Zurb.com</span></strong>, il s'agit d'une framwork super-complet mais qui reste assez basique dans le théme de Bootstrap. Ils ont plusieurs <strong><span style="color: #b30000">similitudes</span></strong> comme <strong><span style="color: #b30000">( système de grilles pour les positionnements, système de layout responsive, éléments d'interfaces (des tableaux...) ect... )</span></strong></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px">Fondation propose aussi une r<strong><span style="color: #b30000">econnaissance de navigation</span></strong> que sa soit ( Ordinateur, tablette, téléphone ) comme ceci :</span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><span style="font-size: 15px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">[CODE]<strong class="show-on-desktops">Vous êtes sur un ordinateur.</strong>[/FONT][/CENTER][/FONT][/CENTER]</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">[FONT=Gotham narrow]</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">[CENTER][FONT=GothamNarrow-Book][CENTER]</span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><strong class="show-on-tablets">Vous êtes sur une tablette</strong></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><strong class="show-on-phones">Vous êtes sur un smartphone.</strong></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">[/CODE]</span></p><p></p><p><span style="font-family: 'Gotham narrow'"></span></p><p><span style="font-family: 'Gotham narrow'"></span></p><p style="text-align: center"></p> <p style="text-align: center"><strong><span style="font-family: 'Gotham narrow'"><span style="font-size: 18px"><span style="color: #0000b3"><a href="http://foundation.zurb.com/" target="_blank">--> Accéder</a></span></span></span></strong></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"><strong><img src="http://img11.hostingpics.net/pics/8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </strong></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'"></span></p> <p style="text-align: center"><span style="font-family: 'Gotham narrow'">Comme est</span><span style="font-family: 'GothamNarrow-Book'"> dit en introduction, </span><strong><span style="font-family: 'GothamNarrow-Book'"><span style="color: #b30000">HTML/CSS</span></span></strong><span style="font-family: 'GothamNarrow-Book'"> ne sont pas les seuls langages qui bénéficient de framework : il y a aussi des framework pour</span><span style="color: rgb(179, 0, 0)"><span style="font-family: 'GothamNarrow-Book'"> <strong>PHP</strong></span></span><span style="font-family: 'GothamNarrow-Book'"> (Zend etc.).</span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: right">Merci beaucoup tout le monde !</p> <p style="text-align: right"><strong>Anthony ES.</strong></p></blockquote><p></p>
[QUOTE="Anthony., post: 7019738, member: 467323"] [CENTER] [IMG]http://img11.hostingpics.net/pics/384422headertuto.jpg[/IMG] [FONT=Gotham narrow]Savez-vous ce que sont des [B][COLOR=#b30000]framework[/COLOR][/B] ? Présents sous la [B][COLOR=#b30000]plus part des langages de programmation[/COLOR][/B], ils permettent d'utiliser[COLOR=#b30000] [B]des outils pré-crées[/B][/COLOR] pour accélérer le développement de sites internet. Ils sont nombreux,[COLOR=#b30000] [B]et en particulier dans les langages que nous allons traiter dans ce topic[/B][/COLOR] : à savoir HTML et CSS. [B][COLOR=#b30000]L'intéret d'utiliser des framework[/COLOR][/B] pour le front-end est de pouvoir réaliser un site, pour la plupart des framework [B][COLOR=#b30000]responsive-design[/COLOR][/B], qui soit aussi bien compatibles sur PC que sur mobile ou tablette.[COLOR=#b30000] [B]C'est donc un vrai plus[/B][/COLOR] car aujourd'hui, les petits écrans prennent de l'ampleur.... Je vais, dans ce topic vous présenter [B][COLOR=#b30000]divers framework[/COLOR][/B] qui me paraissent les plus [B][COLOR=#b30000]intéressants[/COLOR][/B] , ainsi que leur utilisation. Pour information, Maxence à fait il y a 1 an et demi la présentation [B][COLOR=#b30000]complète[/COLOR][/B] du framework [B][COLOR=#b30000]Bootstrap[/COLOR][/B], qui est épinglé depuis le début, je vous laisser [URL='https://reality-gaming.fr/threads/decouvrir-bootstrap-un-framework-tres-utile-et-connu.323074/'][COLOR=#0000ff]cliquer ici[/COLOR][/URL] pour le découvrir :p[/FONT] [FONT=Gotham narrow]Présentation de [B][COLOR=#b30000]ces framework[/COLOR][/B]: - [B][COLOR=#b30000]Bootstrap[/COLOR][/B] - [B][COLOR=#b30000]FontAwesome[/COLOR][/B] (c'est pas vraiment un framework mais je le considère comme) - [B][COLOR=#b30000]SemanticUI[/COLOR][/B] - [B][COLOR=#b30000]Foundation[/COLOR][/B] [IMG]https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445[/IMG] [/FONT] [IMG]http://image.prntscr.com/image/e10ddaf1dcdd4d50a27ec4a81e0d03b3.png[/IMG] [SIZE=6]Présentation du framework [B][COLOR=rgb(179, 0, 0)]Bootstrap[/COLOR][/B][/SIZE] Je ne vais pas trop nous attarder sur le sujet car [USER=232782]@Maxence ES[/USER] a déjà présenté ce [B][COLOR=#b30000]framwork[/COLOR][/B] il y a maintenant 1 an et demi : cette présentation est complète et est [URL='https://reality-gaming.fr/threads/decouvrir-bootstrap-un-framework-tres-utile-et-connu.323074/'][COLOR=#0000ff]disponible ici.[/COLOR][/URL] Dans cette catégorie je vais tout simplement résumer l'essentiel sur Bootstrap. C'est un framework plutôt connu qui regroupe [B][COLOR=#b30000]diverses fonctionnalités[/COLOR][/B], qui veut se montrer souple mais complet. Il s'adapte , et s'en est sa force à tout type de plateforme, qu'il soit grand écran ou petit écran. Il permet un design [COLOR=#b30000][B]simple[/B] [/COLOR]et [B][COLOR=#b30000]épuré[/COLOR][/B] jusqu'à la conception de grands thèmes. Il peut être, pour les utilisateurs avancés en [COLOR=#b30000][B]combinaison avec ses propres codes CSS[/B].[/COLOR] Il incarne un système de [B][COLOR=#b30000]grille[/COLOR], [/B]qui permet de faire "floater" les éléments que l'on place dans chacune des [B][COLOR=#b30000]12 grilles[/COLOR][/B]. Il incarne aussi divers class pré-crées, tableaux, formulaires, navbar, des icons, des alertes... [B][COLOR=#b30000]Il est très puissant et très facile d'utilisation, notamment grâce à son site internet[/COLOR][/B] qui répertorie toutes ses fonctionnalités (HTML/CSS/JS) [B][SIZE=5][URL='http://getbootstrap.com/']---> Accéder[/URL][/SIZE][/B] [FONT=Gotham narrow][IMG]https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445[/IMG] [IMG]http://image.prntscr.com/image/9919010321354d678d4800dca92f901b.png[/IMG] [/FONT][/CENTER] [CENTER][SIZE=6]Présentation du framework [COLOR=rgb(179, 0, 0)][B]FontAwesome[/B][/COLOR][/SIZE][/CENTER] [CENTER][FONT=Gotham narrow]Vous connaissez surement ce framework extrêmement populaire que [B][COLOR=#b30000]aussi RealityGaming[/COLOR] [/B]utilise: FontAwesome. Disons que ce n'est pas un framework pour [B][COLOR=#b30000]la conception d'un site internet[/COLOR][/B] ou d'une page mais plutôt à sa [B][COLOR=#b30000]finition[/COLOR][/B]. Il permet au fait d'ajouter des [B][COLOR=#b30000]centaines[/COLOR][/B] de petits icons , divers et variées , sous différentes tailles. Pour l'utiliser, il suffit [B][COLOR=#b30000]d'inclure le framework[/COLOR][/B] à votre page et "d[COLOR=#b30000]'[B]appeler[/B][/COLOR]" votre icon. Sur RG, vous l'utilisez peut être sous cette forme:[FA ]fa-[B][COLOR=#b30000]car[/COLOR][/B][/ FA] En HTML, il faudra faire par exemple de cette forme:<i class="[B][COLOR=#b30000]car[/COLOR][/B]"></i> Qui donnera, au final, [B][COLOR=#b30000]ceci:[/COLOR][/B] [FA]fa-car[/FA] Super simple d'utilisation, d'installation (juste inclure un .min.css dans <link>) et extrêmement performant, [B][COLOR=#b30000]ce framework est indispensable[/COLOR][/B] dans la conception d'un site internet [SIZE=5][B][URL='http://fontawesome.io/']--> Accéder[/URL][/B] [IMG]https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445[/IMG] [/SIZE] [IMG]http://i.imgur.com/twi3WOn.png[/IMG] [SIZE=6]Présentation du framework[B][COLOR=#b30000] Semantic UI[/COLOR][/B][/SIZE] [SIZE=4]Passons maintenant à [B][COLOR=#b30000]Semantic UI[/COLOR][/B], un autre framework qui se rapproche lui à [B][COLOR=#b30000]Bootstrap[/COLOR][/B] avec d'autres [B][COLOR=#b30000]fonctionnalités[/COLOR][/B]. En effet, il propose des [B][COLOR=#b30000]objets CSS[/COLOR][/B] avec un code HTML simplifié. Il est récent et donc[COLOR=#b30000] [B]adapté aux sites d'aujourd'hui[/B][/COLOR], c'est à dire qu'il propose un[COLOR=#b30000] [B]design flat[/B] [/COLOR]et[COLOR=#b30000] [B]épuré[/B]. [/COLOR] Comparé à Bootstrap, Semantic UI propose une[COLOR=#b30000] [B]large personnalisation[/B][/COLOR] de son code. Par exemple, chaque couleur qui est utilisée dans les codes CSS n'est pas fixe, c'est une variable que l'on configure qui est utilisée. Par exemple, un bouton type "primary" sera noté [USER=68484]@Blue[/USER], mais on peut très bien faire [USER=68484]@Blue[/USER] = red. Et bien d'autres. Vraiment, il sera impossible de résumer toutes ses fonctionnalités en 4 paragraphes, il faut savoir que sa documentation le fait très bien. C'est un framework difficile à maîtriser au début, [COLOR=rgb(179, 0, 0)][B]mais qui mâche considérablement le travail[/B] [/COLOR]! Son installation est très simple, c'est juste donc [COLOR=rgb(179, 0, 0)][B]des fichiers CSS , JS[/B] [/COLOR]à télécharger, et directement les[COLOR=rgb(179, 0, 0)] [B]inclure dans votre page.[/B][/COLOR][/SIZE] [SIZE=5][COLOR=#0059b3][B][URL='http://semantic-ui.com/']--> Accéder[/URL][/B] [/COLOR][/SIZE] [IMG]https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445[/IMG] [SIZE=6][IMG]http://img15.hostingpics.net/pics/268938Sanstitre2.jpg[/IMG] Présentation du framework [B][COLOR=#b30000]Foundation[/COLOR][/B][/SIZE] [SIZE=4] Maintenant nous allons parler de [B][COLOR=#b30000]Fondation [/COLOR][/B]un framwork de chez [B][COLOR=#b30000]Zurb.com[/COLOR][/B], il s'agit d'une framwork super-complet mais qui reste assez basique dans le théme de Bootstrap. Ils ont plusieurs [B][COLOR=#b30000]similitudes[/COLOR][/B] comme [B][COLOR=#b30000]( système de grilles pour les positionnements, système de layout responsive, éléments d'interfaces (des tableaux...) ect... )[/COLOR][/B] Fondation propose aussi une r[B][COLOR=#b30000]econnaissance de navigation[/COLOR][/B] que sa soit ( Ordinateur, tablette, téléphone ) comme ceci : [/SIZE] [CODE]<strong class="show-on-desktops">Vous êtes sur un ordinateur.</strong>[/FONT][/CENTER][/FONT][/CENTER] [FONT=Gotham narrow] [CENTER][FONT=GothamNarrow-Book][CENTER] <strong class="show-on-tablets">Vous êtes sur une tablette</strong> <strong class="show-on-phones">Vous êtes sur un smartphone.</strong> [/CODE][/FONT][/CENTER][FONT=Gotham narrow][/FONT] [FONT=Gotham narrow] [/FONT] [CENTER][FONT=Gotham narrow][/FONT] [B][FONT=Gotham narrow][SIZE=5][COLOR=#0000b3][URL='http://foundation.zurb.com/']--> Accéder[/URL][/COLOR][/SIZE][/FONT][/B] [FONT=Gotham narrow] [B][IMG]https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimg11.hostingpics.net%2Fpics%2F8242838A06E2EF5BF95484AF3904FDAEE9D684E23153721F581F3C23pimgpshthumbnailwindistr.jpg&hash=6b700ab2f4a976dfaa5517a7a19cf445[/IMG] [/B] Comme est[/FONT][FONT=GothamNarrow-Book] dit en introduction, [/FONT][B][FONT=GothamNarrow-Book][COLOR=#b30000]HTML/CSS[/COLOR][/FONT][/B][FONT=GothamNarrow-Book] ne sont pas les seuls langages qui bénéficient de framework : il y a aussi des framework pour[/FONT][COLOR=rgb(179, 0, 0)][FONT=GothamNarrow-Book] [B]PHP[/B][/FONT][/COLOR][FONT=GothamNarrow-Book] (Zend etc.).[/FONT] [/CENTER] [RIGHT]Merci beaucoup tout le monde ! [B]Anthony ES.[/B][/RIGHT] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
HTML/CSS - Présentation et utilisation de divers Framework
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut