Palm Pre : Présentation et caractéristiques

Palm revient sur le devant de la scène mobile avec le Pre ! Alors qu’on croyait le constructeur d’assistant personnel mort, le revoilà avec une bombe, un smartphone qui promet d’être génial : le Palm Pré !

Aussi puissant que les PDA de la marque mais aussi avancé en terme de téléphonie que ces concurrents, le Palm Pré intègre un OS révolutionnaire, nommé Web OS.
La révolution Palm ! C’est le Palm Pre.

palm-pre-webos-2

Présentation du Palm Pre

Continue reading “Palm Pre : Présentation et caractéristiques”

Refaire un Layout Myspace en xHTML et CSS

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.

myspace_logo

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 🙂

devongraves

[/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.

WordPress Mu : activer l’éditeur de thème et l’éditeur de plugins

Pour ceux qui ne connaissent pas WordPress Mu, c’est une version de WordPress légèrement différente puisqu’elle permette d’héberger sur une seule installation de WordPress, un nombre quasi infini de blogs. LeMonde s’en sert pour proposer à ses internautes, de créer leur propre blog.

Je me suis essayé à WordPress Mu dans l’autre optique, qui est celle d’un “serial-blogueur”. C’est à dire que je peux gérer plusieurs blogs avec une seule installation, cela permet un gain de temps important pour les mises à jour du CMS, des plugins et des thèmes.

mu-wordpress-logo

Cependant, dans WordPress Mu, il n’y a pas d’éditeur de thème ni d’éditeur de plugin. Cela se comprend très bien par le fait que si l’ont propose à tout à chacun de créer son blog sur cette installation, il ne faut pas que l’utilisateur puisse modifier tout le code php de wordpress, il pourrait ainsi avoir accès à toute l’installation (pensez aux blogs de LeMonde.fr par ex).

Mais dans mon cas, les deux éditeurs de thèmes et plugins, me sont très utiles, tout autant que lorsque j’utilise une version classique de WordPress.

Voici donc la manipulation pour réactiver l’éditeur de thème et l’éditeur de plugin de WordPress Mu :

  1. Connectez-vous à votre FTP ou est installé votre WordPress Mu. Direction “/wp-admin/includes/”. Rappatriez sur votre bureau par ex, le fichier “mu.php”. Ouvrez-le avec un éditeur de texte et modifiez les lignes 517 et 518 :
    unset( $submenu['plugins.php'][15] ); // always remove the plugin editor
    unset( $submenu['themes.php'][10] ); // always remove the themes editorVous pouvez soit les commentez avec un double slash “//” ou les supprimez tout simplement. Puis ré-uploadez le fichier au même endroit.
  2. Direction wordpress.org/download. Téléchargez une version classique de WordPress et mettez de côté les fichiers “theme-editor.php” et “plugin-editor.php” qui se trouvent dans le dossier “wp-admin”. Dans votre client FTP, mettez vous dans le dossier wp-admin de votre installation WordPress Mu et mettez-y les deux fichiers php.
  3. C’est fini.

Revue de Blogs #20

Chaque semaine je relève quelques billets qui ont retenu mon attention, voici les quelques liens que j’ai retenu cette semaine, à visiter !

Le meilleur de Vlogee #5

Je fais ici une petite revue de presse à propos de mon second blog, Vlogee afin de vous le faire découvrir à travers ses meilleurs articles.
Je rappelle que Vlogee a une ligne éditoriale complètement ouverte, vous y trouvez donc beaucoup de vidéos mais aussi tout ce que je n’ai pas posté ici.

Blogonet : Top + Digg + Search, le site 3 en 1

Blogonetdi c’est le nouveau site créé par Jukien de ilonet.fr

Présentation de Blogonet

Qu’est-ce que Blogonet ? Et bien en fait c’est un site 3 en 1. Vous connaissez sans doute wikio, et bien Blogonet s’en rapproche. C’est un site qui est à la fois Digg-like, Top des blogs et moteur de recherche sur les blogs.
Lorsque vous inscrivez votre blog sur le site vous pouvez directement mettre en avant vos articles. Vous ferez aussi partie du classement des blogs calculé sur de nombreux critères tels que les backlinks bien sur mais aussi les commentaires sur votre blog.
Le site Blogonet agrège beaucoup de contenu et il vous permet de chercher une information précise parmi tous les blogs présents dans la base de données.
L’intérêt pour vous, c’est que Blogonet est automatique, pas besoin d’ajouter à chaque fois son article sur le digg-like puisque le site va directement les chercher dans votre flux rss. Les liens sont direct vers votre site. Enfin, tous les liens sont en dur !
En gros, le site a pas mal d’avantages pour nous blogueurs. Il vient juste de sortir de terre et n’est pas forcement exempt de bugs (qu’on aurait zappé à la beta-test) mais c’est une très bonne initiative.


Blogonet

Nouvelle technologie : “Six Sense”, l’innovation autour du cou

Normalement, j’aurai du publier cette vidéo sur Vlogee, mais j’ai été tout simplement époustouflé par cette innovation technologique qui sort tout droit d’étudiants du MIT.
La vidéo provient du TED Show, conférence américaine très connue sur les nouvelles technologies.

La nouvelle technologie appelée “Six Sense” a pour but de facilité l’utilisation des objets de tous les jours grâce à un objet techno connecté que vous portez autour du cou.
Cet objet est une caméra qui analyse ce que vous regardez/utilisez et vous fourni des informations au doigt et à l’oeil, selon vos besoin.

La vidéo est plus qu’explicite et vous comprendrez facilement pourquoi l’on parle de 6 sens.

http://video.ted.com/assets/player/swf/EmbedPlayer.swf