Aké silné máte heslo? Ako rýchlo sa dá prelomiť?

how-secure-is-my-passwordNa tomto blogu som už o overovaní sily hesla písal. Išlo o článok, kde som ukázal krátky javascript na overenie sily hesla. V tomto článku chcem odporučiť stránku HOW SECURE IS MY PASSWORD. Ide viacmenej o hračku, na ktorej možno vyskúšať, aké je silné heslo. Javascript vyskúša slovníkový útok a odhadne, ako dlho by trvalo prelomenie hesla.

Stránku som preskúmal a v čase písania tohto článku som nezistil, že by stránka heslá niekam posielala alebo zbierala. Takže, nie je sa čoho báť.

Nové web stránky Martinus.sk

Už ste si všimli nový dizajn online kníhkupectva Martinus.sk? Ak nie tak nový web nájdete na http://novy.martinus.sk.

Nebudem písať o prevedení stránky ani o kvalite dizajnu, kódu alebo užívateľskom komforte. Na stránke je podla mňa kvalitne odvedená práca. Dizajn je moderný a prehľadnejší ako starý web. Prešiel som si celý nákupný proces. Nič ma počas neho neprekvapilo a bol takpovediac intuitívny.

To kvôli čomu píšem tento blog, je taká malá drobnosť, ktorú si bežný užívateľ asi ani nevšimne. Je ním huncútstvo vo forme fľaku pod kávovou šálkou. Takého toho krúžku, aký ostáva aj na vašom pracovnom stole po šálke. Pri skúmaní toho ako je stránka zostavená som upravil css pozíciu pohára. No a pod ním sa objavil.

Takže, ak ste zvedavý webdizajnér, viete ako na to…
Martinus.sk - Knihy pre vás

Povinné údaje podnikateľov na webe

zakony-srPri tvorbe webstránky pre firemného zákazníka sa často zabúda na jeden základný fakt. Internetová stránka je oficiálna komunikácia podnikateľa (živnostníka) so zákazníkom, prípadne štátnou správou.

Podľa ustanovenia § 3a zákona č. 513/1991 Zb. Obchodný zákonník v znení neskorších predpisov, je povinné uvádzať obchodné meno, sídlo alebo miesto podnikania, právnu formu právnickej osoby, identifikačné číslo, zápis v obchodnom registri alebo v inej evidencii podnikateľov a číslo zápisu. Ak uvádza výšku imania tak aj rozsah jeho splatenia. Tieto údaje je povinné uvádzať aj na internetovej stránke.

Zákon síce nijako nešpecifikuje, čo je firemná prezentácia a čo nie. Za firemnú stránku by som pokladal napríklad web prezentujúci značku, službu alebo produkt. Príkladom je značka T-Com, za ktorou stojí firma Slovak Telekom, a.s. Na stránkach spoločnosti Slovak Telecom je vždy jednoducho vyhľadatelné, kto daný produkt poskytuje, kto zaň zodpovedá alebo komu značka patrí. Nie je problém vyhľadať podrobnosti o fungovaní firmy, výročné správy a podobne.  Osobne pokladám stránku s takýmito údajmi za dôveryhodnejšiu. Eshop bez takýchto údajov rovno opúšťam. Samozrejme v prípade živnostníka alebo malého podnikateľa, nie je potrebné publikovať výročné správy. Úplne postačia zákonom určené údaje, na základe ktorých sa už dá ostatné nájsť.

I napriek možnej strate dôveryhodnosti mnoho klientov a tvorcov, buď z nevedomosti alebo schválne, takéto informácie na stránke neuvádza. Stretol som sa s klientom, ktorý mal obavy zo zneužitia daných údajov, i keď sú čiste verejného charakteru.

Postih zo strany zákona

Zatiaľ som sa nestretol a ani nepočul o prípade, kedy by obchodná inšpekcia námatkovo kontrolovala dodržiavanie tejto povinnosti na internete. Témou sa zaoberal aj Jan Řezáč z českej republiky, v článku Povinnosti podnikatelů na webu, kde konštatoval podobnú situáciu ako u nás.

Vhodné umiestnenie povinných informácie môže byť napríklad:

  • pätička stránok
  • stránka kontaktov
  • tiráž a právne ustanovenia stránok
  • zvláštna stránka s fakturačnými údajmi

Ak sa jedná o zvlášť stránku, tak by mala byť dostupná z každej inej stránky daného webu. Napríklad odkazom umiestneným v pätičke.


Sponzorský link

Kompletný servis pre spoločnosti
Zakladanie, zmeny, ISO 9001, znalecké služby, prieskum trhu. Zaujímave zľavy pre stálych klientov. Pozrite si naše referencie.
http://bgservices.eu


Presné znenie zákona č. 513/1991 Zb. Obchodný zákonník v znení neskorších predpisov

§ 3a

(1) Každý podnikateľ je povinný na svojich obchodných listoch a objednávkach vyhotovených v písomnej alebo elektronickej forme (ďalej len „obchodné dokumenty“) uvádzať obchodné meno, sídlo alebo miesto podnikania, právnu formu právnickej osoby a identifikačné číslo, ak je pridelené. Podnikatelia zapísaní v obchodnom registri alebo v inej evidencii podnikateľov uvádzajú aj označenie registra, ktorý podnikateľa zapísal, a číslo zápisu. Ak podnikateľ na svojich obchodných dokumentoch uvádza výšku základného imania, musí uviesť aj rozsah jeho splatenia.

(2) Údaje podľa odseku 1 je podnikateľ povinný uvádzať aj v písomnom úradnom styku.

(3) Údaje podľa odseku 1 je podnikateľ povinný uvádzať aj na svojej internetovej stránke, ak ju má zriadenú.

Safari, Chrome, Webkit CSS hack

Chrome_SafariExistuje niekoľko zaužívaných spôsobov ako pri písaní CSS donútiť napríklad Internet Explorer, aby použil inú definíciu, ako ostatné prehliadače. Konkrétne mám na mysli rôzne css hack, ako napríklad znak podčiarnika alebo otáznika pred danou deklaráciou.

No ako oklamať prehliadače s jadrom webkit v prípade výnimočnej núdze? V Safari a Chrome pekne funguje nasledujúca vec:
body { background-color: red; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { background-color: blue; }
}

O tom, že to spraví z css nevalidný dokument sa baviť nebudeme. To je jedno. Keď treba, tak ten css hack použijem, a ten jeden dva riadky parser prehryzne.

jQuery pluginy #1

jquery_logo_color_onwhiteV tomto článku sa budem venovať pluginom pre JavaScriptový framework jQuery.

jQery plugin: Organic Tabs

Veľmi často sa jQuery používa na vytvorenie takzvaných tabov. Špecialitou tohoto pluginu je, že animuje aj natiahnutie tabu ak je to potrebné.

Demo | Stiahnutie súborov | Zdroj: CSS-Tricks.com

HTML:

<div id="organic-tabs">
<ul id="explore-nav">
<li id="ex-featured"><a class="current" rel="featured" href="#">Featured</a></li>
<li id="ex-core"><a rel="core" href="#">Core</a></li>
<li id="ex-jquery"><a rel="jquerytuts" href="#">jQuery</a></li>
<li id="ex-classics" class="last"><a rel="classics" href="#">Classics</a></li>
</ul>
<div id="all-list-wrap">
<ul id="featured">
<li><a href="#">Full Page Background Images</a></li>
<li><a href="#">Designing for WordPress</a></li>
<!-- More... --></ul>
<ul id="core">
<li><a href="#">The VERY Basics of HTML &amp; CSS</a></li>
<li><a href="#">Classes and IDs</a></li>
<!-- More... --></ul>
<ul id="jquerytuts">
<li><a href="#">Anything Slider jQuery Plugin</a></li>
<li><a href="#">Moving Boxes</a></li>
<!-- More... --></ul>
<ul id="classics">
<li><a href="#">Top Designers CSS Wishlist</a></li>
<li><a href="#">What Beautiful HTML Code Looks Like</a></li>
<!-- More... --></ul>
</div>
<!-- END List Wrap --></div>
<!-- END Organic Tabs -->

