Kritika webu http://hondemblog.8u.cz/
http://hondemblog.8u.cz/
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Honza Bittner:8.12.2013 10:54
Pro motivaci se můžeš podívat třeba sem http://www.awwwards.com/
.
Nebo si najít nějakého grafika 
Rád by jsem si našel grafika, jenomže tohle jsou projekty takové
jednorázové. Teď studuju prvák na elektroprumce a našel jsem si práci ve
webdesignu. Ten chlap po mě chce nějákou referenci, tak jsem se zeptal
taťky, jestli nechce předělat stránky jeho kapely. Vím, že moje
designerské schopnosti jsou na bodu mrazu, ale opravdu si myslím, že na
takové občasné projekty nemá cenu nějákého grafika hledat
Honza Bittner:8.12.2013 11:16
To je věc názoru. Já si stojím za tím dělat vše perfektně, nač to pak taky dělat, že?
Když už chceš dělat referenci aby ses dostal do webstudia tak alespoň udělej dobrý kód. Je to strašný... Tedy, HTML docela ujde, až na to menu. jQuery je ale děs. To samé CSS.
Web stránku umí napsat každý blbec, ale napsat jí dobře, rychle a co
nejvýhodněji, to už je jiný level
Chce se to učit
Neaktivní uživatel:8.12.2013 11:38
Doplním Honza Bittnerho odpověď:
Tak třeba k jQuery - animace "čehokoliv"
Místo
$("#menu1").mouseover(function(){
$("#menu1").animate({
opacity:'1.0',
});
});
$("#menu1").mouseout(function(){
$("#menu1").animate({
opacity:'0.4',
});
});dej všem elementům, které chceš při přejetí myši animovat, místo id třídu - pojmenujeme jí třeba anim:
$(".anim").mouseover(function(){
$(this).animate({
opacity:'1.0',
});
});
$(".anim").mouseout(function(){
$(this).animate({
opacity:'0.4',
});
});A jak tak na to koukám, tak ty tu máš další prasárnu s menu. Místo obrázků použiješ netříděný seznam s odkazy. Místo
<div id="menu">
<img src="images/menu/domu.gif" id="menu1">
<img src="images/menu/okapele.gif" id="menu2">
<img src="images/menu/mp3.gif" id="menu3">
...
</div>použiješ
<nav>
<ul>
<li><a href="#" class="anim">Domů</a></li>
<li><a href="#" class="anim">Další odkaz</a></li>
<li><a href="#" class="anim">Další</a></li>
...
</ul>
</nav>Odkazům v menu nastavíš display na block a seznamu display na inline, tím
docílíš toho, že odkazu budeš moct nastavovat libovolnou výšku, šířku
i odsazení a seznam se ti zobrazí v řádku
Krom toho, že tím vším minimalizuješ a zpřehledníš kód, tak ho budeš moct i daleko efektivněji měnit. Až to budeš mít, tak řekni, kouknem na to dál, protože jakmile nebudeš mít v menu obrázky ale odkazy, tak bude lepší animovat třeba barvu pozadí, spíš než průhlednost.
Benjibs:8.12.2013 18:27
$(".anim").mouseover(function(){
$(this).animate({
opacity:'1.0',
});
});
$(".anim").mouseout(function(){
$(this).animate({
opacity:'0.4',
});
});2x vytvárať objekt/selektor, to nebyť pekné 
Buď:
var obj = $(".anim");
obj.mouseover(function(){
$(this).animate({
opacity:'1.0',
});
});
obj.mouseout(function(){
$(this).animate({
opacity:'0.4',
});
});alebo
$(".anim").on(
{
mouseenter: function(){
$(this).animate({
opacity:'1.0',
}},
mouseout: function(){
$(this).animate({
opacity:'0.4',
}}
});
Zobrazeno 13 zpráv z 13.