Code Optimization
If we want to optimize the HTTP requests of our WebApp we need to approach the problem from two point of view; first we need to optimize each imported resources and then optimize the number of imported resources.

Code optimization is always the first step of any type of optimization technique because everything is based on code, everything is coded in our WebApp. Good code can save bandwidth and reduce rendering delay, improve its readability and its maintainability overtime. Optimize the number of HTTP request without first optimize our code is a complete waste of time. Once the HTML, CSS and Javascript code is in check we can start the real HTTP optimization process.

According with this approach the first step in order to reduce HTTP request is always reduce the number of imported elements in out user interface. A must at this level is always use CSS rules every time is possible instead of bitmap image; a good example is use CSS gradient instead of image files for our layout. At this stage we really need to use CSS rules for everything is involved in our user interface and insert images only when is really necessary.

Color Depth Optimization
The next step is to optimize the imported (external) resources, typically images (CSS and Javascript should be already optimized at this point of the process). Where we can’t use CSS, images must be have its color depth optimized. Optimize the image color depth will optimize the image’s weight after the exporting process using the right image format. If it’s a photo we need to use a good compression ration in JPG format while if it’s a user interface image is important to check the number of color used, if we use less then 256 colors we can export it in PNG8. In most of cases exporting in PNG8 we will have a smaller image then export as a 256 colors GIF. Using similar colors will also help to keep the color count, and so the image weight, low.

We also must report that often export an image using a graphic programs like Adobe Photoshop, Fireworks, or Gimp will also add unwanted metadata that will increase the image weight. A workaround is optimize our images using one of the many programs available like PNGOut that will make them as slim as possible. Image color depth optimization will reduce the WebApp page loading time and will increase the level of user experience.

Use Sprite Images
If we need to insert many images is fundamental consider to insert these images into CSS sprites. The word “Sprite” always remind me the old ’80 where people like me killed himself playing all days with Commodore 64 or ZX Spectrum games. Because in computer science everything is old soon or later will become new again web developer adopted the idea behind the old Sprite management and they imported in the CSS world. In the image below we can see the CSS sprite techniques used for design checkbox in the iWebKit 5 Framework.

If we use many images for our user interface the CSS Sprite technique can help to reduce the global loading time of our WebApp pages. The basic concept behind the use of sprite image is to combine multiple images into one to reduce the amount of HTTP requests generated for loading external images in our layout. Once all the images are inside a single image file we can access a specific zone of that image the x and y value of the background-position property. The image 2 show how we can swap the two images changing the y value from 0 to 28px.

If we used image rollovers, inside a non-touch layout (rollover doesn’t exist in a touch based device world), this technique will also avoid the typical white flash that occur every time the browser load for the first time the rollover image. Sprite technique is perfect for user interface elements and other little details but is not a good approach for optimize the behavior of big and heavy images.

Sprite technique will avoid inline CSS and Javascript code importing it in our web pages but is important to be aware of don’t abuse of this approach. Is important to always keep one eye on the number of imported resources (images, CSS and Javascript), because more file to import in our web page equal more rendering and loading latency from the browser. In the image 3 below we can see a transfer latency time comparison between single and multiple image files.

The basic concept of sprite image is combine multiple images into one to reduce the amount of HTTP requests generated for external images in our layout.

Downsides of Web Cache
Minimize the HTTP request will speed up the web page loading time, from this point of view is also a good idea consider to add HTTP Caching to our web pages. HTTP Caching is also know as Web Cache, is based on good principles but in practice using it in our Apple Safari context is almost unusable because of its specification limits. The following list resume some of the main limits of HTTP Caching:

• Single Resource must be less then 15K (non compressed)
• Global Cached Resources must be less the 1.5Mb
• Powering Off the Device will Clear the HTTP Cache
• Closing the Tab will Clear the HTTP Cache

As we can see this type of cache is very unreliable from a development point of view because of is cleared too often and because can’t cache the majority of the resource in a modern web page. Even the most compressed Javascript Framework or CSS Stylesheet struggle to go under the 15K and none of the image used in almost every Web Site or Web Application goes under this limit.

The main reason is that, beside the physiological rendering time of our web pages, the HTTP/1.1 protocol specify that a browsers can only download two resource in parallel per hostname as showed in image 4. A workaround for this sort of bottleneck is spread our external resources over multiple hostnames but because this approach is not an option in the majority of projects we will not consider this approach in this paragraph.

