Blog - Výpis kategorie Webdesign

jQuery pluginy, které musíte znát #1

Pro ty z vás, kteří nevědí, co to jQuery je, si stručně povíme, o co se jedná. JQuery je javascriptový framework, který vám usnadní práci s javascriptem při vývoji webových stránek. Je to knihovna, která se nalinkuje do hlavičky vašeho webu a umožní vám zlepšit interaktivitu či pomůže vytvořit takové prvky a efekty, které by jste museli jinak zdlouhavě programovat a ladit.

JQuery není jediný framework svého druhu, u mě se však stal nejoblíbenějším a při vývoji webu bych si bez něj práci nedokázal představit. V následujících několika článcích si ukážeme několik zajímavých jQuery pluginů, které by jste jako tvůrce webu neměli přehlédnout.

Při brouzdání internetem nacházím spoustu zajímavých řešení, které originálním a taky krativním způsobem přistupují k problémům, které se na webu objevují. Při stavbě webu se dá narazit třeba na problém s nedostačujícím místem pro obsah. Výsledek: použijí se například tzv. taby a tím na jednom místě může být umístěno několikanásobně více obsahu. Pluginy jQuery nemusí řešit jen problémy, ale jejich další funkcí je výrazné zpestření webové prezentace či aplikace a dodaní větší interakce s uživatele.

1. jQuery plugin pro Twitter

V dnešní době sociálních sítí nemůžeme začít jinak než Twitterem. Pomocí tohoto pluginu velice jednoduše vypíšete několik posledních tweetů z této oblíbené služby přímo na váš web či blog. Jak nasazení tak i konfigurace je velice jednochá.

Napojení pluginu

<link rel="stylesheet" href="jquery.twitter.css" type="text/css" />  <script src="jquery.twitter.js" type="text/javascript"></script>  

HTML

<div id="twitter"></div>

Nastavení

$(document).ready(function() {
  	$("#twitter").getTwitter({
  		userName: "jquery",
  		numTweets: 5,
  		loaderText: "Loading tweets...",
  		slideIn: true,
  		showHeading: true,
  		headingText: "Latest Tweets",
  		showProfileLink: true
  	});
  });  

2. Table sorter - seřazení dat v tabulce

Pokud programujete nějakou aplikaci, jistě se vám bude hodit následující plugin, který z hlavičky tabulky udělá interaktivní prvek, pomocí něhož můžete snadno data v tabulce seřazovat podle různých krotérií. Tímto si danou aplikaci posunete zase o kousek blíže k desktopové aplikaci, což se dneska označuje pojmem RIA (Rich Internet Application). Více o RIA v některém z dalších článků, nyní se pojďme podívat na zmiňovaný table sorter:

Máme tabulku:

<table id="myTable"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 

Do head vložíme

<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

Inicializace a nastavení

// automatický sorter na všechny sloupce
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

// pouze první dva sloupce 
$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 
    

3. Font sizer plugin - zvětšování textu

Zvětšování textu se dá provádět přímo v prohlížeči, ale většinou se jedná o funkci nežádoucí, protože se zvětší i text, který zvětšovat nechcete. Proto je daleko výhodnější tuto funkci zakomponovat přímo do webové stránky. Navíc je to velice snadné, stačí vyžít tohoto pluginu.

Do head vložíme

<script language="javascript" src="js/fontsizer.jquery.js"></script>

HTML

Na místo, kde chceme ovládání velikosti písma, vložíme následující HTML:

<div class="fontResizer">  <a href="#" class="smallFont">A</a>  <a href="#" class="medFont">A</a>  <a href="#" class="largeFont">A</a>  </div>

Nastavení a inicializace

<script language="javascript">  $(document).ready(function() {    fontResizer('10px','11px','12px');  });  </script>

CSS

.fontResizer {
    display: block;
    position: absolute;
    top: 0; left: 0;
  }
  .fontResizer a {
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    text-align: center;
    border: 1px solid #ccc;
    line-height: 15px;
    color: #666;
    text-decoration: none;
  }
  .fontResizer a:hover {
 color: #000; text-decoration: none;
 }    


.smallFont {
 font-size: 9px;
 }
  .medFont {
 font-size: 13px;
 }
  .largeFont {
 font-size: 15px; 
}
  .curFont {
 background: #EEEEF7;
 }

Příště si přiblížíme jQuery UI a napíšeme si v něm malou drag & drop aplikaci.

Jak se propagovat na internetu?

Každá firma bez výjimky potřebuje své webové stránky. Ať už se jedná o firmu malou, velkou či střední, právě založenou nebo již několik let stabilně fungující, neobejde se bez své prezentace na internetu formou webových stránek.

Jedná se bezesporu o jednu z nejdůležitějších forem prezentace firmy či jednotlivce. A právě proto, že je tak důležitá, je proto nutné vybrat si pro tuto práci kvalitního partnera, protože pouze kvalitní webdesignerská a webdeveloperská firma Vám dokáže nabídnout řešení Vaši firemní prezentace či webové aplikace přesně podle vašich představ.

Co ovlivňuje návštěvníky stránek nejvíce?

Grafické zpracování

Znáte to jistě sami, přijdete na stránky, kde to vypadá jako po výbuchu. Přišli jste hledat informace o nějaké službě či produktu, ale nemáte chuť a ani čas na studování nepřehledných kusů textu a probírat se nešikovně vytvořenou navigací. Výsledek: Jdete jinam.

Obsah

Jdete na další stránky, kde je nádherně řešená navigace, grafika a vše působí velice lahodným dojmem. Během pár sekund najdete přesně produkt či službu, kterou jste hledali, ale hle: informace jsou strohé, obecné a nic neříkající. I toto ve vás nebudí pocit důvěry a proto jdete opět jinam.

Nebudu vás napínat, do třetice všeho dobrého. Je naprosto logické a jasné, že nejprve na návštěvníka vašich stránek zapůsobí vzhled, grafika a přehlednost. Vzhled jako první zapříčiní to, jestli u Vás zákazník či návštěvník zůstane nebo odejde jinam.

Obsah stránek ovlivňuje návštěvníka až na druhém místě, ale i zde je nutná přehlednost a komplexnost informací. Tyto informace jsou již na Vás, téměř každá firma Vám grafický návrh nasadí na redakční systém, díky kterému můžete pohodlně měnit obsah sami, dbejte však na to, aby informace nebyly zdlouhavé, ale aby byly komplexní a přehledné. Co to je redakční systém?

Kde toho tedy dosáhnout?

Najít si na vytvoření webových stránek či webové aplikace firmu dnes není složité. Horší je to už s hledáním kvalitní firmy, která Vám vytvoří vše podle moderních trendů na základě analýz chování uživatelů na internetu a to vše navíc za cenu, která nevyždímá vaši peněženku či účet.

Tímto partnerem může být například Meebio Webdesign. Na stránkách www.meebio.cz si můžete prohlédnout naše reference či další služby které nabízíme.

Budeme velice rádi, pokud navážeme spolupráci a budeme mít možnost pomoci Vám při budování úspěchu Vás či Vaší firmy.

Grafické návrhy webu na prodej ! (aktualizováno)

Našel jsem na svém disku několik grafických návrhů, které si bohužel nenašly svou cestu ke klientovi. A tak mě napadlo: proč by tyto grafické návrhy měly zhynout v propadlišti internetových dějin, když si cestu ke svým novým majitelům mohou najít jinou cestou, než je zadaná zakázka. Proto si prosím několik následujících grafických návrhů prohlédněte. Jsou milé, dychtí po hřejivém objetí xhtml a css, nepohrdnou ani trochou Javascriptu. Jsou vhodní jak do rodiny (blog) tak i do kanceláře (firemní / prezentační weby).

Konec srandy :D. Následujících několik grafických návrhů nabízím k prodeji. Po prodeji získá kupující kompletní zdrojové soubory a podklady spolu s výhradním právem tento grafický návrh využít jak pro osobní tak i komerční účely.

Cena grafických návrhů není nijak stanovena, proto vesele smlouvejme :) A nyní slíbené grafické návrhy spolu s jejím stručným popisem:

1. návrh

Následující grafický návrh byl vytvořen jako základní šablona mého redakčního systému, ale protože se vývoj redakčního systému posunul zcela jiným směrem, nabízím tuto šablonu k prodeji. Je vhodná pro blog nebo po drobných úpravách hlavního contentu pro firemní web.

2. návrh

Jak již fotka, nadpis a úryvky článků napovídají, další grafický návrh byl tvořen pro mediálně známého blogera, Patrika Vogla. Patrik se rozhodl pro jinou variantu, proto je tento grafický návrh také k dispozici.

3. návrh

Následující dva grafické návrhy jsou již staršího data. Oba jsou vhodné k nasazení na blog či k jiným účelům dle potřeb kupujícího.

4. návrh

V případě potřeb jsem schopen po provedené transakci grafický návrh libovolně upravit dle vašich potřeb či nabídnout další spolupráci jako je třeba nakodování grafického návrhu atd ...

Pokud budete mít zájem o jakýkoliv grafický návrh, napište zde do komentářů, na e-mail či MSN.

Další článek:
10 pluginů pro jQuery, které by jste měli znát

Vektory a bitmapy – reakce na nedávný článek Filova Blogu

Filův Blog v mé RSS čtečce již dlouhou dobu zaujímá první příčky. jeho články mi vždy byly přínosem a pochytil jsem od něj nejednu radu ohledně webdesignu. Dnes ovšem Filův Blog šlápl hodně vedle a rozpoutal diskusi, ve které zatím není ani jeden souhlasný názor s jeho článkem. Rozhodl jsem se prostřednictvím tohoto článku vyjádřit daleko hlubší nesouhlas

Zmiňovaný článek, který mě tak trochu po ránu vyvedl z míry, si můžete přečíst zde. Zkráceně si zrekapitulujeme o čem v daném článku jde. Autor v článku vyzdvihává nutnost vytvářet grafické návrhy webových stránek jen jako bitmapu, nejlépe ve Photoshopu a do vektorů se pouštět, co možná nejméně, či lépe vůbec.

Je to názorná ukázka toho, že i kapacita jakou je Jan Řezáč, autor tohoto blogu, se může mýlit. A když říkám mýlit, tak se hodně krotím. Upřímně nedokážu pochopit webdesignéry, kteří tvoří grafický návrh webu v bitmapovém editoru. Takoví lidé žijí věčně ve strachu, že jim klient vrátí grafický návrh s tím, že chce upravit více prvků než je zdrávo, protože potom je opravdu pekelně složité v bitmapě tyhle úpravy provézt. Jsou to prostě masochisti, kteří dělají jednoduchou věc tak složitě, jak jen to jde.

S grafikou jsem začínal před několika lety a tenkrát jsem dělal grafické návrhy v Corelu. Uznávám, že tento program je na webovou grafiku stejně tak vhodný jako je Photoshop, ale na druhou stranu pro mě nikdy nebyl problém zmenšit zaoblení prvků nebo totálně přeházet layout. Problém ale u Corelu nastal, když jsem začal grafiku kódovat. Pixel sem, pixel tam, nebyl vůbec žádný problém kódovat web klidně dva dny, protože Corel je na tom s přesností podobně jako místní taxikáři. Přešel jsem tedy na produkty Adobe a to konkrétně Adobe Fireworks CS3.

Adobe Fireworks CS3 je vektorový grafický editor, který grafiku zobrazuje v pixelech 1:1, jaký bude výsledek na webu. Photoshop byl, je a vždycky bude pouze bitmapový editor, vhodný pouze na přípravu grafických podkladů pro grafiku nebo úpravu fotek. Kreslit v něm kompletní design webu je do nebe volající pitomost a bohužel nejvíce rozšířený omyl, který si přebírají začínající webdesignéři.

Srovnání Photoshop a Fireworks pro použití na webovou grafiku.

Budu srovnávat objektivním způsobem Photoshop a Fireworks, oba ve verzi CS3, aby to bylo spravedlivé (spravedlivé ani ne, protože Photoshop do verze CS3 prošel daleko větším vývojem).

	Photoshop CS3	Fireworks CS3
Intuitivní ovládání klávesové zkratky, GUI, nastavení
Jednoduchost úprav jak veliké úpravy a jak snodno mi je editor dovolí udělat
Výkon
Možnosti

Znak ok znamená výhodu pro daný program, ikona x pravý opak.

Z tabulky je zřejmé, že Photoshop není pro kompletní návrh webové grafiky vhodný. Avšak osobně si v něm připravím textury pomocí brushů, které má Photoshop propracovanější a poté se přesouvám do Fireworks, kde pokračuji až do samotného konce cesty grafického návrhu, tedy do jeho nakódování.

Přeberte si to jak chcete, kreslete si v čem chcete, článkem jsem chtěl jen zbořit mýtus, který se kolem webové grafiky traduje. Budu se těšit na komentáře jak souhlasné, tak i nesouhlasné.

Odstranění tečkovaného okraje u vybraného odkazu (CSS)

Tato "funkce" se nachází v téměř všech moderních prohlížečích a spočívá v tom, že prohlížeč kolem odkazu, na který se kliklo, nebo na který jste se dostali stiskem klávesy TAB, udělá tečkovaný border. Pro lepší představu přikládám ukázku, jak nehezky to vypadá v reálu.

Mnohdy se ale stává, že vytvoříme tlačítko, které má pouze JavaScriptovou událost a v tu chvíli se nám neprovede refresh stránky a taky pro tuto akci je graficky nepěkné, když nám již zmiňovaný tečkovaný border kolem odkazu zůstane. Osobně pro každý projekt/web/aplikaci globálně zakazuju tuto vlastnost následujícím zapisem v CSS.

Vy ji ale samozřejmě můžete použít v rámci dědičnosti nebo jen pro určitou třídu či identifikátor, jak jste zvyklí.