CSS

ul { list-style: none; }
ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
ul li a:hover { background: #fe4902; color: white; }
ul li:last-child a { border: none; } #organic-tabs { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; } #explore-nav { overflow: hidden; margin: 0 0 10px 0; }
#explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#explore-nav li.last { margin-right: 0; }
#explore-nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#explore-nav li a:hover { background-color: #111; } #jquerytuts, #core, #classics { display: none; } #explore-nav li#ex-featured a.current, ul#featured li a:hover { background-color: #0575f4; color: white; }
#explore-nav li#ex-core a.current, ul#core li a:hover { background-color: #d30000; color: white; }
#explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { background-color: #8d01b0; color: white; }
#explore-nav li#ex-classics a.current, ul#classics li a:hover { background-color: #FE4902; color: white; }

JavaScript

$(function() { $("#explore-nav li a").click(function() { // Figure out current list via CSS class var curList = $("#explore-nav li a.current").attr("rel"); // List moving to var $newList = $(this); // Set outer wrapper height to height of current inner list var curListHeight = $("#all-list-wrap").height(); $("#all-list-wrap").height(curListHeight); // Remove highlighting - Add to just-clicked tab $("#explore-nav li a").removeClass("current"); $newList.addClass("current"); // Figure out ID of new list var listID = $newList.attr("rel"); if (listID != curList) { // Fade out current list $("#"+curList).fadeOut(300, function() { // Fade in new list on callback $("#"+listID).fadeIn(); // Adjust outer wrapper to fit new list snuggly var newHeight = $("#"+listID).height(); $("#all-list-wrap").animate({ height: newHeight }); }); } // Don't behave like a regular link return false; }); });

jQuery plugin: Table sorter

Tento plugin urobí z hlavičky tabuľky prvok ktorým si viete zvoliť radenie dát v tabuľke.

Demo | Stiahnutie súborov | Zdroj: Tablesorter.com

HTML:

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

JavaScript

// 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]]} );
}
);

jQuery plugin: Shadowbox

Multimediálny prehliadač. použitelný na zobrazenie galérií, videí alebo stránok v popup okne.

Stiahnutie súborov | Zdroj: Shadowbox-js.com

Príklad použitia HTML:

<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true,
// include the html player because we want to display some html content
players: ["html"]
});
window.onload = function(){
// open a welcome message as soon as the window loads
Shadowbox.open({
content: '<div id="welcome-msg">Welcome to my website!</div>',
player: "html",
title: "Welcome",
height: 350,
width: 350
});
};
</script>

HTML5 a CSS3: Čo všetko bude onedlho realitou

Dnes som narazil na článok od webdesignera Madsa Kjaera HTML 5 and CSS 3: The Techniques You’ll Soon Be Using. Mads popisuje na reálnom príklade dizajnu blogu, ako použiť nové štandardy v tvorbe web stránok. HTML5 a CSS3 prináša mnoho vylepšení pri tvorbe stránok. Mnohé z toho bolo aj doteraz bez problémov riešiteľné, no s použitím HTML5 a CSS3 sa všetko zjednoduší, html konštrukcie môžu (ale možno ani nie) byť jednoduchšie, sémantickejšie a prehľadnejšie.

Tu v článku nebudem zobrazovať zdrojový kód, všetko je podrobne rozpísané v už spomínanom článku. Demo stránky k nahliadnutiu je tu.

zdroj: Nettuts+