Koding av design

Eivindus

Medlem
Hei!

Jeg har en utenlandsk kunde som jeg skal lage en side for, han har selv kommet med et design som jeg skal kode.

Jeg bruker Adobe Dreamweaver og har prøvd i det siste å få til denne seksjonen (se vedlegg) uten større hell.

Noen som har tips, råd og veiledning som gjør at jeg kan komme meg en vei? Om mulig også legge ved kodingsforslag?


Det er snakk om å kode det til slik at designet blir seende ut som på vedlegget

Livsmotto: "Det er bedre å spør en gang for mye enn en gang for lite"

Takk for svar:)
 

Vedlegg

  • lepta mock upwebforumet.jpg
    lepta mock upwebforumet.jpg
    28 KB · Sett: 42

Eivindus

Medlem
Det skal jo egentlig ikke være noe problem å få til det der, hva er det du ikke får til?

legg ut det du har så langt, så er det lettere å si hva du gjør feil, ellers ender det med at vi må gjøre alt for deg.

HTML:
<div class="maindownstairs">

<img src="lepta mock up 2mainslide.png" width="317" height="373">
<table align="center" class="maindownstairs">
<tr>
<td><a href="slides.jpg" rel="shadowbox"><img src="leptamockup2pic2.png"></a></td>
<td ><a href="slides.jpg" rel="shadowbox"><img src="leptamockup2pic1.png"></a></td>
</tr>
<tr>
<td ><a href="slides.jpg" rel="shadowbox"><img src="leptamockup2pic.jpg"></a></td>
<td><a href="slides.jpg" rel="shadowbox"><img src="leptamockup2pic3.png"></a></td>
</tr>
</table>

</div>

leptastyle.css
.maindownstairs {
	background-color: #FFF;
	text-align:center;
	max-width:100%;

}
 

Vedlegg

  • leptadesignwebforumet.jpg
    leptadesignwebforumet.jpg
    77,8 KB · Sett: 16
Sist redigert:

adeneo

Medlem
Det første bildet har en lenke som ikke ser ut som den er gyldig, alle bilder mangler "alt" attributter, "align center" har strengt tatt utgått, "rel" attributter er kun gyldige lenker eller predefinerte nøkkelord, "shadowbox" er ikke gyldig.

Nå vet ikke jeg om dette koden DW spytter ut, i så fall bør du slutte å bruke DW, og dersom du forsøker å lage hele nettsiden som en tabell, bør du slutte med det også, da det ikke er det tabeller skal brukes til.
 

peterandrej

pensjonert moderator
Noen som har tips, råd og veiledning som gjør at jeg kan komme meg en vei?

Du har tre seksjoner; så da lager du tre div'er. Div1 blir da den greia til venstre med tekst, div2 vil inneholde de fire bildene og div3 vil inneholde "events". Inne i disse div'ene legger du så innholdet.

Teksten i div1 får du på riktig plass ved å legge en padding i div'en.

Bildene i div2 ville jeg satt float: left med en høyremargin på bildene lengst til venstre. Bunnmargin fikser det vertikale mellomrommet.

Events i div3 kan du enten legge som liste, eller som div'er - alt etter hva du skal ha inne i dem.
 

Eivindus

Medlem
Det første bildet har en lenke som ikke ser ut som den er gyldig, alle bilder mangler "alt" attributter, "align center" har strengt tatt utgått, "rel" attributter er kun gyldige lenker eller predefinerte nøkkelord, "shadowbox" er ikke gyldig.

Nå vet ikke jeg om dette koden DW spytter ut, i så fall bør du slutte å bruke DW, og dersom du forsøker å lage hele nettsiden som en tabell, bør du slutte med det også, da det ikke er det tabeller skal brukes til.

Nå er jo ikke alt 100% ferdig og jeg er meget klar over attributtene. I dette tilfelle så er rel="Shadowbox" gyldig fordi scriptet ligger i <head> og gjør det slik at ved å klikke på bildet da vil det åpne original bildet i original str.

Når det gjelder tabellen, så var det en måte å gjøre det på. Jeg lager ikke hele nettsiden som en tabell og kommer ikke til å gjøre det heller. Dette er bare èn seksjon av et større bilde. Jeg er fullt klar over bruksområdet til tabell, men er det ikke lov til å prøve?

Men man lærer så lenge man lever!
 
Sist redigert:

adeneo