Avoid HTTP Redirection
As last thing we can’t forget to avoid any type of HTTP redirects in our web pages. The HTTP redirect is accomplished using the 301 or 302 status code and in both case it add delay to the average page loading time decreasing the level of user experience.

This rule will reduce the loading time reducing the communications delays between the client side and server side.

Conclusions
Optimize the performance of our Web Site or Web Application is not a development approach that we can’t perform only at the end of our project workflow but is something that is applied along the whole project workflow. Optimize the HTTP request is just one step of this important process that is not wrote in the stone but change according with the project requirements and context variables involved in the user experience.

> Vedi il Libro Pro iOS Web Design and Development su Amazon.it

Related Posts

IASummit 2011: Design e Ottimizzazione Cognitiva di Interfacce

Posted on 25, May 2011

WhyMCA 2010: Paradigma Cognitivo dei Dispositivi Touch-Screen

Posted on 25, May 2011

<link type=”text/css” rel=”stylesheet” href=”screen.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”print.css” media=”print” />

The W3C added the Media Query as part of the CSS3 specification improving the use of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.

Thanks to these new features Media Queries became a popular client-side technique for delivering ad-hoc stylesheet to the iPhone. Before media queries designers have experimented with resolution-aware layouts in the past, mostly relying on JS-driven solutions.

An important step of making a WebApp layout responsive using CSS3 media query is handle the orientation change event serving the right image size. The first step is to set the viewport as following.

<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″>

After the viewport we need to write the HTML5 code designing our WebApp layout. For our purpose will show an <img> element.

<img class=”heroContent” src=”images/heroImage.png” alt=”The New iPhone” />

After wrote the HTML5 code we start to work on CSS3 media queries code targeting the different devices according with our project requirements. In this example will target the iPhone 2, 3 and the iPhone 4, 4S. Adding a couple of more cases we can also target iPad.

<!– iPhone 2G, 3G, 3GS Portrait –>

@media only screen and (device-width: 320px) and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) {

/* CSS3 Rules for iPhone in Portrait Orientation */

}

<!– iPhone 2G, 3G, 3GS Landscape –>

