1/- Ouvrez la page que vous voulez capturer et faites un clic droit pour ouvrir le menu. Pour cet exemple j’ai choisi la page la plus longue du site des Pourfendeurs. Tout en bas, sélectionnez « Effectuer une capture d’écran ».

2/- La page s’assombrit, dirigez vous en haut à droite et cliquez sur « Capturer la page complète ».

3/- La capture est réalisée, il ne vous reste plus qu’à la télécharger dans le répertoire de votre choix !

Voici le résultat, une capture au format .png que vous pourrez utiliser comme bon vous semble ! Quel bonheur ! A bientôt pour un autre tuto express… Tchou tchou !!!

Cet article 🚂 Tuto express : Réaliser une capture photo complète d’un site web 📸 est apparu en premier sur Studio TJP.

Radiophonix est un site web codé et designé par Nathan et Pierre avec qui j’ai pu discuter un peu à MP3@Paris. Les deux compères sont très sympas et ont pour ambition avec ce projet de proposer un site permettant la découverte, l’écoute et le partage des Sagas MP3.

Et, si le site n’est qu’en Beta, je trouve que cela donne déjà très envie. L’interface est agréable, dans un style actuel et l’ensemble des fonctionnalités proposées aux auditeurs et aux créateurs me plaisent beaucoup (gestion de collection, publication RSS…). Bref, pensez à vous inscrire si vous voulez suivre le projet de près, et à encourager l’équipe sur leur Discord !

https://radiophonix.org/

Cet article Radiophonix [Hors-Série de la Revue d’été 2019 – épisode 14] est apparu en premier sur Studio TJP.

9/- Mais tout d’abord, corrigeons une erreur

J’ai fait une petite bêtise hier. J’ai oublié que l’effet « 3D » se comportait comme… un effet 3D. Pour cette raison, notre vidéo youtube respecte à présent une perspective qui lui fait traverser les couches supérieures. cela ne se voyait pas hier puisqu’elle était posée pile au bon endroit, mais si je décale un peu la taille de mon image (ce qui va arriver aujourd’hui), voici le résultat :

Comme il s’agit d’un problème 3 dimensionnel, on chausse nos lunettes 3D et on repasse le cadre image devant en 3D ! (Je sais, c’est pas clair, mais regardez en dessous !)

10/- Be Responsive

Bien, ce n’est pas très compliqué en fait, mais cela rajoute du travail. On va rouvrir notre feuille de style (main.css) et ajouter une ligne qui s’adresse uniquement au petites résolutions. On appelle cela une media query.

11/- Rendons le tout encore plus réaliste

J’ai toujours envie de rajouter des trucs. C’est un gros défaut, mais là c’est marrant pour vous montrer comment rendre l’ensemble encore plus vivant et donc plus crédible. Mon idée est d’ajouter 2 effets spéciaux à mon cadre vidéo. Des lignes comme on en verrait sur un vieil écran de caméra et un effet de lumière. Appelons-les, dans l’ordre Scanlines et Glow. J’ouvre pour la première fois depuis longtemps ma page index.html pour ajouter ces deux « cadres d’effet ».

Puis j’ouvre main.css pour écrire le style de ces cadres. Je vous avoue que là, c’est du code que j’ai copié-collé sur un site web qui l’utilisait déjà, j’ai juste changé les paramètres de couleur et de vitesse d’animation.

12/- Vérifications

Pour vérifier en un seul coup d’oeil que votre design est bien responsive sous toute sorte d’affichage, vous pouvez utiliser ce genre de site très pratique qui simule l’affichage sur différents appareils. Et là, c’est le drame. En effet, si mes modifications sur l’image passent très bien en mode « Portrait », le « trou » est trop bas pour apparaître en mode « Paysage ». Raaaaah, sal$$**rie de responsive de m*****$$$ !

Et bien, il y a une solution. On va faire une 3ème media query, pour les petits affichages, quand on est en mode paysage (landscape). C’est là que vous comprenez normalement que le responsive design… ça prend un temps fou !!!

13/- FINAL

Votre page web est maintenant terminée, vous allez pouvoir aller manger (cela fait 3 heures que votre conjoint·e vous appelle après tout). La page est visible ici, prenez le temps de regarder l’effet Glow puis amusez-vous à réduire la taille de la fenêtre du navigateur ou à le tester sur différents appareils (et n’hésitez pas à me remonter les bugs). Vous pouvez aussi récupérer le .zip du projet. Je crois avoir parlé de tout ce que je voulais vous parler, mais si vous avez d’autres idées/envies, je suis preneur !

Cet article Intégrer de manière sympa une vidéo Youtube dans une page web (partie 02) est apparu en premier sur Studio TJP.

1/- Préparer une image où la vidéo sera insérée

Une fois que vous avez trouvé ou photographié vous même l’image qui vous intéresse, il va falloir faire un « vide » dedans pour laisser apparaître la vidéo Youtube au bon endroit. Pour cela j’utilise mon logiciel de retouche d’image favori Pixelmator (MacOS).

2/- Réduire un peu la taille de l’image

A ce moment de l’histoire, notre image pèse presque 2Mo. Ce n’est pas énorme sur votre ordinateur, mais sur le web, cela commence à devenir assez lourd et cela risque d’utiliser pas mal de Data et de temps à vos visiteurs. Je tiens à remercier Stan (Signez) qui m’a fait découvrir le site TinyPNG qui va apporter la solution à ce problème de taille (oh oh).

