Créer une page internet assez complexe

[ricou33]

Salut à tous,

 

Alors voilà mon projet, j'en ai marre, à chaque fois que j'ai envie d'écrire une citation, que ma mémoire me lâche et ne me rappelle pas son auteur, et même bien souvent la citation exacte. Il me reste alors la solution d'une recherche sur le net pas toujours fructueuse, ou alors d'abandonner.

Mais afin que ceci ne m'arrive plus j'aimerais faire un site regroupant des citations d'hommes (ou femmes) plus ou moins célèbre , quitte à faire quelque chose autant que sa profite à tout le monde.

Mais je ne souhaite pas me contenter d'une page ou elles seraient listés et où il faudrait une demi-heure pour trouver celle qu'on cherche, sinon je serais pas là. J'aimerais classer les citations par thème, pouvoir classer la meme citation dans différents thème, pouvoir faire une recherche par auteur et bien sûr par mot clé.

Si vous avez d'autres idées pour compléter ça je suis preneur mais je pense que c'est déjà pas mal.

Seulement il y a petit problème, c'est que je n'y connais rien, faire ça sous word ou excel pas de problème, mais faire ça pour le mettre sur internet je n'ai jamais fait. Mes compétences en html se limite à la création de quelques pages basique avec nvu.

 

Donc rassurez-vous, si je viens ici c'est pas pour vous demander de le faire à ma place ni de m'expliquer tout ça pas à pas, mais seulement me dire si c'est vraiment très très compliqué à faire ce que je souhaite ou si j'ai une chance de réussir tout de même, en sachant que j'ai la patience de le faire et que j'apprends tout de même assez bien.

Modifié le 7 décembre 2006 par ricou33

[KewlCat]

Ce n'est pas compliqué à faire, tu as une chance de "réussir tout de même"

Si tu veux le faire "sérieusement" tu peux envisager d'utiliser PHP et MySQL.

Par exemple :

- tu te fais une base de données pour stocker les citations, les auteurs, les catégories, les associations citation --> mots-clés et les associations citation --> catégories

- tu te fais une page de gestion (ajouter / modifier / supprimer) pour chaque élément

- tu te fais une page de formulaire de recherche

- tu te fais une page de résultats de recherche

 

Evidemment, tu peux faire ça "moins sérieusement" avec un fichier texte (format CSV, avec l'ensemble citation / auteur / catégorie / mots-clés) et des pages PHP...

 

Mais c'est jouable !

[ricou33]

Alors malgré tous les mp de dylav pour me décourager, malgré tous ses efforts pour me dissuader d'essayer

Heu... non en faite je crois qu'il m'a juste dit que ce serait pas facile et qu'il me souhaitait du courage.

Bref, grâce à l'enthousiasme de Kewlcat j'ai décidé d'essayer, j'suis curieux de voir si j'y arrive.

J'ai donc commencé de chercher sur internet comment fonctionne le php. Ben oui, tout ce que j'en connais c'est le nom. Mais je me suis vite rendu compte qu'apprendre le php sans connaître le html c'était pas terrible.

Je me suis donc mis "au cours" de html ce week-end. Je tiens à donner le site qui propose ces tutoriels parfaits pour les débutants et vraiment passionnant, c'est http://www.siteduzero.com/, si jamais d'autres fous n'y connaissant rien passait dans ce forum

En espèrant bientôt pouvoir laisser l'addresse de mon site ici. lol

Modifié le 10 décembre 2006 par ricou33

[mediaforest]

Dans un premier temps tu peux aussi utiliser uniquement PHPMyAdmin, qui te permettra de créer tes tables de données, d'y insérer tes citations, d'effectuer des recherches sur les citations stockées...

[ricou33]

J'ai terminné les cours html, je suis en train de faire 2 pages pour m'entrainer avant de passer au php.

J'ai 2 questions :

1- Dans ces 2 pages j'ai beauoup de photos à mettre, une vingtaine. Je les ai déjà réduite mais au total j'ai un peu plus d'1 Mo de photo par page.

Est-ce que c'est trop ou ça peut aller ?

 

2- J'aimerais ajouter une vidéo sur la page, qui soit visualisée dans le navigateur, la vidéo est au format .mov et je peux la convertir en .flv. Est-ce que c'est facile de l'ajouter ou pas ?

 

 

PS : merci Mediaforest, je regarderai plus tard phpmyadmin.

Modifié le 14 décembre 2006 par ricou33

[Dylav]

Salut Ricou,

 

Tu es drôlement rapide pour assimiler, toi, dis donc !

 

1) oui, 1Mo, c'est beaucoup pour une page. Même si aujourd'hui beaucoup de gens disposent de liaisons à haut débit, ce n'est pas encore le cas de tout le monde (pense à O.Fournier, par exemple, parmi les célébrités locales). Alors, si tu pouvais te limiter à 200 ou 300Ko par page, ce serait plus sympa pour les bas débits.

 

