Responsive Design Mock-up Pack

Our freebie this week is huge collection of screen mockups for your responsive designs. The included Photoshop .psd file uses Smart Objects to place your design screenshots onto the displays, and includes 8 different arrangements for you to choose from. As a bonus we have also included all 6 displays as individual vector files.
The included displays are:

• iPhone - Portrait
• iPhone - Landscape
• iPad - Portrait
• iPad - Landscape
• MacBook Pro with Retina Display
• Thunderbolt Display

Adobe Photoshop CS3 or higher is required due to the use of smart objects.

Click here to download PSD Files


 

CSS Media Queries for iPhone 3, iPhone 4, iPhone 4S and iPhone 5

iPhone 5 Media Queries
iPhone 5 in portrait & landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 5 in landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 5 in portrait

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 2G, 3G, 4, 4S Media Queries

It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
iPhone 2G-4S in portrait & landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* STYLES GO HERE */}

iPhone 2G-4S in landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 2G-4S in portrait

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 5 Resolution

Screen Width = 320px (CSS Pixels)
Screen Height = 568px (CSS Pixels)

Screen Width = 640px (Actual Pixels)
Screen Height = 1136px (Actual Pixels)

Device-pixel-ratio: 2

iPhone 4/4S Resolution

Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels)

Screen Width = 640px (Actual Pixels)
Screen Height = 960px (Actual Pixels)

Device-pixel-ratio: 2

iPhone 2G/3G/3GS Resolution

Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels)

Screen Width = 320px (Actual Pixels)
Screen Height = 480px (Actual Pixels)

Device-pixel-ratio: 1

CSS Media Queries for iPad Mini

iPad mini in portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

iPad mini in landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

iPad mini in portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */ }

iPad mini Resolution

Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)

Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)

Device-pixel-ratio: 1

CSS Media Queries for iPads

iPad Media Queries (All generations - including iPad mini)

Thanks to Apple's work in creating a consistent experience for users, and easy time for developers, all 5 different iPads (iPads 1-5 and iPad mini) can be targeted with just one CSS media query. The next few lines of code should work perfect.

iPad in portrait & landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad in landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}

iPad in portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3 & 4 Media Queries

If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries.
Retina iPad in portrait & landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad in landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad in portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad 1 & 2 Media Queries

If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm!
iPad 1 & 2 in portrait & landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}

iPad 1 & 2 in landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

iPad 1 & 2 in portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

How to Connect Mysql Server with Asp.net 2005 / 2008 (C#)

Nowadays, most of the developers are trying to migrate from Microsoft SQL Server to MYSQL Server. This is because MYSQL server is freely downloadable version of the world's most popular open source database that is supported by an active community of open source developers. Meanwhile, there are many developers who are trying to migrate from MYSQL to Microsoft SQL Server. Here I will discuss in the easiest way to connect your asp.net web application with MYSQL Server and also how you can migrate from Microsoft SQL to MYSQL.

Before creating the connection string, we need to install some MySQL and some components for connection. The following are the components and link to download (All are free) that need to be installed.
mysql> create database mydataBase;
Query OK, 1 row affected (0.03 sec)
mysql> use mydataBase;
Database changed
mysql> creat table mytable(Name varchar(10),Number varchar(10));
Query OK, 0 rows affected (0.11 sec)
Now we can move to our project.

Go to Visual Studio >> Solution Explorer >> Add references and add a reference to MySQL.DATA from .net components.(check the image for detail).

MYSQL.DATA will not shown in your Add Reference window until you have installed the MYSQL Connector and MDAC.



Then the following code can be included in our C# code for the connection.public partial class _Default : System.Web.UI.Page 
{
    MySqlConnection con = new MySqlConnection();
    protected void Page_Load(object sender, EventArgs e)
    {
        con.ConnectionString = "Data Source=localhost;Database= mydataBase;User ID=root;Password=root"; 
  //Default User ID and password is 'root' as 'sa' for Microsoft SQL Server
        con.Open();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
  //Let us just get connect and display the table in a GridView.
        MySqlDataAdapter dr = new MySqlDataAdapter("select * from mytable",con);
        DataSet ds = new DataSet();
        dr.Fill(ds);
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
}

And we also need the following namespace to import.using System.Data.Odbc;using MySql.Data.MySqlClient;using MySql.Data.Types;
Again these namespace won't come until you have added the Reference for MYSQL.DATA.

For migrating Microsoft SQL to MySQL can be easily done with MYSQL Migration Tools. You can download it from the below link 

http://dev.mysql.com/downloads/gui-tools/5.0.html 

If still migration is not working, then you can check this forum link below.

http://www.codeproject.com/answers/56469/Asp-net-Mysql.aspx 

What’s Splash Screen?

For those who are new to programming and haven’t heard of the term “Splash Screen”, let me first give a brief explanation about it. Splash screen is commonly found in iOS apps, as well as, other desktop applications. This is the first screen you see when launching an application. Usually, splash screen is an image covering the entire screen and disappears after the main screen is loaded.

iPhone splash screen dimensions

• Default@2x.png  ----------------------------------- 640w x 960h (iPhone 4)

• Default.png ------------------------------------------- 320w x 480h (for older iPhones)

iPad splash screen dimensions

• Default - Landscape.png   ---------------------- 1024w x 748h

• Default - Portrait.png        ----------------------   768w x 1004h

• Default - PortraitUpsideDown.png -----------   768w x 1004h

• Default - LandscapeLeft.png ------------------  1024w x 748h

• Default - LandscapeRight.png ----------------  1024w x 748h

Approximate Conversion from Points to Pixels

Here's a chart that converts points to pixels (and ems and %). It's an approximation, which will depend on font, browser and OS, but it's a good starting point.

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%