Homepage – html/css/javascript/python

sujet :

retour d’expérience de ce w-e sur la création d’une « homepage » à la Jolicloud / Chrome Apps

But :

utilisation sur mon asus eee t91mt quand je suis en mode « surf » ( tablet )

Pourquoi :

j’applique simplement le principe combiné  Obama (yes we can) / Nike (just do it) ..
En gros : tu peux le faire, fait le.

Outils :

html / css pour le template,
javascript pour la navigation,
python pour parser les liens et écrire le fichier html

notabene:
a) ce n’est pas dans mes habitudes de pondre du texte en temps normal. J’avoue que l’exercice d’écriture, manier la plume avec style, n’a jamais été mon fort. L’orthographe non plus .. Mais j’ai des envie de partage de connaisance pour le moment alors je prends sur moi.

b) je ne suis pas un bon programmeur. mais j’aime ca, alors je fais avec .. J’aime dire que c’est un dommage collatérale du fait que j’ai appris sur le tas, avec le BASIC. je n’ai pas de background informatique a proprement parler. Je bosse souvent avec python, même si je suis très loin d’en maitriser tout sa puissance.

Pour commencer , voila a quoi je pense quand je parle de Jolicloud / Chrome Apps :

1318763158.png       1318763105.jpg

Donc j’ai commencé par faire un template html/css. Rien de bien compliqué. je suis parti le schéma suivant :
Une section principale centré , une section avec les liens (gauche), une section avec la navigation (droite)

1318763195.png

