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

Partagez | 
 

 [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Ven 27 Nov 2015, 17:46

Hello ! Alors je me lance dans un projet qui ne m'est pas destiné, mais que je compte faire pour mon papa. Pour la petite histoire, il est prof de maths et aimerait pouvoir mettre ses cours en ligne facilement sans devoir passer par un blog.
Et comme sa fille chérie (moi) a des cours de codage à son école, et qu'en plus elle est sur un forum où certains membres s'y connaissent un peu, et aussi parce que j'aime bien ça, je lui ai proposé de lui offrir ça pour son anniversaire (même si je pense qu'il l'aura plutôt pour la fête des pères Laughing).

Pour l'instant je ne recherche pas d'hébergeur, j'en suis tout juste au début du codage. En fait je suis en train de faire la maquette.
Spoiler:
 

Donc a mon idée on aurait un grand fond à motifs mathématiques plutôt diffus (la partie blanche). Diffus pour pas que ça n'agresse l'oeil.
Puis un fond plus petit (le gris) d'environ 750 ou 800px de large qui servirait de "cadre" au reste. Je pense le laisser dans un gris clair.
Ensuite on aurait le header, une barre de navigation et les textes.
Je me demandais ce qui serait le mieux : une barre de navigation comme je l'ai imaginée ou une colonne sur le côté qui mènerait à des catégories ? Comme je veux faire quelque chose d'assez épuré, zen, je penche pour la barre de navigation.
Ça c'est le squelette du truc.

Pour la page d'accueil je voulais faire un truc tout simple, petit mot d'accueil dans un cadre (ou pas je ne sais pas) + actualités du site.
Ensuite pour chaque catégorie je voulais faire un "accueil" catégorie avec des "cases" menant aux articles les plus lus, avec un extrait et/ou une image. Bien sûr le visiteur peut accéder à l'ensemble des articles via la barre de navigation. (il y aurait en haut le titre de la catégorie et éventuellement un brève description, je l'ai oublié dans la maquette)
Spoiler:
 

Les couleurs de tout ça ce serait dans les tons bleus, gris, blancs.

Et à terme je voudrais créer une interface pour que mon père puisse écrire ses articles/cours sans se prendre la tête avec du code, un peu comme le BO.





Dernière édition par Lehanna le Sam 09 Jan 2016, 17:08, édité 3 fois
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Ven 27 Nov 2015, 18:26

Je ne voies pas de difficulté de mise en page. As-tu réfléchi à la technologie que tu comptes utilisés ?

Tu suis quoi comme cours et ils traitent de quels langages ?

Au vue de la structure qui t'intéresse et dans la mesure ou tu veux faire épuré, tu devrais t'intéresser à bootstrap. il faut un peu comprendre le principe mais l'avantage et qu'il y a le style CSS qui est pre existant (menu, cadre, accordeao, etc...) et que cela te permettra d'avoir un site reponsive
-> http://getbootstrap.com/


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Ven 27 Nov 2015, 18:56

Dans mon cours on apprend le HTML5 et le CSS3 je crois. On utilise Brackets qui est libre de droit et qui a l'avantage de proposer deux fenêtres pour travailler le HTML et le CSS côte à côte.
Je file voir ton site Smile

Petite question, qu'est-ce qu'un site responsive ?

Sinon j'avais commencé le code, et même si à par le logiciel que tu me montres il ne servira peut-être à rien je le mets quand même ici (sait-on jamais)
Code:
<!DOCTYPE html>
<html>
   
    <head>
        <meta charset="utf-8"> <!-- lire les caractères latins -->
        <title>LOREM IPSUM</title>
        <link rel="stylesheet" href="accueil.css"> <!-- raccorder au fichier css -->
    </head>
   
   
    <body>
        <div id="conteneur">
           
            <h1 id="maintitle">@ LOREM IPSUM</h1>
       
        <!-- barre de navigation -->
       
        <nav id="nav1">
            <ul>
                <li><a href="#1">lien 1 v</a></li>
                <li><a href="#2">lien 2 v</a></li>
                <li><a href="#3">lien 3 v</a></li>
                <li><a href="#4">lien 4 v</a></li>
            </ul>
        </nav>
       
           
        <div id="contenu1">
            <!-- Accueil -->
        <!-- Intro -->
   
        <h1>Accueil</h1>
       
        <h2 id="st1">Quelques mots</h2>
        <p id="intro">Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret.</p>
            </div>
       
        <!-- Nouveautés -->
       
        <div id="contenu2">
        <h2 id="st2">Quoi de 9 ?</h2>
       
        <nav id="nav2">
            <ul>
                <li><a href="#1">lien 1</a></li>
                <li><a href="#2">lien 2</a></li>
                <li><a href="#3">lien 3</a></li>
                <li><a href="#4">lien 4</a></li>
            </ul>
        </nav>
        </div>
           
    </div>
    </body>
