Purple Dev

  • Blog
  • Dev
  • View
  • Notes
  • Reims
  • Resume
  • mail
  • December 19th 2010

    Quick overview of CSS3 under IE 9

    As I recently offered Windows 7 to one on my machine, it was the oportunity to install and test Internet Explorer 9.

    After all the hypes surrounding this release I was a bit disappointed to see this "modern" browser still not supporting some basic CSS3 propoerties.

    List of unsupported CSS3 properties:
    Nov 06th 2009

    Twitter et le Yellow Dust

    Les "reseaux sociaux" sur internet ne me passionnent pas, je les trouve meme quelquefois nefastes. Mais comme cela fait un bon bout de temps que Twitter fait son buzz, je me suis quand meme cree un compte.

    Twitter envoie enormement de messages dont la plupard ne font que polluer la toile. Ainsi mon compte twitter est assigne a broadcaster le niveau de pollution au yellow dust present dans l'air de Seoul.

    Suivez Yellowdust sur Twitter et votre compte sera spamme toutes les heures par une nouvelle alerte vous informant sur le niveau de micro-particules et leur dangerosite sur la megalopole Seoulite.

    Aug 13th 2009

    Evolution of Web Coding

    HTML in 1998


    <td>City Hall, Seoul, Korea</td>

    HTML in 2000


    <div>City Hall, Seoul, Korea</div>

    HTML in 2004

    <adress>City Hall, Seoul, Korea</adress>

    HTML in 2006


    <address>
    <abbr class="geo" title="51.498;-45.5642">
    City Hall, Seoul, South Korea
    </abbr>
    </address>

    HTML in 2008

    <address>
    <abbr class="geo" title="51.498;-45.5642">
    <span class="adr">
    <span class="extended-address">City Hall</span>,
    <span class="locality">Seoul</span>,
    <span class="country-name" title="Republique Of Korea">South Korea</span>
    </span>
    </abbr>
    </address>

    HTML in 2012 ?

    <div class="hentry hreview">
    <div class="vevent entry-content item">
    <address class="vcard">
    <abbr class="fn author" title="Alan Park">I</abbr>
    </address>

    <a rel="bookmark" href="http://example.com/statuses/555/">am</a>
    <abbr class="updated" title="2008-02-17T15:30Z">now</abbr> at the
    <abbr class="rating" title="5">top</abbr>

    <span class="description">
    <a class="summary url entry-title" rel="bookmark tag" href="http://barcamp.org/SemanticCamp">SemanticCamp</a>

    <span class="vcard location">
    <span class="fn org">City Hall</span>
    <span class="adr">
    <span class="locality">Seoul</span>
    <abbr class="country-name" title="Republic Of Korea">South Korea</abbr>
    (<span class="geo">
    <span class="latitude">51.498</span>,
    <span class="longitude">-0.179</span>
    </span>)
    </span>
    </span>
    </span>
    </div>

    Korean HTML in 2000


    <td>City Hall, Seoul, Korea</TD>

    Korean HTML in 2004


    <td><img src="images/city_hall_address.jpg"></td>

    Korean HTML in 2006


    <td><img src="http://
    cafe.naver.com/20081202/94523723285/img/city_all_address.jpg">
    </td>

    Korean HTML in 2008


    <div>
    <img src="http://
    cafe.naver.com/20081202/945723285/img/city_hall_address.jpg"
    alt="City Hall, Seoul, Korea" />
    </div>

    Korean HTML in 2012?


    <div>City Hall, Seoul, Korea</div>
    Inspirated by "Compound Microformats"
    Aug 7th 2009

    font-face unusable in Asia?

    Nowadays, choosing a typeface for your website is like choosing between strawberry, vanilla or chocolate... not so much choice, there is very few fonts that everybody have. CSS 3.0 will bring a solution:

    @font-face
    {
      font-family: Aladdin;
      src: url('/aladdin.ttf') format('truetype');
    }

    aside[title=font-face] { font-family: Aladdin; font-size:16px; }

    Unfortunatly, this feature will be difficult to use in Asia: we can't imagine the user will have to load a 7Mo font file each time he needs to reload the page.

    It already works under Safari 4, Opera 10 and Firefox 3.5:

    jul 16th 2009

    Multiple Backgrounds

    This is a Quick test of one of the most interesting feature of CSS 3.0: blocks with multiple backgrounds, applications are endless.

    The code:

    figure[title=multibackground]
    {
      display:block;
      width:215px;
      height:170px;
      background: url(/images/top.png) top left no-repeat,
      url(/images/bottom.png) bottom left no-repeat,
      url(/images/middle.png) left repeat-y;
    }

    For this moment, you can see the result only under webkit (Safari and Chrome), but it's inside the pipe of next Firefox version

    The Result:

    Background renders well under Chrome3 and Safari4
    Apr 10th 2009

    Adopter le balisage de HTML 5

    La messe semble dite entre HTML 5 et XHTML 2.0, l' internet des prochaines annees sera ecrit en HTML 5. Cependant, ce n' est que fin 2010 au mieux que la specification sera adoptee en tant que recommendation du W3C et d' ici la son utilisation devra donc rester experimentale.

    Mais etant donnee que les discutions concernant le balisage semblent deja avoir trouve un concensus, j' ai decide de le mettre en oeuvre des aujourd'hui sur ce blog.

    Deprecier les <div> et les <span>

    L'avenement du web semantique devra petit a petit pousser tout ce qui n'est pas "contenu" en dehors de la balise body.

    Ces tags sont des marquages uniquement destinees a etre stylees ou ciblees et ne donne aucune indication sur le type de contenu. Ils sont une INTRUSION de la pagination a l'interieur du HTML et cassent le principe qu'un bon document doit voir sa mise en page totalement dissociee de son contenu.

    Ces tags doivent donc etre deprecies.

    le HTML 5 propose plein de nouvelles balises: video, audio, header, footer, article, nav, aside, figure, legend ... qui permettent de se passer totalement des <div> et des <span>

    Le but etant de donner une indication semantique sur le type de contenu avant meme de les etendres avec de l'RDFa.

    Sur Purple Web, les billets sont des <article>, les images sont des <figure> la navigation utilise <nav> et chaque page est une <section>.

    Google n'attend pas

    Android et Iphone ne sont peut-etre pas l' avenir du web, mais ils font partie de la nouvelle generation de produits qui en indiquent la direction.

    La democratisation des terminaux mobiles etant recente, elle presente l' avantage de proposer des navigateurs modernes (Safari, Chrome).

    Consequence: le web mobile supporte deja les futurs standards.

    Dans ce contexte, Google viens de lancer ce mois-ci une version mobile de Gmail utilisant HTML5.

    De meilleures pratiques

    Un balisage "HTML5" du contenu, au dela de ses avantages en terme de lisiblite et referencement permet aussi au developpeur web de se forger un "mindset" plus moderne. Grace a une variete de tags plus large, il devient meme possible de se passer totalement des id et des class. Tel l'exercice propose par Jens Meiert, en plus d'eliminer les balises de mise en page, nous pouvons donc aussi en eliminer les attributs qui leur sont associes... Le HTML devient plus compact et donc plus proche de la definition d'un "HTML Right".

    Ce blog, n'utilisera donc ni div ni span, ni id ni class.

    Probleme de la compatibilite: stopper le support de IE6

    IE8, Google Chrome, Safari 4, Firefox 3... Il est desormais plus simple d'inviter tous les nouveaux visiteurs utilisant IE6 a mettre a jour leur systeme plutot que d'encombrer le code avec des dizaines de hacks visant a supporter un navigateur qui fait desormais partie des antiquites.

    Reste le probleme du support par IE7. En attendant la generalisation de IE8, celui-ci peut etre contourne en incluant dans chaque page un petit script javascript qui va remplacer les elements non supportes par des div ou des span.

    Apr 22th 2009

    la balise "foot"

    Porquoi devoir placer ces trackers de toutes sortes avant la fermeture de la balise <body> et de polluer ainsi la fin du Contenu? De la meme maniere qu'il est possible de placer des scripts en debut de document dans la balise <head> juste avant debut du contenu, il devrait logiquement etre possible d' en placer juste apres dans une balise <foot>... ou bien <feet>...

    Apr 22th 2009

    About Purple Web

    Purple Web has been made to experiment the pleasure of Web Design and Web development. The website is full html5, no div, no span, no class and no id. Purple Web doesn't work under IE6 and IE7.

    Every single line of code is "hand typed" browser, I dont use any backoffice yet, it might comes later.

    Creative Commons