Rubrika: Tvorba webu

3 sloupcový layout pomocí CSS

Zajímavý článek jak lze pomocí CSS řešit layouty – základní rozvržení webu.

http://zdrojak.root.cz/clanky/soucasnost-a-budoucnost-layoutu-css-tabulky/

Zajímavá metoda Faux absolute position kde lze docílit stejně vysoké sloupce.

CSS:

<style>
.obal {
	position: relative;
	width: 80%;
	margin: 0 auto;
	overflow: hidden
}
.sloupec1, .sloupec2, .sloupec3 {
	float: left;
	left: 100%;
	position: relative;
	height: 100px;
	overflow: hidden
}
.sloupec3 {
	width: 20%;
	margin-left: -20%;
	background: blue
}
.sloupec1 {
	width: 20%;
	margin-left: -100%;
	background: green
}
.sloupec2 {
	width: 60%;
	margin-left: -80%;
	background: yellow
}
</style>

HTML:

<div class="obal">
	<div class="sloupec3">
		Třetí sloupec na obrazovce, ale první v kódu
	</div>
	<div class="sloupec1">
		První sloupec na obrazovce, ale druhý v kódu
	</div>
	<div class="sloupec2">
		Druhý sloupec na obrazovce, ale třetí v kódu
	</div>
</div>

Jak to celé funguje je on-line ukázka zde .




	


	





	

		
		
Kalendář ve formuláři, ověřovací pole, dynamické tabulky
	


	
	
	

		
Zajímavá knihovna Ext JS ulehčující nasazení interaktivních prvků pro práci s formuláři, tabulkami, atd. Ideální pro nasazení v intranetových aplikacích kde se využije hned několik jeho fičur naráz.


extjs-overeni-pole


Ověření vstupního pole ve formuláři.


extjs-kalendar


Vazba kalendáře na předcházející pole s datem.


extjs-tabulka


Tabulka s možností filtrace a třídění.


Knihovna Ext JS (či framework) vypadá zatím velmi slibně, uvidíme co vypluje při nasazení za problémy.


Článek o Ext JS na zdrojak.root.cz

	


	







	

		
		
3D obrázky z fotek – Photosynth
	


	
	
	

		
Photosynth.net je zajímavá služba umožňující z fotek poskládat interaktivní 3D model focené scány. Stačí nasypat fotky a vše se samo spočítá a vystaví. Popis služby je popsán třeba na zive.cz takže zde nebudu popisovat jak to funguje.


photosynth


Mě zatím děsí potřeba mít nainstalovaný speciální software od Microsoftu. Jako by neexistoval Flash či Java. Takže většinu lidí tímto na svých stránkách neohromíte, spíše vyděsíte požadavkem na nějakou instalaci dalšího pluginu. To je asi největší problém. Škoda že s tím nepřišlo Adobe a nevyužilo pro to tak rozšířený Flash. Asi by to byl daleko větší trhák. Hned bych to lupnul na své webíky.


To že to ještě ne uplně rozpozná všechny body spojení snímků jsou jen dětské nemoci, ale i tak je to již poměrně použitelné. Nemožnost dodatečné editace a okamžité zveřejnění je u mě ale mínus.

	


	







	

		
		
Testování webových stránek v různých prohlížečích
	


	
	
	

		
Jak jednoduše zjistit jak vypadají Vaše webové stránky v různých prohlížečích aniž by jste museli tyto prohlížeče instalovat.


browsers-logos


Je zde on-line služba browsershots.org


Zadáte URL adresu webu a počkáte na náhledy. Prohlížečů je opravdu velký výběr


Linux Dillo 0.8 Epiphany 2.18 Epiphany 2.22 Firefox 2.0 Firefox 3.0

Flock 2.0 Galeon 2.0 Iceape 1.0 Iceape 1.1 Iceweasel 2.0 Iceweasel

3.0 Kazehakase 0.4 Kazehakase 0.5 Konqueror 3.5 Navigator 9.0 Opera

10.0 Opera 9.27 Opera 9.50 Opera 9.62 Opera 9.63 SeaMonkey 1.1

SeaMonkey 2.0 Shiretoko 3.1

Windows Avant 11.7 Chrome 0.2 Chrome

0.3 Chrome 0.4 Chrome 1.0 Firefox 1.0 Firefox 1.5 Firefox 2.0

Firefox 3.0 Firefox 3.1 Flock 1.0 Flock 1.1 Flock 1.2 Flock 2.0

K-Meleon 1.1 K-Meleon 1.5 Minefield 3.1 Minefield 3.2 MSIE 4.0 MSIE

5.0 MSIE 5.5 MSIE 6.0 MSIE 7.0 MSIE 8.0 Navigator 8.1 Navigator 9.0

Opera 10.0 Opera 7.0 Opera 7.11 Opera 7.54 Opera 8.0 Opera 8.53

Opera 8.54 Opera 9.25 Opera 9.26 Opera 9.27 Opera 9.50 Opera 9.51

Opera 9.52 Opera 9.60 Opera 9.61 Opera 9.62 Opera 9.63 Safari 3.0

Safari 3.1 Safari 3.2 SeaMonkey 1.1 SeaMonkey 2.0 Shiretoko 3.1

Mac OS Camino 1.6 Firefox 3.0 Safari 3.2


BSD Dillo 0.8 ELinks 0.11 Firefox 2.0 Firefox 3.0 Kazehakase 0.5 Opera 9.51 W3M 0.5

	


	







	

		
		
Inkscape – vektorový grafický editor
	


	
	
	

		
Inkscape je výborný nástroj na tvorbu a úpravu vektorové grafiky. Tento editor je svou kvalitou srovnatelný se svými konkurenty (Adobe Illustrator, Freehand, CorelDraw). Veškerá tvorba probíhá za použití W3C standardu škálovatelné vektorové grafiky (SVG). Vektorová grafika, oproti bitmapové, není dána barevnými body, ale čárami a křivkami, takže je možné libovolně měnit velikost výsledku, aniž by došlo ke zhoršení kvality.


Program podporuje tyto SVG prvky: text, tvary, cesty, značky, klonování, změna velikosti, průhlednost, barevné přechody, vzorky a seskupování. Inkscape také podporuje Creative Commons meta-data, editování uzlů, vrstvy, komplexní operace s křivkami, trasování bitmap, text na křivce, přímé editování XML a mnohem více.


Pokud hledáte výborný vektorový editor a ještě k tomu zadarmo, tak je Inkscape jasná volba.


Recenzi programu si můžete přečíst v článku Vektorový editor zdarma


www.inkscape.org

	


	





	

		
		
Webová galerie Lytebox
	


	
	
	

		
Lytebox je v podstatě upravený a velmi zeštíhlený Lightbox. Je nutno podotknout zeštíhlený datově ale ne na úkor funkčnosti! Jedná se o script spouštějící efektní slideshow obrázků. Původní projekt Lightbox a podobní využívají nějaký framework a to přináší mnoho balastu a tím pádem zbytečnou datovou náročnost webové stránky. O potencionálních chybách nemluvě. O funkčnosti projektu svědčí i použití v efektní galerii PicLens


Projekt vypadá slibně, ale nevím do jaké míry se bude dál vyvíjet, neboť poslední datum up-to-date je 2.10.2007. Že by vše už bylo vychytané? Bohužel je nadále už nevyvíjený, ale vždy se někdo objeví kdo případné problémy opraví. Třeba problém Lyteboxu s Internet Explorerem 8.