</html>

Code:
html {
    background-color: #999999;
}

body {
    display: block;
    background-color: #CCCCCC;
    max-width: 750px;
    margin: 10px auto;
    padding: 20px;
}

#conteneur{
    display: block;
    max-width: 750px;
    text-align: justify;
}

#maintitle{
    display: block;
    margin: 0px;
    padding: 20px;
    background-color: cornflowerblue;
    font-size: 4em;
    text-align: left;
    color: black;
    height: 150px;
    width: 710px;
    line-height: 150px;
}

#nav1{
   
}

#contenu1{
   
}
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Sam 28 Nov 2015, 18:47

Je croyais que Brackets c'était le nom de ton site...

OK donc Brackets c'est le nom du logiciel d'edition de text donc cela n'a rien à voir avec les langages de codage. Donc du coup cela n'entre pas comme parametre, il y a plein d'outils, il a l'air pas mal avec la coloration syntaxique.

Alors un site responsive c'est un site dont le visuel s'adapte selon le type d'écran (taille) mais aussi de support (ordi, tablette, smartphone). C'est la raison pour laquelle j'ai refait SA pour utiliser un template Responsive (payant avec un visuel préfait) qui repose sur bootstrap.

L'avantage est que tu peux télécharger des templates basiques dont la structure HTML/CSS est déjà existante. Ensuite a toi de prendre els briques de code et les organiser selon ton envie.
C'est totallement gratuit et ici : http://startbootstrap.com/template-categories/all/
Tu trouveras des templates gratuit qui te permettent d'avoir déjà la grosse partie de la structure toute faite. Il te reste a personnaliser.

Par contre tu veux faire un BO pour cela tu dois manipuler PHP et une base de donnée


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Sam 28 Nov 2015, 20:36

Ok donc si j'ai bien compris le principe de Bootstrap il y a des codes en open bar et tu te sers en modifiant ce que tu souhaites, voire en combinant plusieurs codes s'il le faut.
J'ai déjà repéré deux trois trucs intéressants, je pense que je vais me pencher sur le code. Je reviens ici dès que j'ai avancé un peu Wink
Et en effet un site responsive c'est pas mal du coup.

Oui Brackets et plutôt simple d'utilisation, je trouve ça pratique les couleurs pour mettre en correspondance les différentes balises et pour repérer qu'est-ce qui est balise, id, etc...

Le truc c'est que je voudrais que mon père puisse ajouter ses cours sans se prendre la tête avec le code... Mais du coup le php on a pas du tout fait encore et je ne sais pas si on compte l'aborder. Je demanderai !
Merci pour les tuyaux en tout cas.
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Sam 28 Nov 2015, 20:54

J'ai trouvé un truc qui me plaît assez, le clean blog http://startbootstrap.com/template-overviews/clean-blog/ et donc j'ai téléchargé le code et commencé à regarder.
De ce que j'en vois pour le moment c'est que le fichier css est hyper mal organisé, du moins par rapport à ce qu'on fait en cours. Donc pour l'instant j'essaie de remettre en forme et de comprendre à quoi correspond chaque partie... ça risque de prendre un moment.
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Sam 28 Nov 2015, 21:16

Bon j'ai fini d'organiser le CSS comme j'en ai l'habitude. Maintenant je vais entrer dans la phase "compréhension". Du HTML et du CSS du coup. Une première question qui me viendrait à l'esprit c'est qu'en réorganisant le CSS j'ai remarqué plusieurs fois (même souvent) les mentions -moz, à quoi servent-elles ? La mention webkit m'intrigue aussi. Je retourne bûcher, je sais pas si je serai très efficace mais bon
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Dim 29 Nov 2015, 12:17

-moz correspond a mozilla et -webkit à chrome. Ce sont des commandes pour que les navigateurs prennent en compte le css.

Tu es sur quel navigateur ?


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Dim 29 Nov 2015, 13:12

Sur Firefox. Donc du coup si je veux que mon code soit compatible avec tous les navigateur il faut que je le scinde en plusieurs parties avec à chaque fois les balises pour Mozilla pour Chrome et pour les autres ?
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Dim 29 Nov 2015, 19:26

Non ce n'est que pour certaines fonctionnalités arrivées avec le HTML5. Pour que les versions plus anciennes de navigateurs sachent l'interpréter

Avec firefox n'hésite pas à utiliser Examiner l'élément en faisant un clic droit pour voir rapidement quel CSS est en jeu et qeulle ligne et/ou fichier est utilisé



Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Dim 29 Nov 2015, 20:16

