SC@LPA PRODUCTION: webmastering

Affichage des articles dont le libellé est webmastering. Afficher tous les articles

dimanche 14 mai 2017

Mise à jour du site scalpa.info

Année 2017 = passage du site web au web responsive... Ce qui signifie que les pages s'affichent correctement quel que soit le support, PC, tablette ou téléphone.
Nouveau design avec menu horizontal qui reste en haut de page.

dimanche 11 mars 2012

htaccess : interdire l'accès direct aux documents d'un site

RewriteEngine On 
RewriteCond %{HTTP_REFERER} !^http://www.votresite.net.* [NC]
RewriteCond %{HTTP_REFERER} !^http://www.votresite.info.* [NC] 
RewriteRule /* http://www.votresite.info [R,L]

http://www.devblog.fr/2011/12/16/proteger-lacces-direct-a-des-fichiers-via-htacces

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://www.example.com [NC]
RewriteRule \.(jpg|gif|png)$ - [F]

http://www.coinduwebmaster.com/bloquer-acces-images-hotlinking/61/

mardi 14 février 2012

Créer une fenêtre modale

Créer une fenêtre modale pour remplacer le "promt"
Voir l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Conforming XHTML 1.0 Transitional Template</title>
<style type="text/css">
<!--
body {
    height:100%;
    margin:0;
    padding:0;
    background-color: #ffff99;
}
#overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1000;
    background-image:url(overlay.png);

}
#overlay div {
    width: 300px;
    margin: 100px auto;
    background-color: #99ff66;
    border: 4px solid #666633;
    padding: 15px;
    text-align: center;
}
.cntr {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
#okBtn {
  width:100px;
  margin:5px;
}
#nom {
 width: 150px;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
}
-->
</style>
<script type="text/javascript">
<!--
function overlay() {
 el = document.getElementById("overlay");
 el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

function affichage() {
 var DivIdentity = document.getElementById('identity');
 var nomsurfeur = document.getElementById('nom').value;
 
 if ((nomsurfeur == "") || (nomsurfeur == "???   ???") || (nomsurfeur === null)) {
  nomsurfeur = 'Surfeur Anonyme';
 }
 DivIdentity.innerHTML += '<h3 \" class=\"cntr\">Bienvenue ' + nomsurfeur + '</h3>';
 overlay();
}
// -->
</script>

</head>

<body onload="javascript:overlay();">
<h1>Titre</h1>
<div id="identity"></div>
Main core from : 
<a href="http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/">raventools.com</a>

<div id="overlay">
 <div>
 <p>Ecris ton nom :</p>
 <input id="nom" onFocus="select();" type="text" value="???   ???" /><br />
 <button id="okBtn" onclick='affichage()'>Ok</button>
 </div>
</div>
</body>
</html>

Syntax Highlighter permet de mettre en couleur le code de cette ressource :

dimanche 5 février 2012

Création d'un diaporama avec annonce défilant en bas de page

Les pré-requis :

Disposer d'un éditeur de texte capable de sauvegarder les fichiers en UTF-8 comme : Notepad++
Télécharger Highslide JS qui est une visionneuse d'images (et autres médias) écrite en JavaScript ou encore mieux : utiliser l'éditeur du site en question pour élaborer la plus grande partie du travail.
Comprendre la structure des cadres (frame en anglais) dans une page html : cours en ligne ici, là ou encore là.

Celle retenue sera de 2 cadres horizontaux donc il faut :

un fichier index.html (auquel on ne touche pas)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Collège le Dinandier</title>
<style type="text/css">
body {background-color: black;}
 </style>
</head>
<frameset frameborder="no" framespacing="0" rows="90%, 10%">
<frame src="galerie.html" name="haut" id="haut">
<frame src="info.html" name="bas" id="bas">
<noframes>
<body>
Cette page HTML nécessite un navigateur supportant les frames, 
veuillez nous en excuser.
</body>
</noframes>
</frameset>
</html>

un fichier info.html (qu'il faudra modifier à l'aide de notepad++)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Le Dinandier</title>
<style type="text/css">
body {
background-color: black;
}
marquee {
color: grey; 
font-size: 2.5em; 
font-weight: normal; 
margin: 0px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
}
</style>
</head>
<body id="info">
<!--START INFO 
Les balises marquee sont obsolètes, mais fonctionnent toujours.
Elles sont ici la méthode la plus simple pour afficher une information en bandeau :
Ne modifier que le texte entre les deux balises sans toucher au reste.
Enregistrer le fichier sans changer son nom. -->
<marquee>
Les balises marquee sont obsolètes, mais fonctionnent toujours...
</marquee>
<!--END INFO -->
</body>
</html>

A l'aide de l'éditeur Notepad++, modifier seulement l'information que vous voulez voir défiler entre les balises puis sauvegarder.

un fichier galerie.html (qu'il faudra modifier à l'aide de notepad++)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS - Custom Example</title>
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<style type="text/css">
body {background-color: black;}
 </style>
</head>

<body>
<!--START COPIER/COLLER -->
<div class="highslide-gallery">
 <a id="thumb1" href="highslide/images/large/Tulips.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Tulips.jpg"  alt=""/>
 </a>
 <div class="hidden-container">
 <a href="highslide/images/large/Lighthouse.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Lighthouse.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Koala.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Koala.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Chrysanthemum.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Chrysanthemum.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Penguins.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Penguins.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Desert.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Desert.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Jellyfish.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Jellyfish.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Hydrangeas.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Hydrangeas.jpg"  alt=""/>
 </a>
 </div>
</div>
<!--END COPIER/COLLER -->
</body>
</html>

Tous ces fichiers sont contenus dans le package zip en bas de page.

Etape 1 de l'élaboration du fichier galerie.html
D'abord, rendez-vous sur l'éditeur du site en question pour élaborer la plus grande partie du travail. Modifiez les paramètres comme bon vous semble. Suivez les instructions en ligne jusqu'à l'étape finale de publication :

L'éditeur en ligne de highslide.com

Une fois les images sélectionnées, cliquez sur le bouton publish de l'éditeur :

Acceptez la licence et récupérez les fichiers au format zip en cliquant sur le lien download a zip archive :

Dé-zippez le fichier obtenu "highslide-custom" clic-droit puis extraire:

On obtient la structure de fichier et dossier suivante :

Le dossier highslide contient les sous-dossiers et fichiers suivants :

Le dossier large contient les images originales, le dossier thumbs contient les vignettes correspondantes.

Le rendu du diaporama est de meilleure qualité si vos images originales ont toutes le même format (1280 x 1024 et qu'elles sont toutes orientées au format paysage par exemple).

Etape 2 Modification du fichier galerie.html

Ouvrir galerie.html et highslide-custom-example.html avec Notepad++ (clic droit /éditer).

Récupérer la portion de code dans highslide-custom-example.html comprise entre les balises :

et la coller dans la zone correspondante de galerie.html. Sauvegardez ce dernier.

Visionnez le résultat en double-cliquant sur le fichier index.html.

Exemple en ligne

Voici le fichier de configuration utilisé pour obtenir le résultat ci-dessus. (sauvegarder 30 jours à partir d'aujourd'hui)

Le package complet au format zip

dimanche 28 août 2011

Mise à jour du site de l'école

Le site de l'école a été mis à jour et présente quelques informations pratiques à destination des parents.

http://jacques.prevert.pagesperso-orange.fr/

mercredi 5 mai 2010

SNAKES AND LADDERS BUG !

Les exercices de type "snakes and ladders" basés sur le code javascript by Birgit Ferran (birgit@eoiweb.com) ne fonctionnaient pas sous FireFox (Merci à Charlotte de m'avoir signalé ce bug!) Les pions ne se déplaçaient pas...
Pour info il faut changer la fonction suivante :
function showPlayer(name){
refPlayer(name).left = whichX();
refPlayer(name).top = whichY();
}
en
function showPlayer(name){
refPlayer(name).left = whichX()+'px';
refPlayer(name).top = whichY()+'px';
}

apparemment à cause du DOCTYPE qui est différent de celui d'origine!!!

dimanche 16 août 2009

Validate a form with javascript

Quelques liens glanés montrant plusieurs façons de réaliser le deal :
http://bluelinecity.com/software/foul/

How to switch the 'action' field in an HTML form dynamically : http://www.javascript-coder.com/html-form/html-form-action.phtml

samedi 1 novembre 2008

Coloriser du code en HTML

Un outil en ligne sur http://tools.codes-sources.com/ pour coloriser son code avant de le mettre en ligne. Un exemple de ce que cela donne à partir d'un post d'Armin Zingler sur les news de Microsoft en réponse à un problème concernant la génération de nombres aléatoires.

Public Shared Function GenArrayNbres2( _
ByVal Lower As Integer, ByVal Upper As Integer, _
Optional ByVal HowMany As Integer = 1, _
Optional ByVal Unique As Boolean = True) _
As List(Of Integer)

Dim rnd As New Random
Dim Result As New List(Of Integer)

Do
Dim Value = rnd.Next(Lower, Upper)
If Not Unique OrElse Not Result.Contains(Value) Then
Result.Add(Value)
End If
Loop Until Result.Count = HowMany

Return Result

End Function

Pages