Archiv rubriky: Webdesign

Náhled obrázku při najetí

Ukázkové použití skriptu:

<script>
/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(){ 
 /* CONFIG */

 xOffset = 110;
 yOffset = 30;

 // these 2 variable determine popup's distance from the cursor
 // you might want to adjust to get the right result

 /* END CONFIG */
 jQuery("a.preview").hover(function(e){
 this.t = this.title; 
 this.title = ""; 
 var c = (this.t != "") ? "<br/>" + this.t : "";
 jQuery(".presspreviewappend").append("<p id='presspreview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>"); 
 jQuery("#presspreview")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px")
 .fadeIn("fast"); 
 },
 function(){
 this.title = this.t; 
 jQuery("#presspreview").remove();
 }); 
 jQuery("a.preview").mousemove(function(e){
 jQuery("#presspreview")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px");
 }); 
};
jQuery(document).ready(function(){
 imagePreview();
});
</script>
<style>
 .presspreviewappend {
 position:relative;
 }
 #presspreview{
 position:fixed;
 border:1px solid #333;
 background:#bbbbbb;
 display:none;
 color:#fff;
 }
</style>
<div class="presspreviewappend"></div>
<a href="big-image.jpg" class="link-image preview"><img src="small-image.jpg" alt="" title=""></a>

jQuery Validate – remote validace

Při použití remote validace v pluginu jQuery Validate je nutné jako návratovou hodnotu mít true nebo false. Údajně stačí používat true nebo libovolnou jinou místo negativní hodnoty (například pro přenesení zprávy nebo konkrétního stavu), ale takto mi to nefungovalo. Možná se jedná jen o konkrétní (novější verzi) pluginu, protože jsem měl dojem, že dříve to fungovalo.

Přesměrování skriptů bez přípony na skutečné soubory s PHP příponou

Kdysi se používala i taková pochybná záležitost, kdy bylo možné přistupovat na PHP skript bez udání přípony. Tedy například http://web.cz/skript ve skutečnosti spustilo soubor skript.php. Není to moc bezpečná a smyslupná věc, proto je běžně zakázáná.

Narazil jsem na weby, kde to takto bylo naprogramováno, ale na jiné konfiguraci serveru byly skripty nefunkční. Pro vyřešení je možné přidat do htaccessu následující pravidla. Nejsem si jistý, zda jsou úplně správně, ale zdá se, že fungují.

RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule  ^admin/([a-zA-Z0-9_-]+)$ admin/$1.php [L,QSA]

jQuery Image Gallery Slider

Mnohokrát jsem již použil následující skript. Proto jsem se rozhodl jej trochu zobecnit a zpřístupnit. Jedná se o jednoduchý Javascript, který se postará o vytvoření takovéto fotogalerie.

náhled fotogalerie

 

Skript jsem zpřístupnil na https://github.com/TomasSkoumal/ImageGallery. Není to sice žádný sofistikovaný plugin, který by měl spoustu nastavení, ale je jednoduše upravitelný a umí opravdu jen to, co je třeba bez nějakých zbytečností. Vyžaduje pouze jQuery knihovnu.

Výběr místa pomocí Google Maps

Pomocí následujícího kódu lze umístit do formuláře Google mapu na které je možné vybírat konkrétní místo na mapě kliknutím. Souřadnice se pak ukládají do skrytých inputů a jsou dále zpracovány formulářem.

 

<script src="if_gmap.js"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script>
 $(document).ready(function() {
 def_longval = 14.458008;
 def_latval = 50.065367;
 $('#longval').val(def_longval);
 $('#latval').val(def_latval);
 if_gmap_init();
 });
 </script>
<input name="gps_longitude" type=hidden id="longval">
 <input name="gps_latitude" type=hidden id="latval">
 <div id="maparea" style="background:#ffffff">
 <div id="mapitems" style="width: 360px; height: 540px;background:#ffffff;"></div>
 </div>

Skript lze stáhnout zde: http://www.tytai.com/gmap/

Na stejné adrese jsou i další způsoby použití.

 

Sledování konkrétní akce pomocí Google Analytics

Pokud máme na webu uživatelské účty, můžeme sledovat konkrétního uživatele například tím, že si budeme ukládat nějaký identifikační údaj (například ID).

Toho docílíme následující úpravou sledovacího kódu:

<script type="text/javascript">
var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-38785848-1']);
 _gaq.push(['_setCustomVar', 1, 'Uživatel', '{!$user}', 1]);
 _gaq.push(['_trackPageview']);
(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
</script>

Pokud chceme sledovat určitou akci – například javascriptovou událost, stačí následující:

_gaq.push(['_trackPageview', url]);

V proměnné url je obsažena adresa, která bude následně zobrazena ve statistikách.

 

 

Vliv automatických aktualizací na podíl prohlížečů

Na backendu jedné aplikace mám pro sledování provozu zapnuté Google Analytics. Sice se do ní nepřihlašuje velké množství uživatelů, ale rozhodně je zajímavé sledovat, jaké technologie používají tito uživatelé. Minimálně pro to, abych věděl, na jaké prohlížeče či rozlišení se specializovat při dalším vývoji.

Při poslední kontrole používaných verzí prohlížečů mně zaujal poměr jednotlivých verzí.

statistika prohlížečů

 

Na tomto grafu je opravdu výrazně vidět to, jak velký vliv má automatická aktualizace prohlížeče. Vezměmě to postupně.

Firefox a Chrome

Proběhlo vydání nové verze, takže jsou souběžně uvedeny dvě. Ale během velmi krátké doby starší verze úplně vymizí a na její místo nastoupí nová.

Opera a Safari

Nepoužívá je tolik uživatelů a nevydávají tak často nové verze, proto je započítána pouze jedna verze od každého prohlížeče. Ale v případě vydání nové verze by průběh byl podobný jako u předchozích dvou.

Internet Explorer

Jsou započítány 4 různé verze prohlížeče. Verze 10 pozvolna získává vyšší podíl, ale spíše na úkor verze 9 než starších verzí. Oproti starším verzím Internet Exploreru má ale desátá verze subjektivně rychlejší nástup. Domnívám se, že verze 9 na předních pozicích statistiky nebude figurovat. Je to sice poslední verze, která funguje pod Windows Vista, ale tento operační systém nemá moc velký podíl. Horší je to s verzemi 8 a 7. Toto jsou poslední verze, které fungují pod Windows XP. Osobně nechápu, co vede uživatele k použití tohoto prohlížeče. Už z toho důvodu, že většina velkých aplikací pod těmito prohlížeči odmítá fungovat nebo funguje špatně, takže je použití tohoto prohlížeče poněkud omezené.

Jsem velice zvědav, jak bude vývoj dále probíhat. Pokud pomineme IE, tak máme vždy velkou jistotu, že bude mít uživatel nejnovější verzi svého prohlížeče. Co se týče Internet Exploreru, tak dva největší problémy jsou ty, že nové verze nepodporují starší verze Windows a chybějící, respektive méně aktivní automatické aktualizace.

 

Sledování odezvy na newsletteru pomocí Google Analytics

U newsletterů rozesílaných e-mailem je dobré sledovat odezvu. Dá se to řešit speciálními redirectovacími URL, ale v tomto případě se nedá analyzovat provoz komplexněji. Například pomocí Google Analytics.

Řešením je využít parametry pro evidenci kampaní v Google Analytics. Detailní nápověda je na http://support.google.com/analytics/bin/answer.py?hl=cs&answer=1033867. Zde jen uvedu, že stačí do URL poslat navíc tento kód:

utm_source=newsletter-2013-03-26&utm_medium=email&utm_campaign=newsletter

Samozřejmě je nutné na té dané stránce mít sledovací Google Analytics kód.