Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers » XHTML

WDF Mobile App Landing Page XHTML Template

Web Design Fan — Tue, 31 May 2011 14:30:57 +0000

Join the Fan Club!

You are currently viewing a premium “Member’s Only” post from the Web Design Fan Club. To continue viewing this awesome content after June 16, you can become a member for the heavily discounted of $36/year or join us on a monthly basis for $9/month after June 16.

Did you read that right? Yes, yes you did. $36 for the year (8 months free) if you become a yearly subscriber before June 16. Seems kind of foolish to pass something like that up, eh?

Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. From WordPress themes to premium icon sets and vectors, advanced tutorials to educational resources and files, the Web Design Fan Club delivers. Not only that, but you gain access to interviews with some of the best web designers and developers working today.

Today we are bringing our Web Design Fan Club members a simple and effective mobile app landing page template. Originally designed by Tomas Laurinavičius, this template is easy to edit and make your own. The package includes the XHTML and CSS files, as well as the original PSD. Take a look at our screenshot below for a look at the template or visit the original tutorial we posted here. The template was coded by Charles Stover, another talented WDF contributor.

Download the mobile app landing page theme here.

You can easily check out our best quality MB7-225 which prepare you well for the real 70-565 exam. You can also get success in real MB7-231 exam with the quality 70-653.

Using jQuery to Open Standards Compliant XHTML Links in New Tabs or Windows

Charles Stover — Wed, 17 Nov 2010 12:54:02 +0000

In This Tutorial

Introduction
Why a JavaScript-Set Target Attribute is Not Standards Compliant
How to Open Links in a New Tab or Window

Introduction

This tutorial, above all else, is a response to Using jQuery to Create Target Attributes for XHTML 1.0 Strict, which gives incorrect information. That tutorial is not fraudulent, but merely misinformative. With this article, I intend on discussing just two things: why the previous article is not standards compliant, and how you are supposed to use JavaScript to open links in a new tab or window.

Why a JavaScript-Set Target Attribute is Not Standards Compliant

One thing that deserves emphasis is that the author of the previous article got something absolutely right: in XHTML, functionality is [to be] handled by JavaScript.

What the author seems to forget is that standards compliance is not just about using compliant markup; it’s about using a compliant DOM. By using JavaScript to append a target attribute, you are still appending a target attribute. Under the XHTML standard, target should not even exist.

To best emphasize this point, imagine you have a strictly standards-compliant browser that only renders standards-compliant markup and programming. If you were to put a target attribute on a link, it would do nothing. If you were to apply a target attribute via JavaScript, it would still do nothing, because target is not an existing attribute.

Using JavaScript to append a target tag does work. It works for the same reason it works to simply put the target attribute in the markup; the browser ignores your document type declaration, regardless of what you set it to be.

Setting target in JavaScript is not using JavaScript to open the window. It is the browser’s interpretation of the target attribute, as defined by non-standard HTML, that opens the window. If the browser were to use actual XHTML standards, it wouldn’t know what to do with a target attribute, whether it was set by the markup or set by JavaScript.

Theoretically, standardized HTML is going to eventually replace the older HTML that we so loath. If this were to happen, browsers would stop interpreting target, and setting the value via JavaScript would make absolutely no difference.

If I haven’t emphasized it enough, I’ll be perfectly blunt: if your markup or programming would not work in a world where standards-compliant XHTML were the only hypertext markup language in existence, your code is not standards compliant.

But it passes validation! Yes, it does. That is entirely due to a limitation of validators: they don’t parse JavaScript; they ignore it. If you were to take a copy of the DOM after JavaScript has parsed and attempted to validate it, you would receive errors. Google Chrome will give you a copy of the post-JavaScript DOM if you right-click the page and select "Inspect Element," for those curious enough to see it themselves.

Here is an example document that will pass pre-parse validation, but not post-parse validation:


