#1 Le 16/10/2011, à 13:48
- ADcomp
homepage style jolicloud [html/css/javascript/python]
sujet :
simple retour d'expérience de ce w-e sur la création d'une "homepage" a 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
nb:
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 :
. . . 
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)
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 souvent 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.
Dernière modification par ADcomp (Le 17/10/2011, à 12:48)
David [aka] ADcomp
Hors ligne
#2 Le 18/10/2011, à 17:10
- ADcomp
Re : homepage style jolicloud [html/css/javascript/python]
David [aka] ADcomp
Hors ligne
#3 Le 19/10/2011, à 19:50
- ADcomp
Re : homepage style jolicloud [html/css/javascript/python]
Encore de retour avec ce petit projet. La dernère fois je parlais de séparer l’interface des données. Mais dans la première version, le template html était imbriqué dans le code python, ce qui ne permet pas vraiment une grande flexibilité a ce niveau la. Donc j’ai déporté la partie ‘template’ dans un fichier ( index.template ). J’utilise simplement 2 balises ( [[NAV]] et [[PAGE]] ) pour remplacer par la partie générée par le script python.
exemple du template html :
<div id="nav">
[[NAV]]
</div><!-- nav -->
<div id="page">
[[PAGE]]
</div><!-- page -->
lecture du template et creation du fichier html :
html = ''
f = open(TEMPLATE, 'r')
for line in f:
#~ print line
tmp = line
for tag in ('[[PAGE]]', '[[NAV]]'):
if tag in line:
print 'found tag ..', tag
tmp = tmp.replace(tag, tag_tab[tag])
html += tmp
f.close()
f = open(HTML_FILE, 'w')
f.write(html)
f.close()
Exemple ici : http://adeskbar.tuxfamily.org/dev/webhome/
et la source : webhome.zip
David [aka] ADcomp
Hors ligne