2) Pour l'insertion d'une vidéo, il existe un moyen tout bête, qui est de créer un lien actif directement vers ton fichier vidéo. En cliquant, le client verra automatiquement s'ouvrir en popup son lecteur par défaut du type de fichier concerné (par exemple Windows Media Player ou, mieux, VLC), et la vidéo démarrer. Dans l'exemple ci-dessous, le lien actif est une image-bouton à presser. Attention, il y a peut-être un ©opyright :

 

<a href="http://metal31.podemus.net/Video/un_hongrois_chez_les_gaulois.wmv">
 <img alt="Podcast" border="0" src="http://podemus.com/img/podcast-icon.gif" />
</a>

Il existe d'autres méthodes (balises <object>, <iframe>, ?), mais je ne saurais t'en expliquer facilement la mise en oeuvre.

[ricou33]

Merci du compliment Dylav, faut dire que c'est pas bien compliqué et puis je connais quand meme le principe de la programmation pour avoir vu faire une fois et parce que je lis les codes sources des pages de temps en temps. Et puis je n'ai pas appris toutes les balises par coeur non plus, je me suis fait un mémo sous word au fur et à mesure que je lisais pour les avoir sous la main.

 

Pour la vidéo j'aime pas trop cette méthode, moi ça m'ennerve quand je vois ce type de lien sur des sites, d'autant plus que mon lecteur vidéo n'a pas accès à internet

Bref j'ai quand même trouvé quelque chose qui m'a plut grâce à toi, j'ai cherché à les mettre avec une balise <object>. Ainsi j'ai pu intégrer un lecteur flash dans ma page, en plus les vidéo en flv sont quasiment 3 fois moins lourde qu'en mov pour la même qualité. Et t'inquiète pas pour le copyright c'est moi qui les ai faite avec mon appareil photo.

Par contre je croyais qu'on devait pas parler de politique sur zeb, n'est-ce pas dylav.

 

Donc ma première page est bien avancée, elle est pas complètement terminée mais elle est déjà présentable, ce qu'il me reste c'est du fignolage. Par contre elle fait 630ko et toutes les photos sont compressées au maximum, les vidéos quant à elles ne sont téléchargées que lors de la demande de lecture. Pour voir la page : http://perso.orange.fr/ricou33/rats/rats1.html

J'aurais quand même encore quelques questions :

1- j'ai mis le premier chapitre en double car j'ai utilisé 2 méthodes différentes et je ne sais pas laquelle est la mieux.

Dans la première j'ai créé un tableau sans bordure pour poser les films, les photos et les textes, tout est dans un tableaux

Dans la deuxième j'ai mis mon texte puis les films dans un paragraphe, la première image est en haut avec une balise float right et les 3 autres images sont chacunes dans un paragraphe différent en position absolute déffinit en px, ce qui n'est pas très pratique puisque si je modifie la page les photos ne suivront pas.

Est-ce que c'est possible d'aligner les 3 dernières photos par rapport la photo flottante avec des marges entre chaque ?

 

2- Dans la page il y a 4 zones de texte encadré, j'ai mis le cadre pour les reconnaitre. Ces textes sont dans une balise <em>, j'ai ensuite dans le css, définit pour em une taille de texte, le cadre provisoirement, et je voulais aussi que le texte soit centré, mais ce dernier point ne veut pas se faire, pourquoi ? Voici le code css :