"http://www.w3.org/1999/xhtml">
	
		</span>My Link Has a Target<span class="htmlOtherTag">
		"content-type" content="text/html; charset=utf-8" />
	
	
		"http://www.charlesstover.com/">Charles Stover

How to Open Links in a New Tab or Window

Tracking back to what was said before, functionality is to be handled by JavaScript. If we want to open links in a new tab or window, we need to do so with pure JavaScript, not by using JavaScript to instruct the anchor to do it via HTML. The JavaScript-only method of doing this is with window.open.

I will do this jQuery, since jQuery is such a hot item these days. Links that are to be opened in a new window will be designated with the class new-window.

$("a.new-window[href]").live(
	"click",
	function(event)
	{
		window.open($(this).attr("href"));
		event.preventDefault();
	}
);

To translate this to English: We’re telling the browser to get all elements that have the class new-window and a href value. When these elements, or future elements with these qualities, are clicked, the browser is to open a new window to the location provided in the href attribute. Lastly, the browser is to ignore its default action, which is to open the link in the same window.

Here is an example document that will pass pre-parse validation and post-parse validation:


"http://www.w3.org/1999/xhtml">
	
		</span>My Link Has an Event<span class="htmlOtherTag">
		"content-type" content="text/html; charset=utf-8" />
		
	
	
		"new-window" href="http://www.charlesstover.com/">Charles Stover

Using jQuery to Create Target Attributes for XHTML 1.0 Strict

Ben Harold — Mon, 18 Oct 2010 21:09:54 +0000

XHTML 1.0 strict vs. XHTML 1.0 transitional

If you’re serious about web standards, there’s no good reason to stick with the XHTML 1.0 transitional doctype declaration. While there are significant differences between the strict and transitional XHTML standards, the majority of them apply to inline styling of XHTML elements, which is forbidden by the XHTML strict specification. If you’re like me, you’ve been using CSS to stylize your XHTML for years now, having long ago dropped usage of the

element and the border attribute in your markup. However, there are some nuances to the XHTML 1.0 strict specification that require a bit more effort than simply switching to CSS.

The target attribute and its humble beginnings

A practice that became common almost immediately upon its conception is use of the target attribute to specify where a link should be opened. The target attribute was introduced way back when Netscape 2.0 was released. Among many other innovations, Netscape 2.0 brought us the then-vaunted “frames” feature. With the introduction of frames, web developers needed some way to specify the specific frame in which a link would be opened. While frames based website had their 15 minutes, the target attribute has stuck around like Clark Griswold’s cousin Eddie. Today, when linking to an out-of-domain website, many site owners prefer to have the external link opened in a separate tab or browser window. Arguing the pros and cons of this paradigm is beyond the scope of this article. Suffice it to say that the practice is widespread and necessary for all designers and developers to be familiar with.

XHTML 1.0 strict and the target attribute

As development of web standards has progressed, there has been an increasing push to abstract all of the layout and functionality of a web page from the content. The theory goes that XHTML should only be used to define the content of the page, while layout is left to CSS and functionality is handled by JavaScript. This has led to the depreciation of the target attribute in XHTML 1.0 transitional, while it was dropped altogether from the XHTML 1.0 strict specification. What this means is that if you want to take advantage of the benefits of using the XHTML 1.0 strict specification, you shouldn’t be using the target attribute in any of your links.

The solution

As mentioned previously, the functionality of a user-interface is left to JavaScript in a standards-friendly world. In order to emulate the functionality of the target attribute without breaking our standards-compliance, we need to use JavaScript trickery. While there are multiple methods to achieving this, I’ll focus on the easiest method that I’ve found.

jQuery

For this solution, we’ll use the jQuery JavaScript library. The first thing we’ll need to do is include the jQuery library in the head of our XHTML document. I personally use Google code to provide the necessary JavaScript files for my projects, but hosting the script on your own server is a perfectly viable alternative. The script elements, when using Google code, end up looking something like this:

