McGivrer's Home

life of french web solution architect

  • Tobi, is not a dog, but a Functional Test framework !

    • 16 Jul 2011
    • 0 Responses
    •  views
    • development functional javascript test web
    • Edit
    • Delete
    • Tags
    • Autopost
    Tobi ! Get' there !
    No, I am not calling back my smart dog, but trying to integrate Tobi (a functional testing framework) into a beautiful web site.
    THat's the fact, Tobi is a javascript API with a Human Language Oriented methods to test some web interface.
    If you want to test some Login Form, you will be able to write something like this:
    var tobi = require('tobi') , 
        app = require('./my/app') , 
        browser = tobi.createBrowser(app); 
    browser.get('/login', function(res, $){ 
        $('form') 
          .fill({ username: 'tj', password: 'tobi' }) 
          .submit(function(res, $){ 
            res.should.have.status(200); 
            res.should.have.header('Content-Length'); 
            res.should.have.header('Content-Type', 'text/html; charset=utf-8'); 
            $('ul.messages').should.have.one('li', 'Successfully authenticated'); 
            browser.get('/login', function(res, $){ 
                res.should.have.status(200); 
                // We are finished testing, close the server app.close(); 
                $('ul.messages').should.have.one('li', 'Already authenticated'); 
            }); 
        }); 
    });
    With this smart javascript, you will be able to test login form with a 'tobi' password for a 'tj' user. and then detect if the authentication run ok or fail. And the descripted scenario is also testing the "Already authentified" process from this "/login" form.
    Ready to test other things ?  go and visit this web site : https://github.com/LearnBoost/tobi
    note:
    This framework was discoverdI had just discovered this framework exploring the BrowserId.org feature from Mozilla !
    • Tweet
  • French web pages for McGivrer !

    • 30 Sep 2010
    • 0 Responses
    •  views
    • google sites test web
    • Edit
    • Delete
    • Tags
    • Autopost
    You can now discover my own tests on Google Sites with the McGivrer's Web Pages site.

    If you are "french" friendly, and can read french language, please, come and visit this sample site.
    • Tweet
  • What to say about Trends ?

    • 30 Aug 2010
    • 0 Responses
    •  views
    • analysis android future iphone linux macos os trends web windows
    • Edit
    • Delete
    • Tags
    • Autopost

    Just run the following google trends:

    Capture0

    And here are the results:

    Capture1

    Iphone is explosing, Android quitly raise, and other OS are decreasing...

    But is it the right analysis ?

    wait and see...

    • Tweet
  • Pixlr.com ! online Image editor

    • 16 Jun 2010
    • 0 Responses
    •  views
    • app editor image online photo web
    • Edit
    • Delete
    • Tags
    • Autopost
    What I have just discover on the web is one of the most stunning WebApp I have ever seen before:

    A photoshop like online image/photo editor !

    Capture1

    Illustration 1 - Pixlr.com, the online Image/photo editor

    This web app is very impressive and very usable !

    Please, make a test on http://www.pixlr.com/

    Woaw.

    • Tweet
  • CSS: how to reset default value in a multi browsers scope ?

    • 9 Jun 2010
    • 1 Response
    •  views
    • css design reset web
    • Edit
    • Delete
    • Tags
    • Autopost

    Already have to produce web page to public target ?  And by public i mean out of intranet or extranet of the world of enterprise, targetting any public.

    Yes ?

    So the first thing to do before creating a CSS styles sheet is to start from the same point for all browser. And as all CSS specification version didn't tell a word about what are the default values, all browser developers go with there own randomly choosen values ;)

    A first solution
    So, it's mandatory to reset these values to be sure that your CSS will have chance to produce the same visual result on all web client of the world, any OS, any browser.

    The first technic is to reset individualy all html tags to some common values:

    html, body, div, form, fieldset, legend, label {
       margin: 0;
       padding: 0;
    }

    table {
       border-collapse: collapse;
       border-spacing: 0;
    }

    th, td {
      text-align: left;
      vertical-align: top;
    }

    h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

    img { border: 0; }


    Quick and dirty ?
    The second
    technic is to reset with a one big line
    :

    * {
     
      vertical-align: baseline;
      font-weight: inherit;
      font-family: inherit;
      font-style: inherit;
      font-size: 100%;
      border: 0;
      padding: 0;
      margin: 0;

    }


    Thanks to "Carrer Blog : CSS Mini Reset" for this very fast solution covering 80% rules.

    References
    Other solutions exists :

    • http://www.maxdesign.com.au/articles/css-reset/
    • http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
    • http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
    • Tweet
  • Web Font: here we are !

    • 9 Jun 2010
    • 1 Response
    •  views
    • css desgin fonts web
    • Edit
    • Delete
    • Tags
    • Autopost
    Did you already dream, as a web designer, to embed your own Fonts in your web page ( without using dynamic images, I mean ;) ?

    Yes ?  so please,  switch your old scrappy web browser to a brand new Goggle Chrome 4.x or Safari 4 to be able to show you skills in design and page composition ;)

    http://ajaxian.com/archives/2010-web-fonts-are-here-and-ready-to-use


    Have a Good Day.

    • Tweet
  • OS/web browser : the statistics on mcgivrer.fr !

    • 4 May 2010
    • 0 Responses
    •  views
    • IE browser firefox os statistics web
    • Edit
    • Delete
    • Tags
    • Autopost
    Thanks to Google analytics, this is the statistics for the past year.

    Capture

    Interesting !
    • Tweet
  • HTML5 full demo story

    • 26 Apr 2010
    • 0 Responses
    •  views
    • design html5 interactivity presentation web
    • Edit
    • Delete
    • Tags
    • Autopost
    http://apirocks.com/html5/html5.html#slide1

    nothing more, just read/see/contemplate :)

    Flash would have only some months to survive, after the "go live" of HTML5 ...

    • Tweet
  • Simple design with simple color and simple tools !

    • 6 Apr 2010
    • 0 Responses
    •  views
    • css demo design html js web
    • Edit
    • Delete
    • Tags
    • Autopost

    Yes, working as Web developer prevent me to be a good web designer. And sometime, I need focus on state of my knowledge about simple web languages as HTML and CSS.

    This is my "State Of the Art"  about web design.  A tentative of design ;)

    Comments are welcome.

    Capture-web-context_-_mozilla_

    Note: please, notate that red part at bottom is only for debug purpose ;)

    • Tweet
  • Hobo: Step 4 - adding a cover image

    • 16 Mar 2010
    • 0 Responses
    •  views
    • development hobo image rad rails tutorial web
    • Edit
    • Delete
    • Tags
    • Autopost
    As we've now get a running web application to manage our library, I propose you to add an image field management to our Book model.
    To manage this part, we are going to need 3 things:
    • an imaging tool like mini_magick or image_magick,
    • the paperclip plugin for rail
    • and the paper_clip_with_hobo to be used with Hobo framework.
    1. The image tool
    My choice go to imagemagick, but i know that this is working well with others tools like

    2. Paperclip plugin
    You will find very interesting infoirmation about this plugin usage at this page: http://jimneath.org/2008/04/17/paperclip-attaching-files-in-rails/
    And you  will be able to download it from http://github.com/thoughtbot/paperclip

    To install this small plugin, just go to your hobo application root path and run the following command:

    script/plugin install git://github.com/thoughtbot/paperclip.git
    Now you have downloaded it, you are ready to use it.

    3. Get the paperclip_with_hobo
    Just fololowing the same process, you have to download/install this rails plugin from git:

    script/plugin install git:http://github.com/tablatom/paperclip_with_hobo.git ok. let's apply some model modification to our Book modelisation.Book.rbwe need to add some new field to our app/model/book.rb class Book < ActiveRecord::Base hobo_model # Don't put anything above this  fields do title :string  author :string year :integer  resume :text note :integer  timestamps end   has_attached_file :cover, :styles => {                   :full=>"600x600>",                  :medium => "300x300>",                   :thumb => "100x100>",                  :mini => "60x60>" },                  :path => " :rails_root/public/media/books/covers/:id/:style.:extension",                 :url => "media/books/covers/:id/;style.:extension"  ...end Adding such "has_attached_file" field to our Book model add in reality 4 fields to our database model after running the rake db:migrate standard rails operation : see db/migrate/20100221172242_add_attachements_cover_to_book.rb migration fileclass AddAttachmentsCoverToBook < ActiveRecord::Migration  def self.up add_column :books, :cover_file_name, :string  add_column :books, :cover_content_type, :string add_column :books, :cover_file_size, :integer  add_column :books, :cover_updated_at, :datetime end  def self.down remove_column :books, :cover_file_name  remove_column :books, :cover_content_type remove_column :books, :cover_file_size  remove_column :books, :cover_updated_at end endOk, now our model is updated, database too. we are ready to modify some dryml file to show this image. Go to app/views/taglibs/application.dryml and add the following declaration:At file beginning in existing "include" lines:<include src="paperclip" plugin="paperclip_with_hobo"/> And at end of file :<extend tag="form" for="Book">        <old-form merge multipart>                 <field-list fields="title, author, year, resume, note, cover, category" param/>         <div param="actions">  <submit label="#{ht 'books.actions.save', :default=>['Save']}" param/><or-cancel param="cancel"/>  </div>        </old-form> </extend>This is a view modifier for a Book, adding the cover field and removing the 4 database fields. Then, modify the card dryml for Book model, in the same previous file (application.dryml) :<extend tag="card" for="Book">   <card>    <h5>     

       

                <view:resume />     </p>    <p>       <%= I18n.t :uploaded_label %><br />      <view:created_at format="%B %d, %Y" /> by <you:user />.     </p>    <delete-button class="actions" />      </card> </extend>Let's test our new cover field !

    • Tweet
  • « Previous 1 2 Next »
  • About

    Java/J2EE Expert
    Technical Manager
    Web Standard evangelizer

    120786 Views
  • Archive

    • 2012 (12)
      • May (1)
      • April (7)
      • January (4)
    • 2011 (53)
      • December (5)
      • November (1)
      • September (4)
      • August (4)
      • July (5)
      • June (2)
      • May (11)
      • April (11)
      • March (5)
      • February (3)
      • January (2)
    • 2010 (51)
      • December (2)
      • November (2)
      • October (1)
      • September (3)
      • August (8)
      • July (4)
      • June (15)
      • May (3)
      • April (2)
      • March (5)
      • February (5)
      • January (1)
    • 2009 (29)
      • December (1)
      • November (5)
      • October (6)
      • August (1)
      • July (4)
      • June (2)
      • May (1)
      • April (4)
      • March (2)
      • February (1)
      • January (2)
    • 2008 (39)
      • December (1)
      • November (5)
      • October (8)
      • September (8)
      • August (8)
      • July (9)

    Get Updates

    Follow this Space »
    You're following this Space (Edit)
    You're a contributor here (Edit)
    This is your Space (Edit)
    Follow by email »
    Get the latest updates in your email box automatically.
    Loading...
    Subscribe via RSS
    FlickrPicasametaweblog