Guest-blogging : cet article a été écrit par un ami qui a souhaité vous livrer quelques astuces sur la refonte de design myspace avec la modification complète des css et du code html.

Tips pour refaire un Myspace : Design + programmation (CSS + XHTML)

Je ne vais m’attacher à rentrer tout à fait dans la technique car ceci prendrait énormément de temps. Cependant je vais présenter quelques tips (astuces) pour éviter de perdre énormément de temps sur des petits soucis techniques facilement évitables lors de la création d’un design pour Myspace.

Ayez tout d’abord en tête comme objectif de faire votre Myspace comme un site classique. Vous commencez donc par votre design puis vous le découpez.

Viens ensuite la partie délicate qui consiste en son intégration dans Myspace. Je vous avoue que faire du CSS pour Myspace est une sorte de bricolage/rafistolage comparé à faire du CSS pour un site classique. Ainsi, n’espérez pas être conforme W3C

Règles de bases : même si le but est de « tout péter » le Myspace d’origine, certaines choses sont intouchables:
-la pub d’en haut doit restée visible sans scroll (je me suis déjà fait supprimé un compte sans faire exprès à cause de ça).
-les copyrights de myspace doivent également être visible (même si, comme moi vous les refaites ).

Une fois ceci bien compris, il y a plusieurs stratégies:

1. vous récupérez des codes à droite à gauche sur internet pour bouger telle ou telle catégorie et faire en sorte qu’elle s’affiche au bon endroit du design
2. vous masquez le myspace de base et vous recréez tout par dessus
3. vous mixez 1) et 2) (c’est ce que j’ai fait) !

Première astuce très utile pour votre layout Myspace!

Vous venez de faire votre design et tout content vous copiez le code de votre design dans la section « membres » de votre profil. Vous faites « preview » et là malheur! La preview affiche votre design par dessous le reste et du coup vous ne pouvez pas cliquer sur « submit » pour valider le tout (voir image ci-dessous). Vous ne pourrez donc jamais montrer votre superbe design aux visiteurs !
Heureusement il y a une solution !

Placez-vous dans votre profil dans la section « edit profile », à l’endroit où vous pouvez choisir la section à modifier. Entrer ensuite ceci dans la barre d’adresse :
javascript: editInterest(‘members’); ceci vous renverra directement à la page vous permettant de coller votre code dans la section membres!
javascript: editInterest(‘bio’); fera de même mais dans la partie « bio » si c’est ici que vous souhaitez coller votre code.

Ensuite vous cliquez donc sur « preview » et qui vous affiche quelque chose comme l’image ci-dessous. Vu que vous n’avez pas accès au bouton « submit », entrez ceci dans la barre d’adresse qui le remplacera :
javascript:document.forms[1].submit();

Et la magie s’opère ! A noter que cette astuce semble mieux fonctionner sous Internet Explorer (IE) que sous les autres browsers (navigateurs).

Seconde astuce pour votre layout Myspace

Nous parlions de masquer le Myspace de base. Cette technique n’est pas encore validée W3C mais elle tout de même très utile pour coder en CSS pour Myspace. Il s’agit d’utiliser des couches. Ainsi vous mettez votre design en couche 1 et automatiquement, le myspace de base sera caché dessous. C’est pour cette raison que vous verrez apparaître parfois des myspaces classiques sur la page avant que le design ne soit chargé par dessus.

Voici donc la mise en place de ces couches. Exemple sur l’affichage du player :
table table td.text object {z-index:3; position:relative; top:315px!important;left:10px!important;visibility:visible; width:443px; height:352px;display: block; }
}

L’attribut z-index indique que le player de mon Myspace music sera donc placé sur la couche 3. Vous pouvez ainsi jouer avec la valeur de vos z-index à souhait!

3e astuce Layout Myspace

La troisième astuce et pas des moindre consiste à utiliser des hacks pour assurer une compatibilité dans tous les navigateurs. Un hack est un code CSS permettant de dire « mozilla tu feras ça » ou « IE tu feras ça etc… ». Voici donc quelques Hacks que j’ai testé et qui sont en place sur le myspace music que j’ai créé (voir lein à la fin de ce post):

Hack pour firefox :

@-moz-document url-prefix() {
}
Ce hack recherche les navigateur contenant le mot « moz » ce qui a l’avantage de marcher pour toutes les version de mozilla !

Exemple sur la position du player sous mozilla:

@-moz-document url-prefix() {
table table td.text object {z-index:3; position:relative; top:315px!important;left:10px!important;visibility:visible; width:443px; height:352px;display: block; }
}

Hack pour IE:
*html

Ce même player sous IE:

*html table table td.text object {z-index:3; position:relative; top:630px; left:38px; visibility:visible; width:436px; height:351px; }

Vous trouverez des hacks de ce genre pour Safari Opera etc… Une fois le principe compris…

Exemple Layout Myspace

Pour voir un exemple d’application des ces techniques rendez-vous sur http://www.myspace.com/devongravesmusic . Ceci est le myspace music de Devon Graves, composititrice et chanteuse, très douée au passage. Autant se faire plaisir en observant la technique CSS pour myspace

[/Guest-blogging] Le lien ci-dessus est un exemple de ce que l’on peut faire avec ces astuces xHtml et Css pour Myspace. Si vous souhaitez plus d’infos ou si vous êtes intéressés par la refonte de votre Myspace, laissez un commentaire et l’auteur pourra vous répondre.

Je viens de remarquer cela a l’instant. Le site www.flock.com a changer tout son design. Il est maintenant en flash. Bref il a fait peau neuve et propose depuis quelque temps la version 0.9.0 de Flock le navigateur social.

Le site fait plus marketing qu’autre chose malheuresement.

Flock c’est un navigateur internet basé sur Mozilla (firefox si vous préférez) qui se concentre sur tout ce qui touche au social. Il vise plus particulièrement les bloggers hyperactifs et possède de très bonnes idées tel que : l’écriture de votre article dans une fenêtre du navigateur, l’accès quand bon vous semble a flickr ou photobucket, une meilleure gestion des favoris et des flux rss, une recherche dans vos marque-pages/historiques/web…

Bref Flock c’est une nouvelle idée du surf. Je l’ais testé lorsqu’il était en version 0.7.xx il y a maintenant plus d’un mois. Cependant je le trouve assez lourd pour le pc et sa prise en main n’est pas si facile.

Je vous en parlerais plus dans un prochain post et peut être que je vous en ferais un test vidéo.

Un designer, Gilles Belley a crée en collaboration avec les équipes design d’EDF un prototype de multiprise géniale (aux couleurs de l’ipod) et esthétiquement formidable.

Vous avez un bureau comme ca :

Vous aimeriez un bureau comme celui la :

Alors vous avez besoin de ca :

Le principe de la multiprise est d’éviter de consommer trop, les boutons serve à éteindre l’alimentation des prises.

Vous pouvez couper quand vous le voulez et les fils ne traine pas partout, très bonne idée ! (et puis c’est surtout très beau)

via Tapahont