Notice that I’ve specified the src attribute without appending “http:” to the beginning of it. This allows the scripts to be pulled from either http: or https: as the individual page demands.

Modifying our links

Now that we’ve included our jQuery library, we’ll take a moment to consider our links. We want to specify that certain links are intended to be opened in external browser windows. jQuery will allow us to select individual elements based on the element name, whether or not they have a specific attribute, or if they have a specific attribute with a specific value. I choose to use the class attribute for several reasons:

Unlike the id attribute, the same class attribute can appear many times on one page
We can use the class attribute to stylize our external links in a specific manner
Most novice designers are familiar with the class attribute

So, the first thing we want to do is to designate a specific class attribute value to correspond with external links. Let’s choose a name specific to our task:

class="open-in-new-window"

Now we need to go through our site and apply this class value to any link that should be opened in a new window. For example:



example link

We can now use jQuery to apply functionality to these links. We want them to open in a new window, and what’s the easiest way to do that? How about applying a target attribute?

Applying the target attribute with jQuery

All of our external links have a “open-in-new-window” class applied to them. This makes the selection of those links with jQuery trivial:

$('.open-in-new-window');

That simple line of code will select any element on the page with an “open-in-new-window” class applied to it. We can get more specific, selecting only anchor link elements:

$('a.open-in-new-window');

In and of itself, that line of code does nothing but select the elements in question. We want to add a target attribute to those links. Thanks to jQuery, adding attributes is trivial:

$('a.open-in-new-window').attr('target', '_blank');

In order to make sure this line of code isn’t executed too soon (i.e. before the page finishes loading) we wrap it in the standard jQuery “wait until the document is ready” function:


$(document).ready(function() {
	$('a.open-in-new-window').attr('target', '_blank');
});

That’s all there is to it. We now have a standards-compliant page with anchor links that have target attributes.

The not-so-double-standard

Now, you may be saying to yourself “I thought we were eliminating the target attribute.” We are eliminating the target attribute from the XHTML markup. Nothing in the XHTML 1.0 strict specification prevents us from adding the attribute via JavaScript. It’s analogous to the situation in which we remove

elements from an old site. We can simply replace the elements with

elements, then specify the following in our CSS:

.center {text-align:center;}

By itself, the

element has no layout-specific functionality beyond the plain-old

element. It is only when this element is coupled with CSS that the layout change is applied.

As such, our solution doesn’t mean a thing if you don’t consider the JavaScript involved. Any user without JavaScript enabled will have plain-old links that open in the same browser window. Any validator that reads our markup will see the same thing, a plain link with no target attribute. It is only through the functionality of JavaScript that our solution is applied. And since functionality of a user-interface is relegated to JavaScript, we’ve stuck to the abstraction paradigm to which all good web developers take heed.

We offer up to date testking 70-513 practice questions with self paced test engine to help you pass Testking 70-643 exam and complete your HP0-J40 & db2 certification, you should also find testking 1Y0-A05 for your complete task.

Code a Modern Design Studio from PSD to HTML

Ryan Turki — Sun, 28 Feb 2010 07:59:47 +0000

Today we’re going to convert the Modern Design Studio PSD Template created by Tomas Laurinavičius a few days ago to a clean and working XHTML/CSS code. You can download free PSD from The Modern Design Studio PSD Template.

The Final Result

If you follow along with the tutorial, you will end up with the following result.

Setting up the files

Start out by creating a new folder on your computer in which we will put all of the site files. I named it ModerndesignStudio. Create another folder in your working folder you just created and call it images, it will contain all the images of the site. Next open up your favorite code editor (I use Dreamweaver) and create a new HTML file titled index.html in the root of the folder, this will be our main page template. Now create a new css file, and name it style.css.

Open up your index.html file. At the top of your document inside the head tags, link to your style sheet (style.css) so that it’s ready to go. You can use the code below.

