SommUn Blogi

Oma WordPress top1 plugin

SommU — Mon, 19 Apr 2010 18:40:15 +0000

Monet kirjottelevat omia listojaan parhaista plugineista mikä yleensä pohjautuu siihen että ne on itse käyttänyt tai käyttää niitä plugineja ja kyllähän niissä tietyt vakiot on mitä about kaikkien kannattais käyttää mutta mä päätin kertoa kaikille pluginista nimeltä Wp-Minify.

Mulla on itelläni mun pääsivuilla aivan järjetön määrä plugineja, osa on mukavuuksien takia ja osa on sitten aikapitkälti tosi tosi tärkeitä. Sanottakoon nyt että niitä on kaiken kaikkiaan 28 kappaletta.. ja jokanen plugin hidastaa sivuja jonkun verran.. ei siksi että ne olisi älyttömän iso kokoisia vaan sen takia että mitä enemmän selain joutuu lukemaan eri tiedostoja niin sitä kauemmin siinä kestää.. eli voi kuvitella että jos joka pluginissa on 1 .css ja 1 .js tiedosto niin siinä tulee yhteensä 56 tiedostoa mitä kävijän selaimen pitäs lueskella.. uskokaa tai älkää mutta hidastaa aivan älyttömästi.. Wp-Minify myös pakkaa sekä yhdistää sivustolta löytyvät css ja js tiedostot.. mikä tekee 2 tiedostoa 1 .css ja 1 .js tiedosto eli latausaika nopeutuu Huomattavasti.. tietysti jos plugineja alkaa olla tosi paljon niin kyllähän se tiedostokoko kasvaa kanssa mutta niitä saa olla aika monta ennenkuin alkaa kriittisesti vaivaamaan.

Wp-Minify:lla voit myös laittaa haluamasi tiedostot listalle jossa niitä ei yhdistetä ( jotkut pluginit esim lightbox tyyliset pluginit ei tykkää siitä joten niitä ei voi paljon yhdistellä..)

Muistitikku 3D opas. Rhinoceros 4.

SommU — Sat, 17 Apr 2010 07:57:11 +0000

Videossa näytetään ja kerrotaan _suhteellisen_ tarkasti miten tehdään aika perus muistitikku Rhinoceros 4:lla ja rendataan Hypershotilla.

Oppaan kesto 40min.

Koska video on ladattavassa muodossa niin sanottakoon vielä että videon eteenpäin levitys on sallittua kunhan greditit tulee oikeaan suuntaan.

Video on pakattu .zip muotoon. – Tiedosto koko 38mt.

Html / Css. Normaali menu buttoni mouse over efektillä.

SommU — Thu, 04 Mar 2010 17:53:25 +0000

Tässä artikkelissa näytetään siis miten tehdään menu buttoni mouse over efektillä 1 kuvan kanssa.

Lähtökohta on siis se että pitää olla yksi kuva. Tässä tapauksessa käytän 3 eri tyyliä buttonissa eli minulla on siis 3 buttonin kuvaa allekkain samassa kuvassa. Ensimmäinen button kuva on se mikä näkyy linkin alla normaalisti. Toinen button kuva on se mikä näkyy kun hiiren osoittimen vie buttonin päälle. Kolmas button kuva on se mikä näkyy auki olevan sivun kohdalla
Esimerkki buttonista toiminnassa »

Linkki Photoshop oppaaseen jossa tehdään kyseinen buttoni »

Jos et näe tarvetta ladata tiedostoja niin voit tarkastella html sekä css koodeja alla olevista linkeistä. Kommentoidut kohdat ovat enemmän tai vähemmän tärkeitä kohtia koodissa.

Html koodi





		Etusivu

		


			
			Etusivu
			Takasivu

Css koodi

html, body {
	color: #ffffff;
	background: #3c3c3c;
	margin: 50px;
}

#button {
	background: url('button.png') no-repeat top left; /* Normaali buttonin taustakuva.*/
	width: 168px;	/* Buttonin leveys. */
	height: 43px; /* Buttonin korkeus. Huom! yksittäisen buttonin koko eikä koko kuvan koko.*/
	vertical-align: middle; /* Pitää tekstin keskellä pystysuunnassa. */
	text-align: center; /* Pitää tekstin keskellä sivusuunnassa. */
	text-decoration: none; /* Poistaa normaalisti vakiona olevan alleviivauksen. */
	display: table-cell; /* Pitää taustakuvan näkyvissä oikein. */
	text-shadow:  #000000 1px 1px 3px;
	font-family: arial;
	font-size: 14px;
	color: #ffffff;
}

#button:hover {
	background: url('button.png') no-repeat 0px -43px;  /* Buttonin hover kuva eli kuva joka näytetään silloin kun hiiren osoitin on buttonin päällä. Huom! -43px on buttonin korkeus..  */
}

#button.current {
	background: url('button.png') no-repeat bottom left; /* Buttonin current kuva eli kuva joka näkyy auki olevan sivun kohdalla. Huom! kato html tiedosto tarkempiin tietoihin tästä. */
}

Koodin toimivuus on testattu näiden selaimien uusimmilla versioilla:
FireFox, internet Explorer, Chrome, Opera ja Safari.

Html ja css esimerkki tiedostot pakattuna .zip muotoon.

Html / Css. Footer kiinni selaimen alareunaan

SommU — Mon, 22 Feb 2010 10:12:11 +0000

Artikkelin aiheena on siis footerin kiinni saaminen selaimen alareunaan.

Miten footer käyttäytyy normaalisti. Eli ilman sen suurempia kikkailuja footer pysyttelee visusti content alueen alapuolella ja jos nyt sattuu käymään niin että sisältöä on niin paljon että se ylittää selaimen ikkunan koon niin sillon tottakai footer menee selaimen alareunaan (olettaen että footerissa ei ole esim margin-bottom tai jotain muuta..)

Miten todennäköisesti haluat footerin käyttäytyvän. Tämä on todennäköisesti se miten haluat footerin näkyvän ja se miten tämän voi saavuttaa näytetään seuraavassa kohdassa.

Css määritteet joilla footerin saa aisoihin. Seuraavassa kuvassa näytetään vain ja ainoastaan ne css määritteet jotka vaikuttavat footerin alas saamisessa.

Jos et näe tarvetta ladata tiedostoja niin voit tarkastella html sekä css koodeja alla olevista linkeistä.

Html koodi





		Title

		





		
			Header
		

		
			
Esimerkki teksti.
			
		



 


		Footer

Css koodi

html, body {
	height: 100%; /* Pitää footerin alhaalla */
	background: #3c3c3c;
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-family: georgia, times new roman;
}

body, p {
	margin: 0; /* Voi esiintyä pientä scrollausta ilman näitä.. */
	padding: 0; /* ...ei välttämättä kaikissa selaimissa */
}

#wrap {
 	min-height: 100%; /* Pitää footerin alhaalla */
	overflow: auto; /* Pitää "content" alueen marginin aisoissa kaikissa selaimissa jotka eivät ole firefox. */
}

#header {
	background: #222222 ;
	height: 109px;
}

#header p {

}

#content {
	margin-bottom: 58px; /* Pitää huolen että content alue ei hyppää footerin niskaan. Huom! Tämän pitää olla _vähintään_ footerin korkuinen. Voi siis olla halutessa suurempikin.. */
}

#content p {
	font-size: 13px;
	padding: 4px 0 4px 0;
}

#footer {
	background: #222222 ;
	height: 58px;
	margin: -58px auto 0 auto; /* Poistaa extra scrollia. Huom! Miinuksen suuruus pitää olla footerin korkuinen. */
}

#footer p {
}

Koodin toimivuus on testattu näiden selaimien uusimmilla versioilla: FireFox, internet Explorer, Chrome, Opera ja Safari.

Html ja css esimerkki tiedostot pakattuna .zip muotoon.