Blog - Výpis aktuálních článků

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.

Ty nejlepší tapety pro váš desktop

Osobně jsem dost vybíravý člověk, co se týče tapet na pracovní ploše. Vše mi musí ladit a až pak teprve mohu na pc pracovat. Spousta wallpaperů projde mýma rukama, než si vyberu tu pravou tapetu, která na pár měsíců bude obývat mou pracovní plochu. Tuto tapetu následně vložím na pracovní plochu mých dvou pc a Iphonu, aby mě nerušily rozdílné tapety.

Našel jsem web, kde si každá tapeta bez výjimky zaslouží své místo na ploše. Tímto webem je beenox.cz. Mnoho z Vás jej určitě zná. Nedávno prošel web kompletní rekonstrukcí, získal mnoho nových a krásných tapet a v neposlední řadě i novou grafickou podobu. Nezbývá než pochválit tvůrce za kvalitně odvedenou práci, popřát hodně štěstí s projektem do budoucna a nyní mě omluvte, jdu si vybírat tapetu.

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

Nová fotogalerie (Slovensko 2009)

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

7.jpg

8.jpg

9.jpg

10.jpg

11.jpg

12.jpg

13.jpg

14.jpg

15.jpg

16.jpg

17.jpg

18.jpg

19.jpg

20.jpg

21.jpg

22.jpg

23.jpg

24.jpg

25.jpg

26.jpg

27.jpg

28.jpg

29.jpg

30.jpg

31.jpg

32.jpg

33.jpg

34.jpg

35.jpg

36.jpg

37.jpg

38.jpg

39.jpg

40.jpg

41.jpg

42.jpg

43.jpg

44.jpg

45.jpg

46.jpg

47.jpg

48.jpg

49.jpg

50.jpg

51.jpg

52.jpg

53.jpg

54.jpg

55.jpg

56.jpg

BOV #4 Hugh Laurie (uvnitř video)

Tento skvělý herec, hudebník, sportovec, spisovatel a komik si zde jisto jistě zaslouží svůj vlastní díl Best Of Video. Tentokrát se podíváme na zábavná videa s tímto představitelem Dr. House ve stejnojmenném seriálu a povíme si několik málo zajímavostí o této osobnosti.

Celým jménem James Hugh Calum Laurie se narodil v roce 1959 v Oxfordu, v Anglii. Vystudoval na prestižních školách obory archeologie a antropologie a jak jsem již v úvodu nakousnul, byl to mimo jiné skvělý sportovec. Toto nadání zdědil po svém otci, který v roce 1948 získal zlatou olympijskou medaili za veslování. Taky Laurie závodně vesloval, stal se juniorským mistrem Anglie a dokonce na jeho počest pojmenovali jeden z člunů.

Kvůli onemocnění musel zanechat sporotvání a začal se zajímat o herectví a stal se členem jednoho univerzitního divadelního spolku. Tam se setkal se Stephenem Fryem, s kterým později vytvořil známou komediální dvojici Fry and Laurie. Vytvořili společně mnoho zábavných scének a hudebních představení a my se nyní podíváme na některé z nich.

Mystery

Fry & Laurie - Steffi Graf

Fry & Laurie - America

All we gotta do ...