Pour commencer, nous allons créer le modèle de la page web qui va être utilisée pour toutes vos pages web conçues pour la Nintendo 3DS.
1 - Créer les éléments principaux en HTML
Pour commencer, nous allons écrire les balises de base du HTML :
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<meta name="viewport" content="width=320" /> <!-- indispensable pour afficher convenablement la page web -->
</head>
<body>
</body>
</html>
La balise META NAME="VIEWPORT" permet de définir la longueur de la surface du page web sur navigateur (plus d'infos ici).
2 - Créer les éléments de l'écran du haut et du bas de la 3DS
Nous allons ajouter deux éléments "DIV" pour l'écran du haut et du bas. Ces div vont contenir tout ce qui sera écrit sur le site.
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<meta name="viewport" content="width=320" />
</head>
<body>
<div id="ecranHaut"></div> <!-- div de l'écran du haut -->
<div id="ecranBas"></div> <!-- div de l'écran du haut -->
</body>
</html>
A ce stade là, les DIV n'ont pas de données de largeur et longueur et ne sont pas positionnées : il faut donc ajouter la taille des écrans du haut et du bas dans le style CSS et les positionner. Le code donné devra être placé dans l'élément HEAD de la page web, dans la balise STYLE :
div#ecranHaut
{
position: absolute; // on positionne en absolu ce div
height: 218px; // largeur de la div
width: 320px; // longueur de la div
top: 0px; // positionnement vertical
left: 0px; // positionnement horizontal
overflow: hidden; // optionnel mais conseillé - masque le texte et autres éléments dépassant de la DIV
}
div#ecranBas
{
position: absolute;
height: 212px;
width: 320px;
top: 218px;
left: 0px;
overflow: auto; // optionnel - affiche les barres de scroll si le texte dépasse de la DIV
}
3 - Empêcher le défilement de la page web et bien afficher les écrans
A ce stade là, le site web ne s'affichera pas correctement sur les deux écrans de la console. Nous allons ajouter un petit script Javascript pour permettre de le positionner automatiquement et d'empêcher le scroll accidentel de la page :
window.setInterval(function () {window.scrollTo(40, 218); }, 1);
Voilà, le code est assez court et simple, pas besoin de commentaire.
4 - Code final du modèle de la page web
Voici le code final du modèle de la page web (non commenté, rapportez-vous aux précédents codes) :
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<meta name="viewport" content="width=320" />
<style type="text/css">
div#ecranHaut
{
position: absolute;
height: 218px;
width: 320px;
top: 0px;
left: 0px;
overflow: hidden;
}
div#ecranBas
{
position: absolute;
height: 212px;
width: 320px;
top: 218px;
left: 0px;
overflow: auto;
}
</style>
</head>
<body>
<div id="ecranHaut"></div>
<div id="ecranBas"></div>
<script type="text/javascript">
window.setInterval(function () {window.scrollTo(40, 218); }, 1);
</script>
</body>
</html>
Dans la prochaine étape, j'expliquerais comment détecter l'appui sur les boutons de la console, les éléments qui sont incompatibles avec le navigateur de la 3DS et la dernière étape sera un petit exercice récapitulatif.