em
{
width: 850px;
margin: auto;
border: solid 3px;
font-size: 90%;
text-align: center;
}

3- Si vous avez des conseils ou des commentaires n'hésitez pas, je suis preneur.

Modifié le 16 décembre 2006 par ricou33

[KewlCat]

1 - Pas le temps de regarder, désolé

 

2 - Tu utilises un élément (la balise <em>) qui est habituellement intégré au "flot" du document (c'est à dire considéré comme du texte au milieu d'autre texte). D'habitude, c'est une balise qu'on utilise plutôt pour mettre du texte en italique, mais bon, tu fais comme tu le sens Bref. Pour en revenir à notre souci, tu devrais déclarer cet élément en "display: block;" (vu qu'il est en "display: inline;" par défaut) si tu veux le voir prendre forme comme tu l'entends.

 

3 - Pas le temps, désolé

[fantassin-06]

Salut,

 

j'y connais pas grand chose, je suis comme toi j'apprend! si tu veux voir c'est ici Le mieux c'est avec firefox!

 

Mais tu pourrais peut être rajouter une image dans la barre d'adresse (devant le http://) comme l'engrenage devant l'adresse du site zébulon en ajoutant dans le "head":

 

<link rel="shortcut icon" type="image/x-icon" href="le_chemin_de_ton_image">

 

ça te fais le logo du site. Mais ne prend pas une image trop compliquée, c'est trop petit pour y voir quelques choses. Moi j'ai choisi les tablettes de la déclaration des droits de l'homme et c'est pas top!

 

Aprés, je te conseillerais de travailler sur le désign du site. (en séparant les vidéos sur une page et les photos sur une autre par exemple) Tu fais une page index avec des liens sur les pages et des liens hypertext pour développer ton apprentissage. Sur ta page actuelle ça fait un peu lourd à lire. Pour interresser le lecteur, il faut que ce soit fluide pour l'oeil. Je pense que tu as assez de matière pour travailler un truc bien perso.

 

Au début, j'avais travailler sur l'insertion de vidéos (que j'ai trouvé sur le net) que tu peux voir les ici (mais pas de commentaires sur ces images elles sont orientées en désaccord avec la charte de zeb ) Par défaut (dû à l'apprentissage) je les aient centrées, mais j'ai essayée de les séparés par des <br> ça aère un peu la vision.

Modifié le 16 décembre 2006 par fantassin-06

[Dylav]

Si tu veux voir c'est ici

Fantassin, j'attire ton attention sur le fait que l'utilisation des trois seules couleurs noir, bleu et rouge pour un document est strictement réservée aux organisations officielles de l'Etat. J'ignore si cette restriction est également valable pour les pages web. Dans ton cas, peut-être le simple fait que le fond soit bleu pâle (et non pas blanc) suffit-il à faire le distinguo. Mais vu le thème de ta page, je serais toi, je glisserais une petite fantaisie colorée quelque part, par exemple en haut à gauche.

 

Petite remarque annexe : tu devrais mettre une légère marge au-dessus de Marianne, grâce à un margin-top associé soit au <body> soit à l'<img> elle-même (cf. ci-dessous).

 

<link rel="shortcut icon" type="image/x-icon" href="le_chemin_de_ton_image">

Superbe astuce, que je vais tenter de mettre en oeuvre au plus tôt chez moi...

 

J'ai essayé de les séparer par des <br> ça aère un peu la vision

Tu disposes d'une solution plus orthodoxe, qui est de leur affecter des marges (une marge est un espace réservé en dehors du bloc concerné, en particulier au-dessus (margin-top). C'est également plus souple que le saut de ligne <br>, tu peux choisir ton unité et son ampleur (3em, 50px, 2%, etc.) Ci-dessous, la classe "image" permet de préserver un espace de 10 pixels au-dessus de l'image, et un de 5 pixels au-dessous.

 

<style type="text/css">
.image { margin-top: 10px; margin-bottom: 5px; }
</style>
...
<img class="image" src="AdresseDeMonImage" alt="Mon image" title="Mon image">
...

Excuse-moi, Ricou, d'avoir squatté chez toi...