gerardsalomons.nl now available as a webApp
Posted by Gerard Salomons in Some talk of me on April 25th, 2010
I changed my website gerardsalomons.nl/guitarapp into a webApp. The whole design has changed, the xhtml has changed, a complete new product. All done with basic xhtml and no javascript. So it works on all smartphones with a webbrowser. Hope you have fun, as you listing to my (guitar)music.
To all IE6 users:
Posted by Gerard Salomons in (x)html, css, design on March 9th, 2010
Hi, if you are coming to this site via Internet Explorer 6, you might not be getting the best experience possible. Honestly, I can’t even begin to think about what your entire experience on the internet must be like? (…probably like riding a bike on the highway while cars blow by you on their way to Costco to get gallons of mayonnaise and 60-inch plasma TV’s). How will you ever be able to use this website?????? You wont. You’re an asshole and your browser is an asshole. So look, I’m going to be honest: I kind of hate you. BUT we c-a-n make this work. Here is what I am going to need you to do: fire up your Toshiba ShitBook© that weighs about 45 pounds, wipe the Cheeto dust off the screen, download Safari, delete Internet Explorer from your computer, punch yourself in the face, and get me a pulled pork sandwich.
I copy-pasted these lines from newtoyork.com. Please pass them on!
Easy front-end framework by Alen Grakalic
Posted by Gerard Salomons in (x)html, css on March 9th, 2010
Very nice and simple framework, with lots of demo’s, by Alen Grakalic.
See for yourself:
Easyframework
Books in the age of the iPad
Posted by Gerard Salomons in Typography, design on March 9th, 2010
This is a conversation for books-makers, web-heads, content-creators, authors and designers. For people who love beautifully made things. And for the storytellers who are willing to take risks and want to consider the most appropriate shape and media for their yarns. Although I have some doubts about the iPad (too big and too expensive), I think this is a very learningfull explanation of where we are going to… by Craig Mod
Missile Launcher Ekranoplane
Posted by Gerard Salomons in design on March 9th, 2010
Ugly can be beautiful… or is this beautiful plane just ugly? At first I thought it was superb 3D rendering by asome genious 3d-artist, but then again… see for yourself
Hard to believe what you see?
Cool video’s
Posted by Gerard Salomons in Some talk of me, Typography on January 22nd, 2010
Two cool typographical video’s: http://abduzeedo.com/typography-mania-12
Do not underestimate the power of the Georgia!
Posted by Gerard Salomons in Typography, design on January 22nd, 2010
Fontusage in website-content is often reduced to “Arial”, “Verdana”, “Times”, “Trebuchet” and sometimes the “Tahoma”. The Georgia is for website content an absolute cool font. Especially for long texts in combination with a larger line-height. Also for headings (h1, h2, h3 etc.) it is a good alternative, as you can see in the headings in this website. So, designers.. use it more often!
#2 Lets give the example some layout
Posted by Gerard Salomons in (x)html on May 22nd, 2009
The #1 example is a very basic html-example, which has no layout at all. So we add some lay-out blocks between the body-tags.
We add the following blocks for layout to configure it as a homepage:
- Wrapper for positioning of the layoutblocks
- div with classname “wrapper”
- Header with logo, sitewide-navigation, searchbox and the main menu
- div with classname “row1″
- Content with blocks for links
- div with classname “col1″
- Column for banners and related links
- div with classname “col2″
- Around the col1 and col2 a div.row2
- div with classname “row2″
- Footer with copyright, disclaimer, privacy-policy etc.
- div with classname “row3″
For cssZengarden reasons we give the structure/layoutblocks a none-design-name and a none function-name, it just says something about what it is: a row or a column. Like in the old-days before alternative CSS approaches or PartyCasino.it, the depricated table-work…
In code it looks like this:
<head>
</head>
<body>
<div class="wrapper">
<div class="row1">
</div>
<div class="row2">
<div class="col1">
Put here your content
</div>
<div class="col2">
rightColumn
</div>
</div>
<div class="row3">
Place here the footer
</div>
</div>
</body>
To be continued…
#1 Let’s make an example
Posted by Gerard Salomons in (x)html on May 21st, 2009
First I show a basic example: a strict xhtml-page with two includes. The first include is the html-head, the second include is a html-paragraph with a h1 at the top.
The shtml-page will look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
The incHtmlHead.shtml contains the html-code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagetitle</title>
<meta http-equiv="Content-Language" content="nl" />
<meta http-equiv="Description" content="" />
<meta name="Author" content="" />
<meta name="Copyright" content="" />
<meta name="Generator" content="TFE, www.tfe.nl" />
<meta name="Keywords" content="" />
<meta name="Robots" content="index,archive,follow" />
<meta name="Googlebot" content="index,archive,follow" />
<link rev="Made" title="theFactor.e" href="http://www.tfe.nl" />
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
<link rel="Icon" href="favicon.ico" type="image/x-icon" />
<link rel="Stylesheet" media="print" href="css/print.css" type="text/css" title="Stylesheet" />
<link rel="Stylesheet" media="screen" href="css/reset.css" type="text/css" title="Stylesheet" />
<link rel="Stylesheet" media="screen" href="css/default.css" type="text/css" title="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<link rel="Home" href="index.htm" title="Home" />
<link rel="Search" href="index.htm" title="Search page" />
<link rel="Contents" href="index.htm" title="Sitemap" />
</head>
The incParagraph.shtml contains the html-code:
<h1>Title</h1>
<p>Nunc justo. Aliquam malesuada nisl id sem. Duis a urna non massa aliquet laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras dui. In tristique metus mattis massa. Sed ultrices tincidunt massa.</p>
In this example, the html-head is on every next template-page I make the same include. In this way I only have to make changes to the incHtmlHead.shtml if I need to, to make changes for all my pages which have the same include. Maximum flexibility with very little effort!
shtml: Hallelujah!
Posted by Gerard Salomons in (x)html on May 17th, 2009
Let’s get started with the basics of how I work. The basic is shtml, works the same as the include of php, however this works with pure html. One can include a file or shtml-file by including this file into your shtml document. The extra “s” stands for server, which means that on the server-side (SSI) the complete html is generated by the server: the server spits out your complete html, with the extra blocks of (included) code inside it. Seems easy, and that’s what it is!
You can deepen the shtml by nesting shtml-files inside your initial includes and build your final (exported) html only with includes. In this way you build blocks of html-code, which can be implemented anywhere on your html-grid. Very flexible and very consistent html! So I say: Halleluja to shtml!