Pdf Search colection » web design http://blog.pdf-search.org Just another WordPress weblog Sun, 22 Nov 2009 06:01:34 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Firefox 3.6 Web-Open Font Format http://blog.pdf-search.org/web-design/firefox-3-6-web-open-font-format/671 http://blog.pdf-search.org/web-design/firefox-3-6-web-open-font-format/671#comments Wed, 21 Oct 2009 10:31:31 +0000 john http://blog.pdf-search.org/?p=671
  • Opera in top secret iPhone talks?
  • Google goes for speed, security in Chrome OS
    • ]]>     Mozilla today announced the adoption of an open font specification “Web Open Font Format” (WOFF), and will be Firefox 3.6 and future versions to provide support. Firefox 3.5 already supports TrueType, OpenType font format of the two. WOFF by the font designer Erik van Blockland, Tal Leming, and Mozilla’s Jonathan Kew presided over the design, can be seen as TT, OT two kinds of font data, a simple re-packaging, but the built-in compression, and therefore smaller, easy to download and dissemination (eg, two 3.1MB, 172KB of the TTF font file format to use WOFF only 1MB, and 80KB), also supports meta-data, so vendors can add the fonts in their relevant identifying information. Complete specification can be found here.

    Firefox 3.6 will be the first one officially supported browser WOFF font formats, but due to the slow pace of development, Mozilla has not released Beta test version. The technology could be of interest to try this Firefox 3.7 Alpha 1 Preview Developer Preview Edition, has joined the WOFF technology.

    WOFF Font Application Examples:
    01
    Browser Support
    02
    Mix a variety of formats
    03
    Use Postscript CFF fonts
    04
    Use Postscript CFF fonts
    05
    African languages show
    06
    Japanese Example

    Related posts:

    1. Opera in top secret iPhone talks?
    2. Google goes for speed, security in Chrome OS

    ]]>     http://blog.pdf-search.org/web-design/firefox-3-6-web-open-font-format/671/feed 0     How to Create a Minimalist and Typographic Blog Layout From Scratch http://blog.pdf-search.org/web-design/how-to-create-a-minimalist-and-typographic-blog-layout-from-scratch/646 http://blog.pdf-search.org/web-design/how-to-create-a-minimalist-and-typographic-blog-layout-from-scratch/646#comments Sun, 27 Sep 2009 16:47:45 +0000 john http://blog.pdf-search.org/?p=646

    lead_image
    Typography is probably one the most important and powerful design element ever, so I created this WordPress theme with minimalism and typography in mind. Today, you will learn how to create this minimalist theme scratch including XHTML, CSS and WordPress. Please keep in mind that this theme doesn’t have all the bells and whistles you may find in a magazine or premium theme, it was created for the purpose of this tutorial. You can of course use it as a starting point for your own theme or customize it to fit your site. Let’s get started!

    The Plan

    There are some basic design decisions I made when I created this theme. First of all, I wanted to have a centered layout with a main content area of around 600px and a sidebar of around 300px on the right, so I went with a 960px total width. This type of layout is pretty common, but it’ll be perfect for this tutorial. I also wanted to create a WordPress theme that would have strong typography and not use any images, not even as background images. Here it is, you can view the demo right here!

    What We’ll Need

    Before we start writing any markup or CSS, let’s see what files we will need. Here is the basic layout below:

    wireframing
    We will need the following files:

    • index.php – This file will hold everything together, it is our main index file
    • header.php – in this file we’ll have the blog title and navigation menu, it’ll be included at the top of every page
    • single.php – this is to display a single blog post, similar to the index.php except it has only 1 post and has a comment section
    • page.php – this file is for the pages (which are linked to from the navigation menu)
    • comments.php – this is the comment section, this file is included in the single.php
    • sidebar.php – this file is for the sidebar on the right. it will be included on every page
    • footer.php – obviously the footer will go at the bottom of every page
    • archive.php – this is the monthly and yearly archives template
    • search.php – this is the template for the search results page
    • functions.php – we’ll use this file to make our sidebar ‘widget ready’
    • style.css – this is our stylesheet, we’ll write all of our CSS in here

    You don’t need to create all of those files right away (though you can of course), we’ll get there very soon.

    The Structure Of Our Main Document

    When creating a new WordPress theme I always start with the homepage since all the other pages will be very similar. Let’s write some markup! First of all, we’ll need to declare a DOCTYPE, then insert the WordPress template tags for the title usingconditional tags (I’ll explain that in a minute), and the link to our stylesheet, and set default rss feed url and then we’ll place the pingback tag and the wp_head tag. Then we’ll create our header div and write the code for our H1 and H2 tags and create an unordered list for our navigation menu.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title>
 <?php if ( is_home() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php bloginfo('description'); ?><?php } ?>
 <?php if ( is_search() ) { ?>Search Results: <?php the_search_query(); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
 <?php if ( is_author() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;Author Archives<?php } ?>
 <?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
 <?php if ( is_page() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
 <?php if ( is_category() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;Archive&nbsp;|&nbsp;<?php single_cat_title(); ?><?php } ?>
 <?php if ( is_month() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;Archive&nbsp;|&nbsp;<?php the_time('F'); ?><?php } ?>
 <?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;Tag Archive&nbsp;|&nbsp;<?php  single_tag_title("", true); } } ?>
</title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feed/" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>

<?php wp_head(); ?>
</head>
<body>
<div id="header">
 <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
 <h2><?php bloginfo('description'); ?></h2>

 <ul>
 <li><a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">Home</a></li>
 <?php wp_list_pages('depth=1&title_li='); ?>
 <li><a href="<?php bloginfo('rss2_url'); ?>">RSS Feed</a></li>
 </ul>
</div>

    The php if statements in the title section of the above code will tell WordPress to display a different page title depending on what page the user is on. For example, the code above says: if I’m on the homepage then display the blog name and description. If I’m on the search results page display the search query terms as the page title followed by the blog name. And so on… those conditional tags basically tell WordPress to do something only if a condition is met, and if it isn’t, display something else. When we’re done with the header section we’ll go and write the markup for our main content area, sidebar and footer. We’ll start with a container div which will hold all of our main content and sidebar, then the post div will hold our content area and then the sidebar div will contain all of our sidebar. Of course the footer div will hold our copyright notice and credits.

    
<div id="container">
<?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>
<div>
<div>
<div><?php the_time ('j'); ?></div>
<div><?php the_time ('M'); ?></div>
</div>

<div>Posted by <?php the_author(); ?> &#187; <a href="<?php the_permalink() ?>#comments"><?php comments_number('Add Comment &#187;','1 Comment &#187;','% Comments &#187;'); ?></a></div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content("[Read more &rarr;]"); ?>
</div>

<div>
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar()) : else : ?>
<a href="<?php bloginfo('rss2_url'); ?>">Grab The RSS Feed Here</a>
<?php endif; ?>
</ul>
</div>

<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
<div style="clear:both;"></div>
<div><?php posts_nav_link(); ?></div>
</div>

<div id="footer">
<p><?php bloginfo('name'); ?> is powered by <a href="http://wordpress.org/">WordPress</a> - Design and code by <a href="http://spyrestudios.com/">Jon Phillips</a> and <a href="http://www.cartridgesave.co.uk/news/">Creative Cloud</a></p>
</div>

</body>
</html>

    Now, before we put all that code in one of our PHP files, we’ll need to break it down into sections and use PHP includes. The index.php, since it’s our main file, will hold the header.php, sidebar.php and footer.php. WordPress already has template tags to do that so we won’t need to use ‘real’ PHP includes and we’ll use the WP template tags instead. First of all we’ll need to create the following files:

    • header.php
    • index.php
    • sidebar.php
    • footer.php

    Let’s grab all of the code for the header section and paste it in our header.php. That’s from the DOCTYPE to right before the body tag (see code for the header section above) Then we’ll grab the code for our sidebar. This is simply our sidebar div, you can refer to the code snippets above to copy-paste it. Paste this code in the sidebar.php file. Next up we’ll do the footer. The footer.php file will include the footer div and the closing body and html tags. Now we should have code in our header.php, sidebar.php and footer.php files. All we need to do now is paste the rest of the code in the index.php, but don’t forget we’ll need to tell the index.php file to look for our 3 other files. Have a look at the code below:

    
<<?php get_header(); ?>
<div id="container">
 <?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>
 <div>
 <div>
 <div><?php the_time ('j'); ?></div>
 <div><?php the_time ('M'); ?></div>
 </div>
 <div>Posted by <?php the_author(); ?> &#187; <a href="<?php the_permalink() ?>#comments"><?php comments_number('Add Comment &#187;','1 Comment &#187;','% Comments &#187;'); ?></a></div>
 <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content("[Read more &rarr;]"); ?>
 </div>
 <?php get_sidebar(); ?>

<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
<div style="clear:both;"></div>
<div><?php posts_nav_link(); ?></div>
</div>
<?php get_footer() ?>

    It looks very similar to what we had before, right? Only this time, we stripped our document from the header, sidebar and footer sections and put those in separate files. We need to include those 3 files in our index.php. To do that we use the 3 following template tags (they’re pretty much the same as PHP includes):

    
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer() ?>

    It’s pretty obvious what these code snippets do, don’t you think? The get_header one will insert our header.php file in the index.php, and get_sidebar and get_footer will do the same but for the sidebar.php and footer.php. Now we have a somewhat functional WordPress theme. We’re not done yet though! We need to create our other PHP files and then start writing our CSS.

    Other WordPress Theme Files

    We have a homepage, but what about the single posts, the pages, the archives, search results, etc…? Let’s create the following files now:

    • page.php
    • archive.php
    • search.php
    • single.php

    Those files are very similar to our index.php, in fact we’ll use our index.php as a base for those 4 other files. Grab your index file and duplicate it 4 times and then rename the files to the file names above. Open up the page.php (which is identical to the index.php right now) and edit it to remove the date, author name, comments number and post nav. We won’t need those since pages are more static than posts and index pages.

    <?php get_header(); ?>
<div id="container">
 <?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>
 <div>
 <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content("[Read more &rarr;]"); ?>

 </div>
 <?php get_sidebar(); ?>

<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
<?php get_footer() ?>

    For the archive and search results pages, we’ll take the index.php as a starting point since they’re very similar. For the archive.php file all we’ll need to do is add a message that tells the users what archive page they’re on. Look for:

    <?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>

    And replace it with:

    <?php if (have_posts()) : ?>

 <?php $post = $posts[0]; ?>
 <?php if (is_category()) { ?>
 <h4>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h4>
 <?php } elseif( is_tag() ) { ?>
 <h4>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h4>
 <?php } elseif (is_day()) { ?>
 <h4>Archives for <?php the_time('F jS, Y'); ?></h4>
 <?php } elseif (is_month()) { ?>
 <h4>Archives for <?php the_time('F, Y'); ?></h4>
 <?php } elseif (is_year()) { ?>
 <h4>Archives for <?php the_time('Y'); ?></h4>
 <?php } elseif (is_author()) { ?>
 <h4><?php _e('[:en]Author Archive[:fr]Archive Par Auteur'); ?></h4>
 <?php } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
 <h4>Blog Archives</h4>
 <?php } ?>

<?php while (have_posts()) : the_post(); ?>

    This will tell WordPress to display a slightly different message depending on what page the user is on. For the search.php file we’ll do almost the same thing. Open up your search.php file and place this code instead:

    <h4>Here&#39;s everything we could find about: "<em><?php the_search_query(); ?></em>"</h4>
 <?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

    As for the single.php file, the big difference is we'll need to include our comment section. Let's add it right after the the_content tag, like this:

    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content("[Read more &rarr;]"); ?>
 <div>
 <?php comments_template(); ?>
 </div>

    Now we’ll need to create our comment section. On to the next step!

    The Comment Section

    comment

    The comments.php file is a bit more complex then the other files we did so far. Here is the complete code:

    <?php
 if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
 die ('Please do not load this page directly. Thanks!');
 if (!empty($post->post_password)) {
 if ($_COOKIE['wp-postpass_'.$cookiehash] != $post->post_password) {
 ?>
 <p><?php _e("This post is password protected. Enter the password to view comments."); ?><p>
 <?php
 return;
 }
 }
 $oddcomment = "alt";
?>
<!-- You can start editing here. -->
<h3>There's <em><?php comments_number('0 Comment','1 Comment','% Comments'); ?></em> So Far</h3>

<a name="comments"></a>
<?php if ($comments) : ?>

<ul>
 <?php foreach ($comments as $comment) : ?>
 <?php $comment_type = get_comment_type(); ?>
 <?php if($comment_type == 'comment') { ?>
 <li id="comment-<?php comment_ID() ?>"><a name="comment-<?php comment_ID() ?>"></a>

 <span><?php comment_author_link() ?></span><br/>
 <span><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></span>
 <div>
 <?php comment_text() ?>
 </div>
 </li>
 <?php /* Changes every other comment to a different class */
 if ('alt' == $oddcomment) $oddcomment = '';
 else $oddcomment = 'alt';
 ?>
 <?php } else { $trackback = true; } /* End of is_comment statement */ ?>
 <?php endforeach; /* end for each comment */ ?>
</ul>
<?php if ($trackback == true) { ?>
<h3>Who Linked To This Post?</h3>
<ol>
 <?php foreach ($comments as $comment) : ?>
 <?php $comment_type = get_comment_type(); ?>
 <?php if($comment_type != 'comment') { ?>
 <li><?php comment_author_link() ?></li>
 <?php } ?>
 <?php endforeach; ?>
</ol>
<?php } ?>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post-> comment_status) : ?>
 <!-- If comments are open, but there are no comments. -->
 <?php else : // comments are closed ?>
 <!-- If comments are closed. -->
 <p>Comments are closed on this post.</p>
 <?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post-> comment_status) : ?>

<h3>Share your thoughts&#44; leave a comment&#33;</h3>

<form action="<?php echo get_settings('siteurl'); ?>/wp-comments-post.php" method="post" id="comment_form">

<?php if ( $user_ID ) : ?>

 <p>You are currently logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account"">Logout &raquo;</a></p>
 <?php else : ?>

 <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" /><label for="author">Name (required)</label></p>
 <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" /><label for="email">Email (required)</label></p>
 <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" /><label for="url">Website URL</label></p>

<?php endif; ?>
<p><textarea name="comment" id="comment" rows="8" cols="10" tabindex="4"></textarea></p>
 <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />    </p>
</form>
<?php // if you delete this the sky will fall on your head
endif; ?>

    What you need to know is that the comments and trackbacks are not going to be mixed and the we’re not using gravatars (remember, no images for this theme).

    Let’s Widgetize The Sidebar

    To make the sidebar ‘widget ready’ we’ll need to create a function.php file. You can create this file now. To tell WordPress that we want to use widgets in our sidebar we’ll put this code:

    <?php
if ( function_exists('register_sidebar') )
 register_sidebar();?>

    Let’s Not Forget About Our 404 Page

    Last but not least, we need to create a 404.php for when people try to access something that isn’t available. We don’t want them to see a default server message or a blank page, do we? Paste the following code in your new 404.php file:

    <?php get_header(); ?>
 <div id="container">
 <div>
 <h2>Oops&#133; 404&#133; </h2>
 <p>It looks like you tried to access a page that isn't here anymore. It's either you that did something wrong, or it's us. Either way, let's not waste any more time on this page since there's nothing more to see here.</p>
 </div>
 </div>
<?php get_sidebar(); ?>
</div>
<?php get_footer() ?>

    On To The Fun Part – CSS

    Now we should have a fully functional WordPress theme. The only problem is that it’s really ugly. To fix this we’ll create a style.css. Remember that we linked to this file in our header.php. At the very top of our style.css file we’ll define the theme name, author, url, version and additional infos.

    /******
Theme Name: Simple Type
Version: v.1
Description: Clean and simple WordPress theme, easily customizable, CSS Valid with a focus on typography.
Author: Jon Phillips
Author URI: http://spyrestudios.com
Theme URI: http://1stwebdesigner.com
*****/

    Now we can start writing our CSS. I already gave classes and ids to our divs, paragraphs and other elements. Here is the CSS in it’s entirety:

    html {
 border-top: 4px solid #000000;;
 margin:0;
 padding:0;
}

body {
 background: #ffffff;
 width: 960px;
 color:#333;
 line-height: 24px;
 font-size: 16px;
 font-family: Georgia, 'Times New Roman', Times, serif;
 margin: 0 auto;
 padding: 15px 0;
}

#container {
 width: 960px;
 margin: 0;
 padding: 0 0 40px 0;
}

a {
 text-decoration: underline;
 color: #000000;
}

a:visited {
 text-decoration: underline;
 color: #555555;
}

a:hover, a:active {
 color: #1C1D16;
 text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
 font-weight: normal;
 margin: 5px 0 10px;
 padding: 0;
 line-height: 1.8em;
}

#container h4.archives{
 font-weight: normal;
 margin: 0 0 10px 0;
 padding: 0 15px 15px 15px;
 background: #eeeeee;
 border: 1px solid #cccccc;
 width: 928px;
}

ul, ol {
 color: #555555;
 margin: 12px;
 padding: 8px;
}

blockquote, pre {
 font-style: italic;
 font-size: 14px;
 background-color: #eeeeee;
 border-right: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 padding: 20px;
 line-height: 20px;
 margin: 10px 25px;
}

ins {
 text-decoration: none;
 font-weight: bold;
 color: #555555;
}

del {
 color: #555555;
}

abbr, acronym {
 cursor: help;
}

p img {
 padding: 0;
 max-width: 100%;
}

img.centered {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

img.alignright {
 padding: 5px;
 margin: 0 0 15px 15px;
 display: inline;
}

img.alignleft {
 padding: 5px;
 margin: 0 15px 15px 0;
 display: inline;
}

.alignright {
 float: right;
}

.alignleft {
 float: left;
}

/**--Header--**/

#header {
 width: 960px;
 margin: 15px 0 10px;
 padding: 0;
}

#header h1 {
 text-transform: uppercase;
 margin: 0;
 font-size: 48px;
 font-weight: 400;
 color: #000000;
 padding: 15px 0 0 0;
 line-height: 50px;
}

#header h1 a {
 color: #000000;
 text-decoration:none;
}

#header h1 a:hover {
 color: #676767;
 text-decoration:none;
}

#header h1 a:visited {
 color: #21211f;
 text-decoration:none;
}

#header h2 {
 font-style: italic;
 font-family: baskerville, palatino, 'times new roman', georgia, serif;
 font-size: 18px;
 padding: 2px 0 20px 0;
 margin: 0;
 color: #888888;
}

/**--Content--**/

.post {
 width: 600px;
 float: left;
 padding: 0;
 margin: 0 0 40px 0;
 border-bottom: 1px dashed #cccccc;
}

.post a {
 text-decoration: none;
 color: #000000;
 border-bottom: 1px solid #f60;
}

.post a:visited {
 background: #eeeeee;
 text-decoration: none;
 color: #555555;
 border-bottom: 1px solid #dddddd;
}

.post a:hover {
 background: #eeeeee;
 color: #333333;
 text-decoration: none;
 border-bottom: 1px solid #000;
}

.post a:active {
 background: #cccccc;
 color: #1C1D16;
 text-decoration: none;
 border-bottom: 1px solid #f60;
}

.post h2 {
 font-size: 38px;
 font-weight: 500;
 line-height: 48px;
 padding: 5px 0 15px 0;
 margin: 0;
}

.post h2 a {
 background: none;
 border: none;
 text-decoration: none;
 color: #000000;
}

.post h2 a:hover {
 background: none;
 border: none;
 text-decoration: none;
 color: #444444;
}

.post h2 a:visited:hover {
 background: none;
 border: none;
 text-decoration: none;
 color: #555555;
}

.post h2 a:visited {
 background: none;
 border: none;
 text-decoration: none;
 color: #222222;
}

.post img.left {
 padding: 6px;
 margin: 10px 10px 10px 0;
 border: none;
 float: left;
 clear: left;
}

.post img.right {
 padding: 6px;
 margin: 10px 0 10px 10px;
 border: none;
 float: right;
 clear: right;
}

.post img.center {
 display: block;
 padding: 8px;
 margin: 0 auto 10px auto;
 border: none;
 float: none;
 clear: both;
}

.post img.frame {
 padding: 6px;
 margin: 10px 0 10px 10px;
 border: 1px solid #CCC;
 background: #EEE;
 float: right;
 clear: right;
}

.post img.stack {
 clear: none !important;
}

.postinfo {
 text-transform: uppercase;
 font-family: verdana, helvetica, arial, sans-serif;
 color: #cccccc;
 font-size: 13px;
 letter-spacing: -1px;
 margin:0;
 padding: 0;
}

.postinfo a, .postinfo a:visited{
 border: none;
 text-decoration: none;
 text-transform: uppercase;
 font-family: verdana, helvetica, arial, sans-serif;
 color: #cccccc;
 font-size: 13px;
 margin:0;
 padding: 0;
}

.postinfo a:hover, .postinfo a:visited:hover{
 text-decoration: none;
 border: none;
 text-transform: uppercase;
 font-family: verdana, helvetica, arial, sans-serif;
 color: #aaaaaa;
 font-size: 13px;
 margin:0;
 padding: 0;
}

.date_cal {
 text-align:center;
 float: left;
 font-family: georgia, serif;
 color: #dddddd;
 font-size: 20px;
 margin:0;
 padding: 10px 20px 3px 0;
}

.date {
 font-family:georgia, serif;
 font-weight:700;
 color:#dddddd;
 font-size: 50px;
 margin:0;
 padding:0 0 3px 0;
}

.month {
 font-style: italic;
 font-family:georgia, serif;
 color:#dddddd;
 font-size: 28px;
 margin:0;
 padding:0;
}

/**--Navigation--**/

ul.menu{
 clear: both;
 text-decoration: none;
 float: left;
 width: 940px;
 font-family: Verdana, Helvetica, Arial, Sans-Serif;
 background: #000000;
 padding: 10px;
 margin: 0 0 40px 0;
}

ul.menu li {
 display: inline;
 text-transform: uppercase;
 padding: 10px;
 margin: 0;
 font-size: 13px;
}

ul.menu li a, ul.menu li a:visited {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #cccccc;
 font-size: 13px;
}

ul.menu li a:hover, ul.menu li a:visited:hover {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #ffffff;
 border-bottom: 1px solid #f60;
 font-size: 13px;
}

ul.menu li a:active {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #ffffff;
 border-bottom: 1px solid #ffffff;
 font-size: 13px;
}

ul.menu li a:visited:active {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #ffffff;
 border-bottom: 1px solid #ffffff;
 font-size: 13px;
}

ul.menu li.current_page_item a {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #ffffff;
 border-bottom: 1px solid #f60;
 font-size: 13px;
}

ul.menu li.current_page_item a:hover {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #cccccc;
 border-bottom: 1px solid #f60;
 font-size: 13px;
}

/**--Sidebar--**/

.sidebar {
 float: right;
 font-size: 13px;
 width: 300px;
 margin: 0;
 padding: 0 0 0 60px;
}

.sidebar h2 {
 font-size: 14px;
 font-weight: 500;
 font-family: verdana, helvetica, arial, sans-serif;
 letter-spacing: -1px;
 text-transform: uppercase;
 color: #444444;
 margin: 0 0 8px 0;
 padding: 5px 0;
 border-top: 1px dashed #999999;
 border-bottom: 1px dashed #999999;
}

.sidebar ul {
 padding: 0;
 list-style-type: none;
 margin: 0px 0px 30px 0px;
}

.sidebar ul li {
 text-decoration: none;
 margin: 0;
 padding: 0 0 5px 0;
 color: #555555;
}

.sidebar ul li a {
 color: #000000;
 text-decoration: none;
 padding: 0;
 margin: 0;
}

.sidebar ul li a:visited {
 color: #777777;
 text-decoration: none;
 padding: 0;
 margin: 0;
}

.sidebar ul li a:hover, .sidebar ul li a:visited:hover {
 color: #444444;
 text-decoration: none;
 padding: 0;
 margin: 0;
}

#searchform {
 color: #444444;
 text-decoration: none;
 padding: 0;
 margin: 5px 0 30px 0;
}

/**--Footer--**/

#footer {
 clear: both;
 color: #555555;
 padding: 20px 0;
 text-align: center;
 margin: 40px 0 20px 0;
 border-top: 1px dashed #888888;
}

#footer p {
 margin: 0;
 padding: 0 10px 10px;
}

#footer a:link, #footer a:visited {
 color: #999999;
}

#footer a:hover, #footer a:active {
 color: #000;
}

/* Comment Section */

.comments h3{
 line-height:22px;
 border-top: 1px dashed #cccccc;
 color:#000;
 font-size: 20px;
 margin: 20px 0 0 0;
 padding: 20px 0 0 0;
}

p.num_comments {
 margin-bottom:0;
 line-height:22px;
 float:left;
}

#comment_form {
 width:450px;
 float:left;
 padding:10px 0;
}

#comment_form p {
 margin-bottom:0;
 padding:6px 0;
}

#comment_form label {
 color:#7f7f7f;
 padding-left:5px;
 font-size:12px;
}

#comment_form .text_input {
 width: 275px;
 background:#eee;
 border:1px solid #ccc;
 font:normal 14px helvetica, verdana, arial, sans-serif;
 padding:10px;
}

#comment_form .text_area {
 width: 578px;
 color:#21211f;
 background:#eee;
 border:1px solid #ccc;
 font:normal 14px helvetica, verdana, arial, sans-serif;
 padding:10px;
}

.comments {
 width: 600px;
 font-size:13px;
 line-height:22px;
 color:#21211f;
 float:left;
 clear:both;
 padding: 30px 0 0 0;
}

ul.comment_list {
 list-style:none;
 float:left;
 margin: 40px 0 20px 0;
 padding:0;
}

ul.comment_list li {
 width: 598px;
 background:#fff;
 border-bottom:1px solid #ddd;
 margin:0 0 8px;
 padding:20px 0 5px;
}

ul.comment_list li.author_comment {
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 width: 598px;
 background:#ccc;
 margin:0 0 6px;
 padding:20px 0 5px;
}

.author_comment .comment_intro a {
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 color:#21211f;
}

.comment_author {
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 font-size:14px;
 font-weight:400;
 color:#000;
 margin:0;
 padding:0;
}

.comment_author a:hover {
 text-decoration:none;
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 font-size:14px;
 color:#333;
 margin:0;
}

.comment_meta {
 text-transform:uppercase;
 font-family: helvetica, arial, verdana, sans-serif;
 color:#555;
 font-size:10px;
 margin:0;
 padding:0;
}

.comments_entry {
 line-height:23px;
 margin:0 0 20px;
 padding:0 20px 20px 20px;
}

.comments_entry ul,.comments_entry ol {
 color:#000;
 border:none;
 margin:0;
 padding:0;
}

.comments_entry ul {
 list-style-type:none;
}

.comments_entry li {
 width: 600px;
 border:none;
 padding:3px 0 0;
}

.comments_entry ul li ul,.comments_entry ul li ol,.comments_entry ol li ul,.comments_entry ol li ol {
 margin:0;
}

#comment_form .submit {
 color:#fff;
 border: 1px solid #21211f;
 background: #AE684E;
 margin-top: -25px;
 margin-bottom: 15px;
 font-size:12px;
 font-weight: 400;
 font-family: 'Trebuchet MS', helvetica, arial, sans-serif;
 padding: 5px;
}

#comment_form .text_input:hover,#comment_form .text_area:hover {
 border:1px solid #bbb;
 background:#ddd;
}

