lenas egna

Nämen hörni, det hör projektet ”bloggomgörning in public” blev väl inte ens halvlyckat va? Jag har inte haft tid att göra något med någon som helst kontinuitet, och att göra om och samtidigt dokumentera tar en jädra tid (även om det som sagt skulle vara en nyttig lektion för mig). Och när intresset för det hela dessutom verkar vara på sin höjd svalt, så lägger jag ner det. (Nä, ja änte bitter!) Nån sorts omgörning, eller iordninggörning måste det förstås bli, som bloggen ser ut nu kan inte ens en mor (dvs jag) älska den.

Det som avgjorde det hela är att jag – vi, Anders och jag – nu hals över huvud gett oss in i ett annat projekt, ett som kommer att ta en väldig massa tid flera år framöver. Och det finns väl vissa förhoppningar både hos mig och andra att jag kommer att förmedla vissa delar av detta projekt här.

Återkommer strax i detta ämne.

För att ytterligare öka läsbarheten har jag bara gjort ett par småsaker: satt fontstorlekar på rubrikerna och lagt till luft. Fontstorleken för allting är initialt satt till 100% i reset.css. 100% innebär den storlek som besökaren har inställd i sin webbläsare (jag har för mig att det är 14px om man inte ändrat något). Det gör att jag kan ställa in fontstorleken för olika element proportionellt till dessa 100%, med enheten em. Det finns flera goda skäl (ja, jag vet, det är på engelska men jag orkar inte förklara. Bara tro på mig om du inte orkar läsa…) att göra på det viset. Och så satte jag lite padding under rubrikerna och lite margin över och under article-elementet (det är ju det som omger varje enskilt inlägg). That’s it.

style.css

/*text*/
h1{
	font-size: 2em;
}
h2{
	font-size: 1.7em;
}
h3{
	font-size: 1.4em;
}
h4{
	font-size: 1.2em;
}
h1, h2, h3{
	padding-bottom: 20px;
}
article{
	margin: 20px 0;
}

Och nu börjar det roliga: att göra design och lägga till funktionalitet. En del väljer att göra design först och funktion sen, andra tvärtom. Jag gör lite av varje. Först en del stajling, så jag får en känsla för vad jag vill åstadkomma i slutet, jag är nämligen inte så ordentlig som man ”ska” vara, och börjar att rita med papper och penna och sedan överför till en photoshop-bild som jag till slut översätter till kod. Jag tar det direkt från huvudet och testar mig ofta fram. Var och en blir salig på sin tro. Sedan lägger jag på funktioner, och på slutet blir det finputs av både det ena och det andra. När det blir mer avancerat blir nämligen funktion och design ganska ofta beroende av varandra.

Fluid 960 gs

Jag har lagt till en grid-mall, och genast ökade läsbarheten med flera snäpp. Efter ett visst velande bestämde jag mig för en flytande layout (dvs inga fasta mått), och det blev Fluid 960 Grid System jag valde. Det visade sig innehålla en hel del javascript-effekter också, som jag kanske använder senare men la åt sidan tills vidare. I tema-mappen gjorde jag en ny mapp med namnet css: /wp-content/themes/mitt-tema/css/ där jag la filerna jag behöver (grid.css, reset.css, ie.css och ie6.css).
style.css, import av grid-filerna:

@import url('css/reset.css');
@import url('css/grid.css');

index.php, länkar till de IE-specifika css-filerna efter den ordinarie css-filen:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/css/ie.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/css/ie7.css" />
<![endif]-->

Nu finns det färdiga grid-systemet att tillgå.  Bara att använda de färdiga klasserna från grid-mallen i index.php. Jag började med att lägga en div med klassen ”container_12″ runt hela innehållet. Det innebär att ett rutnät med 12 kolumner jämnt fördelade över hela ytan beräknas av grid-mallen. Glöm inte att avsluta diven sist i body, men före funktionsanropet wp-footer().

Headern ska sträcka sig över alla 12 kolumnerna, så den fick klassen ”grid_12″. Omedelbart efter headern lägger jag en div med class=”clear”, för att garanterna att inget innehåll hoppar upp och lägger sig bredvid headern.