3/- Commencer le site web

Dans un nouveau dossier, créer les dossiers et fichiers suivants. Pour le index.html un éditeur de texte basique suffit. Chez moi, j’utilise Atom qui est un poil plus complexe et met en couleur le code tapé, ce qui est agréable pour les yeux.

4/- Récupérer le code pour insérer votre vidéo

5/- Terminer sa page index.html

6/- Créer la feuille de style qui va donner vie à tout le site

Ben oui, vous avez bien compris que ce n’était pas fini. Dans le dossier css, créer un nouveau document nommé main.css. C’est votre feuille de style, celle qui va dire de quelle couleur sera la page, quelle police d’écriture et à quoi ressemblent les « cadres » qui accueillent le contenu.

7/- Finitions

Bon, vous êtes encore là ? C’est presque fini, promis. Tout d’abord, voici le lien vers la page à ce moment précis. Allez-y et trouvez les 2 problèmes (un gros, un petit).

Alors, vous avez trouvé ? Voici les réponses pour comparer :

1. On ne peut pas cliquer sur la vidéo (gros problème)
2. La vidéo n’est pas assez penchée pour correspondre pile-poil au « trou » laissé (petit problème)

Pour le premier problème, c’est normal. L’image bien que transparente, n’a pas de « vrai trou » dedans. Pour votre navigateur, la vidéo est toujours cachée dessus et donc non cliquable. Pour la rendre accessible, on va ajouter une ligne dans le fichier main.css.

Pour le second problème, on va utiliser des propriétés css qui permettent de donner un effet « 3D » à nos « cadres ». Une ligne et quelques trifouillages et c’est réglé !

8/- Résultat final

Voilà, votre mini-site est terminé. En utilisant le Z-index, vous pouvez créer d’autres cadres pour ajouter un titre par dessus l’ensemble… Je vous laisse avec la démo et l’ensemble du dossier compressé pour tester chez vous.

Si cela vous intéresse dans un prochain tuto, je pourrais vous parler de comment rendre cette page plus accessible sur un téléphone portable avec un petit écran (si vous regardez le résultat sur un portable, vous devez vous rendre compte que c’est pas hyper pratique).

Bises !

EDIT : La suite est ici !

Cet article Intégrer de manière sympa une vidéo Youtube dans une page web (partie 01) est apparu en premier sur Studio TJP.

Je ne crois pas avoir mangé ce soir là. La disquette insérée, la musique d’Indiana Jones retentit sur le buzzer intégré à la carte mère. Indiana, ado, saute de wagon en wagon pendant que le générique d’introduction du Point and Click « The Last Crusade » défile sur mon écran. Lucasarts. Je suis resté scotché.

J’ai joué à de nombreux jeux similaires par la suite : Day of the Tentacle, Monkey Island, Simon the Sorcerer qui sont tous excellents, mais celui ci restera toujours mon préféré. Grand fan du film à l’époque, le jeu permettait de rejouer les meilleurs moments du scénario mais aussi d’explorer des moyens nouveaux de résoudre les énigmes (plusieurs solutions possibles). Quand j’ai commencé à réfléchir au site de la saga « Les Aventuriers » j’avais envie de réutiliser ce type de présentation avec la barre de verbes d’action, la ligne de commande et un décor pixelisé mais joli.

En relançant le jeu (qui se trouve très facilement sur émulateur et même steam) je me suis aperçu que je ne me suis pas inspiré que de « The Last Crusade ». En effet, sur le jeu, pas d’inventaire visuel comme je l’ai mis sur mon site. Le matériel était affiché sous les commandes et en lettres uniquement.

En fait, mon inventaire vient plutôt de Monkey Island ou d’Indiana Jones 4 « The Fate of Atlantis » qui est aussi un excellent jeu basé sur un scénario jamais utilisé au cinéma même s’il avait été écrit pour.

L’idée était donc là. J’ai réalisé les visuels en faisant quelques montages et pixellisations. Ne restait plus qu’à passer à la partie que je maîtrise le moins. Le code. J’avais pour idée au départ d’un vrai Javascript qui rendrait les actions possibles du genre « Ecouter » + « Episode 1 » qui aurait lancé le player mais j’ai vite laissé tomber. D’une part par manque de compétence et d’autre part par manque de réel intérêt. Je pense que le visuel suffit.

Je me suis cependant retrouvé face a un écran très statique en haut. Ca manquait de mouvement. Je me suis alors basé sur le parallaxe utilisé pour le site d’ELTE pour créer plusieurs plans dans l’image. Il y en avait 4 au départ, puis je suis revenu à 2 pour des soucis de rendu. J’ai ensuite ajouté les phrases qui peuvent s’afficher aléatoirement avec les belles couleurs qu’on trouvait sur les jeux.

Il ne restait plus qu’à remplir chaque partie avec du contenu. J’avoue que je ne suis pas très fier de certains trucs qui ne passent que sous Chrome (notamment la carte du monde qui va poser des soucis sous les autres navigateurs…), j’en suis désolé.

Voilà la petite histoire du site.

Cet article Histoire d’un site est apparu en premier sur Studio TJP.