Cela fait 2 semaines que je n’ai pas mis d’article, je m’en excuse et expliquerai les raisons de ce manque dans un prochain article, lorsque je reviendrai sur cette année 2017 pour en faire le bilan.
J’avais une idée bien précise du design que je voulais pour ce site Media-Center. Pour cela j’ai d’abord fait un tour sur inDesign (comme toujours quand je fais des recherches de pattern). Je suis arrivé à un point qui me plaisait et je suis donc logiquement passé à l’intégration WEB.
(Les codes-sources seront disponibles plus bas sur la page)
Je suis donc fier de vous présenter les deux principales pages qui seront présentes.
La page d’accueil (INDEX). Pour l’instant je n’ai fait que le design pour les films, la page des séries sera légèrement différente mais je n’ai pas eu le temps de m’y attaquer.
Lorsque l’on clique sur l’image de présentation d’un film, cela nous redirige vers sa page dédiée. J’ai mis un nombre considérable d’informations car ce sont celles que je regarde le plus lorsque je recherche un bon film. Ces informations seront plus tard intégrées comme des ‘TAGS’ pour qu’ils soient cliquables. Je m’explique, prenons l’exemple de Dunkerque. Si je veux voir tous les films réalisés par Christopher Nolan, il me suffit de cliquer sur son nom et cela m’affichera tous les films qu’il a fait (et qui sont indexés / répertoriés dans la base de données évidemment). De même pour les acteurs, je peux cliquer sur leurs noms pour voir dans quels autres films ils ont joués. Ainsi que pour l’année de sortie, catégorie, … Vous aurez compris le principe 🙂
La même présentation sur un autre film
J’espère que le projet vous plait, finallement seul le design sera fini pour Décembre. Je continuerai à travailler sur ce projet quand j’en aurai le temps et l’envie. Je n’ai pas vraiment d’idée du moment où une première release sera disponible et totalement fonctionelle.
Quoi pour le futur ?
Comme je l’ai dit précédemment, le système de tags n’est pas encore mis en place. Pour cela j’attends de coder la partie BACK-END du site.
Ce qui arrivera dans les futures semaines / mois:
– Un système d’administration où il sera possible d’ajouter / modifier / supprimer des articles (FILMS)
– Une page d’accueil dynamique en PHP, où les films seront triés alphabétiquement
– L’entièreté de la partie ‘SERIES’
– Un système de recherche pour trouver les films
– Un bouton ‘random’ pour avoir un film choisi aléatoirement
– Système de catégorie / tags cliquables
CODES SOURCES:
INDEX:
<!DOCTYPE html><html><head>
<title>CMS</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="./assets/css/main.css"/>
</head>
<body>
<div>
<nav id="sidebar">
<ul>
<a href="./index.html"><i class="fa fa-film icon" style="color: #930000;" aria-hidden="true"></i></a>
<i class="fa fa-television icon" style="color: #009300;" aria-hidden="true"></i>
</ul></nav>
<div class="highbar">
<h4>KELOU MEDIACENTER - DEV EDIT</h4>
</div>
<div class="divider">
<article><a href="./Patriots-Day.html"><img src="assets/images/Patriots-Day-thumbs.jpg" class="thumbs" /></a></article>
<article><img src="assets/images/Very-Bad-Trip-3.jpg" class="thumbs" /> </article>
<article><img src="assets/images/Sully.jpg" class="thumbs" /> </article>
<article><img src="assets/images/A-Bras-Ouverts.jpg" class="thumbs" /> </article>
<article><img src="assets/images/A-Million-Ways-To-Die-In-The-West.jpg" class="thumbs" /> </article>
<article><img src="assets/images/Assassins-Creed.jpg" class="thumbs" /> </article>
<article><img src="assets/images/Baby-Boss.jpg" class="thumbs" /> </article>
<article><img src="assets/images/Bad-Moms.jpg" class="thumbs" /> </article>
<article><img src="assets/images/Ballerina.jpg" class="thumbs" /> </article>
</div></div></body></html>PAGE DUNKERQUE:
<!DOCTYPE html><html><head>
<title>Dunkerque</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="./assets/css/main.css"/>
</head>
<body>
<nav id="sidebar">
<ul>
<a href="./index.html"><i class="fa fa-film icon" style="color: #930000;" aria-hidden="true"></i></a>
<i class="fa fa-television icon" style="color: #009300;" aria-hidden="true"></i>
</ul></nav>
<div class="highbar">
<h4>Kelou Mediacenter - Dunkerque</h4>
</div>
<div class="content">
<img src="./assets/images/Dunkerque.jpg" class="full"/>
<div class="content">
<div class="barre-noire"></div>
<div class="data">
<div class="grey"><a class="txt">Date de sortie: 2017</a></div>
<div class="dark"><a class="txt">Réalisateur: Christopher Nolan</a></div>
<div class="grey"><a class="txt">Acteurs: Harry Styles, Tom Hardy, Cillian Murphy, Mark Rylance, Kenneth Branagh</a></div>
<div class="dark"><a class="txt">Genre: Thriller / Drame</a></div>
<div class="grey"><a class="txt">Durée: 2h00</a></div>
<div class="dark"><a class="txt">Langues: Anglais</a></div>
<div class="grey"><a class="txt">Sous-titres: Aucuns</a></div>
<div class="dark"><a class="txt">Qualité: 1080p</a></div>
<div class="synopsis"><p><i><b>Synopsis:</b></i><br /><br /> Au début de la Seconde Guerre mondiale, en mai 1940, environ 400 000 soldats britanniques, canadiens, français et belges se retrouvent encerclés par les troupes allemandes dans la poche de Dunkerque. L'opération Dynamo est mise en place pour évacuer le Corps expéditionnaire britannique (CEB) vers l'Angleterre.
L'histoire s'intéresse aux destins croisés des soldats, pilotes, marins et civils anglais mobilisés pour leurs bateaux durant l'opération Dynamo. Alors que le CEB est évacué par le port et les plages de Dunkerque, trois soldats, Tommy, Gibson et Alex, arrivent à embarquer sous les bombardements, avec un peu d'ingéniosité et de chance. Mais un autre périple les attend : la traversée du détroit du Pas de Calais. De l'autre côté de la Manche, M. Dawson, un propriétaire de bateau de plaisance, prépare avec son fils cadet, Peter, et un jeune garçon, George, la réquisition de son embarcation par la Royal Navy. Enfin, dans les cieux, trois pilotes britanniques, dont Collins et Farrier, sont en route pour Dunkerque, avec pour mission de couvrir l'évacuation contre les chasseurs et bombardiers allemands, tout en surveillant leur réserve de carburant.</p></div>
<div class="trailer"><a class="txt" style="font-size: 25px;">Trailer:</a><br /><iframe width="853" height="480" src="https://www.youtube.com/embed/XmyVvtDxA5A" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe></div>
</div></div></body></html>PAGE PATRIOTS DAY:
<!DOCTYPE html><html><head>
<title>Patriots Day</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="./assets/css/main.css"/>
</head>
<body>
<nav id="sidebar">
<ul>
<a href="./index.html"><i class="fa fa-film icon" style="color: #930000;" aria-hidden="true"></i></a>
<i class="fa fa-television icon" style="color: #009300;" aria-hidden="true"></i>
</ul></nav>
<div class="highbar">
<h4>Kelou Mediacenter - Patriots Days</h4>
</div>
<div class="content">
<img src="./assets/images/Patriots-Day-thumbs.jpg" class="full"/>
<div class="content">
<div class="barre-noire"></div>
<div class="data">
<div class="grey"><a class="txt">Date de sortie: 2016</a></div>
<div class="dark"><a class="txt">Réalisateur: Peter Berg</a></div>
<div class="grey"><a class="txt">Acteurs: Mark Wahlberg, Peter Berg, John Goodman, J. K. Simmons, Michelle Monaghan</a></div>
<div class="dark"><a class="txt">Genre: Drame / Film policier</a></div>
<div class="grey"><a class="txt">Durée: 2h13</a></div>
<div class="dark"><a class="txt">Langues: Anglais / Français</a></div>
<div class="grey"><a class="txt">Sous-titres: Anglais (Complets + Forcés) / Français (Complet + Forcés)</a></div>
<div class="dark"><a class="txt">Qualité: 1080p</a></div>
<div class="synopsis"><p><i><b>Synopsis:</b></i><br /><br /> Alors que la ville de Boston est sous le choc de multiples explosions, le sergent de police Tommy Saunders rejoint les enquêteurs sur le terrain dans une course contre la montre pour traquer et arrêter les auteurs avant qu'ils ne frappent à nouveau. Croisant les parcours de l'agent spécial Richard Deslauriers, du commissaire Ed Davis, du sergent Jeffrey Pugliese et de l'infirmière Carol Saunders, ce récit sans concession évoque la chasse à l'homme la plus complexe jamais mise en œuvre par la police américaine – et rend un vibrant hommage aux héros du quotidien.</p></div>
<div class="trailer"><a class="txt" style="font-size: 25px;">Trailer:</a><br /><iframe width="853" height="480" src="https://www.youtube.com/embed/kicTeLRiPwg" frameborder="0" allowfullscreen></iframe></div>
</div></div></body></html>STYLESHEET CSS:
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import "font-awesome.min.css";
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed');
.divider {
margin-top: 5%;
margin-left: 5%;
display: grid;
grid-template-columns: 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px;
grid-template-rows: 220px 220px 220px 220px 220px 220px 220px 220px 220px 220px 220px 220px;
}
.thumbs {
width: 130px;
height: 210px;
display: block;
margin-left: auto;
margin-right: auto;
border: 5px solid #fff;
-moz-box-shadow: 6px 6px 10px #aaa;
-webkit-box-shadow: 6px 6px 10px #aaa;
box-shadow: 6px 6px 10px #555;
}
.thumbs:hover{
opacity: 0.7;
}
.highbar{
position: fixed;
left:0;
top: 0;
height: 40px;
background-color: #212121;
width: 100%;
}
h4 {
margin: 10px;
text-align: center;
color: #bcebff;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
}
#sidebar {
position: fixed;
left: 0px;
top: 40px;
width: 60px;
background: #303030;
height: 100%;
}
.icon {
margin-left: -30px;
margin-top: 15px;
font-size: 40px;
}
/* --- ARTICLE --- */
.full {
position: fixed;
left: 75px;
top: 50px;
width: 400px;
height: 600px;
}
body {
background-color: #686868;
}
::-webkit-scrollbar {
color: black;
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.data {
position: static;
margin-top: 32px;
margin-left: 515px;
font-size: 20px;
width: 66%;
}
.txt {
margin: auto;
margin-left: 20px;
font-family: 'Oswald', sans-serif;
}
.dark {
background-color: #898989;
height: 55px;
line-height: 55px;
vertical-align: middle;
}
.grey {
background-color: #bcbcbc;
height: 55px;
line-height: 55px;
vertical-align: middle;
}
.synopsis {
background-color: #898989;
height: auto;
vertical-align: middle;
padding-bottom: 1px;
}
p {
font-family: 'Barlow Condensed', sans-serif;
}
.trailer {
margin-top: 20px;
background-color: #bcbcbc;
width: 100%;
height: 570px;
}
iframe {
margin-top: 10px;
align-items: center;
margin-left: 60px;
}
.barre-noire {
width: 4px;
height: 100%;
background-color: black;
position: fixed;
margin-left: 510px;
margin-top: 8px;
}