Medlem
I dette tilfelle så er rel="Shadowbox" gyldig fordi scriptet ligger i <head> og gjør det slik at ved å klikke på bildet da vil det åpne original bildet i original str.

Jeg forstår at "rel" brukes av en plugin eller noe slikt, og det er ikke uvanlig at nettopp "rel" brukes til de merkeligste ting, men rent semantisk er det ugyldig i forhold til standarden, hvor det kun er lov med følgende verdier i en "rel" attributt:

alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag

Ellers så bør du gjøre som PA sier, begynn med noen div'er og forsøk å plasser de på rette stedet, gi de gjerne bakgrunnsfarger. Jeg begynner gjerne med noen røde, grønne, blå firkanter, og plasser disse rundt som hovedelementene på siden, og når disse er på plass kan man begynne å fylle de med innhold, og plassere dette innholdet igjen osv.
 

peterandrej

pensjonert moderator
Jeg begynner gjerne med noen røde, grønne, blå firkanter, og plasser disse rundt som hovedelementene på siden, og når disse er på plass kan man begynne å fylle de med innhold, og plassere dette innholdet igjen osv.

Det er faktisk et veldig godt tips som jeg selv benytter meg av ganske ofte. Gi boksene en fast høyde og bakgrunnsfarge, så er det såre enkelt å se om alt ligger riktig. På responsive sider er dette en veldig praktisk metode fordi alt blir så tydelig. Setter man inn tall i boksene (1, 2, 3, 4, osv) så vil man enkelt kunne kontrollere at elementene trekker seg sammen og legger seg korrekt nedover i visningsmoduser.
 
Sist redigert:

peterandrej

pensjonert moderator
I dette tilfelle så er rel="Shadowbox" gyldig fordi scriptet ligger i <head> og gjør det slik at ved å klikke på bildet da vil det åpne original bildet i original str.

Men Shadowbox? Er ikke det litt 2007, liksom? Er det i det hele tatt noen som bruker Shadowbox til noe som helst lenger?

Var det ikke minimalisme - enkelt og stilfullt - som var konseptet ditt, Eivindus?
 

Eivindus

Medlem
Shadowbox eller ikke, 2007 eller 1970.

Men visst du mener shadowbox er udatert og "so last decade" har du et alternativ?

"Man lærer så lenge man lever"
 
Sist redigert:

peterandrej

pensjonert moderator
Shadowbox eller ikke, 2007 eller 1970.

Men visst du mener shadowbox er udatert og "so last decade" har du et alternativ?

"Man lærer så lenge man lever"

Alternativ? Ja. Lag siden uten den slags tøysefunksjoner. Du imponerte muligens noen med den slags funksjonalitet i 2007, men idag irriterer det mer enn det imponerer.

Det som er imponerende idag er kreativ bruk av CSS3, ikke fem år gamle bakgrunnen-blir-mørk-funksjoner. Det er svært, svært sjelden noen gode argumenter for å bruke dem heller. Hvorfor vil du ha shadowbox her, forresten? For å vise bildene i større versjon? Da lager du en side der bildene er store i utgangspunktet.
 

hansson

Langveisfarende
Dere overdriver litt nå med 2007-tøyset deres. I sannhet er det vel dere som er kjempeopptatt av w3c som henger igjen fortiden. W3C var muligens viktig frem til 2007, men har begrenset nytteverdi i våre dager.

"Det finnes ikke noen gode argumenter for å bruke dem"... ehem, så hvorfor bruker Wordpress et script tilsvarende shadowbox for å presentere bildeopplasteren sin oppå den ordinære siden? Hvorfor bruker IOS og MacOSX modalvinduer som en integrert del av grensesnittet? Gjelder også Apple sine nettsteder anno 2013.

Shadowbox er en vanlig, jquery-basert bildefremviser, på samme måte som slightbox, fancybox, colorbox, nyroModal, osv. Det har ingenting med fancy effekter å gjøre, det er en brukervennlig måte å vise innhold på. Lurer virkelig på hva som er problemet med denne teknikken?

** De fleste webapplikasjoner trenger shadowbox-varianter for å kunne fungere på en ergonomisk måte.

** De fleste nettaviser i hele verden bruker shadowbox-varianter til å presentere bilder i større visning enn artikkelbildet, uten at man må forlate artikkelen.

