Saulius blog

For two days im doing a small research, since at my job we want to redesign the site completely. The Project is large sized, so we brainstormed how we could reduce the time spent on writing css.

I remembered Sass from times when i wrote a bit of ruby on rails code, i checked it again and im surprised how nice it is. And even nicer with Compass. 

In this Post i will post some links, if you are interested in using Css frameworks for your projects. Some titles are in german, since it was for my german collegues.

I recoment to read following articles:

http://sonspring.com/journal/sass-for-designers

http://www.netmagazine.com/tutorials/code-smarter-css-sass

Links:

Einfühurung simples OOCSS:

http://www.webkrauts.de/2009/07/06/objektorientiertes-css-eine-einfuehrung/

CSS Frameworks ( with parsers):

http://lesscss.org/

http://xcss.antpaw.org/

http://sass-lang.com/

http://compass-style.org/ ( Sass + Compass)

yii und haml + sass : http://www.yiiframework.com/extension/haml-and-sass

yii und less: http://www.yiiframework.com/extension/less

WordPress ( with mobile theme) http://whiteboardframework.com/

http://www.rootstheme.com/

Xcss hat nen plugin fuer Textmate,

Vergleich:

http://www.pxleyes.com/blog/2010/02/pros-and-cons-of-3-popular-css-meta-frame...

http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-com...

Essay:

http://www.highresolution.info/spotlight/entry/was_sie_ueber_css-frameworks_w... (speziel YAML, anscheinend lesenswert :)

http://www.cabalon.de/blog-details/items/entwickler-wie-benutzt-man-css-frameworks-eigentlich-richtig.html

E-books:

Scalable and Modular Architecture for CSS

 http://smacss.com/

Paar stackoverflow fragen, antworten:

http://stackoverflow.com/questions/2253110/how-to-manage-css-explosion/481299...

Aufräumen von CSS:

http://csstidy.sourceforge.net/download.php

Tips:

clearleft.s3.amazonaws.com/2008/cssSystems_notes_small.pdf

Responsive layouts with sass:

http://chriseppstein.github.com/blog/2011/08/21/responsive-layouts-with-sass/

Netbeans module for scss:

http://code.google.com/p/scss-editor/downloads/detail?name=org-netbeans-modules-languages-scss-0.1-nb7.0.nbm&can=2&q=

[Work is still in progress!!!, ill write now also debug info]

Ufff... juery mobile is a nice framework, till it comes if it needs to work with yii.

The problem is that Yii can generate javascript and css files At the header or at end of the body, but for jquery mobile all js and css needs to be inside the a div tag with 'page' property.

So im searching for a quick and dirty solution how to make jquery read js from html, so i camed to this solution ( not  fully supported :)

0. add a globar var parsedHtml ( in script tag after title in your mobile yii theme)
1. Open jquery mobile framework source file, search for $.ajax field, where the jquery mobile loads the page for the preview.

2. After 'success' property, in the function with 'html' parameter write parsedHtml = all;  after all.get(0).innerHTML = html

--> Now you have the loaded page

3. Use jquery magic to get all script objects

var tempArray = new Array();
var text = new Array();
var count = 0;
var count2 = 0;
all.find('script').each(function(){   
    console.log($(this).attr('src'));
    var tempSrc = $(this).attr('src');
    if(tempSrc != undefined){
        tempArray[count] = tempSrc;
        count++;
    } else {
        text[count2] = $(this).html();
        count2++;
    }
 
});
console.log(count);
console.log(tempArray);
console.log(text);

4. Use jquery again to look if the scripts are already loaded

5. Load the not loaded scripts via:

           for(var k=0; k<jsContainer.length; k++){
               $.getScript(jsContainer[k], function(){
                   console.log('loading ' + k);
             });
           };

I used this function inside a

$('div').live('pagebeforeshow', function(event, ui)

Since it loads all js before opening the page

...

According to Apple, the splitView that can be used for iPad, should be installed as a root view. But i wanted first to have a login screen. Here comes a little trick:

// First i create split view, since according to apple it must be a root view

    splitView =[[UISplitViewController alloc] init];

// Here comes my controllers for the SplitView

    LeftController *left = [[LeftController alloc] init];

    RIghtController *right = [[RIghtController alloc] init];

    splitView.viewControllers = [NSArray arrayWithObjects:left,right,nil];

// And here is the trick: I create a login page, called in my app indexPage and add it as Modal View. As soon as 

// the Application starts the login window will be shown. 

    indexPageController = [[IndexPageController alloc] init];

    [self.window addSubview:splitView.view];

  [self.splitView presentModalViewController:indexPageController animated:NO];

Now im working as Internship at Fraunhofer MeVis, where i will make research and then create a context and location aware iPad application used by medics. In several days i will pull a new blog, where you will find some interesting Ideas, Tips and Texts

Since yesterday evening im learning how to build an iPhone app (im just interested in building interface) , and found a wonderfull book, that camed last month out. You can found it here: http://apress.com/book/view/143023024X . Costs around 25€ and its brilliant!

For deeper knowlege i use also learning videos from https://docs.google.com/View?id=df6c2tjm_583d8x837ch  

Also apple offers some videos, you can get it from https://deimos.apple.com/WebObjects/Core.woa/BrowsePrivately/adc.apple.com.33...

A nice screenshot from video of apple (copyright)

So i finally understand almoust how to use sencha framework, but it is still bugy. The prototype you can get from my github  . Now i still working on FixLayout branch, and after its ready done i will merge it to master. You can also get the original psd from github

Application works quite well on android phones, but mainly is made for usage on iPhone, if the application is added to home screen ( the difference is that you see the app in fullscreen).

Today i researched how to get my website done, so that it will be shown correctly on new and old iphones. Here are some of good advices i found on the web:

Css/javascript approach for optimising a mobile website for high pixel density displays. 

On thursday and today i worked on UI of LBR ( Learn by reading). Here are some of the results

(download)

Click here to download:

lbr-ios-prototype-HeflBocxpGbuCJepDIwe.zip (1.19 MB)