href="style.css" rel="stylesheet" type="text/css" />

So your code will looks like this one:





Modern Design Studio

Setting up the html structure

Now we will set the structure of our html file. I’m going to set 3 sections (header, content, footer) like I did here:





Untitled Document

Slicing the background

Our psd file includes a lot of textures and splashes so I’m going to slice the psd block by block so we will not loose these beautiful designs. Also, I’m going to add a div in each section which I’ll call container to align our web page contents.

Now let’s begin with opening the psd layout in Photoshop, hide everything except the “Background” and “Background texture”.

Now take the Slice Tool (C), select the background, go to File, Save for Web & Devices (Alt + Shift + Ctrl + S) and change the image’s width to 1600px. Then save it under the name of background.jpg in your images folder.

Coding the template’s body background

Now that we have our background image sliced out of the Photoshop document, we can begin coding. Open up your CSS file (style.css) in your source code editor, and then use the following code.

* {
   margin: 0px;
   padding: 0px;
}
body
{
   background:url(images/background.jpg);
}
#container
{
   margin: auto;
   width: 960px;
}

Let’s go over the styles in more detail.
First, we reset all of our elements margins and paddings to 0 to avoid cross-browser inconsistencies. We do this with the * selector.
Next, we style the body element: we set background.jpg as it’s background property.
Finally, we style the #container margins to auto to center the layout, and set a fixed width of 960px.

Slicing the header

Go back to Photoshop and hide everything in the Header folder except the Header and Header texture layers, pick the slice tool and select the header section and save it for Web & Devices under the name of header.jpg in the images folder.

Coding the header’s background

In your css file add this code:

#header
{
	background:url(images/header.jpg);
	height:124px;
}

In this code I styled the header element. I set header.jpg as it’s background, and I set it’s height to 124px.

Slicing the logo/site name

Now hide all of the Header, Background, Header texture and the Background texture layers. With your slice tool select the logo and the slogan and save them like we did earlier under the name of logo.png.

Adding the logo to the html

Now switch back to your HTML document. Inside #header #container, create a new div with an ID of logo.

Now, let’s move over to the stylesheet. To style our #logo section elements. Here is the CSS code.

.logo
{
	margin-top:20px;
	border:none;
}

Coding the navigation

Still inside the #header #container, create a simple unordered list containing the navigation links. Here’s the code block for the navigation.


   
      
      
      Home
      About
      Work
      Blog
      Contact

Styling the navigation

Now, it’s time to add the CSS code for the navigation of the web template. Head on over to your stylesheet and use the following CSS:

#header li
{
	color:#959595;
	list-style:none;
	float:left;
	margin-right:20px;
	font-family:"Myriad Pro",arial;
	font-weight:bold;
	font-size:24px;
}
#header li a
{
	color:#959595;
	text-decoration:none;
	padding:10px;
}
#header ul
{
	float:right;
	margin-top:-40px;
}
#header li a:hover
{
	background:#202020;
	color:#d2d2d2;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
}

I added some styles to #header li such as the color (#959595), I removed the list style, changed the font family to Myriad Pro, the font weight to bold, the font size to 24px and floated the li elements without forgetting the marging right to make some space between li elements.
For the hover I used some CSS3 features like the border radius and I changed the background color to #202020.

Creating the featured box

Now we’ve finished with the header section, let’s head over to the content section.

Let’s add two new divs in this section, the first #featured (it will contain the featured section) and the other #paragraphs.

In the psd file as we did before, select the slice tool and slice the featured box after hiding the more projects button and the little text then save it under the name of featured.jpg.

In your HTML file add this code to the featured div to add the more project link and some dummy text:


  
     
       MORE PROJECTS
       Portfolio project, Jan 5th, 2010 Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.

In the PSD file I will take the more project button and duplicate it and reverse the Gradient Overlay, slice both of the more project buttons and slice them(The dimensions are about 124px x 60px) and save the button under png-8 format and name it button.png.