La source html que j’ai utilisé pour mes essais. Assez coloré pour permettre la visualisation rapide des sections pour la mise au point :

    <style>
    html, body, div { margin : 0; padding : 0; border : 1px dotted #9B85C5; }
    body { background : #1e1e1e; }
    h1 { margin : 0; padding : 15px; border : 0; color : #b5ced7; font-size : 80%; }
    #container { width : 840px; margin : 30px auto; padding: 10px; background : #4C4C4C; }
    #nav { float : right; margin-top : 100px; padding: 0 auto; background : #4C4C4C; }
    #nav ul { list-style-type : none; padding : 0; margin : 0; }
    #nav ul li { margin-bottom : 20px; }
    #nav a { text-decoration : none; }
    #nav a img { width : 48px; height : 48px; margin: 0; padding: 0; border: 0;}
    #page { float : left; width : 750px; padding-left : 15px; background : #7F7F7F;}
    #page div { background : #4C4C4C; margin: 2px; }
    #page a img { display : block; margin : 0 auto; width : 90px; height : 90px; padding : 4px; }
    p.clear { clear : both; }
    a.btn { font-size : 80%; width : 128px; height : 128px; padding : 2px; background : #1E1E1E;
    margin : 5px; display : inline-block; text-decoration : none; text-align : center;
    color : #a6a6a6; border: 1px solid #4d4d4d; border-radius : 10px; }
    a.btn:hover { color : #ffffff; border : 1px solid #a6a6a6;}
</style>

<div id="container">
<small>CONTAINER</small>
<div id="nav">
    <small>DIV NAV</small>
    <ul>
        <li><a href="#"><img src="" name="boxnav" id="box1"  /></a></li>
        <li><a href="#"><img src="" name="boxnav" id="box2"  /></a></li>
        <li><a href="#"><img src="" name="boxnav" id="box3"  /></a></li>
        <li><a href="#"><img src="" name="boxnav" id="box4"  /></a></li>
    </ul>
</div>

<div id="page">
<small>DIV PAGE</small>
    <div name="box" id="box1">
        <small>DIV BOX</small>
        <h1>header - box 1</h1>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <p class="clear"></p>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <p class="clear"></p>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
    </div>

    <div name="box" id="box2" style="display:none;">
        <h1>header - box 2</h1>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
    </div>

    <div name="box" id="box3" style="display:none;">
        <h1>header - box 2</h1>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
    </div>

    <div name="box" id="box4" style="display:none;">
        <h1>header - box 2</h1>
            <a href="#" class="btn" target="_blank"><img src="" />name</a>
    </div>

<p class="clear"></p>
</div><!--  page -->

<p class="clear"></p>
</div><!-- container -->

Pour la navigation entre « page », j’ai utilisé la technique ‘CSS’ :
– mettre ce que l’on en veut pas voir en ‘display: none;’ , donc invicible
– mettre la ‘page’ à afficher en état visible avec ‘display: block;’

le javascript permet de modifier simplement le style pour un élément donné. En gros, le script recoit la ‘page’ a afficher en paramètre et s’occupe d’appliquer le principe expliqué :

function showonlyone(thechosenone) {
    var newboxes = document.getElementsByName("box");
    for(var x=0; x<newboxes.length; x++) {
        if (newboxes[x].id == thechosenone) { newboxes[x].style.display = 'block'; }
        else { newboxes[x].style.display = 'none'; }
    }
}

Dans l’absolu, le travail est fini. Il suffit de garnir le template avec les liens que l’on veut dans sa ‘homepage’.
Mais si pour quelques liens, cela ne pose pas de soucis, avec quelques 10e, ca devient vite le chaos a éditer/maintenir. Sans parler du fait qu’il vaut mieux séparer les données de l’interface.

Petite remarque sur un point. perso, dès le départ j’avais exclus la possibilité de faire ca en php (ou python) couplé avec une BD mysql, ce qui est courant pour ce genre de projet. Je voulais garder quelque chose de simple pour la liste des liens, facile a manipuler avec un éditeur de texte et/ou par programme. J’ai donc utilisé un simple fichier texte formatter à la façon ‘xml’, que je parse avec le module xml de python.
Je connais le principe du xml, mais je n’ai jamais vraiment travailler avec .. donc j’ai fait au plus simple :

3 tag : un pour les liens (nom, url, image), un pour passer a la ligne, un pour définir les pages.

Exemple :

<links>
<header>en-tete</header>
<link name="" url="http://" img="" />
<page />
<header>en-tete</header>
<link name="" url="http://" img="" />
<link name="" url="http://" img="" />
<br >
<link name="" url="http://" img="" />
</links>

Le script python parse le fichier contenant les liens et construit la page html en fonction du template.

from xml.etree import ElementTree as ET

[...]

def xml_to_html():

    try:
        tree = ET.parse(XML_FILE)
    except Exception, inst:
        print "Unexpected error opening %s: %s" % (XML_FILE, inst)
        return

    root = tree.getroot()

    page = '<div name="box" id="box1">'
    index = 2

    for elem in root:
        if elem.tag == 'header':
            page += '<h1>%s</h1>' % elem.text
            page += "\n"
        elif elem.tag == 'br':
            page += '<p class="clear"></p>'
        elif elem.tag == 'page':
            page += '</div>' + "\n"
            page += '<div name="box" id="box%s" style="display: none;">' % index
            page += "\n"
            index += 1
        else:
            page += '<a href="%s" class="btn" target="_blank">' % elem.attrib['url']
            page += '<img src="%s" />%s</a>' % (elem.attrib['img'], elem.attrib['name'])
            page += "\n"

    page += '</div>'
    page += "\n"

    if not index == 2:

        nav = """<li><a href="javascript:showonlyone('box1');" >"""
        nav += """<img src="img/nav_bt_on.png" name="boxnav" id="box1"  /></a></li>"""
        nav += "\n"

        for i in range(2, index):
            nav += "<li><a href=\"javascript:showonlyone('box%s');\">" % i
            nav += '<img src="img/nav_bt_off.png" name="boxnav" id="box%s"  />' % i
            nav += '</a></li>'
            nav += "\n"

    html = HTML_TOP
    html += '<div id="nav"><ul>' + nav + '</ul></div>'
    html += '<div id="page">' + page + '<p class="clear"></p> </div><!--  page -->'
    html += HTML_BOTTOM

    return html

def write_to_html(html):
    f = open(HTML_FILE, 'w')
    f.write(html)
    f.close()

[...]

Et voila un exemple avec quelques liens sur plusieurs pages : exemple test homepage

 

 

 

 

 

 

Remarque :

– testé avec chromium / webkit ( python )

– bien que cela fonctionnait bien en mode ‘tablet’, quand je cliquais sur l’écran, j’avais souvent le drag ‘n drop qui se produisait sur les images. En cherchant sur le net, j’ai trouver la solution au niveau du ‘css’ :

/* desactiver le drag/drop */ 
html, body, div, h1, a, img { 
-webkit-user-select: none; 
}

Maintenant, ca fonctionne parfaitement.

Un zip avec les différents fichiers est dispo si vous voulez tester votre propre ‘homepage’ :

dossier zip

 

Voilà, c’est fini .. encore un w-e de plus.

Publié le 16 octobre 2011, dans programmation, python. Bookmarquez ce permalien. Poster un commentaire.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :