Kenneth D. Nordahl http://articles.nordahl.me articles Thu, 22 Apr 2010 17:42:29 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 CSS3 http://articles.nordahl.me/css3 http://articles.nordahl.me/css3#comments Thu, 22 Apr 2010 16:40:43 +0000 KDN http://articles.nordahl.me/?p=236 Introduction

This is the place where I try to collect all the information about CSS3 and try to create some practical examples you can use today.

If you already are here looking at CSS3 you might as well step over and read about HTML5 when you are done with this article.

Resources

Custom Fonts

You can achieve custom fonts embedded into your websites if you have the proper license from the font creator. All you need to do is declare the font in CSS with @font-face. Read all about it in my @font-face article.

]]> http://articles.nordahl.me/css3/feed 0 HTML5 http://articles.nordahl.me/html5 http://articles.nordahl.me/html5#comments Sun, 21 Mar 2010 05:39:54 +0000 KDN http://articles.nordahl.me/?p=182 Introduction

This is the place where I try to collect all the information about HTML5 and try to create some practical examples you can use today.

If you already are here looking at HTML5 you might as well step over and read about CSS3 when you are done with this article.

Resources

Examples

Blog

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Your Website</title>
	<link rel="alternate" href="/feed/" type="application/atom+xml">
	<link rel="stylesheet" href="/css/fluidgrid_10.css" type="text/css" media="screen"> <!-- Grid system that scale the site from iPhone width to 1000px width -->
	<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen">
</head>
<body>
	<section>
	<header class="grid_10 group">
		<h1>Company name</h1>
		<h2>A company slogan</h2>
		<nav>
			<ul>
				<li><a href="#" title="#">Home</a></li>
				<li><a href="#" title="#">Blog</a></li>
				<li><a href="#" title="#">Projects</a>
					<ul>
						<li><a href="#" title="#">For web</a>
							<ul>
								<li><a href="#" title="#">item1</a></li>
								<li><a href="#" title="#">item2</a></li>
								<li><a href="#" title="#">item3</a></li>
								<li><a href="#" title="#">item4</a></li>
								<li><a href="#" title="#">item5</a></li>
							</ul>
						</li>
						<li><a href="#" title="#">For Mac</a>
							<ul>
								<li><a href="#" title="#">item1</a></li>
								<li><a href="#" title="#">item2</a></li>
								<li><a href="#" title="#">item3</a></li>
							</ul>
						</li>
						<li><a href="#" title="#">For iPhone</a>
							<ul>
								<li><a href="#" title="#">item1</a></li>
								<li><a href="#" title="#">item2</a></li>
							</ul>
						</li>
						<li><a href="#" title="#">For iPad</a>
							<ul>
								<li><a href="#" title="#">item1</a></li>
								<li><a href="#" title="#">item2</a></li>
								<li><a href="#" title="#">item3</a></li>
								<li><a href="#" title="#">item4</a></li>
								<li><a href="#" title="#">item5</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#" title="#">Portfolio</a>
					<ul>
						<li><a href="#" title="#">Web design</a></li>
						<li><a href="#" title="#">Software design</a></li>
						<li><a href="#" title="#">Mobile design</a></li>
					</ul>
				</li>
				<li><a href="#" title="#">About us</a></li>
				<li><a href="#" title="#">Contact</a></li>
			</ul>
		</nav>
	</header>
	<section id="featured" class="grid_10 group">
		<figure class="grid_7 alpha">
			<img src="url/to/img.jpg" alt="Large featured image" /> <!-- swaps with the images in the 2nd figure -->
			<figcaption>About this image</figcaption>
		</figure>
		<figure class="grid_3 omega"> <!-- Constrained with CSS selection to only show 3, swaps with first figure -->
			<img src="url/to/small-img.jpg" alt="Large small image" /> <!-- If you want to, write a jQuery script that add a caption from the alt text -->
			<img src="url/to/small-img.jpg" alt="Large small image" />
			<img src="url/to/small-img.jpg" alt="Large small image" />
			<img src="url/to/small-img.jpg" alt="Large small image" />
		</figure>
	</section>
	<section class="grid_7">
		<article>
			<header>
				<h1>Article title</h1>
				<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#" title="#">Writer</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
			<figure>
				<video controls>
					<source src="url/to/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
					<source src="url/to/video.ogg" type='video/ogg; codecs="theora, vorbis"'>
					If you read this text I recommend you to install a better browser like Safari, Chrome or Firefox.
					<!-- Fallback to flash can be added here with the usage of the H264 .mp4 file as source-->
				</video>
				<figcaption>Video by XXXX, YYYY and ZZZZ</figcaption>
			</figure>
			<footer>
				<a href="#" title="#">6 Comments</a>
			</footer>
		</article>
		<article>
			<header>
				<h1>Article title</h1>
				<p><p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#" title="#">Writer</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
			<figure>
				<img src="url/to/img.jpg" alt="landscape picture of some hills" />
				<figcaption><a href="#" title="#">"Beautiful hills landscape"</a> from Flickr user <a href="#" title="#">EEEEE</a>, protected by a <a href="#" title="#">Creative Commons BY-SA-NC 3.0</a> license.</figcaption>
			</figure>
			<footer>
				<a href="#" title="#">8 Comments</a>
			</footer>
		</article>
		<article>
			<header>
				<h1>Article title</h1>
				<p><p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#" title="#">Writer</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
			<footer>
				<a href="#" title="#">11 Comments</a>
			</footer>
		</article>
		<article>
			<header>
				<h1>Article title</h1>
				<p><p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#" title="#">Writer</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
			<footer>
				<a href="#" title="#">2 Comments</a>
			</footer>
		</article>
		<article>
			<header>
				<h1>Article title</h1>
				<p><p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#" title="#">Writer</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
			<footer>
				<a href="#" title="#">4 Comments</a>
			</footer>
		</article>
	</section>
	<aside class="grid_3">
		<h1>About section</h1>
		<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</aside>
	<footer class="grid_10 group">
		<section class="sitemap">
			<ul>
				<li><a href="#" title="#">Sitemap</a>
					<ul>
						<li><a href="#" title="#">Home</a></li>
						<li><a href="#" title="#">Blog</a></li>
						<li><a href="#" title="#">Projects</a>
							<ul>
								<li><a href="#" title="#">For web</a>
									<ul>
										<li><a href="#" title="#">item1</a></li>
										<li><a href="#" title="#">item2</a></li>
										<li><a href="#" title="#">item3</a></li>
										<li><a href="#" title="#">item4</a></li>
										<li><a href="#" title="#">item5</a></li>
									</ul>
								</li>
								<li><a href="#" title="#">For Mac</a>
									<ul>
										<li><a href="#" title="#">item1</a></li>
										<li><a href="#" title="#">item2</a></li>
										<li><a href="#" title="#">item3</a></li>
									</ul>
								</li>
								<li><a href="#" title="#">For iPhone</a>
									<ul>
										<li><a href="#" title="#">item1</a></li>
										<li><a href="#" title="#">item2</a></li>
									</ul>
								</li>
								<li><a href="#" title="#">For iPad</a>
									<ul>
										<li><a href="#" title="#">item1</a></li>
										<li><a href="#" title="#">item2</a></li>
										<li><a href="#" title="#">item3</a></li>
										<li><a href="#" title="#">item4</a></li>
										<li><a href="#" title="#">item5</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li><a href="#" title="#">Portfolio</a>
							<ul>
								<li><a href="#" title="#">Web design</a></li>
								<li><a href="#" title="#">Software design</a></li>
								<li><a href="#" title="#">Mobile design</a></li>
							</ul>
						</li>
						<li><a href="#" title="#">About us</a></li>
						<li><a href="#" title="#">Contact</a></li>
					</ul>
				</li>
			</ul>
		</section>
		<section class="subscription">
			<h1>Subscription options</h1>
			<ul>
				<li>RSS</li>
			</ul>
		</section>
		<section class="copyright">
			<p>Copyright 2010 || Design by: <a href="#" title="#">Your name</a></p>
		</section>
	</footer>
	</section>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript">
		/* Your jQuery scripts goes here */
	</script>
	<script type="text/javascript">
		/* Your Google analystic goes here */
	</script>
</body>
</html>

Discussion around the standard HTML5 template I currently use when I start on new projects. It is based on the HTML5 March 4th, 2010 working draft. Is it semantic? Room for improvements? Comments?

]]> http://articles.nordahl.me/html5/feed 6 San Francisco http://articles.nordahl.me/san-francisco http://articles.nordahl.me/san-francisco#comments Wed, 10 Mar 2010 10:35:46 +0000 KDN http://articles.nordahl.me/?p=166 <3 San Francisco
Norwegian translation / Les denne artikkelen på norsk

Monday

OSL Oslo Gardermoen → KEF Keflavik International Airport → SFO San Francisco International Airport

Quick Facts:

  • Distance – 8700 km
  • Travel Duration – 1 day and 11 hours
  • CO2 pollution – 930 kg

Not going to bore you down with the boring flights but I just want to mention that Keflavik is the worst airport I’ve ever been too. A long way to walk between gates, insane security (sneaky guards touching everyone from top to bottom), terrible and expensive food and not enough staff to handle the boarding.

I arrived pretty jetlagged in the SOMA district in San Francisco after a 30 min cab drive from the airport. I meet up with Bjørn Rostad and we went back to his place were I would be staying during my San Francisco visit. The clock was around 5pm local time and Bjørn suggested that we should take a little sightseeing trip even tho it started to get dark outside.

When we left his appartment there was some light rain. After a quick tour around the downtown area we ended at a bar for a couple of pints of beer.

Tuesday

Tourist sightseeing day. My first full day in San Francisco. The now experienced tourist guide Bjørn Rostad guided me through some of the must see areas of San Fran. We started out walking by the Yerba Buena Center and Moscone West center, then up through Markers Street to Union Square.

Next up was China town with all their little quirky stores. “Would you like that turtle butchered or do you want to do it yourself?” Everything in that store was more or less alive.

After a couple of blocks with china town we entered into the Italian district with all their small cafes and pastry shops. On the border between china town and Italian district I found my favorite church so far, Saints Peter and Paul Church.


You find the church on 666 Filbert st, San Francisco.

Next up on the tour was the Fishers Wharf. This is as far north you can get in San Francisco. We stopped at a well rated (yelp) seafood restaurant to have our lunch/dinner. I ordered some grilled seabass thingy and Bjørn had some shrimp stuff. The food we got was pretty bad and we ended up leaving the restaurant without tipping them one single cent.

Wednesday

This was the Apple event day. We put our alarmclocks on for 10AM to be up and ready when Steve entered the stage only a couple of blocks away at 11AM. It was the announcement of the iPad and me and Bjørn were pretty disappointed at the time about the capabilities of the tablet.

Later that day me and Bjørn met up with Morten Hauge another fellow student from the HIOF days who have now reached out to the corners of the world to seek knowledge as well.

Our plans for the day was to take a trip to the hippy area of Haight Ashbury and maybe check out some museums. We ended up skipping what I would call overpriced museums. After a walk around the Ashbury area and checking out the record store we walked over to Alamo Square to take some panorama pictures.


Copyright 2010 – Kenneth D. Nordahl

Thursday

Geek sightseeing day. The plan was to visit Stanford University, Electronic Arts HQ, Apple HQ and Google.

On our way to the train we however walked by the AT&T Park, the home of San Francisco Giants.

After waiting about 30 minutes we got on the southbound Caltrain. Bjørn was super stoked about the train ride since he got to sit on the second floor. We stopped at a station called San Carlos where a friend of Bjørn picked us up to show us around the Electronic Arts HQ. I don’t have any pictures since we where not allowed to take any, but that is one great working environment.

We had our lunch at a cafe place right next to the EA campus. Awesome sandwiches!

Next up was a stop at one of the best universities in the world, Stanford (16 on the list in 2009). Nothing more to say that thats the place to study for a business/engineering/medicine or science degree if you are loaded with cash.

We got back on to Caltrain and to our next stop. At this time we knew we would not have time to stop by both the Googleplex and the little campus in Cupertino, so we decided to skip the Googleplex since we probably only would be able to get into the lobby. We got off at the Sunnyvale train station and got on a bus down to One Infinite Loop.



Bjørn and me at the Infinite Loop sign.

Company Store (spent way to much money here :/ )

So thats where the magic comes from?

We ended up in San Jose after a 40 min bus tour from Cupertino and then a 2 hour train ride back to San Francisco. On the train Bjørn spotted a guy playing with some of the Adobe CS5 programs (no picture of that :/)

We had our dinner at a wonderful Pakistanian and Indian restaurant called Chutney. If you ever visit San Francisco you have to stop by this restaurant.


Some of the food me and Bjørn ordered.

Friday

Golden Gate and photography day. I took a tour bus to the other side of the golden gate bridge to to take some pictures.



Later that evening Bjørn dragged my to the other side of downtown to eat at this “amazing burger joint”, and omg I agree with him after tasting the burger. The place is called Pearl’s Deluxe Burgers and it is the best burgers I’ve ever eaten. They are pretty unhealthy if you eat them every day since they are pretty fat, but they are damn tasty.


I had a Spicy Sly Burger.

Saturday

I was suppose to go to Alcatraz this day but the queue to get a ticket was way to long for me to bother. I tried to find the butcher place in China town to get some pictures of it but stopped searching after like 15 minutes when the rain started pouring down. Chill night before my long flight to the country down under.

Sunday

It was time to point my nose towards summer in the southern hemisphere. I left for the BART railway system around 11AM to get to SFO.

I were flying first class for the first time of my life between San Francisco and Los Angeles International airport with Virgin America. Not exactly a huge experience, yes you can board the flight first and getting stared at by all the other passengers as they walk through first class, yay! You get some extra legroom and a free bag of snacks, exclusive! The price difference between flying regular class + one extra bag or first class was about $10 or so, and that was the only reason for upgrading.

SFO San Francisco International Airport → LAX Los Angeles International Airport → SYD Kingsford Smith Airport → BNE Brisbane Airport

Quick Facts:

  • Distance – 13370 km
  • Travel Duration – 1 day and 6 hours
  • Pollution – 1480 kg

I were introduced to a wonderful documentary The Cove on the flight from LAX to SYD. It is about the dolphin slaughtering in Japan, the movie won a Oscar for the best documentary of 2009.

Tuesday

Arrived in Brisbane around 10:00 AM tuesday morning. Not that jetlagged since it was only 5 hour difference + 1 day ahead.

]]> http://articles.nordahl.me/san-francisco/feed 3 Custom fonts on the web with @font-face http://articles.nordahl.me/font-face http://articles.nordahl.me/font-face#comments Thu, 31 Dec 2009 23:01:51 +0000 KDN http://articles.nordahl.me/?p=8 Table of Contents

Introduction

Expanding the font repertoire a webdesigner could use on websites has been a dream for a few years now. We have all based our designs upon fonts like Helvetica, Arial, Verdana or (even) Times New Roman. Designers have been using images for logos, tags or even headings for a long time to be able to get custom typography into their design. During the last couple of years Flash and Javascript technics has appeared to solve the custom font problems, but those technics require that the user has flash installed or javascript turned on in their browser.

Say hello to @font-face. It is a css rule that lets users temporary install and display custom fonts when the user visit your website. I am going to go through the different browser implementations and how the browsers display the custom fonts.

Licensing

By adding custom fonts to your site you might run into truble if you don’t sort out what you are allowed to do from the font creator. Some font designers have restrictions soo you would have to buy a custome license for the web, some are open source or have CC licences and some arn’t allowed on the web at all. Allmost every font you download/buy comes with a read me file that declares what license the font have. All the fonts used on this page is ready for the web and you can check them out in the fonts used section below. I’ve included a link section that points out some web ready font foundries.

Fontfileformats

  • TrueType(.ttf)
  • OpenType(.otf)
  • Embedded OpenType(.eot)
  • Scalable Vector Graphics(.svg)
  • TrueDoc(.pfr)
  • Web Open Font Format(.woff)

During 2009 more and more developers started using @font-face to implement custom fonts in their webdesigns. There is however currently no standard on what file format designers should use. Different browsers currently support different file formats. Microsoft has released the .eot file format for approval by the W3C as a web font standard. The open source community with support from the Mozilla foundation has submitted the .woff format for approval by the W3C as the open source alternative to .eot. Both formats are currently processed by the W3C and I would reckon we would see some standardization for a web font format during 2010.

Browser compatibility

Internet Explorer Mozilla family Safari Chrome Opera Netscape
.ttf No 3.5 3.1 2.0* 10.0 No
.otf No 3.5 3.1 No 10 No
.eot 4 No No No No No
.svg No No 3.1 0.3 10.0 No
.pfr 4 (with plugin) No No No No 4-6
.woff No 3.6 No No No No

(*) Disabled by default. Can be activated via a command line switch

Table is licensed with Creatice Commons 3.0 by-sa from author Wikipedia

Convert your font

There is a couple of onlines services out there that you can use to convert your font. My favorite by far is onlinefontconverter.com. You just add your fonts as an attachment to the mail and write in the subject field the kind of format you want it converted into.

  1. Open your mail program and add convert@onlinefontconverter.com to the “To” field.
  2. Add the format you want it converted to as the subject
  3. Attach the font files you want converted

You of course have to own the appropriate license for the fonts you want converted.

The file size of the svg file you get from the onlinefontconverter.com is rather large, so I recommend that use a Java toolkit called Batik. If you are on a Mac you already have Java installed and only need to download Batik. If you are on a windows machine you need to download and setup Java first.

The next thing you need to do is open a terminal or command line and run the following:

java -jar /path-to-where-the-script-is-stored/batik-1.7/batik-ttf2svg.jar FontName.ttf -o FontName.svg -id font

The Batik toolkit only support TrueType as input format.

Webkit – Safari and Chrome

Both Safari and Chrome use the webkit to render webpages. Custom fonts have been supported since Safari 3.1 and Chrome 3.0.

CSS code

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.svg#diavlo_light) format("svg"); }

Internet Explorer

Custom fonts with @font-face in Internet Explorer have been around since IE4. There is however a twist to get your fonts up and running on the most common webbrowser. IE only support Embedded OpenType(.eot) or DocType(.ptr) file format. The Internet Explorer team has however said that they look into the Web Open Font Format(.woff) format for version 9 of their browser.

CSS code

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.eot);  }

Firefox

Firefox has had support for @font-face since version 3.5 with the .otf and .ttf formats. Version 3.6 of firefox adds the support of the .woff format.

CSS code

@font-face { font-family: "ChunkFive"; src: url('Chunkfive.otf') format('opentype'), url('Chunkfive.woff') format('woff');}

Opera

Opera has supported Scalable Vector Graphic (.svg) fonts since version 9 of their browser. They added support for both Truetype(.ttf) and OpenType(.otf) in version 10 of the Opera browser.

CSS code

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -&gt; www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.otf) format("opentype"); }

How to declare custom fonts for all browsers

If you want custom fonts displayed in Internet Explorer, Firefox, Chrome, Safari or Opera you would want to declare the css like this.

@font-face {
	font-family: 'ChunkFive';
	src: url('Chunkfive.eot');
	src: local('ChunkFive'), local('ChunkFive'), url('Chunkfive.woff') format('woff'), url('Chunkfive.otf') format('opentype'), url('Chunkfive.svg#ChunkFive') format('svg');
}

That is .eot format for Internet Explorer, .woff format for Firefox 3.6 + other browsers when they get support for it and the .otf and .svg format for Safari/Chrome/Safari on iPhone/Android browser.

How custom fonts get displayed in the different browsers

I have created a test page with Chunk as the huge header font and Junction as the paragraph font. All the images are 1:1 size ratio with no other post production than labeling them.

Windows

As you can see custom fonts looks choppy in Firefox and Internet explorer. Both Firefox and Internet Explorer use Windows own font rendring system and it does not apply any anti aliasing. The two webkit based browsers, Safari and Chrome looks fine due to webkits own font rendering system. Opera as well has its own font rendering system soo custom fonts looks fine in that browser.

Linux

I currently have limited access to linux based computers thats why there is only two screenshots. Both screenshots are taken from the browsershots.org website. The rendering of the large Chunk font under Debian has some huge issues. The custom fonts looks fine in Opera 10 on Ubuntu 8.

Mac

All browsers on the mac render the text fine due to the build in font anti aliasing on Mac.

Optimize the loading of fonts

As more web browsers get on the Web Open Font Format(.Woff) bandwagon we would be able to scrap out some of the font formats from our markup. For now you could at least scrap out the the Internet Explorer specific font with the IE conditional tag.

<!--[if IE]>
<style type="text/css">
@font-face { font-family: Chunk; src: url("fonts/Chunkfive.eot");}
</style>
<!--[endif]-->

Another solution to speed up the site loading is to load a seperate css file with all the font information depending on your browser when the DOM is ready.

//jQuery version
$(document).ready(function() {
var fontURL = ”;

if(jQuery.browser.msie)
fontURL = ’style-ie-fonts.css’;
else if(jQuery.browser.safari)
fontURL = ’style-safari-fonts.css’;
else if(jQuery.browser.mozilla)
fontURL = ’style-mozilla-fonts.css’;
else if(jQuery.browser.chrome)
fontURL = ’style-chrome-fonts.css’;

if (document.createStyleSheet) {
document.createStyleSheet(fontURL);
} else {
var cssLink = $(document.createElement(“link”));
cssLink.attr({
rel: “stylesheet”,
type: “text/css”,
href: fontURL
});
$(“head”).append(cssLink);
}
});

Improved the jQuery code from Vegard Sandvold’s comment below.

Fonts used in this article

Chunk

This is the bold font used in the site headings and on the navigation on this site. The font is found on The League of Moveable Type.

Junction

This font is used for the general paragraphs on this page. Check out and download the font from The League of Moveable Type.

Fontin

This is a font by Jos Buivenga (exljbris). “The Fontin is designed to be used at small sizes. The color is darkish, the spacing loose and the x-height tall. “

Diavlo

This is a font by Jos Buivenga (exljbris). “Diavlo is a free font that contains 5 weights”.

Jellyka

Jellyka Estrya’s Handwriting is a handwritten font that works great for font sizes over 50px. Check it out and download the font on dafont.com

Commercial foundries which allow @font-face embedding

Foundries with a general support for @font-face embedding

Foundries with @font-face support for selected fonts

General support for @font-face announced

This list is derivative from Webfonts.info – Creative Commons BY 3.0 licensed

]]> http://articles.nordahl.me/font-face/feed 9