Feedback på www.bbsyd.dk/tegneserier

[ChrKT]

Hej

Jeg er en nybegynder, som har lavet en hobby-hjemmeside, hvor jeg har lagt en masse tegneserier til salg,
og forsøgt at udbygge det lidt med yderligere indhold, som lidt historie, filmatiseringer, baggrund om kunstnere m.m.

Siden er her: http://www.bbsyd.dk/tegneserier

Jeg er godt klar over, at det langtfra er nogen professionel side.
Mit udgangspunkt var ren HTML, faktisk med baggrund i lektioner fra NemProgrammering,
og jeg har så bygget lidt på fra andre sider, samt med lidt java-script.
Jeg syntes, det var lidt sjovere selv at få det til at fungere end bare at benytte Wordpress e.l.

Siden har taget lang tid, bl.a. pga. de mange billeder, så jeg orker nok ikke at gennemføre store ændringer,
eller give mig i kast med PHP, ASP e.l.

Interessant at høre hvad I evt. har at sige til den

Christian

[Daniel]

Hej Christian.

Jeg synes at det er en rigtig fin side du har fået opbygget der, som du godt kan være stolt af!
Min den første rigtige side var langt fra så køn som den der.

Hvis jeg skal sætte en finder på noget der måske irriterer mit øje lidt, så er det den gule bjælke der kører frem og tilbage midt på siden. Det er som om den kører meget i hak, så det er meget svært at læse hvad der står, og man prøver virkelig af anstrenge øjnene for at læse hvad der står. Måske du kan bruge noget af animationen fra den bar der kører nedenunder, og så beholde det med at den kører frem og tilbage på siden.

Så er der lige i bunden af din side, der er der en masse plads som ikke umiddelbart ser ud til at blive brugt til noget, det ville m¨ske være en ide at fjerne det stykke, så bunden kommer tættere på billedet.

Men ellers så er det et rigtig fint stykke arbejde som du kan være stolt af.

[ChrKT]

Tak Daniel.

Gode pointer!
Jeg har allerede sænket hastigheden på den gule bjælke,
og jeg har også reduceret det tomme rum i bunden af forsiden.

(Det sidste var egentlig fordi, jeg syntes, at der var så mange definitioner i min CSS-fil, så prøvede
at køre lidt flere på samme, men kan se, at det er et dumt sted at "spare" en smule kode).

Christian

[cristian]

Hej Christian.

Jeg er ingen pro, men her er min konstruktiv kritik i første omgang

Det dine kunder / besøgende ser.

Index siden.

• Dine kørende bjælker kan være svære at læse, og forvirrende for øjnene. Jeg ville vælge at fjerne dem og få den samme information ind på siden på en anden måde.
  Du har nogle tegneserier der skifter.(rullebilled) GØR DEM 3x STØRRE Og kik på en rent CSS3 slideshow for lidt lækkerhed med en synlig load bjælke.
  Din overskift ser ikke centeret ud. Jeg ville lave en tabel, en row og en celle. Skrive teksten og lave align-vertical: middle; hvis jeg var dig.
  Du har en hvid baggrund i din body, der mangler noget farve for at fange øjnene. Eventuelt figurer fra tegneserierne.
  På linjen "Finder I noget af interesse så henvend jer på e-mail eller telefon: " er der et mellemrum før teksten begynder.
  Der er meget mellemrum mellem teksten diverse steder.
  Din navigations menu mangler lidt flair, med en hover effekt.
  Din besøgs tæller ville jeg overveje helt at fjerne.

Når du skifter mellem siderne
http://www.bbsyd.dk/tegneserier/Danske%20Marvel.html
og
http://www.bbsyd.dk/tegneserier/Amerika ... 0H-Ma.html

Kan man se at navigations menuen under din div top, laver mellemrummet mellem linksne større og mindre.

Under linksne
http://www.bbsyd.dk/tegneserier/<TITLE>.html
Er der meget hvidt. Det gør at du anstrenger øjnene hvis du ser siden i et rum med lidt lys.

Kode

Jeg ville gerne hjælpe dig med at rydde lidt op i din kode hvis det er.

Mit udgangspunkt var ren HTML

Index siden 3 kommentar. Linje 138 - 152 (fjern)

Kode: Vælg alt

<!--
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <style type="text/css">
                .html-marquee {height:50px;width:250px;background-color:ffff33;font-family:Cursive;font-size:14px;color:0000FF;font-weight:bold;border-width:4;border-style:dotted;border-color:ff0000;}
            </style>--><!-- class="html-marquee" 
            <marquee height="50" width="250" direction="down" behavior="scroll" scrollamount="1" >
                <a href="She-Hulk.html"><font color="Blue">She-Hulk <img src="Covers/She-Hulk/She-Hulk.jpg" alt="She-Hulk" width="55" height="83"> fra Kr. 10</font></a>
            </marquee>
            -->
            <!--
            Hvad med : Edderkoppen Album 1 fra 1983 i F/VF <a href="Edderkoppen (DK).html"><img src="Covers/Spider-Man/Edderkoppen Album 1 (1983) actual.jpg" alt="Edderkoppen Album 1 (1983)" width="27" height="41"></a> til kr. 40 
            - eller Defenders #21 i VF+ <a href="Defenders.html"><img src="Covers/Defenders/Defenders 21.jpg" alt="Defenders 21" width="27" height="41"></a> til kr. 36 ?
            -->

Index siden. Linje 155
En masse linje skift.

Kode: Vælg alt

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

CSS
Du har meget kode der går igen og igen.

Kode: Vælg alt

 margin-top: 10px;
    margin-left: auto;
    margin-right: auto;

og

Kode: Vælg alt

border-style: solid;
    border-width: thin;
background-color: yellowgreen;

For at prøve og rydde op i CSS filen, ville jeg foreslå at du slog nogle af tingene sammen.

Kode: Vælg alt

#hoved, #Hovedforside, #HovedFuldTekst, #HovedFilmatiseringer {
margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thin;
    background-color: yellowgreen;
}

Så du ender med

Kode: Vælg alt

#Hoved{
    width: 1000px;
    height: 1600px;
}

Og så videre.

Du definere også font family flere gange. Du burde gøre dette.

Kode: Vælg alt

body {
font-family: Impack, Sans-Serif;
}

h1 {
font-size: 130%;}

Og fjern font-size: 130%; under #Topforside.

Igen
margin-left: auto;
margin-right: auto;

Er der mange gange.

Kode: Vælg alt

#IndholdFuldTekst{
    width: 900px;
    height: 6400px;
    margin-left: auto;
    margin-right: auto;
}

#IndholdFilmatiseringer{
    width: 1050px;
    height: 7600px;
    margin-left: auto;
    margin-right: auto;
}

#Billedplacering{
    width: 900px;
    height: 675px;
    margin-left: auto;
    margin-right: auto;
}

#Omslutningtegneserierække{
    width: 900px;
    height: 160px;
    margin-left: auto;
    margin-right: auto;
}

#OmslutningtegneserierækkeKr{
    width: 900px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;
}

#OmslutningtegneserierækkeKrFokus{
    width: 900px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#Tegneserierække{
    width: 150px;
    height: 160px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    float: left;
}

#TegneserierækkeKr{
    width: 150px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    float: left;
}

#TegneserierækkeKrFokus{
    width: 150px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    float: left;
}

#Overskrift{
    width: 900px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
}

Til

Kode: Vælg alt

#IndholdFuldTekst, #IndholdFilmatiseringer, #Billedplacering <OG SÅ VIDERE> {
margin-left: auto;
margin-right: auto;
}

Og fjern dem fra overstående sektioner.

[ChrKT]

Hej Cristian

Dine forslag ser spændende ud; men jeg bliver nok nødt til at eksperimentere lidt med noget af det,
for en del af det er nyt for mig.
For eksempel er jeg ikke helt med på, hvordan jeg kan slå definitioner i CSS sammen,
for så har samme navn flere referencer (altså f.eks. #Hoved 2 gange) er det lovligt?

Og jeg kan godt se, at koden ikke ligefrem er elegant, men jeg kan f.eks. ikke bare fjerne linieskift og &nbsp;
uden alternativer, for så kommer siden til at se mindre pæn ud.
(Jeg er klar over, at der sikkert findes bedre muligheder, men nogle gange har jeg ikke fundet udvejen).
Align-vertical lyder lige som noget, jeg har manglet!
Skal lige have fundet ud af, hvad du mener med en hover effekt

Interessant ... Jeg har ihvertfald fået noget at arbejde med !
Tak for indsatsen.

Christian

[cristian]

For eksempel er jeg ikke helt med på, hvordan jeg kan slå definitioner i CSS sammen,
for så har samme navn flere referencer (altså f.eks. #Hoved 2 gange) er det lovligt?

Ja det er det, det der er med CSS er at det er den mest specifikke regl for en reference som er den der ville slå igennem.

Så du kan sagtens have noget som hedder

Kode: Vælg alt

#div1 {
height: 200px;
}

#div1 {
height: 400px;
}

Den regl som ville slå igennem er i dette tilfælde 400px reglen. Da den står sidst.
Og jo længere mod bunden en CSS regl er, jo højerer prioteret er den.

Det kan også så stå som følgende

Kode: Vælg alt

#div1 {
background-color: red;
}

#div1 {
height: 200px;
}

Her ville diven få en baggrunds farve som er rød og blive 200px høj. Så begge regler gælder.

Og jeg kan godt se, at koden ikke ligefrem er elegant, men jeg kan f.eks. ikke bare fjerne linieskift og &nbsp;
uden alternativer, for så kommer siden til at se mindre pæn ud.

Det er svært at svare på da jeg ikke helt kan gennemskue siden, ved den tid jeg har kikket på det.

Align-vertical lyder lige som noget, jeg har manglet!

Det virker ved at du skriver

Kode: Vælg alt

<div style="display: table;" class="tabel">
<div style="display: table-row;" class="row">
<div style="display: table-cell; vertical-align: middle;" class="tabel1">
<h1>Overskrift</h1>
</div>
</div>
</div>

Skal lige have fundet ud af, hvad du mener med en hover effekt

prøv at gå ind her (min egen test side) http://mnrb.dk/ og hold musen over billedet.
Billedet bliver med 50% mere gennemsigtigt, og det er en hover effekt ved at bruge en pseudo klasse.

Hvis du ligger hele din CSS1.css fil ind i en kodeblok her på forummet, så kan jeg vise dig hvordan den kan skrives mindre
og hvor du opnår det samme resultat.

[ThomasI]

ÅRH - Dirty Harry - Do you feel lucky punk!?!

[cristian]

ÅRH - Dirty Harry - Do you feel lucky punk!?!

Præcis

Men under hvert hårdt ydre gemmer der sig, ja hold musen stille over billedet for at se.
Kan godt være i skal bruge 1-2 forsøg og kører den lidt rundt og så holde den stille xD Det virker men ikke godt.

[ThomasI]

Haha - awsome

[scootergrisen]

Her er mine kommentar.

Bredden på siden er fast så når skærmen er smallere end cirka 1000 pixels så er det ikke godt for eksempel på mobilenheder med små skærme.

Når man klikke på det lille spiderman billede så kommer man hen på en side som ikke har samme grønne baggrund. Det vil være bedre og behøver det samme udseende på alle siderne så man ligesom fornemmer at man stadig er på samme hjemmeside.

Alle de billeder der er på spiderman siden tager lang tid at hente fordi de er så store.
Det er bedre hvis du lave dem som thumbnails i de små størrelser også også først når man klikker så vises det store billede.
Så kommer billeder til at indlæse meget hurtigere.

Noget er på dansk noget er på engelsk, og noget tekst er så småt og utydeligt at det ikke kan læses, det virker ikke så godt.

Det ville være bedre og have den samme menu på alle sider, i stedet for menuen skifter placering og sådan når man kommer ind på en anden side.

Nyttige kilder siden med en anden hjemmeside i en frame med scrollbars det er forfærdeligt.

bedre med alle 3 flag ved siden af hinanden, dansk, tysk, engelsk.

Pas på med mellemrum i url adresser det kan give problemer : Tysk forside.html
Bedre med Tysk_forside.html og eller Tyskforside.html eller med småt tyskforside.html så kan man undgå nogen problemer.

det store billede nederst på forsiden er meget fedt.

Du burde klart bruge PHP eller anden serversidesprog så når du engang vil lære det kan du få fordel af det i stedet for du skal redigere i 100 HTML filer når du skal rette på din menu.

Der står <!-- Forside --> før doctype.

Der er problem med encoding så æøå tegn står forkert for eksempel : <!-- Title giver overskrift til søgemaskiner -->
Forsiden er windows-1252 her men der står UTF-8 i din meta.
Sørg for og gem filerne med ønskede encoding.
Du kan finde flere HTML fejl ved at bruge http://validator.w3.org/ til at teste dine sider også rette dem.

Men jeg tror det ville gøre godt med en bedre menu, en som er ens for alle siderne og er det samme sted og en anden font og uden underline og tættere og eventuelt opdelt i undermenuer.

Også lav sitemap.xml fil i roden af hjemmesiden hvor du skriver alle dine links så søgemaskiner bedre kan finde siderne.

Også mangler du en fejlside hvor du kan skrive at siden ikke blev fundet hvis man besøger et link der ikke findes.
Lav en .htaccess fil du lægger i roden også skriv :
ErrorDocument 404 /fejl.html

Så vises fejl.html siden i stedet for der bare står "Not Found".

Prøv og ret så meget du kan og vend tilbage så kigger jeg på det igen.

[cristian]

Og jeg kan godt se, at koden ikke ligefrem er elegant, men jeg kan f.eks. ikke bare fjerne linieskift og &nbsp;

Det kan jeg godt se fra din synsvinkel.

Jeg er relativ ny til hjemmeside scripting (det er officielt ikke programmering), men jeg har server side scriptet i en årerække.
Og når man f.eks bliver nød til at lave 10 - 15 linjeskift for at tingene står rigtigt, kan man konstaterer at der er en general design fejl