D'acc merci pour l'astuce !
Je vais commencer à me pencher sur le monstre et modifier un peu le design de base à mon idée. Une question, si jamais je suis bloquée et que je souhaite demander de l'aide, c'est plus facile pour vous (et toi) d'avoir le code dans les balises code ou que je partage un fichier zip avec les fichiers html et css dedans ?
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Dim 29 Nov 2015, 21:12

le fichier, j'ai mon propre logiciel d'edition de code avec mes reperes


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Mar 01 Déc 2015, 21:33

Alors voilà mon début de travail : mediafire.com download/koor4xqi277y924/squelette.rar

J'ai viré l'une des deux feuilles de style (celle qui s'appelle bootstrap.min.css) parce qu'elle était très fouilli base et que je ne comprenais pas vraiment à quoi elle servait dans le responsive... vu que les @media n'apparaissaient pas. En plus mon prof m'a dit que c'était plus facile de travailler sur une seule feuille de style.

Donc pour l'instant je planche sur la navbar. Dans l'idéal je voudrais répartir équitablement chaque catégorie sur l'ensemble de la bar. Le problème étant l'adaptation pour chaque écran (je ne peux pas prendre les mesures au pixel). Dans l'idéal également j'aimerais que cette barre reste pour les très petits écrans, mais je pense que je vais devoir traficoter un truc pour que ça reste esthétique dans ces cas là.
Je voudrais aussi qu'il y ait un bloc qui se surligne quand on passe la souris sur le lien (un bloc d'arrière plan je veux dire). J'y étais arrivé mais c'est parti quand j'ai surligné la deuxième feuille css, donc je chercherais dès que j'aurais résolu mon principal problème.
Qui est : je n'arrive pas à centrer verticalement mes liens dans la navbar. Peu importe où je place la vertical-align:middle; ça n'a aucun effet.
Et aussi j'aurais voulu instaurer des menus déroulants au niveau de chaque catégorie, ça doit être possible avec le CSS ? Sachant qu'à terme je pense qu'il y aura cinq catégories.

Voilà grosso modo le travail que je suis en train de faire sur cette bar.

Au niveau du header, mis à part le problème de placement des titres qu'il faut que je résolve, je ne pense pas le changer, pour moi il est simple et efficace.

Au niveau du corps du site je n'ai pas encore travaillé dessus du tout, donc je verrai après les deux étapes ci-dessus.


Il y a énormément de trucs que je ne comprends pas encore dans le code et sur lesquelles je ne me suis pas penchée, comme la correspondance de certaines class dans la feuille de style par exemple (une majorité de ce qui commence par les . au niveau du header et de la navbar par exemple). Il faut que je fasse des tests pour voir s'ils sont importants.
Dans tous les cas j'ai peur qu'ils soient importants puisque le site étant responsive ils interagissent peut être avec des formats d'écran autres que le mien.
Je crois que je m'y pencherai après avoir terminé la navbar et le header mais avant de m'attaquer au corps de ma page.


J'avais une dernière remarque mais j'ai oublié c'était quoi Rolling Eyes Si je m'en souviens je t'en fais part.
Si tu as des remarques sur l'organisation du code je suis plus que preneuse parce que j'y vais essentiellement au feeling.
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Ven 25 Déc 2015, 11:42

Bon pour l'école j'ai un autre site à faire, donc je mets celui-ci en pause et je m'y replonge dès que j'ai rendu ce premier projet. A bientôt
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 20
Localisation : Nord (59)

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Sam 09 Jan 2016, 17:07

Je le dépause, j'ai fini mon projet HTML de l'école donc je me remets sur celui-là. Je me penche vite à nouveau sur le code !
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Moderateur
avatar
Morgane07
Moderateur
Féminin Date d'inscription : 30/05/2013
Age : 27
Localisation : Chez les Ch'tis

MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   Jeu 25 Fév 2016, 17:47

RAPPEL

Bonjour Lehanna,

Cela fait 1 mois que tu n'es pas intervenu dans ce projet.
Merci de poster dans ce sujet pour nous indiquer s'il t'est toujours utile. Sinon, merci de nous indiquer aussi le statut dans le titre du sujet en précisant En pause - Abandonné - Terminé. Sans manifestation de ta part nous le classerons automatiquement dans deux semaines.

Bonne journée







clic:
 
Revenir en haut Aller en bas
Contenu sponsorisé


MessageSujet: Re: [R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet   

Revenir en haut Aller en bas
 
[R-25/02/16][Informatique - HTML5/CSS3] Création d'un site Internet
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Dépannages Informatique
» Un Modérateur en section Informatique
» Emploi, informatique, belgique, CV, location et tout ça
» Mr. L ◊ Le génie informatique [validé]
» Dread - tour informatique

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: