communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 Bloup et le codage

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : Précédent  1, 2, 3, 4  Suivant
AuteurMessage
Moderateur
avatar
Caco
Moderateur
Féminin Date d'inscription : 22/07/2010
Age : 28
Localisation : Yvelines (78)

MessageSujet: Re: Bloup et le codage   Ven 01 Nov 2013, 23:29

Oups... Oui désolée c'est parce que j'ai utilisé notre modèle pour la relance des questions et après ma journée de taff je dois plus y voir trop clair x)

Ok c'est noté! Smile




::♥☼♥::
 
Revenir en haut Aller en bas
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Ven 01 Nov 2013, 23:31

C'est pas grave ! Ta relance m'a fait me dire "zut, ça fait aussi longtemps que ça que je ne me suis pas secouée" affraid .
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Sam 23 Nov 2013, 19:06

Allez zou, je m'y remets, suffit les mauvaises excuses ! J'ai relu la partie qui explique le CSS !

J'ai compris que pour le CSS, il vaut mieux le faire dans un fichier à part, et faire un lien entre le fichier .html et le fichier .css avec la balise suivante :
Code:
<link rel="stylesheet" href="nomdufichiercss.css" />
Spoiler:
 

Donc petite remarque questionnante : il n'y a pas besoin de faire un lien dans le fichier .css pour indiquer qu'il s'applique à  un fichier .html particulier. Et donc, le fichier .css peut par exemple être appliqué à plusieurs pages d'un site web, ce qui évite de s'embêter à faire 50 000 fichiers .css si on veut garder la même forme partout (ce qui doit être rare mais bon ...)


J'ai aussi compris que pour changer la mise en forme d'une balise, il suffit de mettre son nom (p pour paragraphe, h1 pour un titre, etc)

Spoiler:
 

et que l'on peut combiner en mettant, séparé d'une virgule, plusieurs balises qui doivent avoir la même mise en forme, par exemple :

Code:
h1, em
{
    color: blue;
}
Pour les commenaitres j'ai compris que c'était
Code:
/* */
où on le souhaitait.


Pour mettre en forme une partie d'un texte, j'ai compris que je devais utiliser "class" avec ce code :
Code:
<p class="nom du paragraphe que je souhaite mettre en forme">texte du paragraphe</p>
Puis je fais le lien dans le fichier .css en donnant le nom du paragraphe que je souhaite mettre en forme comme ça :
Code:
.nom du paragraphe que je souhaite mettre en forme
Spoiler:
 

Et que utiliser "Id" à mon petit niveau n'avait pas trop d’intérêt !

Je viens aussi ENFIN de comprendre à quoi servait ces foutues balises "span" que je trouvais partout dans mes articles et qui me rendaient un peu dingue car je faisais un méli mélo de mise en forme partout, avec des span dans tous les sens !!!
Donc span sert à mettre en forme des parties de textes qui ne sont pas entourés par des balises particulières.

Spoiler:
 


Il existe plusieurs autres selecteurs de balises, pour mettre en forme. J'ai compris le principe, mais je ne trouve pas assez d'exemples concrets sur le site du zéro, je m'embrouille quand j'arrive à ceux là :

Code:
a[title]
{

}
Code:
a[title="Cliquez ici"]
{

}
Code:
a[title*="ici"]
{

}
Vous auriez des exercices pratiques pour que je comprenne mieux ?

J'en suis
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 24
Localisation : Au pays imaginaire ~

MessageSujet: Re: Bloup et le codage   Sam 23 Nov 2013, 19:35

Citation :
Je viens aussi ENFIN de comprendre à quoi servait ces foutues balises "span" que je trouvais partout dans mes articles et qui me rendaient un peu dingue car je faisais un méli mélo de mise en forme partout, avec des span dans tous les sens !!!
héhé les vilaines Razz

pour les dernières balises, mmhm... j'avoue que je ne m'en suis jamais servie Razz
en fait, ça sert à dire: je veux que les liens qui possèdent un titre soient en vert, ou rouge etc, ça sert à être plus précis dans ta mise en forme, ainsi tu peux mettre en forme différemment plusieurs liens, selon leur titre, leurs attributs, etc... peut-être que Fuyaya te dira ça mieux que moi!

en tout cas c'est super que tu t'y remettes cheers
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Sam 23 Nov 2013, 19:44

Oké, je comprends un peu mieux ! Merci ! Si tu ne t'en sers pas, ça me rassure !
Je vais attendre de voir si Fu passe par ici pour des infos supplémentaires Smile !

Rien à voir, mais je peux enlever du titre de mon sujet le [R - 01/11/2013] ?
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: Bloup et le codage   Sam 23 Nov 2013, 22:22

Oui tu peux re modifier ton titre puisqu'il redevient actif.

Au niveau des crochets ce sont des sélécteurs pour pointer plus spécifiquement des éléments. On peut aussi pointer par exemple tous les parents d'un type etc...
Je m'en sert rarement il faut dire je ne m'y suis pas vraiment intéressé mais c'est utile dans le cadre de menu au survol.

Alors juste une précision pour les classes et les id. Ce n'est pas une question de niveau de l'utilisateur c'est une question d'occurrence.
Si ce que tu veux mettre en forme ne doit apparaître qu'une fois dans une page alors on lui donne un id. Si cela doit apparaître plusieurs fois sur une page alors on lui donne une classe.
Ainsi le conteneur d'un page aura un id alors que le conteneur d'un résumé d'article aura une classe car on va pouvoir faire apparaître plusieurs résumé sur une page.

Tu demandais une exercice pour t'exercer au css c'est cela ? A Nath ou à moi ?

EDIT : As tu vu comment créer des menu horisontaux déjà ?


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Sam 23 Nov 2013, 23:30

Merci pour le titre, je vais changer !

Oké pour id, sur le site du zéro il expliquait en disant que ce n'était pas très utile pour des débutants les id ! Alors j'ai répété bêtement ^^ ! Je comprends mieux maintenant!

Et Oké pour les crochets, je trouve que c'est très embrouillant, enfin c'est le genre de trucs dans lesquels je m'emmêle car je me complique toute seule ! Si ce n'est pas fondamental, je ne vais pas m'y attarder pour éviter des nœuds dans mes quelques neurones !

Pour les exercices, je n'ai pas particulièrement demandé à Nat. Si l'une ou l'autre avez des petits trucs à mettre en pratique, je suis preneuse ! Je n'ai pas encore fini de lire les chapitre sur le site, donc ça ne presse pas, j'ai encore de quoi faire !
Mais c'est vrai qu'une fois ma lecture terminée, ça serait utile que je tente des exercices pratiques qui ne sont pas liés au site du zéro.

Revenir en haut Aller en bas
http://www.sims-artists.fr/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: Bloup et le codage   Sam 23 Nov 2013, 23:55

OK je vais commencer par un truc sans une structure trop complexe pour le menu à mettre en code mais je te donnerai des consignes pour qu'on voit comment tu appréhende les découpes et choix avant de faire le codage.

Tu es bien sur Photoshop ?

Et pour les menus tu as vu pour les mettre de manière horizontale ou pas ? Ce sera un exo 2 du coup.


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 11:28

Non je n'ai pas photoshop, je n'ai que gimp Neutral 
Je n'ai rien vu du tout pour les menus !
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 12:57

OK c'est parce que c'est dans tes logiciels. Il me semble que gimp sait tout de même lire les psd.

Ok donc pour ton exercice je ferai un menu classique et on verra ca par etape. Je tâche de préparer cela aujourd'hui


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 13:23

Ah oui, j'ai jamais modifié les logiciels, j'utilisais photoshop il y a très longtemps et je l'ai marqué sans réfléchir à mon inscription.

Si tu n'as pas le temps tout de suite, ce n'est pas grave pour les exercices, donc ne te mets pas de priorités pour moi si tu as des choses à faire + importantes !
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 15:26

Je double post, je continue ma lecture.

j'ai testé la modification de taille de police (ça se voit assez mal sur l'image)

Spoiler:
 

Le type de police

Spoiler:
 

Les barrés, soulignés, italiques, etc etc

Spoiler:
 

L'alignement du texte

Spoiler:
 

L'image flottante (pardonnez moi, j'ai eu la flemme de réfléchir à une image alors j'ai tapé image flottante sur google image et j'ai pris la première image de la liste !)

Spoiler:
 

La couleur de texte (j'ai mis un code au pif, ça fait vert caca d'oie, tant pis!)

Spoiler:
 

Le fond coloré

Spoiler:
 

Avec une sélection de texte d'une autre couleur

Spoiler:
 

L'image de fond (j'aime pas particulièrement les îles flottantes hin, j'ai la flemmitude aigue surtout!)

Spoiler:
 

Là j'ai mis qu'une image, pas de duplicata sur tout le fond, mais ça ne se voit pas, j'ai mal découpé ... !

Spoiler:
 

L'image de fond tout à droite

Spoiler:
 

Les effets d'opacité

Spoiler:
 

Spoiler:
 


Et maintenant j'arrive aux bordures. Je me demande, comment je peux faire pour que la bordure s'arrête au niveau du texte ? Je ne peux pas en fait, et je dois utiliser une autre balise qui fera un encadrement ?

Spoiler:
 

De plus, j'ai tenté les bordures aux coins arrondis, et ça ne fonctionne pas, je ne comprends pas pourquoi.

Voici ma page html

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        <p>Les Bordures</p>
    </body>
</html>
Et ma page css

Code:
h1
{
    border-radius: 10px;
}

Lien mémo Bloup
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 24
Localisation : Au pays imaginaire ~

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 16:05

Citation :
(j'aime pas particulièrement les îles flottantes hin, j'ai la flemmitude aigue surtout!)
ouais c'est trop tard, ta réputation est faite  

c'est pas mal du tout tout ça!! pour les bordures, il faut jouer sur les "margin" et "padding" pour que ça colle de près au texte, tu as déjà passé cette leçon?

pour ce qui est du bord arrondi... c'est chiant car il ne marche pas partout je crois. essaie en donnant une largeur et une couleur spécifique à ta bordure, des fois ça joue aussi dessus!
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 17:35

J'ai encore essayé avec border-radius mais ça ne veut toujours pas, au pire, je m'en passerais !

J'ai tenté en modifiant ce que tu me disais, margin et padding, j'ai réussi à centrer mon texte.

Spoiler:
 

Là c'est mon essai pour les ombres, avec bordure pour mieux donner l'effet

Spoiler:
 

Avec inset pour voir

Spoiler:
 

Et l'ombre du texte (j'aime bien ça, mais je sens qu'il ne faut pas en abuser pour que les yeux ne piquent pas trop !)

Spoiler:
 


Globalement j'ai pigé le principe, ce qui m'inquiète c'est l'addition de plusieurs trucs sur une page, j'ai peur de me perdre dans les lignes.

Edit : j'ai aussi testé les apparences dynamiques, je ne peux pas mettre des images mais j'ai aussi compris l'idée !


([http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/structurer-sa-page]J'en suis là[/url])
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 24
Localisation : Au pays imaginaire ~

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 19:49

Citation :
J'ai encore essayé avec border-radius mais ça ne veut toujours pas, au pire, je m'en passerais !
ah mais c'est dommage , j'adore ça moi :Pt'as essayé depuis un autre navigateur pour voir?

pour ce qui est de l'addition de tout ça, t'inquiète on peut pas se perdre! tout est très bien organisé comme tu peux le voir!
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 21:56

Pour les arrondis tu regardes avec quel navigateur ? et quelle version ?


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 22:04

Bon cela tombe bien que l'on soit dans les cours Particulier on va inaugurer le principe avec un premier exercice.

Un premier exercice qui implique en fait plusieurs choses :
1. Etudier une maquette pour déterminer la structure
2. Découper les éléments de la maquette et recueillir les infos
3. Intégration de la maquette en HTML et CSS

Voici l'aperçu de la maquette :



J'ai fait en sorte qu'elle ne soit pas complexe au niveau de l'architecture et on a un menu vertical pour être tranquille.

Il y a cependant des petits points auxquels il va réfléchir et ce sera l'occasion de voir comment faire plusieurs choses. Mais on verra cela au fur et à mesure.

Donc déjà est-ce que tu veux essayer selon mon programme ou tu préfères attendre un peu ?

Selon ce que tu me dis je te mettrai le fichier et les consignes


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 22:50

Woh, merci Fu !
Je veux bien me lancer dans les exercices. Je viens de m'apercevoir que lire comme ça et tester les balises, c'était bien, mais pas suffisant pour intégrer tout.
Je préfère aller chercher les infos au travers d'exercices, et fonctionner donc à l'envers. Je veux bien suivre ton programme !

Pour les arrondis, j'utilise firefox, la dernière version (25.0.1). Je n'ai pas testé sur un autre navigateur, il va falloir que je le fasse !
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: Bloup et le codage   Dim 24 Nov 2013, 23:00

Alors c'est normal que cela ne fonctionne pas il il y a des lignes de code pour Mozilla et encore d'autres lignes de code pour chrome et compagnie.

ce qui donnerait :

Code:
.btn {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
Je te fais cela demain là j'ai changé d'ordi je suis sur le boulot


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Lun 25 Nov 2013, 07:57

Pas de problème, je pars travailler aussi. J'avais testé avec moz-border-radius sans succès, mais je n'avais pas ajouté .btn .
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: Bloup et le codage   Lun 25 Nov 2013, 10:03

ah bein oui pour que ça marche tu dois l'associé à une class ou un id


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Lun 25 Nov 2013, 17:44

Je l'avais associé à un p ou h1, je ne sais plus ! Je retenterai dès que je m'y remets !
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: Bloup et le codage   Mar 26 Nov 2013, 17:07

Etudier une maquette pour déterminer la structure


Alors tout d'abord voici le lien vers la maquette faite sour Photoshop, Gimp lit les calques préviens moi s'il y a un soucis.
Télécharger la maquette ici : mediafire.com download/nd69jikvxi1mui6/exo_bloup1.rar

L'intégration d'un site ne se fait pas directement on a une phase de reflexion afin de déterminer en premier la manière dont on va découper une maquette.
C'est très important surtout si derrière on ajoute de la programmation. Je sais que ce n'est pas le propos mais j'explique pour comprendre l'importance de ce travail de réflexion.

La programmation c'est ce qui fait apparaitre le contenu du site. On va fonctionner avec des boucles c'est à dire que pour un menu on ne va pas ajouter une ligne de code pour chauqe élément. ON va aller chercher toutes les infos dans une table de donnée et lui dire d'afficher tout ce qu'il y a. C'est une ligne de code qui se répéte en boucle tant qu'il y a des infos dans la table.

Aussi quand on intégre une maquette HTML on garde ce principe à l'esprit en essayant de généraliser au maximum le code pour que le style soit utilisable dans une boucle. On peut avoir bien sûr des différence entre le premier et le dernier.
Dans ce cas là on n'aura pas seulement une classe on pourra en avaoir deux. En effet un même élément peut avoir deux classes.

Prenons un cas pratique l'élément d'un menu s'appellera .menu. Mais ce même élément doit avoir une apparence particulière quand on est sur la page concernée. à ce moment la cet élément aura deux classe .menu et .actif

On verra cela au moment du codage mais ce sont des choses que l'on doit projeter pendant le découpage. Ainsi on n'est pas obligé d'avoir une classe pour chaque élément on peut avoir deux classes, un qui contient les infos communes et l'autres les spécifique qui lui sera particulier (pourquoi pas un id d'ailleurs Wink )

Ce qui est à faire :

Donc tu vas dans un premier temps prendre la maquette et comme on est par ordi interposé plutôt qu'avec des stylos (sauf si tu as un scans) tu vas me fair une image avec le découpage que tu comptes opérer pour cette maquette. En légende les noms que tu vas donner aux différents éléments.

Ce que j'entends par découpe c'est ce genre de chose



Ce qui est important c'est de voir les contenant et les contenus et sous division. Ne t'arrête pas à une image si ça devient fouilli tu peux faire le gros de la structure puis détailler.

Dis moi s'il te manque des explications ou si tu as des questions.

A l'issu de cet exercice on verra tes choix s'il y a des choses qui ne me semblent pas logique ou optimale je te les indiquerai. Sachant qu'il y a toujours de multiples manières de coder !
Pour ma part je ne code pas en HTML5 mais je pense que je devrai suivre donc fait avec ce que tu as vu Very Happy 


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 29
Localisation : Plein Sud !

MessageSujet: Re: Bloup et le codage   Mar 26 Nov 2013, 17:50

Merci !!! Quel travail, c'est vraiment gentil de ta part !
J'ai pu l'ouvrir sans problème avec Gimp oui !
Je pense que j'ai compris ton explication. Je te répète avec mes mots, pour être de ne pas avoir perçu de travers :
Le fait de prendre le temps de comprendre comment est constitué une page permet d'apprendre à anticiper comment construire une page web ensuite. Il faut apprendre à bien réfléchir comment on va tout construire, pour gagner en simplicité et en énergie pour le codage.
Tu me demandes pour le moment de t'indiquer sur cette maquette, où est le header, le h1, etc etc, c'est bien ça?
Je me lance dans la semaine Smile !
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: Bloup et le codage   Mar 26 Nov 2013, 17:52

Oui c'est tout à fait cela et aussi de me dire ce qui sera une un id ou une class


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Contenu sponsorisé


MessageSujet: Re: Bloup et le codage   

Revenir en haut Aller en bas
 
Bloup et le codage
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 3 sur 4Aller à la page : Précédent  1, 2, 3, 4  Suivant
 Sujets similaires
-
» Editeur de chorégraphie sous excel
» sms sfr
» [Tuto] Tetris
» TKIP ou AES
» [Jeu] Vous jouez trop à Touhou quand...

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Section créative :: Vos projets :: Projets individuels :: Projets Individuels : Archivés & en pause-
Sauter vers: