Email Marketing

 

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

Články přečteno 5218 28.10.
2009
komentováno 13

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.

Stáhněte si jQuery.

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 Nameth>
			<th>First Nameth>
			<th>Emailth>
			<th>Dueth>
			<th>Web Siteth>
		tr>
	thead>
	<tbody>
		<tr>
			<td>Smithtd>
			<td>Johntd>
			<td>jsmith@gmail.comtd>
			<td>$50.00td>
			<td>http://www.jsmith.comtd>
		tr>
		<tr>
			<td>Bachtd>
			<td>Franktd>
			<td>fbach@yahoo.comtd>
			<td>$50.00td>
			<td>http://www.frank.comtd>
		tr>
		<tr>
			<td>Doetd>
			<td>Jasontd>
			<td>jdoe@hotmail.comtd>
			<td>$100.00td>
			<td>http://www.jdoe.comtd>
		tr>
		<tr>
			<td>Conwaytd>
			<td>Timtd>
			<td>tconway@earthlink.nettd>
			<td>$50.00td>
			<td>http://www.timconway.comtd>
		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">Aa>
	<a href="#" class="medFont">Aa>
	<a href="#" class="largeFont">Aa>
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.

zobrazit komentáře

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

Články přečteno 3264 28.05.
2009
komentováno 7

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.

seznam

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.

* a {
  outline: none;
}

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í.

zobrazit komentáře

Označení odkazu podle typu nebo umístění (CSS)

Články přečteno 3103 24.05.
2009
komentováno 0

Pokud se věnujete tvorbě webových stránek, určitě se vám nejednou stalo, že jste potřebovali označit odkaz, který vede na jiné umístění, než je na vašich stránkách nebo jste jen potřebovali označkovat odkaz podle typu cíle, na který odkazujete. Na toto existuje spousta JavaScriptů, spousta frameworků a v neposlední řadě spousta řešení pomocí php. My se ale dnes podíváme na jednu z jednodušších a řekl bych i jednu z nejefektivnějších variant, jak toho docílit jednoduše jen za pomocí CSS. Mnoho lidí tuto metodu nezná nebo se s ní zatím nesetkali, proto si ji dnes popíšeme.

Nutno dodat, že následující řešení není podporováno v prohlížeči IE6 (překvápko jako hrom  ), ale nejedná se zase až tak o ztěžejní funkci, která by pro tento zastaralý a dnes již méně využívaný prohlížeč (samozřejmě podle zaměření daného webu) měla být odladěna. Odladit tuto funkci i pro IE6 sice jde (třeba vlastní třídou), to by ale nebylo plně automatizované, což my nechceme.

Externí odkaz

Pokud potřebujeme označkovat externí odkaz, který míří ven z našeho webu, budeme předpokládat, že je to každý odkaz, který začína na http://. Zápis CSS bude vypadat následovně:

a[href^="http:"] {
	background: url('/images/externalLink.gif') no-repeat right top;
	padding-right: 10px;
}

Zároveň se ale dá předpokládat to, že můžeme pomocí absolutní adresy směrovat odkazy i na náš web a v tu chvíli nechceme nijak odkaz odlišovat, i když začíná na http://. Tento případ ošetříme úplně jednoduše zápisem:

a[href^="http://www.vasestranka.cz"],
a[href^="http://vasestranka.com"] {
	background-image: none !important;
	padding-right: 0;
}

Odkazy, které nechceme nijak odlišovat (napadají mě snad jen placené reklamy) a splňují výše uvedený parametr, vynulujeme jednoduše, jak jsme zvyklí:

.no_exter {
	background-image: none !important;
	padding: 0;
}

Odkazy podle typu

Další případ, kdy můžeme tohoto využít, jsou odkazy, u nichž přesně určujeme typ nebo příponu. Zápis pro odlišení odkazů na e-mailovou adresu může vypadat takto:

a[href^="mailto:"] {
	background:url('/images/email_link.png') no-repeat right top;
	padding-right: 22px;
	padding-bottom: 5px;
}

Pro .pdf, .doc nebo třeba .rss můžeme použít následujícího zápisu:

a[href$=".pdf"] {
	background:url('/images/page_pdf.png') no-repeat right top; 
	padding-right: 22px; padding-bottom: 5px;
}

a[href$=".doc"] {
	background:url('/images/page_word.png') no-repeat right top; 
	padding-right: 22px; padding-bottom: 5px;
}

a[href$=".rss"], a[href$=".rdf"] {
	background:url('/images/feed.png') no-repeat right top; 
	padding-right: 22px; padding-bottom: 5px;
}

Další využití a možnosti jistě najdete sami podle těchto předloh. Zajímalo by mě, jestli jste tuto metodu znali, jestli ji používáte nebo používáte jinou vámi osvědčenou metodu. Těším se na komentáře.

zobrazit komentáře

Filmy, které byste si neměli nechat ujít

Články přečteno 3539 17.05.
2009
komentováno 12

Dnes se podíváme na několik filmů, ke kterým se můžu vracet stále a stále, a které dle mého názoru patří mezi špičku toho, co kdy bylo natočeno. Žebříček není nijak seřazen, jedná se o absolutní top.

Čistá duše

U každého filmu mám rád, když i během závěrečných titulků sedím přikovaný v sedačce a vstřebávám dojmy, které ve mě film zanechal. U tohoto filmu to platí dvojnásob. Skvělý Russell Crowe si zde zahrál v hlavní roli geniálního matematika se schizofrenií. Na konci tohoto filmu nezůstane jedno oko suché a budete si tento film pouštět stále a stále.

Americká krása

Pokud by se mělo vyhlásit první místo v žebříčku nejrozporuplnějších filmů všech dob, tak by o první místo bojoval zrovna tento filmový počin. Patřil by tam jednoduše proto, protože na tento film nenajdete neutrální názory. Lidé ho hodnotí buď na 100% kladně nebo ho odsuzují jako absolutní odpad. Já se přikláním spíše k první skupině lidí. V hlavní roli Kevin Spacey. Tento herec hlavní postavu ztvárnil tak brilantně, že za ní sklidil spoustu ocenění. Vývoj hlavní postavy v tomto filmu, je dech beroucí a místy až absurdní, přesto je tento film dle mého názoru jeden z nejlepších, který kdy byl natočen.

Muž na měsíci

V hlavní roli skvělý Jim Carey, který je mým nejoblíbenějším hercem. V tomto filmu si Jim zahrál legendárního komika Andyho Kaufmana. Andyho humor chápe nejlépe on sám, ale vůbec mu to nevadí. Dokáže pobouřit, rozplakat i rozesmát každého. Jedná se o legendární film s brilantním koncem, ze kterého vám bude běhat mráz po zádech. Víc neprozradím.

Gran Torino

Clint Eastwood režíruje a hraje. Tento film se právem řadí mezi jeho nejlepší počiny. Tento film je tak skvělý, že se zařadil do tohoto žebříčku, i když jsem jej shlédl teprve zhruba před 14-ti dny v kině. Naprosto ohromující konec filmu, nečekaný a dojemný. Z kina jsme s přítelkyní odcházeli jako poslední.

Forrest Gump

Kdo by neznal mladého a hloupého investora do ovoce, vojáka a v neposlední řadě člověka s největším srdcem. O tomto filmu se nebudu zdlouhavě rozepisovat, jistě jej každý minimálně jednou viděl a ten , kdo neviděl, by to měl čím jak nejdříve napravit.

Muž bez tváře

Pomluvy, přetvářka a to, co zvládne tupý dav spekulujících lidí. O tom je tento film. Mel Gibson v něm hraje uzavřeného a odstrčeného učitele se zjizvenou tváří, která mu už navždy zůstane po tragické nehodě. Spřátelí se s mladým klukem, který nutně potřebuje doučovat, aby se dostal na vysněnou školu a tím utekl od své neúplné a nepřátelské rodiny. Čistá mysl mladého studenta si teprve udělá obrázek, o tom, jaký učitel ve skutečnosti je. Jak to dopadne neprozradím, podívejte se na to sami, stojí to za to.

Po čem ženy touží

A opět Mel Gibson, tentokrát ve skvělé komedii, která dokáže vždy zvednout náladu a vykouzlit úsměv na tváři diváka. Mel v tomto snímku nešťastným způsobem získá nadpřirozenou moc: slyší, co si ženy myslí a začne toho pořádně využívat.

Tak tohle byl výčet mnou oblíbených filmů a kdybych měl na druhou stranu sestavit seznam filmů, které jsou absolutně nekoukatelné, tak by to byla sestava všech českých filmů z poslední doby (cca 10 let nazpátek) bez výjimky.

A co vy, můžete mi nějaký skvělý film doporučit? Máte oblíbené jiné filmy. Sem s nimi, těším se v diskusi pod článkem.

zobrazit komentáře

Život v Googleplexu (uvnitř video)

Články přečteno 3206 17.05.
2009
komentováno 11

googleNejdříve je třeba si vysvětlit, co to Googleplex je, pro ty, co tohle slovní spojení slyší poprvé. Jedná se o hlavní sídlo společnosti Google, kterou není třeba nijak zdlouhavě popisovat. Jistě ji každý dobře zná a minimálně jednou denně využije její služby. Pro ty z vás, kteří přece jen neví, v čem kromě vyhledávače, Google slaví úspěch, je zde můj starší článek, ve kterém jsem se podrobněji zaměřil na služby Google.

Sídlo firmy Google (dále jen Googleplex) si každý představuje jako jakousi budovu s mnoha patry, kde se hemží lidé v kravatách a kde naplno pracuje mnoho řadových zaměstnanců. Realita je však úplně jinde. Googleplex spíše připomíná malé město a když říkám město, myslím město se vším všudy. Zaměstnanci jsou zde hýčkáni tak, jak snad nikde jinde. Celý komplex obsahuje několik bazénů, restaurací, fitcenter, hřišť, parků a dalších rekreačních míst. Zaměstnanci zde mají volnou pracovní dobu, volný vstup, do všech rekreačních částí a jídlo ve všech fastfoodech a restauracích zdarma.

Google si je přesně vědom potenciálu, který je ve spokojeném a odpočinutém zaměstnanci. Musím smutně dodat, že nejsem ani zaměstnancem Google a ani jsem v Googleplexu nikdy nebyl, ale na druhou stranu mám radost, že momentálně pracuji pro jednu z předních firem, zabývajících se webdesignem, která razí podobnou strategii v rekreačních činnostech a pracovních podmínkách, jako je tomu u společnosti Google.

A co vy, jak je to u vás ve firmě, kde pracujete? Máte podobně přátelsky laděné prostředí nebo máte píchačku s osmihodinovou pracovní dobou a přes to vlak nejede? Nebo jste podnikatelé? Jak to řešíte se zaměstnanci vy? Myslím si, že je zde obrovský prostor pro diskusi, na kterou se těším v komentářích.

zobrazit komentáře
Stránka 1 2 3 4 5 6 7 8

 

Email Marketing