Jag valde att göra två kolumner tills vidare, den första består av innehållet jag gjort tidigare. Det innehållet omger jag med html5-elementet section (som är precis vad det låter som). Jag testar med att låta det få 3/4 av ytan så länge, alltså klassen ”grid_9″. Eftersom även nästa kolumn blir en section gav jag den ett id, ”main-area”.

Efter main-area, men fortfarande inom container, lägger jag ett select-element till, som får id ”sidebar-right” och klassen ”grid_3″ (dvs 1/4 av 12). Den får vara tom tills vidare. Direkt efter sidebar-right kommer en ny clear-div, och därefter HTML5-elementet footer, som också får vara tom så länge. Sidfoten ska också sträcka sig över hela sidbredden och får alltså klassen ”grid-12″.

Nu ser hela index.php ut så här:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>" />
	<title>Lenas egna - Trial & error</title>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
	<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/css/ie.css" />
	<![endif]-->
	<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/css/ie7.css" />
	<![endif]-->
	<?php /* Funktionsanropet wp_head() ska alltid
	finnas allra sist före </head>! */ ?>
	<?php wp_head(); ?>
</head>
<body>
	<div id="container" class="container_12">
		<header class="grid_12">
			<hgroup>
				<h1><?php bloginfo('name'); ?></h1>
			</hgroup>
		</header>
		<div class="clear"></div>
		<section id="main-area" class="grid_9">
			<?php /* Hämta inlägg: The Loop */ ?>
			<?php while(have_posts()) : the_post(); ?>
			<article>
				<header>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark"
					title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
					Postat i <?php the_category(); ?>
					<time pubdate="pubdate"><?php the_date(); ?></time>
					<?php comments_number(); ?>
				</header>
				<?php the_content(); ?>
				<footer>
					<?php the_tags('Taggar: '); ?>
				</footer>
			</article>
			<?php if(is_single()) : ?>
				<ol class="commentlist">
					<?php comments_template(); ?>
				</ol>
				<?php comment_form(); ?>
			<?php endif; ?>
			<?php /* Avsluta The Loop */ ?>
			<?php endwhile; ?>
			<nav>
				<?php next_posts_link(); ?>
				<?php previous_posts_link(); ?>
			</nav>
		</section><!-- #main-area -->
		<section id="sidebar-right" class="grid_3">

		</section><!-- #sidebar-right -->
		<div class="clear"></div>
		<footer class="grid_12">

		</footer>
	</div><!-- #container -->
	<?php /* Funktionsanropet wp_footer() ska alltid
	finnas allra sist före </body>! */ ?>
	<?php wp_footer(); ?>
</body>
</html>

Webbläsare som inte klarar HTML5

Så var det då det här med att alla webbläsare inte klarar HTML5 lika bra. Alla känner helt enkelt inte till de nya elementen. Det löser man genom att initialt sätta stilregeln display:block på samtliga nya element, för att därefter kunna behandla dem som man behandlar vilken div som helst. Eftersom reset.css är den som läses först (och är till just för att sätta default-regler) skriver jag in det i den filen (jag utelämnade några av elementen som jag vet att jag inte kommer att använda.)

article, aside, details, embed, figcaption, figure, footer, header, hgroup, mark,
meter, nav, output, progress, section, source, summary, time, video{
	display: block;
}

Exempelvis Firefox och Safari är sedan vänliga nog att ta hand om informationen utan att ifrågasätta, så icke IE. Om inte IE känner till ett element, så låtsas det inte om att det finns. Men det finns förstås sätt att överlista även IE, och vi får ta till lite javascript. Dags för en ny fil: html5.js, och för att få lite ordning och reda (eftersom jag kommer att ha många fler js-filer sedan) lägger jag den i en särskild js-mapp (/wp-content/themes/mitt-tema/html5.js). Kod att klistra in (jag hoppar över förklaringar här):

