Nova spletna stran

Ja cLoovis ima novo spletno stran, kot je zapisano je tokratna bolj pregledna, navigacija na strani bolj enostavna, dodana pa je tudi nova vsebina. Omembe vreden je predvsem cenik, ki je ponavadi bolj kot ne tabu tema in je na spletnih straneh zelo redek.

Zakaj so cene teh storitev oz. izdelkov taka tabu tema je povsem druga zgodba, če se pogleda razne internetne forume in oblikovalske forume, se tam lahko najde kar nekaj tem v smislu:”koliko bi računali za …” Odgovori v takih primerih, pa so vedno isti, ali pa opozarjajo na neke oblikovalske cenike, ki pa so le del ene spletne ali programske rešitve. Se lahko naslanjaš na dva cenika in sicer cenik društva oblikovalcev in na cenik gospodarske zbornice, bolj natančneje na cenik združenja za informatiko in telekomunikacije. Tako preračunane cene so vsekakor višje, ki pa tudi ne vsebujejo drugih stroškov. Torej so cene visoke ali niske, je pa vaša odločitev. :D

Za vse, ki je nikakor ne najdete, podajam naslov www.cloovis.si in obilo užitkov pri brskanju. Stran je skupaj spravila Maša.

Dosežek je še večji, ker lahko na enak način IE brskalnike prisilimo, da se obnašajo kot IE 8, ki pa ga avtor zaradi še vedno beta statusa IE 8, ne izpostavlja tako kot uporabo IE 7. Vse podprte popravke lahko najdete tukaj. Vključevanje na spletno stran je pa vsekakor še bolj preprosto:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><a id="IE7.js">
< ![endif]-->

Več o knjižnici pa najdete na http://code.google.com/p/ie7-js/.

Delujoč primer PNGja, pri katerem opozarjam, na pravilno shranjevanje, kjer rado prihaja do težav, saj je vzrok nepravilnega shranjevanja velikokrat nepravilno nastavljena transparenca, s katero ne opravi noben popravek.

Primer dveh PNG slik v divu.

P.S.: Preden taka knjižnica postane splošna praksa, pa je potrebno še ugotoviti določene kompatibilnosti z drugimi knjižnicami, kot so jquery, mootools, itd.

Integracija prijave je možna na ta način, da s pomočjo login forme pošljete prave podatke kar na forum oziroma pošljete podatke na ucp.php, ki je del foruma. Gre za mod login, torej akcija forme izgleda nekako tako:

action=”http://www.domena.com/forum/ucp.php?mode=login”

Na ta naslov, torej pošljete še: uporabniško ime, geslo in id seje, v kolikor že obstaja. Zanimiva možnost je prav tako pri preusmerjanju ob prijavi, kar pomeni da lahko nastavite URL na katerega bo uporabnik preusmerjen ob prijavi, redirect je lahko trenutna stran, na kateri je uporabnik in je zahteval prijavo, ali pa pač prva spletna stran. Enak postopek velja tudi za odjavo, kamor pa je v vsakem primeru potrebno poslati tudi id seje uprabnika, ki pa je tako ali tako shranjena v piškotku. V nadaljevanju sledi primer forme za prijavo in povezava za odjavo.

Prijava:

<form method="post" action="http://www.domena.com/forum/ucp.php?mode=login" name="prijava">
<p><input name="username" type="text" id="username" value="Uporabni&#353;ko ime" onfocus="if (this.value=='Uporabni&#353;ko ime') this.value=''" onblur="if(this.value=='') { this.value='Uporabni&#353;ko ime'; return false; }" /></p>
<p><input name="password" type="password" id="password" value="paswww" onfocus="if (this.value=='paswww') this.value=''" onblur="if(this.value=='') { this.value='paswww'; return false; }"/></p>
<p><input name="redirect" value="http://www.domena.com" type="hidden"/>
<input name="login_submit" value="Prijava" type="submit"/></p>
<input type="hidden" name="sid" value="" />
<input type="hidden" name="login" value="login" />
</form>

Odjava:

http://www.domena.com/forum/ucp.php?mode=logout&sid=$session_id&redirect=http://www.domena.com'

Mogoče drugič še integracija registracije uporabnika.

Pri sistemu deljenja datotek z uporabniki je več načinov kako nadzorovati prenose datotek, ali to storite s pomočjo baze, kjer imate kodirana imena datotek v določeni mapi, ali pa s pomočjo .htaccessa, ki omogoča, nadzorovanje nad napotiteljem, kar pomeni, da dostopa do datoteke ne dopušča, če napotitelj ni pravi, ali ta sploh ne obstaja.

RewriteEngine on
RewriteCond %{HTTP_REFERER} ^
RewriteCond %{HTTP_REFERER} !^http://(www\.)?ilrac.net/.*$ [NC]
RewriteRule ^(.*)$ http://blog.ilrac.net/2008/10/26/omejevanje-dostopa-do-datotek [R]

Zgornji primer .htaccessa dovoljuje dostopanje do datotek samo v primeru, da je HTTP_REFERER je nastavljen in da je bil uporabnik napoten iz www.ilrac.net, sicer uporabnika preusmeri na ta post oz. na drugo spletno stran.

Primer delovanja:
Nedovoljen dostop do slike: http://www.ilrac.net/dll/dl/jesen.jpg
Dovoljen dostop do slike s pomočjo povezave: http://www.ilrac.net/dll/

Prednosti tega sistema so lahko te, da nalaganje datotek in kasnejše deljenje ni pogojeno z vpisi v bazo!

Tak način se lahko uporablja tudi takrat, ko ne želite, da nekdo prikazuje določenih fotografij tako, da fotografije prikazuje neposredno iz vaše spletne strani in vam tako krade promet. V primeru, da želite uporabnika preusmeriti, če prihaja iz določene spletne strani, pa odstranite (!) pred drugim RewriteCond.

Pozor: dostop v obratnem vrstnem redu, omogoča dostop do fotografije s pomočjo brskalnikovega cacha, kar pa ne velja za druge datoteke, ki jih brskalnik ne shranjuje v cache.

Kot rečeno gre za to, da se prikaže del kode, ki naj bi se drugače odprl v popup oknu, tukaj pa se odpre kar na strani in pogled se avtomatično fokusira s pomočjo zatemnjenega-prosojnega ozadja. Kako do tega?

Najprej nastavimo določeno html kodo, pa da ne bomo spreminjali že obstoječe kode, lahko samo wrapamo celotno kodo v nek div, pa naj bo to div, ki ima id=okno. To izgleda nekako tako:

<table width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<th bgcolor="#99CC00">Ime:</th>
<th bgcolor="#99CC00">Priimek:</th>
</tr>
<tr>
<td>Franci</td>
<td>Pomagej</td>
</tr>
</table>

Da pa vse to wrapamo v en div, kot smo rekli zgoraj in zraven dodamo še en div, ki bo predstavljal naše zatemnjeno ozadje, pa to izgleda nekako takole:

<div id="bg" style="display:none;"></div>
<div id="okno" class="okno" style="display:none;">
<div style="position:absolute; right:-10px; top:-10px;"><a href="#" onclick="zapri();"><img src="close.png" border="0" /></a></div>
<table width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<th bgcolor="#99CC00">Ime:</th>
<th bgcolor="#99CC00">Priimek:</th>
</tr>
<tr>
<td>Franci</td>
<td>Pomagej</td>
</tr>
</table>
&lt;/div&gt;

Zgoraj je dodan še gumb za zapiranje okna, ki pa bo imel na koncu enako funkcijo, kot klik na zatemnjeno ozadje.

V inline css nastavimo display:none;, kar skrije obstoječo html kodo in jo ne rendra v brskalniku. Ostal css izgleda nekako tako:

#okno {
background-color: #333333;
border: 1px solid #FFFFFF;
height: 300px;
width: 300px;
padding: 5px;
}
#bg {
background-color: #000000;
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
}

Pozicija odprtega okna je tako odvisna od vas, v spodnjem primeru je primer kode, ki pozicionira okno na sredino brskalnika, to stori tako, da s pomočjo javascripta prebere višino in širino brskalnika, posamezno vrednost deli z dva in odšteje vrednosti, tako dobimo absolutne odmike od zgornjega in levega robu brskalnika in vrednosti nastavimo v css.

Samo odpiranje oken je še enostavnejše, saj se lahko uporabi toggle, show, fadeIn, itd. efekti, ki jih podpira jQuery. Sledeča javascript koda izgleda nekako takole:

function centriranje(){
$("#okno").css({
"position": "absolute",
"top": document.documentElement.clientHeight/2-$("#okno").height()/2,
"left": document.documentElement.clientWidth/2-$("#okno").width()/2
});
$("#bg").css({
"opacity": "0.7"
});

}
function prikazi(){
centriranje();
$('#bg').fadeIn(function () {
$('#okno').fadeIn("slow");
});

$('#bg').click(function () {
zapri();
});

}
function zapri() {
$('#okno').fadeOut(function () {
$('#bg').fadeOut();
});
}

V zgornjem primeru, se odpiranje izvaja tako, da se najprej odpre ozadje, ko je to odprto, se izvede odpiranje okna, pri zapiranju, pa je postopek obraten.

Primer: xopen

Rešitev za IE6:

$("#bg").css({
"opacity": "0.7",
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
});

Pri nastavljanju opacity dodate še točno višino in širino overlaya. Opacity pa lahko nastavite tudi kar v CSS datoteki.

Kot rečeno je spodaj prikazan zelo noob način, ki omogoča omenjen pregled spletne strani, ki ima kdaj pa kdaj težave pri določenih besednih zvezah.

$strani = array("http://www.najdi.si", "http://www.worldofmi.com/");
$besede = array("jebač", "will announce");
$ctr = -1;
foreach ($strani as $check) {
$ctr++;
$stran = fopen($check, 'r');
if (preg_match("/$besede[$ctr]/", stream_get_contents($stran, -1, 30), $stevilo, PREG_OFFSET_CAPTURE)) {
echo "OK";
}
else {
echo "ERROR $check (".$besede["$ctr"].") \n";
}
fclose($stran);
}

Besede, se niza po enakem vrstnem redu, kot se niza spletne strani, torej je array $strani[0] in beseda za array $besede[0], je prva vpisana beseda.

Primer iskanja, kot je prikazan zgoraj.

//EDIT

Popravljena scripta, ki omogoča iskanje več besed na določeni spletni strani:

$strani = array("http://www.najdi.si" => array("najdi", "tega ne najde"), "http://www.worldofmi.com/" => array("monkey", "island", "announce that"), "http://www.idrija.ws/nalaganje.html" => array("Vseh dodanih slik"));
$ctr = -1;
foreach($strani as $stran => $besede) {
$vsebina = file_get_contents($stran);
foreach($besede as $beseda => $besedaGo) {
if (preg_match("/($besedaGo)/is", $vsebina, $stevilo, PREG_OFFSET_CAPTURE)) {
echo "OK<br />";
}
else {
echo "ERROR $stran ($besedaGo)<br />";
}
}
}

Iskanje besede na določeni strani - klik

Primer kode, ki stori vse zgoraj našteto:

function backup_tables($host,$user,$pass,$name,$tables = '*', $server, $ftp_user, $ftp_pass, $mapa_dest){
$link = mysql_connect($host,$user,$pass);
mysql_select_db($name,$link);
if($tables == '*'){
$tables = array();
$result = mysql_query('SHOW TABLES');
while($row = mysql_fetch_row($result)){
$tables[] = $row[0];
}
}
else{
$tables = is_array($tables) ? $tables : explode(',',$tables);
}
foreach($tables as $table){
$result = mysql_query('SELECT * FROM '.$table);
$num_fields = mysql_num_fields($result);
for ($i = 0; $i < $num_fields; $i++){
$return.= 'DROP TABLE '.$table.';';
$row2 = mysql_fetch_row(mysql_query('SHOW CREATE TABLE '.$table));
$return.= "\n\n".$row2[1].";\n\n";
while($row = mysql_fetch_row($result)){
$return.= 'INSERT INTO '.$table.' VALUES(';
for($j=0; $j<$num_fields; $j++){
$row[$j] = addslashes($row[$j]);
$row[$j] = ereg_replace("\n","\\n",$row[$j]);
if (isset($row[$j])) {
$return.= '"'.$row[$j].'"' ; } else { $return.= '""';
}
if ($j<($num_fields-1)) {
$return.= ',';
}
}
$return.= ");\n";
}
}
$return.="\n\n\n";
}

$file = 'db-backup-'.time().'-'.(md5(implode(',',$tables))).'.sql';
$handle = fopen($file,'w+');
fwrite($handle,$return);
fclose($handle);
$connection = ftp_connect($server);
$login = ftp_login($connection, $ftp_user, $ftp_pass);
if (!$connection || !$login) {
die('Napaka pri povezovanju!');
}
$upload = ftp_put($connection, "$mapa_dest$file", $file, FTP_ASCII);
if (!$upload) {
echo "Napaka pri prenosu na FTP strežnik!";
}
ftp_close($connection);
}
backup_tables('localhost','username','pass','baza', 'server', 'ftp_user', 'ftp_pass', 'neka/mapa/na/serverju/');

Kodo lahko kasneje 1x dnevno poganjate preko cronjoba, ali pa jo poganjate sami po žeji, ko mislite, da backup ne bi škodil.

Da ne bi hvalil samo te live možnosti, lahko povem, da je tudi statistika lepa, uporabna in pregledno ter lično animirana, kar pa moti je to, da si lahko ogledaš samo statistiko za 30 dni, 7 dni, včeraj in danes.

Poseben sklop je namenjen dogodkom, ki omogočajo razna opozorila ob določenih dogodkih, tako da opozorijo z zvokom ali obvestilom, ali pa kar z obojim. Dogodki so lahko nastavljeni različno, lahko si nastavite, da vas woopra opozori, ko nekdo prične z brskanjem po spletni strani, ali ko odpre določeno stran, ali opravi registracijo in še kaj.

Ličen je tudi live prikaz obiskovalcev na mapi, čeprav je pri teh “geo ip location” področjih vedno zmeda z natančnimi lokacijami, pa je stvar še vedno zanimiva, ko gre za kakšne mednarodne spletne strani.

Woopra live zemljevid

Woopra LIVE

Kopirano 4. avgusta 08

Objavil 27. junija 08

Da se ne razumemo napačno, podpiram širjenje informacij, vendar pod določenimi pogoji, tako kot veljajo neki dogovorjeni pogoji, za objavo vsebine, predvsem na internetu velja, da se objavlja avtorja oz. vir, v tem primeru ni nič od tega.

Aja in še odgovor na vprašanje, kaj sem do sedaj storil v tem primeru, lahko rečem da nič, razen oddanega komentarja, kjer sem napisal, da bi lahko pripisal od kje je kopiral vsebino, sedaj pa upam da bo avtor prebral ta vnos in bo popravil svoj vnos.