.author_comment .comment_intro,.author_comment .comment_intro a:hover {
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 color:#000;
}

    The Typography

    I used Georgia as the primary typeface. I’ve always loved Georgia, I think it’s a very stylish font that is well suited for body content and headings. I also used Baskerville for the blog’s tagline and Verdana for the headings in the sidebar and a couple other elements. This WordPress doesn’t use any images, spatial sense and good use of whitespace is essential to make this kind of design. It’s clean, minimalist and definitely not cluttered – at least I like to think so. :)

    Demo And Download

    The Simple Type WordPress theme is available as a free download and a Demo is also available. I hope you liked this tutorial! Feel free to download and use this theme for your projects and also feel free to customize it for your needs.

    Download working theme here

    No related posts.

    ]]>     http://blog.pdf-search.org/web-design/how-to-create-a-minimalist-and-typographic-blog-layout-from-scratch/646/feed 0     76 Dirty, Extreme And Creative Free Grunge Fonts http://blog.pdf-search.org/web-design/76-dirty-extreme-and-creative-free-grunge-fonts/558 http://blog.pdf-search.org/web-design/76-dirty-extreme-and-creative-free-grunge-fonts/558#comments Sun, 27 Sep 2009 16:43:11 +0000 john http://blog.pdf-search.org/?p=558 Grunge, dirty, fancy typography and artworks are very popular design trend in our days, so I wanted to showcase here most popular and professionally executed fonts in my opinion. Unleash your dirty side and create some fresh design mixing font size, color, textures together – try something new if you haven’t done it yet!

    Such fonts as these are often used in music band logos or cover designs, but I am sure you will think of your own unique approach in logo, web or graphic design! Enjoy!

    1. Killed DJ

    killed-dj-free-grunge-fonts-01
    2. Grunge Serifia Font OTF by SynergyDigital

    ginga-free-grunge-fonts-17
    3. Karabine

    karabine-free-grunge-fonts-03
    4. Marcelle

    marcelle-free-grunge-fonts-04
    5. Bleeding Cowboys
    bleeding-cowboys-free-grunge-fonts-05

    6. Bandana

    bandana-free-grunge-fonts-06
    7. Pulse Sans Virgin

    pulse-free-grunge-fonts-07
    8. Loserboi Grunge

    loserboi-free-grunge-fonts-08
    9. Docteur Atomic

    docteur-atomic-free-grunge-fonts-09
    11. The King & Queen font

    king-and-queen-free-grunge-fonts-11
    12. Everyday Ghost

    everyday-ghost-free-grunge-fonts

    13. Abusive Pencil

    abusive-pencil-free-grunge-fonts

    14. Times New Yorker

    times-new-yorker-free-grunge-fonts

    15. Soul Mission

    soul-mission-free-grunge-fonts

    16. Inked God

    inked-god-free-grunge-fonts

    17. Ginga

    ginga-free-grunge-fonts

    18. Ascent 2 Stardom

    ascent-free-grunge-fonts

    19. Chicago House

    chicago-house-free-grunge-fonts

    20. Black Oak

    black-oak-free-grunge-fonts

    21. VTKS Scrubbled

    vtks-scrubbed-free-grunge-fonts

    22. Charles S.

    charles-s-free-grunge-fonts

    23. 28 Days Later

    28-days-later-free-grunge-fonts

    24. Angelic War

    angelic-war-free-grunge-fonts

    25. Capture IT

    capture-it-free-grunge-fonts

    26. Dirt2 SoulStalker

    dirt-soulstalker-free-grunge-fonts

    27. Trashco

    trashco-free-grunge-fonts

    28. Hawaii Lover

    hawaii-lover-free-grunge-fonts

    29. Broken Ghost

    broken-ghost-free-grunge-fonts

    30. Laundromat 1967

    laundromat-1967-free-grunge-fonts

    31. The Last Soundtrack

    the-last-soundtrack-free-grunge-fonts

    32. Aenima

    aenima-free-grunge-fonts

    33. Alias

    alias-free-grunge-fonts

    34. Dirty and Classic

    dirty-and-classic-free-grunge-fonts

    35. Rough Linen

    rough-linen-free-grunge-fonts

    36. Epoxy History

    epoxy-history-free-grunge-fonts

    37. Defused

    defused-free-grunge-fonts

    38. Dirty Ames

    dirty-ames-free-grunge-fonts

    39. Desperado

    desperado-free-grunge-fonts

    40. Idiot

    idiot-free-grunge-fonts

    41. SideWalk

    side-walk-free-grunge-fonts

    42. Birth of a Hero

    birth-of-hero-free-grunge-fonts

    43. BlackCasper

    black-casper-free-grunge-fonts

    44. Northwood High

    northwood-high-free-grunge-fonts

    45. Cheap Stealer

    cheap-stealer-free-grunge-fonts

    46. Cocaine Sans

    cocaine-sans-free-grunge-fonts

    47. Hard Rock

    hard-rock-free-grunge-fonts

    48. Chic Decay

    chic-decay-free-grunge-fonts

    49. Dirt2Death Font by KeepWaiting

    dirt-2-death-free-grunge-fonts

    50. Heroin 07

    heroin-07-free-grunge-fonts

    51. Street Blues Trial

    street-blues-free-grunge-fonts

    52. Turbo Ripped

    turbo-ripped-free-grunge-fonts

    53. NeoPrint M319

    neoprint-free-grunge-fonts

    54. 84 Rock

    84-rock-free-grunge-fonts

    55. A Bite

    a-bite-free-grunge-fonts

    56. BB Fusty Saddle

    fusty-saddle-free-grunge-fonts

    57. BB Petie Boy

    petie-boy-free-grunge-fonts

    58. Rusted Plastic

    rusted-plastic-free-grunge-fonts

    59. Bill Hicks

    bill-hicks-free-grunge-fonts

    60. 10 Minutes

    10-minutes-free-grunge-fonts

    61. 2Peas Billboard

    2peas-billboard-free-grunge-fonts

    62. Caveirada

    caveirada-free-grunge-fonts

    63. Choice

    choice-free-grunge-fonts

    64. No Signal

    no-signal-free-grunge-fonts

    65. Untitled

    untitled-free-grunge-fonts

    66. 23rd Street Demo Version

    23rd-street-free-grunge-fonts

    67. Fail

    fail-free-grunge-fonts

    68. Vtks Revolt

    vtks-revolt-free-grunge-fonts

    69. VTKS Refused

    vtks-refused-free-grunge-fonts

    70. Vtks Hardness

    vtks-hardness-free-grunge-fonts

    71. Malgecito

    malgecito-free-grunge-fonts

    72. Waste Of Paint

    waste-of-paint-free-grunge-fonts

    73. Distorted and Scratchy

    distorted-and-scratchy-free-grunge-fonts

    74. Mono Madness

    mono-madness-free-grunge-fonts

    75. PlagueDeath by KeepWaiting

    plague-death-free-grunge-fonts

    76. bobsmade font by Bobsmade

    bobsmade-font-free-grunge-fonts

    77. DEAD SECRETARY FONT by KeepWaiting

    dead-secretary-free-grunge-fonts

    No related posts.

    ]]>     http://blog.pdf-search.org/web-design/76-dirty-extreme-and-creative-free-grunge-fonts/558/feed 0     10 Top-Notch CSS Editors http://blog.pdf-search.org/web-design/10-top-notch-css-editors/536 http://blog.pdf-search.org/web-design/10-top-notch-css-editors/536#comments Thu, 24 Sep 2009 05:35:59 +0000 john http://blog.pdf-search.org/?p=536
  • Opera in top secret iPhone talks?
    • ]]>     CSS editors are editors that focus solely on generating Cascading Style Sheets. Though you could scrape by using a fully-featured IDE or source code editor – CSS editors may offer specialized functions and features to help you write better CSS, quicker.

    In this article, you’ll find some of the more popular CSS editors available on the market.

    Stylizer

     25-01_stylizer

    Stylizer is a visual CSS code editor. It has real-time preview that renders changes on your web browser on the fly as you make them. It also has a point-and-click interface (called “Bullseye”) which allows you to target page elements by clicking on them, making CSS editing a cinch. Stylizer is available only for Windows and Mac OS.

    Style Master

    25-02_stylemaster
    Style Master     is a cross-platform CSS development application that comes with a robust set of features such as auto-completion, on the fly code editing and rendering of dynamically-generated pages (such as PHP, .NET, and Ruby on Rails), and  a hierarchic display of CSS fields. It also has a feature called Support Watcher which warns you of potential CSS bugs for certain browsers.

    RapidCSS

    25-03_rapidcss
    RapidCSS     is ideal for writing CSS code; it is lightweight and offers a wide range of features like code auto complete, syntax highlighting, built-in CSS references and various shortcuts for CSS tags.

    Free CSS Toolbox

    25-04_freecss_toolbox
    Free CSS toolbox     is a simple text editor for CSS. It’s very lightweight and simple to use. It has a syntax highlighter feature, code auto-complete, CSS checker, CSS validator and compressor.

    CoffeeCup StyleSheet Maker

    25-05_coffeecup_stylesheet_maker
    CoffeeCup StyleSheet Maker     is another CSS editor which offers many functionalities to edit CSS, but still not very flexible to increase productivity to its highest level. It has support for shortcut keys for tags, classes, and margins to reduce the amount of typing you need to do. It also comes jam-packed with premade code snippets for common CSS styles.

    EnginSite CSS Editor

    25-06_enginesite_css
    EnginSite CSS Editor     is a good CSS editor with “instant” preview. This editor is ideal for beginning designers focused on simple tasks and designs.

    CSSEdit

    25-07_css_edit
    CSSEdit     stands in the middle between sophisticated web development editors and basic ones. CSS Edit is sleek and clean. It’s best suited for first time and casual CSS coders.

    JellyFish-CSS

    25-08_jellyfish-css
    JellyFish CSS      is a smart and simple CSS editor. It helps edit CSS code easily and quickly. It will also help you steer clear of CSS syntax errors with its Code-sense feature.

    SnapCSS

    25-09_snapcss
    SnapCSS     is a windows-only CSS editor that is extremely lightweight, featuring a super simple text-editor interface. It has a beautify code function that automatically formats and standardizes your CSS.

    SimpleCSS

    25-10_simplecss
    SimpleCSS     is a Mac OS application for easily creating stylesheets from scratch. It has an import feature which allows you to pool together several stylesheets into one file. SimpleCSS also features drag-and-drop capabilities for reordering your style rules, so that you may organize them in the manner you need.

    What CSS editor did we miss?

    Was your favorite CSS editor not mentioned here? Share your thoughts with us in the comments. * Edited by Jacob Gube

    From:http://sixrevisions.com/css/10-top-notch-css-editors/

    Related posts:

    1. Opera in top secret iPhone talks?

    ]]>     http://blog.pdf-search.org/web-design/10-top-notch-css-editors/536/feed 0     top 25 php template engine http://blog.pdf-search.org/web-design/top-25-php-template-engine/504 http://blog.pdf-search.org/web-design/top-25-php-template-engine/504#comments Sat, 05 Sep 2009 17:11:25 +0000 john http://blog.pdf-search.org/?p=504 Smarty
    Smarty is a template engine that compiles the templates into PHP scripts, then executes those scripts. Very fast, very flexible.

    Heyes Template Class
    A very easy to use, yet powerful and quick template engine that enables you to separate your page layout and design from your code.

    FastTemplate
    A simple variable interpolation template class that parses your templates for variables and spits out HTML with their values

    ShellPage
    A simple and easy to use class that lets you make whole websites based on template files for layouts. Change the template and your whole site changes.

    STP Simple Template Parser
    A simple, light weight and easy to use template parser class. It can assemble a page from several templates, output result pages to the browser or write them to the filesystem.

    OO Template Class
    An object oriented template class you can use in your own programs.

    SimpleTemplate
    A template engine to create and structure websites and applications. It can translate and compile the templates.

    bTemplate
    A small and fast template class that allows you to separate your PHP logic from your HTML presentation code.

    Savant
    A powerful but lightweight PEAR-compliant template system. It is non-compiling, and uses PHP itself as its template language.

    ETS – easy template system
    A template system that allows you to reshuffle templates with exactly the same data.

    EasyTemplatePHP
    A simple, yet powerful templating system for your site.

    vlibTemplate
    A fast, full featured template system that includes a caching and debugging class.

    AvanTemplate
    A template engine that is multi-byte safe and consumes little computing resource. It supports variable replacement and content blocks that can be set to hidden or shown.

    Grafx Software’s Fast Template
    A modification of the popular Fast Template system, this includes a cache function, debug console, and silent removal of unassigned dynamic blocks.

    TemplatePower
    A fast, simple and powerful template class. Features nested dynamic block support, block/file include support and show/hide unassigned variables.

    TagTemplate
    This library function was designed for use with template files and allows you to retrieve info from HTML files.

    htmltmpl: templating engine
    A templating engine for Python and PHP. Targeted to web application developers, who want to separate program code and design of their projects.

    PHP Class for Parsing Dreamweaver templates
    A simple class to parse a Dreamweaver template for use in custom mods for a Gallery 2 and a WordPress blog.

    MiniTemplator (Template Engine)
    A compact template engine for HTML files. It features a simple syntax for template variables and blocks. Blocks can be nested.

    Layout Solution
    Simplifies website development and maintenance. It holds commonly used variables and page elements so you don’t need to duplicate common layouts over and over.

    Cached Fast Template
    This inclusion into FastTemplate allows for caching of the template files, and can even cache with different specifications on separate blocks of content.

    TinyButStrong
    A template engine that supports MySQL, Odbc, Sql-Server and ADODB. It includes seven methods and two properties.

    Brian Lozier’s php based template engine
    Only 2k in size, very fast and object-orientated.

    WACT
    a template engine that separates code from design.

    PHPTAL
    a XML/XHTML template library for PHP.

    No related posts.

    ]]>     http://blog.pdf-search.org/web-design/top-25-php-template-engine/504/feed 0     30 Creative Examples of Javascript Slider & Scrollers http://blog.pdf-search.org/web-design/30-creative-examples-of-javascript-slider-scrollers/332 http://blog.pdf-search.org/web-design/30-creative-examples-of-javascript-slider-scrollers/332#comments Fri, 14 Aug 2009 08:14:20 +0000 john http://blog.pdf-search.org/?p=332 1. Charlie Gentle

    2. Orman Clark

    3. Best Before

    4. Creative People

    5. Tomáš Pojeta

    6. Square Factor

    7. Leg Works Studio

    8. Enterro da Gata

    9. Intermission Design

    10. Jackson & Kent

    11. Volll

    12. X3 Studios

    13. We Bleed Design

    14. Bullet PR

    15. Diego Latorre

    16. Dreamer Lines

    17. Galan Design

    18. Howarths

    19. Kit Folio

    20. Jp3 Design

    21. Polor Gold

    22. Search inside

    23. Magouya

    24. OH! Media

    25. Leaondro Medeiros

    26. Kostandinos

    27. Design Slicing

    28. Richie Qilayout

    29. Digital Convulsion

    30. Ardes For Girls

    No related posts.

    ]]>     http://blog.pdf-search.org/web-design/30-creative-examples-of-javascript-slider-scrollers/332/feed 0     Microsoft-sponsored reports find IE8 most secure browser http://blog.pdf-search.org/web-design/microsoft-sponsored-reports-find-ie8-most-secure-browser/329 http://blog.pdf-search.org/web-design/microsoft-sponsored-reports-find-ie8-most-secure-browser/329#comments Fri, 14 Aug 2009 08:09:23 +0000 john http://blog.pdf-search.org/?p=329
  • Opera in top secret iPhone talks?
  • Microsoft launches beta tests of free Office 2010, ’streaming’ delivery
  • Developers slowly rising to Microsoft’s Surface
    • ]]>     During July 2009, a company called NSS Labs performed two separate browser security tests, which Amy Barzdukas, General Manager of Internet Explorer, told Ars that Microsoft had sponsored. Right off the bat, your suspicions have probably been raised, and rightly so. Internet Explorer 8 performed very well in all the tests and, while Microsoft insists that it had no impact on the results, we must still be cautious when examining the reports.

    Before we go to the results, it’s worth noting that NSS Labs chose to test what it thinks are the most important types of security threats:

    The most common and impactful ’security threats’ facing users today are socially engineered malware and phishing attacks. As such, they have been the primary focus of our initial research. While drive-by downloads and click-jacking are also effective attacks and have achieved notable publicity, they represent a smaller percentage of today’s threats.

    According to Microsoft, the malware report is more important than the phishing report, so we’ve put it first. “We block 20 times more malware per day than phishing sites in IE8,” Barzdukas told Ars. IE8 block malware for approximately 1 out of 40 users every week, and approximately 1 of every 200 downloads is blocked as malicious.

    Socially Engineered Malware Protection Comparative Test Results 2nd Edition

    This test was actually NSS Labs’ second iteration to verify web browser protection against socially engineered malware. The first one was conducted in Q109 and published in March 2009. NSS Labs describes a socially engineered malware URL as “a web page link that directly leads to a ‘download’ that delivers a malicious payload whose content type would lead to execution.” Here’s how NSS Labs described its methodology for this test:

    It is based upon empirically validated evidence gathered during 12 days of 24×7 testing, performed every 4 hours, over 69 discrete test runs, each one adding fresh new malware URLs. Each product was updated to the most current version available at the time testing began, and allowed access to the live Internet.

    Here are the summarized results of this report:

    nss_socially_engineered_malware_july.png

    nss_malware_url_response_histogram_july.png

    The first graph is fairly self-explanatory: it shows the percentage of malware URLs that each browser was able to successfully detect and block. NSS Labs started with 2,171 potentially malicious URLs and then cut that down to 608 URLs as the rest “did not pass our validation criteria, including those tainted by exploits or that contained invalid samples.”

    The second graph shows the response time of how long it took browsers to block a threat once it was introduced into the test cycle. Generally, at least half of a browser’s total protection was achieved in the zero hour. Internet Explorer 8 continued to add as much as 41 percent of additional protection over the course of the test while other browsers added between just 0 percent and 16 percent.

    Phishing Protection Comparative Test Results

    This test was NSS Labs’ first comprehensive test of web browser phishing protection. NSS Labs describes a phishing URL as follows: “The URL both falsely impersonates another entity and attempts to trick the user into disclosing personal information via a Web form.” Here’s how NSS Labs described its methodology for this test:

    This report is based upon empirically validated evidence gathered by NSS Labs during 14 days of 24×7 testing, performed every 4 hours, over 80 discrete test runs, each one adding fresh new phishing URLs. Each product was updated to the most current version available at the time testing began, and allowed access to the live Internet.

    Here are the summarized results of this report:

    nss_mean_block_rate_for_phishing_july.png

    nss_phishing_url_response_histogram_july.png

    The first graph is fairly self-explanatory: it shows the percentage of phishing URLs that each browser was able to successfully detect and block. NSS Labs started with 856 potentially phishing URLs and then cut that down to 593 URLs as the rest “did not pass our validation criteria, including those tainted by exploits (not part of this test).”

    The second graph shows how long it took the browsers under test to block the threat once it was introduced into the test cycle. NSS Labs notes that although Firefox, Safari, and Chrome share the same SafeBrowsing API, their results are very different, which speaks to the impact of different implementations.

    Conclusion and Microsoft commentary

    When Internet Explorer 8 was released in March 2009, we noted that Microsoft had made significant progress, including in the area of security. Which is good, since the company maintains the dominant position in terms of browser market share, and as a result it will be the biggest target for various Internet threats.

    When we talked about IE6 and Microsoft’s stance on not dropping support anytime soon, Barzdukas told us that “our biggest competition, in many ways, is our own past version” and that it was important to “help consumers understand the value of moving to modern browsers.” Touting how well the browser does in the area of security is apparently one of the ways Microsoft plans to do this. Another is simply waiting for Vista’s successor. “We think that with Windows 7, we will see much more traction with those IE6 users moving on,” Barzdukas noted.

    Microsoft has tried before to market IE8 as a superior browser to its predecessors and to the competition. In June 2008, the company launched a “Windows Internet Explorer 8: Get the facts” website that received much criticism because it was obviously biased. In March 2009, the company released its own tests that showed IE8 loading many websites faster than two open source browsers, Firefox and Chrome. With these NSS Labs reports, the company is trying to show that third-parties also find IE8 to be a solid competitor, but the fact that the software giant sponsored the reports blunts their impact (the way that one designs the test has a huge impact on the results).

    In terms of the future, Barzdukas told Ars what we already know: that Microsoft claims to be taking HTML 5 very seriously. The specification is being authored collaboratively by representatives of numerous companies and organizations, including all of the leading browser makers. When we steered the discussion to IE9, though, Barzdukas told Ars that Microsoft is still “in the early stages, taking a lot of feedback, and we are hammering out the plan.”

    Update

    Rick Moy, president of NSS Labs, sent us a follow-up e-mail to tell us that it was Microsoft’s online security engineering team (not marketing) that hired NSS Labs to do recurring benchmark testing so they could improve their services. Only once Microsoft’s security engineering team saw the results did it send the details over to the marketing department.

    In terms of sponsorship of the reports, “this stuff is expensive to do right, and we need to monetize it somehow,” Moy told Ars. “We invited Google, Mozilla, Apple, Opera to participate, but they didn’t even bother to respond, except for Opera, which stated they “don’t really focus on malware.”

    Related posts:

    1. Opera in top secret iPhone talks?
    2. Microsoft launches beta tests of free Office 2010, ’streaming’ delivery
    3. Developers slowly rising to Microsoft’s Surface

    ]]>     http://blog.pdf-search.org/web-design/microsoft-sponsored-reports-find-ie8-most-secure-browser/329/feed 0     53 CSS-Techniques You Couldn’t Live Without http://blog.pdf-search.org/web-design/53-css-techniques-you-couldn%e2%80%99t-live-without/328 http://blog.pdf-search.org/web-design/53-css-techniques-you-couldn%e2%80%99t-live-without/328#comments Fri, 14 Aug 2009 08:08:34 +0000 john http://blog.pdf-search.org/web-design/53-css-techniques-you-couldn%e2%80%99t-live-without/328 CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts – and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.

    Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time – of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites. Links checked: June/11 2008.

    You might want to take a look at the article Powerful CSS-Techniques For Effective Coding.

    1. CSS Based Navigation

    CSS-Technique

    2. Navigation Matrix Reloaded

    CSS-Technique

    3. CSS Tabs

    CSS-Technique

    4. CSS Bar Graphs (CSS For Bar Graphs)

    CSS-Technique

    5. Collapsing Tables: An Example

    CSS-Technique

    6. Adam’s Radio & Checkbox Customisation Method

    CSS-Technique

    7. CSS Image Replacement

    CSS-Technique

    8. CSS Shadows (CSS Shadows Roundup)

    CSS-Technique

    9. CSS Rounded Corners Roundup (Nifty Corners)

    CSS-Technique

    10. Drop Cap – Capital Letters with CSS

    CSS-Technique

    11. Define Image Opacity with CSS

    CSS-Technique

    12. How to Create a Block Hover Effect for a List of Links

    CSS-Technique

    13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

    CSS-Technique

    14. CSS Diagrams

    CSS-Technique

    15. CSS Curves

    CSS-Technique

    16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.

    CSS-Technique

    17. CSS Image Map

    CSS-Technique

    18. CSS Image Pop-Up

    CSS-Technique

    19. CSS Image Preloader

    CSS-Technique

    20. CSS Image Replacement for Buttons

    CSS-Technique

    21. Link Thumbnail

    CSS-Technique

    22. CSS Map Pop

    CSS-Technique

    23. PHP-based CSS Style Switcher

    CSS-Technique

    24. CSS Unordered List Calender (CSS Styled Calender)

    CSS-Technique

    25. CSS-Based Forms: Techniques

    CSS-Technique

    26. CSS-Based Tables: Techniques

    CSS-Technique

    27. Printing Web-Documents and CSS

    CSS-Technique

    28. Improved Links-Display for Print-Layouts with CSS

    CSS-Technique

    29. CSS-Submit Buttons

    CSS-Technique

    30. CSS Teaser Box

    CSS-Technique

    31. CSS Tricks for Custom Bullets

    CSS-Technique

    32. Ticked Off Links Reloaded

    CSS-Technique

    33. CSS Zooming

    CSS-Technique

    34. Creating a Star Rater using CSS

    CSS-Technique

    35. The ways to style visited Links

    CSS-Technique

    36. PDF, ZIP, DOC Links Labeling

    CSS-Technique

    37. Displaying Percentages with CSS

    CSS-Technique

    38. Image Floats without the Text Wrap

    CSS-Technique

    39. Let visitors decide, whether or not will they open link in a new window

    CSS-Technique

    40. Simple accessible external links

    CSS-Technique

    41. Zebra Table with JavaScript and CSS

    CSS-Technique

    42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

    CSS-Technique

    43. Unobtrusive Sidenotes

    CSS-Technique

    44. Image Caption with CSS (Styled Images with Caption)

    CSS-Technique

    45. Dynamic Piechart with CSS

    CSS-Technique

    46. Format Footnotes with CSS

    CSS-Technique

    47. Hierarchical Sitemap with CSS

    CSS-Technique

    48. Snook’s Resizable Underlines

    CSS-Technique

    49. Switchy McLayout: An Adaptive Layout Technique

    CSS-Technique

    50. StyleMap: CSS+HTML Visual Sitemap

    CSS-Technique

    51. Custom Reading Width

    CSS-Technique

    52. CSS Alert Message

    CSS-Technique

    53. CSS Production Notes

    CSS-Technique

    No related posts.

    ]]>     http://blog.pdf-search.org/web-design/53-css-techniques-you-couldn%e2%80%99t-live-without/328/feed 0     30 Examples of Extreme Minimalism in Web Design http://blog.pdf-search.org/web-design/30-examples-of-extreme-minimalism-in-web-design/265 http://blog.pdf-search.org/web-design/30-examples-of-extreme-minimalism-in-web-design/265#comments Tue, 04 Aug 2009 16:03:40 +0000 john http://blog.pdf-search.org/?p=265
  • Google’s Chrome OS hits BitTorrent
    • ]]>

    1. DownForEveryoneOrJustMe

    A useful service for knowing if a site is actually down, and you are not the only one unable to access it.


    downforeveryoneorjustme_com

    2. DingItsUp

    and this one sends you an email when the site is up again.


    dingitsup_com

    3. IndexedByGoogle

    Want to make sure that Google has indexed you site?


    indexedbygoogle_com

    4. Fizy

    A speedy search engine for songs and music videos. It can be used as your online jukebox with the option to share what you are listening to on social networks such as Twitter, FriendFeed, and Facebook.


    fizy_com

    5. SimpleCountryCodes

    A service that allows you to look up any country code. Very handy web app for people who often dial abroad.


    simplecountrycodes_com

    6. ThyNews

    A web service that allows the creation of a custom page with headline links from online news sources and blogs.


    thynews_com

    7. Tasck

    A smartly designed Ajax powered To-Do List with one objective in mind; minimizing users’ clicks and achieving the functionality required from such a web app.


    tasck_com

    8. QuieTube

    Watch YouTube videos without all the clutter, noise, and distractions caused by comments and other elements.


    postcard_fm

    9. Postcard.fm

    A service that lets you email audio postcards. An interesting example of a 3 steps web app.


    postcard.fm

    10. CopyPasteCharacter

    Copy and paste characters with a simple click.


    CopyPasteCharacter.com

    Portfolios

    11. CraigWilson

    Portfolio of Craig Wilson


    craigwilson.co.uk

    12. ethicka

    Portfolio of William Donahoe


    Ethicka.com

    13. hakki

    Portfolio of Hakki Yemeniciler


    hakki.com

    14. joelirw

    Portfolio of Joel Irwin


    joelirw.in

    15. johnstewartsutherland

    Portfolio of John S. Sutherland


    johnstewartsutherland.com

    16. jonwardweb

    Portfolio of Jon Ward


    jonwardweb.co.uk

    17. keeno

    Portfolio of Kenno


    keeno.cn

    18. LoveBlank

    Portfolio of Francesco Prosperi


    LoveBlank.com

    19. Pomade

    Pomade is a design studio based in New York city


    pomade.tv

    20. Yalamber

    Portfolio of Yalamber Subba


    Yalamber.com

    A simple Yes or No answer

    21. is Twitter down?

    Tells you if Twitter is down.


    IsTwitterDown.com

    22. is IsTwitterDown down?

    Tells you if the site that checks if Twitter is down (no. 21) is down.


    IsIsTwitterDownDown.com

    23. is it Christmas?

    Just in case you want to be sure…


    IsitChristmas.com

    24. is it a leap year?

    Another simple way to make sure if we are in a leap year…


    IsItALeapYear.com

    25. is Obama president?

    Answering this question is done by may other dedicated sites, but this one adds a timeline…


    IsObamaPresident.com

    Miscellaneous

    26. D-E-F-I-N-I-T-E-L-Y

    An obsession with properly spelling DEFINITELY (I just copied it just to make sure I don’t make that mistake)


    D-E-F-I-N-I-T-E-L-Y.com

    27. DocaPet

    Even eCommerce can be simple and minimal, a great example of how this can be achieved


    DocaPet.com

    28. TelescopicText

    I love the creativity behind this one, and would love to see a whole book done this way


    TelescopicText.com

    29. RandomBuddha

    Random Buddha quotes


    RandomBuddha.com

    30. KonamiCodeSites

    Welcome to geekdom; a list of Konami Code powered sites. Of course, you need to use the code (↑ ↑ ↓ ↓ ← → ← → b a) to access the site, and don’t forget to try it on SingleFunction


    konamicodesites.com

    Related posts:

    1. Google’s Chrome OS hits BitTorrent

    ]]>     http://blog.pdf-search.org/web-design/30-examples-of-extreme-minimalism-in-web-design/265/feed 0     10 promote the website experience effect the jQuery plug-in unit http://blog.pdf-search.org/web-design/10-promote-the-website-experience-effect-the-jquery-plug-in-unit/253 http://blog.pdf-search.org/web-design/10-promote-the-website-experience-effect-the-jquery-plug-in-unit/253#comments Tue, 04 Aug 2009 15:53:57 +0000 john http://blog.pdf-search.org/?p=253 This introduction’s these websites have provided each effect extremely good jQuery plug-in unit, these plug-in units may increase a richer expressive force for yours website the effect. I will introduce these effects one by one operating instructions, the related main page and the downloading link.

    AJAX Fancy Captcha

    The extremely rich creativity’s proving program, may achieve the confirmation through the direct dragging and drop and dropping correct icon to the target location the goal.

    01

    Note:According to exploiter’s introduction, this kind of verification mode’s security rank is only intermediate.

    jQuery Cycle –

    Before only then very cool picture excessive animation which can realize in flash, this formidable plug-in unit may let you from the definition reproduce by pantograph, the reassignment speed.

    02

    Cool jQuery Sliding Panel

    Really likes under this pulling under very much the frame the effect.

    03

    jQuery Scrollable

    Is good, the very smooth trundle plug-in unit.

    04

    It may use in:

    • Picture demonstration 
    • Produces the piece to introduce 
    • Guidance 
    • Other you possibly thought use 

    Also has many merits：

    • Realizes easily horizontal and vertical alines.
    • Supports the button, the direction key, the mouse hoop guidance, the API type transfer.
    • Support from definition effect.
    • More introductions may go to the main page to have a look.

    jQuery Filterable Portfolio

    Formidable folder type demonstration plug-in unit.

    05

    You choose from above classified tab item, may see the effect.

    Animated Portfolio

    Similarly good demonstration effect, but after this website’s band width exhausted at present has been unable to visit (in the August 1, then visit), the current capacity much was it can be imagined big.

    Password Strength Meter

     

    06
    Password intensity monitor.

    The picture is removable.

    jQuery Slide-In Tab

    With above two similar, in tab level cut plug-in unit.

    07

    JQuery Dashboard

    Similar mac machine on effect.

    08

    Smooth Tabbed Menu

    Quite smooth tab effect.

    09

    jQuery Tetris

    jQuery Russia block.

    10

    No related posts.

    ]]>     http://blog.pdf-search.org/web-design/10-promote-the-website-experience-effect-the-jquery-plug-in-unit/253/feed 0