var html5Elements = [
		'article',
		'aside',
		'details',
		'embed',
		'figcaption',
		'figure',
		'footer',
		'header',
		'hgroup',
		'mark',
		'meter',
		'nav',
		'output',
		'progress',
		'section',
		'source',
		'summary',
		'time',
		'video'];
for(var i = 0; i < html5Elements.length; i++){
	document.createElement(html5Elements[i]);
}

Och så ska html5.js länkas in i index.php för dem som behöver den (dvs IE lägre än 9), detta måste göras innan css-filerna läses:

	<title>Lenas egna - Trial & error</title>
	<!--[if lt IE 9]>
	<script src="<?php bloginfo('stylesheet_directory') ?>/js/html5.js"></script>
	<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

Done. Nu är alla webbläsare skapligt med på noterna.

Registrera en Widget Area (Sidebar)

En sak till har jag gjort: jag har registrerat en Widget Area, så att jag har någonstans att lägga widgets från admindelen i WP. En ny fil, functions.php som ska ligga direkt i tema-mappen behövs för det. Och här kommer koden:

<?php
/**
 * Registrera sidebars (widget areas)
 */
$args = array(
	'name' => 'Right Sidebar',
	'id' => 'sidebar-right',
	'description' => 'Högra sidospalten',
	'before_widget' => '<div class="widget">',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>');
register_sidebar($args);
?>

Det är viktigt att det inte finns några blankrader först eller sist i filen! Nu är widget-arean registrerad och kommer att finnas i admindelen. Men för att någon widget ska visa sig sedan måste man lägga till lite kod i index.php:

<section id="sidebar-right" class="grid_3">
<?php if(is_active_sidebar('sidebar-right')) : ?>
	<?php dynamic_sidebar('sidebar-right'); ?>
<?php endif; ?>
</section><!-- #sidebar-right -->

Flytande grid-layout med två kolumner.

Sedan skrev jag lite text i en text-widget och drog dit, en förklaring ifall någon skulle råka komma in här och undra varför det ser ut som det gör…

Det här är alltså början till ett nytt tema. Helt utan tema kan inte WP köras, så jag har skapat ett nytt tema i dess allra enklaste form. I katalogen /wp_contents/themes/ har jag gjort en ny temakatalog som jag kallade ”mitt-tema” (kan heta vad som helst, men undvik mellanslag och håll dig till tecknen a-z, A-Z, 0-9, _ och – i namnet, det bör man för övrigt alltid göra med katalog- och filnamn som ska leva på webben för att undvika problem). I min temakatalog finns två filer, style.css och index.php, dessa två är nödvändiga för ett tema, men kommer så småningom att få sällskap med många fler.

style.css

Stilmallen innehåller i nuläget inga stilregler över huvud taget, endast den rad som definierar själva temat för WP-motorn.

/*
Theme Name: Mitt HTML5-tema
*/

Man kan lägga in mer information än bara tema-namnet om man vill, men ska man bara ha det för eget bruk räcker det så. Informationen skrivs som en kommentar, vilket i css görs mellan /* och */

index.php

Allt som skrivs mellan <?php och ?> är alltså php-kod, och består så här långt enbart av anrop till färdiga wp-funktioner. Exakt vad dessa gör kan man hitta i WordPress Codex (en sida som jag alltid har öppen som referensverk, det finns ingen möjlighet att lära sig allt utantill). De allra flesta finns under Template Tags, några får man använda sökfunktionen för att hitta.

Jag har gjort filen så enkel som möjligt och bara tagit med det allra nödvändigaste, så att själva inläggen ska synas och det ska gå att kommentera, men samtidigt använt de nya HTML5-elementen.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>" />
	<title>Lenas egna - Trial & error</title>
	<link rel="stylesheet" type="text/css" src="<?php bloginfo('stylesheet_url'); ?>" />
	<?php /* Funktionsanropet wp_head() ska alltid finnas allra sist före </head>! */ ?>
	<?php wp_head(); ?>
</head>
<body>
	<header>
		<hgroup>
			<h1><?php bloginfo('name'); ?></h1>
		</hgroup>
	</header>
	<?php /* Hämta inlägg: The Loop */ ?>
	<?php while(have_posts()) : the_post(); ?>
	<article>
		<header>
			<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
			Postat i <?php the_category(); ?>
			<time pubdate="pubdate"><?php the_date(); ?></time>
			<?php comments_number(); ?>
		</header>
		<?php the_content(); ?>
		<footer>
			<?php the_tags('Taggar: '); ?>
		</footer>
	</article>
	<?php if(is_single()) : ?>
		<ol class="commentlist">
			<?php comments_template(); ?>
		</ol>
		<?php comment_form(); ?>
	<?php endif; ?>
	<?php /* Avsluta The Loop */ ?>
	<?php endwhile; ?>
	<nav>
		<?php next_posts_link(); ?>
		<?php previous_posts_link(); ?>
	</nav>
	<?php /* Funktionsanropet wp_footer() ska alltid finnas allra sist före </body>! */ ?>
	<?php wp_footer(); ?>
</body>
</html>

HTML5-element som används:

• header Definierar inledningen av ett dokument eller en sektion, kan innehålla t ex navigation och rubriker
• hgroup En grupp av h-taggar (<h1> till <h6>), där lägsta siffran är huvudrubrik och övriga underrubriker
• article Enligt w3.org ska article egentligen användas för att definiera externt innehåll, men verkar i praktiken användas till just det som det låter som: en artikel eller en bloggpost
• time Definierar datum och/eller tid (attributet pubdate talar om att det handlar om publiceringsdatum)
• nav Definierar navigering
• footer Definierar antingen en sidfot, eller foten på en sektion, t ex en article

<title><?php bloginfo('name'); ?></title>

Det jag tänkte skulle bli ett litet sidoprojekt växer redan under planerings- och researchstadiet. Jag hade inte tänkt vara så himla ambitiös från början, bara experimentera mig fram som jag brukar göra när jag lär mig nya saker, med den enda skillnaden att jag skulle göra det här istället för lokalt på min egen dator, och så skriva ner vad jag gör vartefter. Men det vore väl inte jag om jag skulle kunna hålla det på en sån enkel och lagom nivå, så jag har ägnat halva natten åt att läsa på ännu mer, samlat på mig länkar och försökt fatta beslut om exakt hur och i vilken ordning jag ska göra saker, och vilka eventuella hjälpmedel i form av färdiga mallar som ska användas. Och i mina tankar har det hela växt ut till ett ganska omfattande och ambitiöst projekt.

Först och främst har jag kollat närmare på vilka webbläsare som har bäst stöd för HTML5. Och jag hade fel igår när jag skrev att Safari skulle gå bra. Safari är inte lika uselt på den punkten som IE, men inte långt ifrån. I särklass bäst är Chrome, och det är oavsett operativsystem. Tvåa är Firefox, och en bit därefter kommer Opera. Vill du hänga med här så rekommenderar jag absolut att du installerar Chrome!

Så kom jag på att om alla inlägg jag gör om detta ska ha ett läsvärde efter att jag gjort nästa förändring, så måste jag hela tiden infoga skärmdumpar som visar förändringarna. Det betyder att man kommer att kunna se förändringarna i bilderna, även om man har en kass webbläsare, vilket i bästa fall kan motivera även den mest inbitne IE-användare att byta upp sig för att få del av allt nytt och roligt som händer på webben nu.

Innan avklädningen, med ett färdigt tema "Oenology".

När det gäller hjälpmedel och färdiga mallar har jag haft riktig beslutsångest. Självklart finns det färdiga WP-teman som tar tillvara alla de senaste finesserna i WP, och det finns även de som stöder HTML5. Men jag vill ju lära mig, och det gör jag bäst genom att skriva koden själv. Det är helt ok att använda färdiga mallar och teman, men vill man ändra något i dessa så måste man veta vad man gör. (Om man ser på frågorna på olika hjälpforum, så är det just där det blir galet. Man hittar ett snyggt tema, laddar hem det och vill sedan ändra något, men har inte på långa vägar de grundkunskaper som behövs för att greja med koden.) Det finns också en del helt avskalade startteman, som bara hämtar in en drös med WP-grejer, men helt och hållet (ibland nästan helt) saknar formattering, dvs css-regler. Teman som alltså fungerar som mall för att göra ett eget tema. Här finns t ex fem olika att välja på, det allra ”renaste” där är Starkers HTML5. Men jag bestämde mig till slut att inte ens använda ett sådant, utan koda allt själv från grunden (vilket inte hindrar att jag använder t ex Starkers som referens).

Helt konsekvent i undvikandet av mallar kommer jag inte att vara ändå. Jag har de senaste två-tre åren använt mig av 960.gs, ett färdigt ”rutnät” som css-mall för att göra layouten på webbsidor. Och det kommer jag att göra nu också (om jag inte istället väljer att testa Fluidgrid den här gången), att sitta och pilla med marginaler och kolumner och få det snyggt tar bara tid. Jag tycker alltså inte att det är fel att använda färdiga mallar, men jag tycker att om man gör det gäller två saker: antingen låter man bli att peta i mallen och tar den som den är (i det här fallet finns ingen anledning att peta), eller också kan man tillräckligt om det man petar i, oavsett om det är html, php, javascript eller css för att veta vad man gör.

Jamen dåså! Då är det dags att ”klä av” bloggen. Trial & error.

PS Om du vill veta mer om nyheterna med HTML5, så finns en översiktlig beskrivning här. På svenska!

Att jobba med webb är lite stressande faktiskt. Att försöka hänga med i svängarna är inte helt lätt när utvecklingen går så rasande snabbt. De senaste sajterna jag gjort är, trots att de är nya, redan omoderna. Inte för att det kanske gör så mycket, det handlar ju inte om att de är byggda i frames och med animerade giffar som dekoration, de är inte omoderna på det viset. Men med modernare teknik hade jag kunnat göra mer, och de hade förhoppningsvis kunnat ge en bättre användarupplevelse.

Men jag har helt enkelt inte hunnit med. Medan jag har kämpat med att lära mig AJAX-tekniken skapligt, och dessutom stuckit emellan lite med att experimentera lite med Android-appar (och sånt här sker alltså mest ”vid sidan om”, på lediga stunder), har HTML5 raskt tågat in på webben. Visserligen lär det inte bli den fastslagna standarden förrän 2014, läste jag häromdagen, men används redan nu i stor utsträckning och stöds av flera av de stora webbläsarna. (Inte helt oväntat ligger t ex IE en hel del efter t ex Chrome, FF och Safari.)

Nu har jag de senaste dagarna läst på en del om HTML5, och känner att jag måste testa och experimentera för att lära mig. Normalt sett brukar jag göra sådant för mig själv på min egen dator, och brukar resultera i att jag sjunker in i det och försvinner för omvärlden under tiden, men igår fick jag en idé. Jag gör det här på min egen blogg istället, in public och live! Och så skriver jag om vad jag gör under tiden. Inte som en tutorial precis, eftersom jag lär mig själv under tiden, men det kanske kan hjälpa andra ändå om jag bemödar mig om att skriva på vanlig svenska utan alltför mycket fackuttryck. Det mesta jag läser för att lära mig är både på engelska och fackspråk, och är kanske obegripligt för de flesta. Förvänta er ingen nybörjarguide bara, det kommer att krävas förkunskaper både när det gäller HTML och CSS och förmodligen också lite grundläggande kännedom om WordPress.

Från och med nu kommer alltså bloggen (med ojämna mellanrum) att genomgå förändringar. Jag kommer att börja med att klä av den helt och hållet, och sedan steg för steg bygga upp ett nytt tema runt den, ett tema som förhoppningvis tar vara på alla (de flesta) möjligheterna med både det nya WP och HTML5.

Det kan bli kul (och det är för min del inte bara för nöjes skull, det är fortbildning) det här! Ett problem kan vara att jag inte har rätt sorts publik, i den mån jag över huvud taget har några läsare kvar efter mitt magra bloggande det senaste året så är kanske inte detta önskeläsningen… Men jag kan nog blogga om annat också emellanåt.