Monthly Archives: April 2012

Tips for Making Website iPhone and iPad Frendly

.

In the latest days I worked on websites optimizations for iPhone and iPad. I found some tips that can be useful and I want to share it.

PHP detecting

You can detect if the device viewing your site is an iPad, iPhone or iPod using this code:

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPad')){
//Do something
}
else if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone')){
//Do something
}
else if(strstr($_SERVER['HTTP_USER_AGENT'],'iPod')){
//Do something
}

iPhone icon

This icon will be used when the user add your website to their home screen. Use the following code to specify a custom icon, the icon size must be at least 57×57 pixel.

<link rel="apple-touch-icon" href="/iphone.png" />

Viewport settings

A typical mobile-optimized site has something like the following:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

The property you can set are:

  • “width”: The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%.
  • “minimum-scale”, “maximum-scale”, “initial-scale”: The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom (pinch) the page in or out.

About viewport there’s an interesting article from quirksmode.org here.

Media query

The css code inserted in this query is read only from iPhone:

@media screen and (max-device-width: 480px){
/* CSS */
}

Background issue

Mobile safari scales your whole site down to its viewport size, including the background image.
To achieve the correct effect, use the “-webkit-background-size” CSS property to declare your background size:

-webkit-background-size: 2650px 1440px;

Klout – Your Online Influences

.

klout
Klout is a website that measures influence online. When you create content or engage, you impact others. Klout analyzes that impact to find your Klout Score, influential topics, and your influencers.

Understanding Klout

Previously, people relied almost entirely on radio announcers, TV hosts, and traditional media to shape their opinions. Today, you can drive the conversation, voice your opinion, and connect with people all over the world using social media. Social media has democratized influence.

Klout was founded in 2008 to help you measure and leverage your influence. We believe influence is the ability to drive action. For example, Oprah’s opinion on literature has inspired millions to read titles from her book club. But you don’t have to be Oprah to have influence. You influence your friend when she listens to a song you recommend on Facebook. You influence your coworker when he checks out an article you posted on LinkedIn and shares it with someone else.

Klout measures your influence based on your ability to drive action in social networks. It process this data to give you an updated Klout Score each morning.

To measure your Klout Score it checks yours:

  • Twitter: Retweets and Mentions
  • Facebook: Comments, Wall-Posts, Likes
  • LinkedIn: Comments, Likes
  • Foursquare: Tips, To-Do’s, Done
  • Google+: Comments, Reshares, +1

“it’s better to have a small and engaged audience than a large network that doesn’t act upon your content”

Why use it

Klout helps you more to understand your own influence, your network’s influence, and the topical interests that make each of us special.

Benchmark your success. Your Klout Score updates daily and your dashboard gives you insights as to why your Score has changed.
Learn about your influence network. On your Klout profile you can see who you’re influencing by your content and who influences you.

Responsive Web Design – CSS Media Queries

.

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

W3C Media Queries

How to use Media Queries

Types

HTML4 had these media types, which are all still valid:

  • aural
  • braille
  • handheld
  • print
  • projection
  • screen
  • tv
@media screen, projection { ... }

Dimensions

You get height and width, which query against the current browser window height and width. You could use them as-is, but that would probably be rare.
Both of them accept min/max prefixes, so more commonly you’d used them as:

  • min-width
  • max-width
  • min-height
  • max-height

There is also device-width and device-height, which also provide min-device-width, max-device-width, min-device-height, and max-device-height.

@media (min-device-width: 640px) { ... }

Orientation / Aspect Ratio

You can query against the aspect ratio of the screen as well with device-aspect-ratio.

@media screen and (device-aspect-ratio: 16/9) { ... }

Or if the screen is in portrait (height larger than width) or landscape (width larger than height) mode.

@media (orientation:portrait) { ... }

Color

You can query on if the screen is in color or not and details about that.

@media (color) { /* Screen is in color */ }

@media (min-color-index: 256) { /* Screen has at least 256 colors */ }

@media (monochrome) { /* Screen is monochrome */ }

Read full article by Chris Coyier.

Some useful resources:

User Agent String

.

User Agent

In computing, a User agent is software (a software agent) that is acting on behalf of a user. For example, an email reader is a Mail User Agent, and in the Session Initiation Protocol (SIP), the term user agent refers to both end points of a communications session.

The Hypertext Transfer Protocol identifies the client software originating the request, using a “User-Agent” header, even when the client is not operated by a user.

In HTTP, the User agent string is often used for content negotiation, where the origin server selects suitable content or operating parameters for the response. For example, the User agent string might be used by a web server to choose variants based on the known capabilities of a particular version of client software.

useragentstring.com

Useragentstring.com has a large list of user agent string. The list contains broswers, crawler and others.

Some day ago I need to understood wich device view a website and the only way to do it is to check the user agent string. This website made it possible because of its list.

Ifttt – Puts the internet to work for you

.

IFTTT (pronounced ‘ift’) is an acronym for ‘IF This Then That’.

Think of all the things you could do if you were able to define any task as: when something happens (this) then do something else (that).

If this then that

this – trigger

The this part of a task is the Trigger. Some example Triggers are “I’m tagged in a photo on Facebook” or “I tweet on Twitter”.

that – action

The that part of a task is the Action. Some example Actions are “send me a text message” or “create a status message on Facebook.”

Channels

Channels define Triggers and Actions, the basic building blocks for creating ifttt tasks, some are:

  • Craigslist
  • Delicious
  • Dropbox
  • Email
  • Evernote
  • Facebook
  • Facebook Pages
  • Feed
  • Flickr
  • Gmail
  • Google Calendar
  • Google Reader
  • Google Talk
  • Last.fm
  • LinkedIn
  • Posterous
  • Read it Later
  • SMS
  • Twitter
  • Vimeo
  • WordPress
  • YouTube
  • Zootool

ifttt.com

How to Create WordPress Plugins

.

In this days I start developing a WordPress plugin so would like to give you the list of the websites that helped me.

With this websites I created my WP plugin, in the next days I will post it. I hope these links will help someone else as much as they helped me.

Random posts