<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>css-3Blog &#187; my web</title>
	<atom:link href="http://www.css-3.hu/tag/my-web/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.css-3.hu</link>
	<description>Ez a blog elsősorban a CSS 3-ról szól, amely a CSS stílusleíró nyelv legújabb verziója.</description>
	<lastBuildDate>Wed, 16 Mar 2011 17:25:11 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Megújult a my-web.hu</title>
		<link>http://www.css-3.hu/2009/10/megujult-a-my-web-hu/</link>
		<comments>http://www.css-3.hu/2009/10/megujult-a-my-web-hu/#comments</comments>
		<pubDate>Mon, 12 Oct 2009 20:27:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Nincs kategorizálva]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[my web]]></category>
		<category><![CDATA[site]]></category>

		<guid isPermaLink="false">http://www.css-3.hu/?p=118</guid>
		<description><![CDATA[Kanyarodjunk el egy kicsit a CSS 3-tól, mert szeretném megmutatni cégem új honlapját. Nem teljes újratervezésre csak egy kis ráncfelvarrásra törekedtem, mert volt néhány pont, amelyen javítani szerettem volna.
Elsőként a fejlécet és a főmenüt terveztem át. Az egész site-nak szerettem volna egy bordós alapszínt adni, ennek köszönhető a bordó menü és a vele megegyező színű [...]]]></description>
			<content:encoded><![CDATA[<p>Kanyarodjunk el egy kicsit a CSS 3-tól, mert szeretném megmutatni cégem új <a href="http://www.my-web.hu/" target="_blank">honlapját</a>. Nem teljes újratervezésre csak egy kis ráncfelvarrásra törekedtem, mert volt néhány pont, amelyen javítani szerettem volna.<span id="more-118"></span></p>
<p>Elsőként a fejlécet és a főmenüt terveztem át. Az egész site-nak szerettem volna egy bordós alapszínt adni, ennek köszönhető a bordó menü és a vele megegyező színű gomb. Ezen kívül kisebbre vettem a fejlécben szereplő képet, hogy helyet adjak a legfontosabb tartalomnak. Mivel a látogatók jó része nemhogy a címlapról nem megy tovább, de még le sem hajlandó görgetni az oldal végéig &#8211; ez nem csak erre a honlapra, hanem mindegyikre igaz -, ezért fontosnak tartottam, hogy már a böngészőben görgetés nélkül látható tartalom is lekösse a látogató figyelmét.</p>
<p>A screenshotok túl kicsik, ahhoz, hogy minden részlet látható legyen, de illusztrációnak szerintem megfelel. Ilyen volt:</p>
<p><img class="alignnone size-full wp-image-122" title="mw-old1" src="http://www.css-3.hu/wp-content/uploads/2009/10/mw-old1.jpg" alt="mw-old1" width="550" height="275" /></p>
<p>És ilyen lett:</p>
<p><img class="alignnone size-full wp-image-123" title="mw-new1" src="http://www.css-3.hu/wp-content/uploads/2009/10/mw-new1.jpg" alt="mw-new1" width="550" height="275" /></p>
<p>Az átalakítás következő célpontja a lábléc lett, ami eddig a weboldal leganakronisztikusabban kinéző része volt. Egy egyszerűbb, lábléc került a helyére, amelyen keresztül elérhetőek a fontosabb menüpontok, és egy pár sorban az is le van írva, hogy milyen tartalom található az adott menüpont alatt.</p>
<p>Ilyen volt:</p>
<p><img class="alignnone size-full wp-image-125" title="mw-old2" src="http://www.css-3.hu/wp-content/uploads/2009/10/mw-old2.jpg" alt="mw-old2" width="550" height="275" /></p>
<p>És ilyen lett:</p>
<p><img class="alignnone size-full wp-image-126" title="mw-new2" src="http://www.css-3.hu/wp-content/uploads/2009/10/mw-new2.jpg" alt="mw-new2" width="550" height="275" /></p>
<p>A ráncfelvarrás következő áldozata a &#8220;Kapcsolat&#8221; menüpont lett, amely az átalakulásban sokat köszönhet a <a href="http://www.emblematiq.com/lab/niceforms/" target="_blank">Niceforms</a> scriptnek. Ezen kívül összedobtam hozzá egy kis JavaScript kódot, ami még a form elküldése előtt ellenőrzi, hogy az e-mail cím megfelel-e a <a href="http://hu.wikipedia.org/wiki/Reguláris_kifejezés" target="_blank">RegEx</a> feltételeknek. Semmi extra, de az előző verzióban nem volt.</p>
<p>Ilyen volt:</p>
<p><img class="alignnone size-full wp-image-127" title="mw-old3" src="http://www.css-3.hu/wp-content/uploads/2009/10/mw-old3.jpg" alt="mw-old3" width="550" height="275" /></p>
<p>Ilyen lett:</p>
<p><img class="alignnone size-full wp-image-128" title="mw-new3" src="http://www.css-3.hu/wp-content/uploads/2009/10/mw-new3.jpg" alt="mw-new3" width="550" height="275" /></p>
<p>Ez után arra próbáltam megoldást keresni, hogy hogyan tudnám az oldalon szereplő egyes &#8211; ritkábban használt &#8211; fogalmakat elmagyarázni a kevésbé hozzáértő olvasóknak, a nélkül, hogy olyanokat untatnék, akik nem szorulnak rá a magyarázatra. Persze nem a spanyolviaszt találtam fel, csak egy más weboldalakon &#8211; általában reklám célra &#8211; használt technikát valósítottam meg, CSS és <a href="http://www.jquery.com/" target="_blank">jQuery</a> segítségével: ha az olvasó a szaggatott vonallal aláhúzott szóra viszi az egeret, akkor egy külön tooltip-en (hogy mondják ezt magyarul?) megjelenik egy kis magyarázat. Akárcsak az alábbi képen.</p>
<p><img class="alignnone size-full wp-image-129" title="mw-new4" src="http://www.css-3.hu/wp-content/uploads/2009/10/mw-new4.jpg" alt="mw-new4" width="550" height="275" /></p>
<p>Végezetül ami sokak számára nem látható, de mégis fontos változtatás, hogy a sIFR-ről áttértem a <a href="http://cufon.shoqolate.com/generate/" target="_blank">Cufón</a>-ra. Ez ugyanúgy alkalmas arra, hogy a felhasználó gépén nem látható betűtípust tegyen használhatóvá a weboldalon, viszont azzal a nem kis előnnyel bír, hogy nem Flash alapú, így azok is <em>Myriad Pro Light</em>-ot láthatnak <em>Trebuchet MS</em> helyett, akik valamilyen flash-t blokkoló alkalmazást futtatnak.</p>
<p>Hát nagyjából eddig terjednek a design szempontból fontos újítások, a többi inkább marketing, amivel ezen a blogon nem untatnálak benneteket. Nézzétek meg az <a href="http://www.my-web.hu/" target="_blank">oldalt</a> élőben is, és várom az építő kritikákat, vagy netalántán dicséreteket <img src='http://www.css-3.hu/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.css-3.hu/2009/10/megujult-a-my-web-hu/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