Men jeg forstår også godt at det er "learning by doing" sådan har jeg det også selv.

Og det er jo det forummet er til for.

[ChrKT]

Jeg er imponeret over, at flere har taget sig så god tid til at give feedback. Det overgår ihvertfald, hvad jeg havde forventet
Det har givet inspiration til mange ting, jeg kan arbejde videre med.

Alle de billeder der er på spiderman siden tager lang tid at hente fordi de er så store.
Det er bedre hvis du lave dem som thumbnails i de små størrelser også også først når man klikker så vises det store billede.
Så kommer billeder til at indlæse meget hurtigere.

Troede faktisk det var thumbnails - de store billeder kommer først når man klikker på de små ?!

Nyttige kilder siden med en anden hjemmeside i en frame med scrollbars det er forfærdeligt.

Helt enig Det er en af de tidlige sider, hvor jeg skulle afprøve lidt forskelligt, bl.a. iframe mest for sjov.
Men det er rigtigt, den er helt forfærdelig, så den skal jeg have lavet om !!!

Mht.

mellemrum i url adresser

Godt råd - Der indgår > 260 separate sider til min hjemmesider med links på kryds og tværs, og mange af dem har desværre mellemrum, så jeg skal lige overveje, hvor meget jeg laver om her - Det skal jo helst være sjovt - Ærgeligt at jeg ikke tænkte over det fra starten.

Det der med sprog-encoding har jeg bøvlet utroligt meget med, og kunne ikke rigtig komme bedre ud af det, end det jeg er endt med.

lav sitemap.xml fil i roden af hjemmesiden

Jeg har lavet en sitemap.txt fil, går ud fra den udfylder samme funktion. Webmaster Tools (Google) tager ihvertfald godt mod den.

Christian

[scootergrisen]

Hvor er sitemap filen ?

For eksempel http://www.bbsyd.dk/tegneserier/Avengers.html fylder 15 MB og tager 24 sekunder at indlæse.
Et billede er for eksempel 539x800 pixels og fylder 200 KB men du viser dem som 84x126 pixels.
Ved at lave alle billederne som thumbnails i den størrese du viser dem i (84x126) så kan din side blive meget hurtigere.
Du kan bruge et program som PhotoFiltre til at gennemgå en hel mappe med billeder og lave dem om mindre billeder.
Så kan du lægge dem i en mappe du kalder thumbnails eller sådan noget.
Sådan at du har alle billeder i original størrelse og i en lille størrelse.

Det med encoding skal du bare have styr på.
Det ser ud til din HTTP server sender din HTML side med charset=ISO-8859-1.
Og det passer så ikke med når du forsøger at lave UTF-8 encoding.
Prøv og se om der er en .htaccess fil i roden af din hjemmeside hvor der står ISO-8859-1.

[ChrKT]

Jeg lærer noget hele tiden:

Ved at lave alle billederne som thumbnails i den størrese du viser dem i (84x126) så kan din side blive meget hurtigere

Føler mig lidt dum , troede egentlig det virkede som thumbnails, når jeg angav en mindre størrelse - men selvfølgelig skal jeg have lavet mindre billeder istedet - takker.

Hvor er sitemap filen ?

I roden: bbsyd.dk/tegneserier (bare en .txt istedet for en .xml)

Prøv og se om der er en .htaccess fil i roden af din hjemmeside hvor der står ISO-8859-1.

Synes ikke der ligger noget der, som jeg ikke selv har lagt over, og det inkluderer ikke nogen .htaccess fil

[scootergrisen]

Når du har et billede på 1000x1000 pixels også viser det med <img width="100" height="100"> så vises det ganske rigtigt 10 gange mindre men der overføres stadig samme mængde data.
Det er specielt vigtigt hvis din hjemmeside vises på en mobilenhed hvor det koster penge per MB. Så kan det hurtigt blive dyrt. For ikke at nævne langsomt fordi de ikke har så hurtig forbindelse.
Og selvom du ikke tænker at den skal kunne ses på mobileenheder så bliver der mere og mere af det så det lader til at være fremtiden og nutiden.
Du kan eventuelt afprøve din hjemmeside på diverse mobileenheder hvis du tager i en større elektronik butik hvor man kan prøve dem og der er netforbindelse det har jeg gjort for at teste min side.

Har du adgang til roden af http://bbsyd.dk/ ?
Prøv kig der efter en .htaccess fil.

I .htaccess kan du for eksempel skrive :

Kode: Vælg alt

AddType 'text/html; charset=UTF-8' html

Men det vil være rart og vide hvor der står ISO-8859-1.
Prøv og åben alle dine filer og søg efter ISO-8859-1.

Jeg kan ikke se nogen bbsyd.dk/tegneserier/sitemap.txt fil.