Julien Guézennec .... Work definitely in progress...
@molokoloco | molokoloco@gmail.com | http://b2bweb.fr
Depuis 2008 chez Bouygues Telecom, développeur Internet, R&D “convergence Internet”
Internet sur TV (Set Top Box / TV connectés), Internet mobile et tablettes tactile...
Langages : jQuery, HTML5, SDK Android, Flex/Flash/Air, LAMP, ...
Un bon mashup de frameset HTML (Ajax power 98 ^^)
Démo : http://www.ifremer.fr/trenteans/fraccueil.html - [Image d'example]
index.html
<frameset rows="100,*" border="0" framespacing="0" frameborder="NO">
<frame src="menu.html" name="galerie" scrolling="NO" noresize>
<frame src="photos.html" name="image" noresize>
</frameset> <noframes>
<body bgcolor="#000000">
<p>This is not really a browser isn't it ?</p>
</body> </noframes>
menu.html
<frameset rows="*,120" border="0" framespacing="0" frameborder="NO">
<frame src="menu-main.html" name="image" noresize>
<frame src="menu-bottom.html" name="galerie" scrolling="NO" noresize>
</frameset>
menu-bottom.html
<html>Houra, i'm on bottom and i don't change when you browse the site</html>
Mouseover sur les images, sauce Dreamweaver...
<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img1978','','images/bar_nav_on_01.gif',1)">
<img name="img1978" border="0" src="images/navigation/imag_menu/bar_nav_no_01.gif" width="24" height="88">
</a>
Ce qui donne des magnifiques JS, insérés un peu partout dans le HTML
<script language="JavaScript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
De formulaires en menus déroulants ..., en lecteurs vidéos, ...
On en revient petit à petit vers JS...
C'est à cette époque qu'arrive la première seconde guerre mondiale, made in US...
// Who is sniffing ?
var IE = (document.all ? true : false);
var NS = (document.layers ? true : false);
var DOM = (document.getElementById ? true : false); // Later FF+ / IE+ / NS+...
Les navigateurs...
Conception du site Saintdesprit.net (2001-2005)
Sur base de “MODs” phpBB, galeries autonomes intégrées au forum :
Création de galeries online présentant les travaux de jeunes artistes :
150 galeries pour plus de 100 créatifs !
Too much things to says ;)
Conception, réalisation du site de la chaîne "Télessonne.fr" (91).
Front office
Back Office
Softs : Dreamweaver MX, Photoshop 7.0, Flash MX, … Mise en relation d'un logiciel spécifique d'encodage avec la BDD du site pour une gestion dynamique du contenu vidéo
Les IDEs front-end mainstream...
Virtual Admin : Framework PHP4 et JavaScript Prototype / Script.aculo.us
CMS, Back et Front Office, catalogues, galeries, lecteurs multimédias
et une multitude de modules...
/*///////////////////////////////////////////////////////////////////////////////////////////////////////
///// Code mixing by Molokoloco - www.borntobeweb.fr - BETA TESTING FOR EVER ! (o_O) ///////
///////////////////////////////////////////////////////////////////////////////////////////////////////
KEEP ze ORDER : 001_admin.js, 002_flashObject, 003_cookie, 004_fade, 005_color, 006_mousewheel, 100_prototype,
102_slider, 104_sound, 110_effects, 111_effects.extend, 112_dragdrop, 113_controls, 114_prototip, 150_scroller,
200_tools, 201_client, 210_functions, 211_form, 212_diaporama, 213_horloge, 214_modal-dialogue,
215_menu,215_accordeon, 220_lightbox, 230_tab-view, 300_specifique,999_regexp
////////////////////////////////////////////////////////////////////////////////////////////////////*/
var compressed = false; // Cf. http://alex.dojotoolkit.org/shrinksafe/
var toLoad = '002_flashObject,100_prototype,110_effects,111_effects.extend,200_tools,201_client,210_functions,211_form,214_modal-dialogue,215_menu,999_regexp';
var Scriptaculous = {Version: '1.8.1'};
var preloader = {
require: function(libraryName) {
document.write('<script type="text/javascript" src="'+libraryName+'" onerror="alert(\'Error: failed to load \'+this.src)"></script>');
},
init: function() {
if (compressed) this.require('./js/proto/functions.compressed.js');
else {
var files = toLoad.split(',');
for (var i=0; i<files.length; i++) this.require('./js/proto/optional/'+files[i]+'.js');
}
}
};
preloader.init();
http://code.google.com/p/molokoloco-coding-project/source/browse/trunk/SITE_01_SRC/
Développement de (petits) plugins jQuery et d’une base de connaissances (2007-...)
http://code.google.com/p/molokoloco-coding-project/wiki/JavascriptWindowOpenExtended
VS http://code.google.com/p/molokoloco-coding-project/wiki/MyJQueryPlugins
Workable / Testable jQuery Default Plugin : http://jsfiddle.net/molokoloco/DzYdE/
... Comments or suggests ? http://www.b2bweb.fr/molokoloco/jquery-default-plugin/
Tips and tricks (5min d'altruisme auto-promotionnel ^^)
Je lance enfin mon blog, B2bweb.fr sur la base d'un Wordpress, et du plugin WP-o-Matic
Avantage de cette solution :
Dans l'élan, je crée ma propre page de démarrage, home.b2bweb.fr
Sur chaque projet il faut capitaliser, penser en module, centraliser ces sources
... et toujours améliorer la formule !