Nate Koechley — "The YUI CSS Foundation"

Nate Koechley, Senior YUI engineer guides you through the CSS foundation in this interesting 42 minute video.

http://us.i1.yimg.com/cosmos.bcst.yahoo.com/player/media/swf/FLVVideoSolo.swf

Advertisements

Adobe Flex 3 components

Some of the interesting components are

  • DividedBox
  • TileList
  • PrintDataGrid
  • Effects
  • Formatters & Validators
  • Chart Controls
  • Advanced Data Grid
  • See all Flex 3 components.

    Trivia : AIR projects are for Desktop applications while Flex projects are for Web applications

    Top AJAX Frameworks of 2007

    Prototype, JQuery and ExtJS are the top 3 AJAX frameworks used in 2007 based on a survey conducted by Ajaxian.

    Interestingly 42.5% of the respondents also used one of these frameworks, toolkits and libraries to design proof-of-concepts and prototypes.

    46.5% of the developers used them in conjunction with PHP followed by Java (27.6%) and .NET (14.6%)

    Adobe's "RIA Leadership Summit 2007" in Bangalore

    Adobe is targeting users with “occassionally (dis?)connected devices” like Laptops, Mobile Phones, IPTVs et all with Flex, AIR , Flash Lite etc., to enable Rich Internet Applications.

    Update : Over 150 people landed-up at Adobe’s “RIA Leadership Summit” help at Oberoi, last evening. Shantanu’s preso was timed perfectly to slightly under an hour (including Q&A and demos)

    The most interesting thing that appealed to me was in the “mobile” stall. The demo was for a mobile application ( in swf format) designed to make the voting experience a lot more “rich” for the popular “Indian Idol” program and apart from cool voting experience, users can also easily browse through the contestant pages, see videos et all.

    While i gave up on using Fireworks a very loong time ago, i was witnessed the Fireworks demo where in

  • PNG files were used to design the Layouts
  • Pages were managed using the ‘Photoshop like Layers’ window
  • Interactivity is added using the ‘Flash Action Script like code’
  • PNG file gets exported as a MXML format into the Flex SDK directory
  • Then a build.bat is used to generate the final SWF. file
  • In CS4 beta, the whole process gets to be simplified whereing swf files get directly generated, without having use build.bat et all.

    When probed about creating collapsible layouts, partial page updates, i was told that apart from the swf and MXML file format outputs, XHTML outputs were also possible and that each Document Object gets automatically assigned to an Id and JavaScript needs to be used separately to manipulate the Document Objects. Phew!

    What became evident was that SAP and Oracle have already started experimenting with Flex, Flashlight and Adobe Integrated Runtime (AIR) in some of their Enterprize Applications to enable Rich Internet User Experience.

    Met up UX folks like Durga Prasad and Auro from SAP, Sudhindra from Human Factors, Param from Onward Consulting, Adesh from Oracle et all.

    Guess the time is right to get into the “Mobile UX ” space.

    —————————————————————————————————————————————

    Adobe’s “RIA Leadership Summit 2007″ is happening on Oct 25 in Bangalore.

    Mr. Shantanu Narayen, President and Chief Operating Officer, Adobe Systems Inc., will speak on the emerging trends in RIA technologies and how Adobe is helping create the web of the future.

    Looking forward to get some insights into Flex and Adobe Integrated Runtime (AIR).

    dCamp Bangalore V 1.0 rocked!

    The first ever design unconference in India, dCamp Bangalore witnessed participation from an interesting mix of designers, developers, product managers etc., Over 75 campers and 10 speakers participated at Yahoo’s campus, yesterday. The good folks from Yahoo Bangalore sponsored the event and made arrangement for t-shirts, lunch and Beer!

    Read Saurabh Minni’s detailed blog post.

    I gave a live-demo on designing Web 2.0 Layouts & Widgets” using CSS, JavaScript and YUI

    null
    This was part of my plan to conduct a workshop called ” Ajax for Designers”. Realized that in order to understand AJAX, its important for us to understand the basics of HTML, CSS, DOM & JavaScript. The preso contained 1 page refreshers for the above. I also realized that the 25 minute slot is way to short to explain the basics of all these technologies. All that i wanted the folks to remember were Div, Class, Id and JavaScript Function. The intent of the workshop is to better bridge the gap between design and development and IMHO, its important for designers to understand the basics of rich web applications, UI libraries and toolkits.

    Amit Pande from Oracle on Enterprize 2.0
    null

    null

    Photos of dcamp Bangalore can be accessed here and here

    Hallway Conversations!
    null

    Navneet Nair from Google on User Motivations
    null

    dCampers sharing a lighter moment!

    null

    Speaking at dCamp Bangalore V 1.0

    I am going to give a live-demo on designing simple ‘Web 2.0 layouts’ along with one page primers on CSS, JavaScript, DOM topped-up with a lil’ bit of YUI

    This is live-demo is targeted at Interaction Designers who are interested in

  • bridging the gap between design & developement.
  • understanding the building blocks of Web 2.0 interfaces
  • designing next gen Web applications
  • writing effective UI specs for next gen Web applications
  • designing their next gen portfolio
  • championing Enterprise 2.0 in their organizations.
  • AHAH!

    AHAH = Asynchronous HTML and HTTP is a subset of AJAX without the X(XML)

    • Update web pages dynamically using JavaScript and XHTML, instead of XML.
    • Like in AJAX, use XMLHTTP to raise a Request.
    • The state-change of the request when the Response is received is directly passed on to a Function.
    • The response is directly fed into the intended target element (Div) of the document using the innerHTML attribute of elements.
    • Unlike AJAX, the response is not parsed at the client side.
    • Technically, its a subset of AJAX without the X (XML)
    • Works when you dont change the content structure of the XMLHTTP response.
    • Doesn’t work when you call HTML files with external .css and .js files.
    • Code is very simple (about 20 lines)
    • Was first used couple of years ago.

    Sample Code to send a AHAH Request

    function ahah(url,target) {
    // native XMLHttpRequest object
    document.getElementById(target).innerHTML = ‘sending…’;
    if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = function() {ahahDone(target);};
    req.open(“GET”, url, true);
    req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
    req = new ActiveXObject(“Microsoft.XMLHTTP”);
    if (req) {
    req.onreadystatechange = function() {ahahDone(target);};
    req.open(“GET”, url, true);
    req.send();
    }
    }
    }

    Sample Code to receive a AHAH Request

    function ahahDone(target) {
    // only if req is “loaded”
    if (req.readyState == 4) {
    // only if “OK”
    if (req.status == 200) {
    results = req.responseText;
    document.getElementById(target).innerHTML = results;
    } else {
    document.getElementById(target).innerHTML=”ahah error:n” +
    req.statusText;
    }
    }
    }

    Example

    How to load a HTML file into a Div

    Used an “onclick function” and successfully loaded a HTML file into a Div.

    JavaScript: onclick=function(){ var el=document.getElementById("x") el.innerHTML="iframe src=\"http://muthuonline.com/about_muthu\" >"

    Wish there was an easier method like having a src for a div.

    However had issues setting the iframe width. After getting this done, i was told that iframe kinda outdated. Next, i guess i have to do the inevitable…