** Hva med alle nettbutikkene der produktbildene vises i stort format for at kunden skal kunne skjønne hva han kjøper, er det også en unødvendig, "fancy" effekt?
 

peterandrej

pensjonert moderator
Dere overdriver litt nå med 2007-tøyset deres. I sannhet er det vel dere som er kjempeopptatt av w3c som henger igjen fortiden. W3C var muligens viktig frem til 2007, men har begrenset nytteverdi i våre dager.

"Det finnes ikke noen gode argumenter for å bruke dem"... ehem, så hvorfor bruker Wordpress et script tilsvarende shadowbox for å presentere bildeopplasteren sin oppå den ordinære siden? Hvorfor bruker IOS og MacOSX modalvinduer som en integrert del av grensesnittet? Gjelder også Apple sine nettsteder anno 2013.

Shadowbox er en vanlig, jquery-basert bildefremviser, på samme måte som slightbox, fancybox, colorbox, nyroModal, osv. Det har ingenting med fancy effekter å gjøre, det er en brukervennlig måte å vise innhold på. Lurer virkelig på hva som er problemet med denne teknikken?

** De fleste webapplikasjoner trenger shadowbox-varianter for å kunne fungere på en ergonomisk måte.

** De fleste nettaviser i hele verden bruker shadowbox-varianter til å presentere bilder i større visning enn artikkelbildet, uten at man må forlate artikkelen.

** Hva med alle nettbutikkene der produktbildene vises i stort format for at kunden skal kunne skjønne hva han kjøper, er det også en unødvendig, "fancy" effekt?

Vi er nok uenige om brukervennligheten i jquery-effektene nevnt her, tror jeg. Jeg kan ikke fordra shadowboxene i WP, på nettavisene og i nettbutikkene, og mener at sett fra et brukervennlighetsprinsipp er det en bedre løsning å lage løsninger som ikke avhenger av dem.

Men brukervennlighet er jo ingen eksakt vitenskap, selvfølgelig. Det kan antagelig være situasjoner der shadowboxes har en misjon - som f.eks i WP - men i dette tilfellet, for å vise bilder, mener jeg at det rent brukervennlighetsmessig er en bedre løsning å lage en løsning der bildene vises i full skala uten at brukeren aktivt må velge det.
 

adeneo

Medlem
Nå vet ikke jeg hvem "dere" er, men jeg har i utgangspunktet kun sagt at en "rel" attributt kun kan inneholde visse predefinerte verdier, og en "rel" attributt som inneholder verdien "shadowbox" er ikke gyldig HTML, og validerer ikke.

Selv om du mener at W3C har utgått på dato, så er det fortsatt noen av oss som synes det er greit å validere det vi skriver, og at det til en viss grad følger standarden, særlig på ting som dette, som like gjerne kunne vært løst ved å bruke en klasse i stedet for "rel" attributten, som faktisk har en funksjon.

At Wordpress bruker en lightbox, og det heter faktisk lightbox, og den Wordpress bruker heter helt spesifikt thickbox, er ikke noe "stamp of approval" i seg selv.
Det er opplest og vedtatt at ting som globale variabler, Joda conditions og annet er fy-fy, likevel finner du omtrent en million av disse i Wordpress, rett og slett fordi det er enkelt å bruke uten at man trenger å angi typer, members, cohesion og annet som de fleste brukere ikke forstår noe av, men det betyr ikke at det er bra kode, tvert i mot.
Den nye medieopplasteren er også håpløse greier, med flash basert elendighet og fyttemegrakkernsinn så mye rare greier.

Det samme gjelder forsåvidt for nettaviser, og tar du en titt på kildekoden til for eksempel Dagbladet, så er en kjapp titt nok til å få enhver utvikler til å ha mareritt i mange uker etterpå.

Når det kommer til lightbox, modal, popover, popunder og annen elendighet, så vil enhver halvveis god UX designer fortelle deg at slike ting bør unngås som pesten, da det er forvirrende og forstyrrende.

Problemet nå er nettopp at alle bruker det, og derfor er det ikke lenger så forvirrende, men slike dingser gjør ingenting for å bedre brukervennligheten, og i dag er det hverken tøft eller unikt, faktisk så er det dusinvare med nettsider som bruker den samme trøtte lightbox dingsen til alt og ingenting, og de bør derfor generelt unngås dersom det finnes andre løsninger, slik som å bare lenke til en annen side i stedet.

