Wyctim » A kulisszák mögött

Struktúra Extrák

Ahogy már egyszer leírtam az új blog legelső posztjában, a wyctim.com jelenleg nem használ semmilyen CMS rendszert, egyszerű HTML-ben készül, pár PHP scripttel egyszerűsítve a munkát. Az egészet egy nagyon egyszerű sablonrendszerhez tudnám hasonlítani, nincs benne semmi ördöngösség.

A blog szerkezete

fonts

images

posts

styles

.htaccess
index.php

A jobb oldalon lévő dobozban megtekintheted a fájlok és a mappák szerkezetét. Egy fájlra kattinva, megnyílik egy kis ablakban az előnézete.
A KI/BE kapcsolóval egyszerre kinyithatod az összes mappát.

Nézzük meg hogy épül fel a blog alap mappaszerkezete.

fonts: a dizájn során használt betűtípus fájlok helye.
images: minden poszthoz használt kép külön almappákban. Az almappák neve megegyezik a poszt permalinkjével. Az állandó képek is itt vannak eltárolva.
posts: a posztok helye, azaz a konkrét tartalom PHP fájlokban. A PHP fájlok neve megegyezik a poszt permalinkjével. Itt laknak az alap sablonok is (header.php, footer.php).
styles: minden poszt egyedi CSS-t használ. A CSS fájlok neve megegyezik a poszt permalinkjével. Az állandó elemek stíluslapjai is itt vannak eltárolva:

wyctimbar.css: a felső menüsor alap fekete felülete.
comments.css: az alsó gombra lenyíló hozzászólások.
index.css: a főoldal egyedi stíluslapja.

.htaccess: a permalinkekhez használt redirectek.
index.php: a főoldal.

A posztok felépítése

Lássuk hát egy üres poszt forrását.



	<?php
	// Load default views
	include('views/header.php');
	include('views/footer.php');
	
	// Config post
	$post_title = "A kulisszák mögött";
	$post_permalink = "kulisszak-mogott";
	$post_id = "10";
	$post_date = "2010 január 10.";
	$disqus_url = "kulisszak-mogott/";
	$color = "orange";
	$wyctimbar = "default";
	
	// Render header
	render_header($post_title, $post_permalink, $post_id, $disqus_url, $wyctimbar);
	?>
	
	<div id="wrap">
	<div id="logo"></div>
	<div id="content">
	
	<!--Content goes here-->
	
	</div>></div>
	
	<?php
	// Render footer
	render_footer($post_title, $post_permalink, $post_id, $post_date, $color);
	?>

Adatok a blogról

Domain: http://www.wyctim.com/
Blogger: Benke Zsolt (wyctim)
Email: wyctim@me.com
RSS Feed: http://wyctim.com/feeds/wyctim/
Podcast: http://wyctim.com/feeds/vegetative/
Hoszting: http://www.hoszting.com/

A bejegyzések a WriteRoom-ban íródnak.
A kódoláshoz az Espresso nevű alkalmazást használom. A grafikai elemek az Acorn 2-ben készülnek.
Egy bejegyzés elkészítése általában 8 órát vesz igénybe az ötlettől, az íráson keresztül, a poszthoz tartozó dizájn elkészítéséig.
Az RSS feedek külön készülnek a Feeder nevű alkalmazással.
A blogon található animációkat a jQuery biztosítja.
A dizájnt teljes pompájában a Safari alatt élvezheted.

A “Load default views” részen tölti be az alap sablonokat.

header.php: a fejléc témáját állítja be és írja ki.
footer.php: a wyctimbar alsó része, a poszt metaadatai és az Analytics követőkód.

A “Config post” szekcióban állítjuk be a posztot.

$post_title: a bejegyzés címe.
$post_permalink: a bejegyzés permalinkje, ez alapján tölti be a képeket és a CSS-t is.
$post_id: a bejegyzés azonosítója.
$post_date: a bejegyzés dátuma.
$disqus_url: a hozzászólások JavaScript kódjához használt link.
$color: a hozzászólások gombjának színe (pl.: white, black, orange, wood stb.).
$wyctimbar: a fejléc típusa, ami két értéket használ, “default”, ami az alap fekete és “custom”, ami a poszt stíluslapjában kap egy kinézetet.

A “Render header” alatt fut le a fejléc. A “Content goes here” részen történik maga a poszt tartalmának szerkesztése alap HTML/CSS-ben. A “Render footer” egyértelműen a láblécet adja vissza a hozzászólások dobozával és az alsó wyctimbar-ral együtt.

Mint ahogy a leírásból is kiderült, a blog semmilyen adatbázist nem használ, ezzel egyszerűbbé téve az esetleges költözést. A kiszolgáláshoz így csak egy PHP képes szerverre van szükségem.

Struktúra Extrák

A blog dizájn erősen támaszkodik a CSS3 alapú megoldásokra (border-radius, text-shadow, animációk, gradient stb.). Az alábbi oldalon kigyűjtöm az újra felhasználható megoldásokat. (folyamatosan frissül...)

Egyszerű CSS alapú gombok

A gombok stílusa három részből épül fel.

Orange

Black

Wood

Oldie

White

Blue

Green

Példák a gombok színeire.

button: az alap lekerekítést, bordert, szöveg igazítását és a háttér gradienst (button-overlay.png) állítja be. A button-overlay.png egy egyszerű 35 pixel magas áttetsző PNG.
size: egy gomb három méretben használható, small, medium, large.
color: a kívánt háttér színét adja meg. Opcionálisan egy szín:active class-ban beállítható a lenyomott gomb háttérszíne is.

A teljes CSS



	/* Button base */
	
	.button {
	font-family: Arial, Helvetica, sans-serif;
	background: url('button-overlay.png') repeat-x;
	display: inline-block;
	padding: 4px 14px 6px;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-bottom-color: rgba(0, 0, 0, 0.35);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
	position: relative;
	cursor: pointer;
	-webkit-text-stroke: 1px rgba(255,255,255,.01);
	}
	
	/* Button sizes */
	
	.small.button {
	font-size: 11px;
	}
	
	.medium.button {
	font-size: 13px;
	}
	
	.large.button {
	font-size: 14px;
	padding: 8px 14px 9px;
	}
	
	/* Button skins */
	
	.orange.button {
	background-color: rgb(212, 85, 0);
	color: #fff;
	}
	
	.orange.button:active {
	background-color: #7e3d1f;
	}
	
	.white.button {
	background-color: rgba(255,255,255,1);
	color: #555;
	text-shadow: 0px 1px 0px #fff;
	}
	
	.white.button:active {
	background-color: #ddd;
	}
	
	.wood.button {
	background-color: #804420;
	color: #fff;
	}
	
	.wood.button:active {
	background-color: #492B10;
	}
	
	.black.button {
	background-color: #131313;
	color: #fff;
	}
	
	.black.button:active {
	background-color: #000;
	}
	
	.oldie.button {
	background-color: #825442;
	color: #fff;
	}
	
	.oldie.button:active {
	background-color: #581E0E;
	}
	
	.green.button {
	background-color: #80ff00;
	color: #222;
	text-shadow: 0px 1px 0px rgba(255,255,255, 0.5);
	}
	
	.green.button:active {
	background-color: #6cd007;
	}
	
	.blue.button {
	background-color: #336699;
	color: #fff;
	}
	
	.blue.button:active {
	background-color: #344b68;
	}

Példa letöltése

RSS feliratkozás

a kulisszák mögött

A blog szerkezete

A posztok felépítése

Egyszerű CSS alapú gombok

Merre tovább?

Social Ghetto

Cikk Meta