Now we’ve got the images ready let’s head over to the CSS file and add this code.

#featured
{
	background:url(images/featured.jpg) no-repeat;
	height:381px;
	margin-top:30px;
	margin-left:80px;
}
#featured a
{
	background:url(images/button.png);
	height:30px;
	width:124px;
	text-indent:-9999px;
	position:absolute;
	margin-top:330px;
	margin-left:180px;
}
#featured a:hover
{
	background-position:0px 30px;
}

I will begin with explaining #featured: I set it’s background to the featured image that we have sliced, then I positioned it with some margins. For the more projects link I set the background to button.png the height 30px so we could get the top button, I removed the text with text-indent and positioned it with the margins. Don’t forget to set the button’s position to absolute. Now to get a nice hover effect I changed the background position.

Now I’m going to add some style to the dummytext element:

.dummytext
{
	color:#d2d2d2;
	width:245px;
	margin-top:150px;
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:180%;
	margin-left:290px;
}
.dummytext span
{
	font-size:16px;
	color:#191919;
	font-weight:bold;
}

Creating the paragraphs

After we finished with the featured div let’s add some paragraphs to our content section.


       
         BEAUTIFULWebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       

       
         EFFECTIVEWebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       

       
         FUNCTIONALWebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.

So our content section will looks like this:


  
     
       MORE PROJECTS
       Portfolio project, Jan 5th, 2010 Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.
     
     
       
         BEAUTIFULWebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       

       
         EFFECTIVEWebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       

       
         FUNCTIONALWebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.

After adding this code to your HTML go to your CSS file and add these styles to the paragraphs.

#paragraphs span
{
	font-family:"Myriad pro", Helvetica, sans-serif;
	font-size:22px;
	font-weight:600;
	letter-spacing:-2px;
}
#paragraphs
{
	margin-left:80px;
	font-family:Arial, Helvetica, sans-serif;
	color:#191919;
	font-size:12px;
	margin-top:15px;
}
.paragraph
{
	width:250px;
	margin-left:15px;
	float:left;
}

Here is what you will end up with:

Slicing the footer

Now we finished with the header and te content sections and we will begin creating the footer section.

First, in your psd file hide every thing in the footer folder except the Footer and Footer texture layers, then slice the footer and save it as footer.jpg. You can take a look at this image below.

Then slice the Follow Us button and the birds image. Name the first one follow.png and the second bird.jpg.

Coding the footer

Our footer section will contain some text, a link to twitter and the birds image.

So here is the HTML code to add these blocks.


  
    2010 © Fictional Design Studio. Design by Webdesignfan.
    Follow us on Twitter

Now, we style our footer section using the following styles (go to your stylesheet and place this code block in there).

#footer
{
	background:url(images/footer.jpg);
	height:71px;
	margin-top:191px;
}
#footer p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#959595;
	position:absolute;
	margin-top:30px;
}
#footer a
{
	background:url(images/follow.png);
	text-indent:-9999px;
	position:absolute;
	height:27px;
	width:124px;
	margin-left:730px;
	margin-top:30px;
}
#footer img
{
	float:right;
	margin-top:10px;
}

I used footer.jpg as the background of the footer, then I added some styles to the text included in the footer (The p element).

For the follow link I used the same techniques that we applyed with the more project link, then for the bird image I floated it to the right and used the margin.

And we’re all finished!

Live Demo // Download the source files (0,7 MB)

Thanks for following along through the full tutorial. I hope you learned some coding techniques and PSD to XHTML/CSS tricks. Feel free to ask any questions and definitely let me know what you think in the comments area.

Join SY0-201 online web designing course to learn how to cod a modern design studio from psd to html. Take advantage of the latest 70-680 tutorials and 642-902 study guide to learn different tips and techniques that you can use to design your web/blog page.