Lightbox var selvfølgelig litt tøft da Lokesh lagde den første varianten i 2005, men i dag har dette etter min mening gått helt ut på dato, selv om lightbox fortsatt kan være nyttig til enkelte ting, så er det å vise bilder ikke en av de tingene.
 

hansson

Langveisfarende
Trådstarter, beklager avsporingen her.

Peterandrej:

Folk har ulike behov og interesser. Jeg synes det er bra at nettaviser gir fotointeresserte, eller slektningene av de som er avbildet, eller svaksynte, eller de som har lyst til å ta en nærmere kikk på puppene til kjendisene på bildet, mulighet til å studere bildene nærmere hvis de ønsker det. Uten at de skal måtte forlate artikkelen for å gjøre det, for så å bruke tilbakeknappen etterpå for å fortsette å lese saken. Og uten at man må presentere bildet i svaksynt-modus fra start. De fleste setter pris på valgfrihet. De fleste setter også pris på å ikke bli behandlet som svaksynte som default. Gul skrift i 7em størrelse på svart bakgrunn ville jo vært nødvendig hvis man skulle følge logikken din helt ut.

Jeg mistenker at denne uviljen mot akkurat denne typen javascript-greie henger igjen fra den gangen det fantes nettlesere som ikke støttet det, og det fantes nerder som av prinsipp hadde det avslått som default. Dermed måtte man lage fallbacks i standard html/css. Tidene har forandret seg, gitt. Ikke noe man trenger å tenke på lenger, selv de mest nazi nerdene har for lengst innsett at sikkerheten er styrket og at javascript har kommet... for å bli.

Jeg foretrekker altså å få muligheten til å blåse opp bildet i spesielle tilfeller der dette kan være interessant, i stedet for å få bildet rett i fleisen i hundre prosent bredde bare fordi designeren på død og liv har fått for seg en fjollete fiks idé om at man ikke må bruke enkelte javascript, og dermed ikke tillate valgfrihet som lysbokser o.l. kan gi.

Når jeg leser det du skriver har jeg problemer med å forstå at du som ivrig Mac-bruker i det hele tatt tolererer brukergrensesnittet til OS X Mountain Lion. Det er jo fullstendig basert på at bokser og ting spretter opp og legger seg oppå noe annet, og ligger og flyter rundt på skjermen.

Adeneo:

Du synes lysbokser har gått ut på dato. Det virker rart i og med at teknikken finner stadig nye bruksområder hele tiden. Greit nok at Wordpress inneholder mye hummer og kanari, men som bruker og frontend-designer interesserer meg ikke for selve koden, men om brukerprosessen. Den er ganske vellykket i forhold til slik det var før. Fungerer fint på ipad uten flash også, så jeg tror løsningen er relativt gjennomtenkt.

Men la oss være enige om å ikke bruke Wordpress som noe kvalitetsmål. Men hva med Google Chrome? Den mest avanserte nettleseren i dag, utviklet av verdens utvilsomt dyktigste ingeniører på dette områet. Innovativt utseende, som de andre ble nødt til å herme etter. Og jada, den bruker en lightbox-variant til innstillingene (avanserte synkroniseringsinnstillinger, brukere, passord, osv.). Er det forvirrende og forstyrrende slik du sier? Neppe. Det er rent og brukervennlig, etter mitt syn. Og UX-designerne som lager Google Chrome kan vel anses for å være over "halvveis gode". At det er en utdatert teknologi tror jeg derfor vi kan slå fast at det ikke er, siden Google velger å bruke den i flere av flaggskipproduktene sine.

Vi snakker ikke om en "effekt" som har som mål å være "tøff" eller "unik", slik du skriver. Vi snakker om en praktisk mulighet til å presentere innhold oppå annet innhold uten å forlate siden. En meget enkel og smart løsning, ganske uunnværlig i mange tilfeller, som f.eks. når man er midt i utfyllingen av et skjema, holder på å skrive en artikkel, og trenger å få presentert en innholdstung blokk med info, valg, e.l. uten at man har mulighet til å forlate siden man er på. Et kjempeskritt fremover fra den gangen man måtte lagre artikkelen, gå ut fra siden for å gjøre det man skulle gjøre, og så komme tilbake og åpne den lagrede artikkelen på nytt. Jeg ser ikke med min beste vilje hvordan et så stort skritt fremover kan regnes for å være utdatert, selv i 2013.
 
Sist redigert:
Topp