@media only screen and (device-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {

/* CSS3 Rules for iPhone in Landscape Orientation */

}

<!– iPhone 4, 4S Portrait –>

@media only screen and (device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {

/* CSS3 Rules for XX iPhone in Portrait Orientation */

}

<!– iPhone 4, 4S Landscape –>

@media only screen and (device-width: 960px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {

/* CSS3 Rules for iPhone in Landscape Orientation */

}

With these media query we tested multiple value in the same query using different keywords and values; in order to target the retina display we use a keyword that inspect the display pixel density but we can also use a keyword that target directly the display dpi resolution as following.

<!– iPhone 4, 4S Portrait –>

@media only screen and (device-width: 480px) and (orientation: portrait) and (resolution: 163dpi) {

/* CSS3 Rules for XX iPhone in Portrait Orientation */

}

In our examples so far we insert the Media Query in our CSS file as part of a @media rule. but if we need we can also insert the media query as part of an @import directive as following.

@import url(“iphone-retina_portrait.css”) screen and (device-width: 480px) and (orientation: portrait) and (resolution: 163dpi);

We can also link the CSS file directly inside the <head> using the <link> tag as following.

<link
rel=”stylesheet” type=”text/css”
media=”screen and (device-width: 480px) and (orientation: portrait) and (resolution: 163dpi)”
href=”iphone-retina_portrait.css”
/>

The logic behind the CSS3 approach is the use one image at 100% for each device in order to fit it’s container element in both portrait and landscape orientation.

.heroContent {
width: 100%;
}

The possibility to target a device in two different orientation status will also offer the possibility to create ad-hoc fixed element layout and bypass the need to rely on fluid structures; this is a solid approach every time we need to design for a specific device like the iPhone.

Responsive Design approach will help us to design user interface element that will fit both portrait and landscape orientation increasing the level of user experience of our WebApp.

> Vedi il Libro Pro iOS Web Design and Development su Amazon.it

Related Posts

IASummit 2011: Design e Ottimizzazione Cognitiva di Interfacce

Posted on 25, May 2011

WhyMCA 2010: Paradigma Cognitivo dei Dispositivi Touch-Screen

Posted on 25, May 2011

If you have been developing WebApp for iOS you may have noticed that the problem here is that “regular” images designed for iPhone 3 are not very crisp on Retina Display devices, at least compared with the other iOS native retina display elements.

If we develop NativeApp for iOS we just need to add the postfix @2x to the image name letting the iOS runtime system handle the whole things. On the other side if we develop a WebApp a good approach to this problem is to use the proprietary prefixed CSS3 rule -webkit-min-device-pixel-ratio in conjunction with a CSS3 Media Query. Using this approach we are able to serve “regular images” and “retina images” according with the display technology available on a certain device targeted using it’s pixel density. Following the code.

If we want to display a 50×50 pixel logo via <img> tag we need to design two versions, one at 50×50 (164ppi) pixel and one at 100×100 pixel (326ppi). Personally here I use the same @2x naming convention adopted by NativeApp.

logo.png // regular image
logo@2x.png // retina image

Once we have our assets we can write the HTML code inserting the logo in our layout using the following code.

<img src=”/images/logo.png” alt=”myLogo” width=”50″ height=”50″ />

Once the HTML is ready it’s time to write the two CSS files, following we can see the code from the ios-retina.css file.

// this overrides ios.css .logo definition
.logo {
width: 50px;
height: 50px;
url: “/images/logo@2x.png”; // This is actually a 100×100 image
}

As we can see we resized the 100×100 pixel logo via CSS in order to fits within the layout keeping untouched the user interface proportions inside the visible area. As last step we need to link the CSS file into the HTML code using the following code.

<link type=”text/css” rel=”stylesheet” href=”/css/ios.css”/>
<link
type=”text/css”
rel=”stylesheet”
href=”/css/ios-retina.css”
media=”only screen and (-webkit-min-device-pixel-ratio: 2)”
/>

The path is clear, in the near future the market will see only Retina Display devices (at least from Apple) but until this day is important to continue to provide support for regular 320×480 display and their users.

> Vedi il Libro Pro iOS Web Design and Development su Amazon.it

Related Posts

WhyMCA 2010: Paradigma Cognitivo dei Dispositivi Touch-Screen

Posted on 25, May 2011

IASummit 2011: Design e Ottimizzazione Cognitiva di Interfacce

Posted on 25, May 2011

La parte finale del workshop e’ dedicata all’ottimizzazione da parte dei partecipanti di una risorsa web in ottica tablet touch applicando le nozioni introdotte nella prima parte del workshop.

Related Posts

IASummit 2011: Design e Ottimizzazione Cognitiva di Interfacce

Posted on 25, May 2011

WhyMCA 2010: Paradigma Cognitivo dei Dispositivi Touch-Screen

Posted on 25, May 2011

Parallelamente  a tali concetti verra’ sviluppato illustrato il concetto di risorsa cognitiva. Le risorse cognitive vengono usate dall’utente per qualsiasi azione/interazione con l’ambiente esterno e attraverso tale paradigma saranno affrontati alcuni approcci orientati sia al design che all’ottimizzazione di progetti tipici di applicazioni mobile basate su tecnologia touch screen.

Related Posts

IASummit 2011: Design e Ottimizzazione Cognitiva di Interfacce

Posted on 25, May 2011

WhyMCA 2010: Paradigma Cognitivo dei Dispositivi Touch-Screen

Posted on 25, May 2011

Applicazione realizzata per i sommelier, i degustatori di vino professionisti e per gli appassionati di vino. Attraverso l’applicazione si può accedere al disciplinare dei vini DOC, DOCG e IGT italiani. DOCGItalia permette ricerca molto mirate e dettagliate consultazioni grazie ad un vasto database fornito dal cliente.

La pagina del corso offre sia le slide in pdf che i video in formato SD, HD e Mobile da visionare sui propri dispositivi iOS. Dopo solo pochi giorni dalla sua messa online il corso e’ gia’ secondo in classica trai corsi piu’ scaricati e questo non puo’ farci che piacere e premiare l’impegno di tutti quelli che si sono impegnati per la sua realizzazione.

“You’ve got to find what you love..”
Steve Jobs

I am honored to be with you today at your commencement from one of the finest universities in the world. I never graduated from college. Truth be told, this is the closest I’ve ever gotten to a college graduation. Today I want to tell you three stories from my life. That’s it. No big deal. Just three stories.

The first story is about connecting the dots.

I dropped out of Reed College after the first 6 months, but then stayed around as a drop-in for another 18 months or so before I really quit. So why did I drop out?

It started before I was born. My biological mother was a young, unwed college graduate student, and she decided to put me up for adoption. She felt very strongly that I should be adopted by college graduates, so everything was all set for me to be adopted at birth by a lawyer and his wife. Except that when I popped out they decided at the last minute that they really wanted a girl. So my parents, who were on a waiting list, got a call in the middle of the night asking: “We have an unexpected baby boy; do you want him?” They said: “Of course.” My biological mother later found out that my mother had never graduated from college and that my father had never graduated from high school. She refused to sign the final adoption papers. She only relented a few months later when my parents promised that I would someday go to college.

And 17 years later I did go to college. But I naively chose a college that was almost as expensive as Stanford, and all of my working-class parents’ savings were being spent on my college tuition. After six months, I couldn’t see the value in it. I had no idea what I wanted to do with my life and no idea how college was going to help me figure it out. And here I was spending all of the money my parents had saved their entire life. So I decided to drop out and trust that it would all work out OK. It was pretty scary at the time, but looking back it was one of the best decisions I ever made. The minute I dropped out I could stop taking the required classes that didn’t interest me, and begin dropping in on the ones that looked interesting.

It wasn’t all romantic. I didn’t have a dorm room, so I slept on the floor in friends’ rooms, I returned coke bottles for the 5¢ deposits to buy food with, and I would walk the 7 miles across town every Sunday night to get one good meal a week at the Hare Krishna temple. I loved it. And much of what I stumbled into by following my curiosity and intuition turned out to be priceless later on. Let me give you one example:

Reed College at that time offered perhaps the best calligraphy instruction in the country. Throughout the campus every poster, every label on every drawer, was beautifully hand calligraphed. Because I had dropped out and didn’t have to take the normal classes, I decided to take a calligraphy class to learn how to do this. I learned about serif and san serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating.

None of this had even a hope of any practical application in my life. But ten years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac. It was the first computer with beautiful typography. If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts. And since Windows just copied the Mac, it’s likely that no personal computer would have them. If I had never dropped out, I would have never dropped in on this calligraphy class, and personal computers might not have the wonderful typography that they do. Of course it was impossible to connect the dots looking forward when I was in college. But it was very, very clear looking backwards ten years later.

Again, you can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.

My second story is about love and loss.

I was lucky — I found what I loved to do early in life. Woz and I started Apple in my parents garage when I was 20. We worked hard, and in 10 years Apple had grown from just the two of us in a garage into a $2 billion company with over 4000 employees. We had just released our finest creation — the Macintosh — a year earlier, and I had just turned 30. And then I got fired. How can you get fired from a company you started? Well, as Apple grew we hired someone who I thought was very talented to run the company with me, and for the first year or so things went well. But then our visions of the future began to diverge and eventually we had a falling out. When we did, our Board of Directors sided with him. So at 30 I was out. And very publicly out. What had been the focus of my entire adult life was gone, and it was devastating.

I really didn’t know what to do for a few months. I felt that I had let the previous generation of entrepreneurs down – that I had dropped the baton as it was being passed to me. I met with David Packard and Bob Noyce and tried to apologize for screwing up so badly. I was a very public failure, and I even thought about running away from the valley. But something slowly began to dawn on me — I still loved what I did. The turn of events at Apple had not changed that one bit. I had been rejected, but I was still in love. And so I decided to start over.

I didn’t see it then, but it turned out that getting fired from Apple was the best thing that could have ever happened to me. The heaviness of being successful was replaced by the lightness of being a beginner again, less sure about everything. It freed me to enter one of the most creative periods of my life.

During the next five years, I started a company named NeXT, another company named Pixar, and fell in love with an amazing woman who would become my wife. Pixar went on to create the worlds first computer animated feature film, Toy Story, and is now the most successful animation studio in the world. In a remarkable turn of events, Apple bought NeXT, I returned to Apple, and the technology we developed at NeXT is at the heart of Apple’s current renaissance. And Laurene and I have a wonderful family together.

I’m pretty sure none of this would have happened if I hadn’t been fired from Apple. It was awful tasting medicine, but I guess the patient needed it. Sometimes life hits you in the head with a brick. Don’t lose faith. I’m convinced that the only thing that kept me going was that I loved what I did. You’ve got to find what you love. And that is as true for your work as it is for your lovers. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.

My third story is about death.

When I was 17, I read a quote that went something like: “If you live each day as if it was your last, someday you’ll most certainly be right.” It made an impression on me, and since then, for the past 33 years, I have looked in the mirror every morning and asked myself: “If today were the last day of my life, would I want to do what I am about to do today?” And whenever the answer has been “No” for too many days in a row, I know I need to change something.

Remembering that I’ll be dead soon is the most important tool I’ve ever encountered to help me make the big choices in life. Because almost everything — all external expectations, all pride, all fear of embarrassment or failure – these things just fall away in the face of death, leaving only what is truly important. Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked. There is no reason not to follow your heart.

About a year ago I was diagnosed with cancer. I had a scan at 7:30 in the morning, and it clearly showed a tumor on my pancreas. I didn’t even know what a pancreas was. The doctors told me this was almost certainly a type of cancer that is incurable, and that I should expect to live no longer than three to six months. My doctor advised me to go home and get my affairs in order, which is doctor’s code for prepare to die. It means to try to tell your kids everything you thought you’d have the next 10 years to tell them in just a few months. It means to make sure everything is buttoned up so that it will be as easy as possible for your family. It means to say your goodbyes.

I lived with that diagnosis all day. Later that evening I had a biopsy, where they stuck an endoscope down my throat, through my stomach and into my intestines, put a needle into my pancreas and got a few cells from the tumor. I was sedated, but my wife, who was there, told me that when they viewed the cells under a microscope the doctors started crying because it turned out to be a very rare form of pancreatic cancer that is curable with surgery. I had the surgery and I’m fine now.

This was the closest I’ve been to facing death, and I hope it’s the closest I get for a few more decades. Having lived through it, I can now say this to you with a bit more certainty than when death was a useful but purely intellectual concept:

No one wants to die. Even people who want to go to heaven don’t want to die to get there. And yet death is the destination we all share. No one has ever escaped it. And that is as it should be, because Death is very likely the single best invention of Life. It is Life’s change agent. It clears out the old to make way for the new. Right now the new is you, but someday not too long from now, you will gradually become the old and be cleared away. Sorry to be so dramatic, but it is quite true.

Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma — which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.

When I was young, there was an amazing publication called The Whole Earth Catalog, which was one of the bibles of my generation. It was created by a fellow named Stewart Brand not far from here in Menlo Park, and he brought it to life with his poetic touch. This was in the late 1960′s, before personal computers and desktop publishing, so it was all made with typewriters, scissors, and polaroid cameras. It was sort of like Google in paperback form, 35 years before Google came along: it was idealistic, and overflowing with neat tools and great notions.

Stewart and his team put out several issues of The Whole Earth Catalog, and then when it had run its course, they put out a final issue. It was the mid-1970s, and I was your age. On the back cover of their final issue was a photograph of an early morning country road, the kind you might find yourself hitchhiking on if you were so adventurous. Beneath it were the words: “Stay Hungry. Stay Foolish.” It was their farewell message as they signed off. Stay Hungry. Stay Foolish. And I have always wished that for myself. And now, as you graduate to begin anew, I wish that for you.

Stay Hungry. Stay Foolish.

Thank you all very much.

Il libro introdurrà aspiranti e programmatori esperti di altri linguaggi all’Objective-C.

Il libro e’ organizzato in piu sezioni:

• una sezioni che introduce le basi della programmazione ad oggetti con l’Objective-C
• una sezione introduce alle caratteristiche peculiari del linguaggio Objective-C
• una sezione copre le tecniche avanzate di programmazione in Objective-C
• una sezione copre le tecniche di programmazione che coinvolgano i Framework
• ed altro..

L’obiettivo del corso/libro e quello di preparare programmatori con solide basi e renderli capaci di iniziare lo studio dell’SDK Apple per sviluppare Applicazioni iOS e OSX.