Gå til innhold
  
      
  
  
      
  
  • blogginnlegg
    2
  • kommentarer
    26
  • visninger
    17 630

hardRape v0.1


JohndoeMAKT

1 913 visninger

Det er mange tåpelige ting du kan gjøre, og blir gjort, med javascript. Kombinér det med User JS, greasemonkey eller hva nå din browser kaller det og du har virkelig en piknik av festligheter. Når hardware.no for et par dager siden oppdaterte utseende på forsiden fant jeg meg selv lite villig til å enda en gang bli vant med en voldtekt av brukervennligen i jakten etter et moderne design. Så da ble jeg fristet til en liten voldtekt selv, med javascript som verktøy.

 

Et sted mellom 2004 og 2005 syntes jeg brukervennligheten på topp og disse designene var i bruk så lenge at de ble hardware.no. Mørk blå topp, blå venstre med tekst jeg aldri har lest, stor logo i krysset på toppen, passe bred hvit midtkolonne med svart border, artikler med små høyrestilte bilder og én eller to grå og blå kolonner med siste fra forum og sikkert noe annet jeg heller aldri leste. Ta en titt i tidsmaskinen for å se hva jeg fabler om:

 

http://web.archive.org/web/20040610172448/...ww.hardware.no/

http://web.archive.org/web/20050205195137/...://hardware.no/

 

Jeg skrev så et javascript med et tilhørende stilsett som henter ut de kjekke delene av forsiden og artiklene, fjerner hele dokumentstrukturen, bygger opp en trekolonners struktur og putter inn det vi ønsker. Bruker du Opera fører dette til og med til raskere sidevisning enn den orginale siden da Opera bla ikke rendrer <img> elementer med stil display: none; som det ene stilsettet påfører hele dokumentet. Scriptet er også skrevet i greasemonkey stil som gjør at Firefoxbrukere med den extentionen kan ha det installert på to trykk, selv om måten scriptet er skrevet vil ta mye lengre tid enn i Opera. Grunnen til det er at det starter ikke før eventen load blir kjørt for elementet body. I Opera skjer dette som sagt veldig raskt fordi det er omtrent bare lasting av <script> og <link> elementer som tar tid mens hele body som ikke blir vist tar millisekunder å rendre. Om noen har en god løsning på dette for Firefox vil jeg gjerne høre det, men frem til nå gidder jeg rett og slett ikke bruke tid på det da jeg bruker Opera. :)

Jeg ble også etter hvert ganske lei av oppgaven og ble slurvete, så ikke klag på unødvendig kode og lite optimal CSS-struktur.

 

Her er en preview av forsiden jeg laget et par dager siden:

http://spackfish.com/hw/hw_mod_preview.avi

 

Men nok ranting, her er installasjonsprosedyrene:

 

  • Firefox:

-Legg inn greasemonkey extension.

-Trykk på denne linken og velg å installere.

http://brillegeit.com/hw/hardRape/v01/hardRape.user.js

 

  • Opera

-Last ned disse to filene ( høyreklikk, save as ) en eller annen lokal plass. Det optimale er å lage en egen mappe kun for disse filene.

http://brillegeit.com/hw/hardRape/v01/hardRape.user.js

http://brillegeit.com/hw/hardRape/v01/hardRape.css

-Naviger Opera til hardware.no, høyreklikk en tom plass og velg Edit Site Preferences og under Display velg .css fila over under My Style Sheet og under Scripting velg mappen du lagret de to filene i under User JavaScript Files.

 

  • IE

- :!:

 

----

 

Kom gjerne med tilbakemelding om forbedringer og feil som det sikkert vil oppstå en haug av. :)

Det neste tror jeg blir å gjøre noe virkelig tåpelig med diskusjon.no

 

-Lars

13 kommentarer


Anbefalte kommentarer

Jeg kan legge det i lista. Bare skriv ned eller tegn hvordan du ønsker at det skal se ut. Bruk gjerne linker til archive.org for å finne elementer du savner fra eldre design.

Lenke til kommentar

Sidan førre gong Gamer.no endra designet sitt har eg brukt dette oppsettet: http://web.archive.org/web/20070704014314/...search.php?sa=1

Så om du kan lage eit liknande oppsett hadde eg satt stor pris på det. Det sentrale er først og fremst å få artiklane kronologisk i ei midtkolone og siste frå forumet lett tilgjengeleg på høgre side. Søkjefunksjonen bør og vere tilgjengeleg, helst frå i høgre kolone.

 

For å seie det enkelt. ta designet du har laga til HW.no og bytt ut artiklane med Gamer.no sine, og siste frå forumet med tilsvarande på Gamer.no.

Lenke til kommentar

fungerer greit ;)

men hvis jeg hadde vært deg, ville jeg lagt til en knapp slik at man kan skifte frem og tilbake på designet.

Lenke til kommentar

ATM er ikke det mulig da jeg rett og slett fjerner alt av det orginale designet uten mulighet for å få det tilbake, men det er en klar utvidelse.

 

Løsning1:

Hold den orginale DOM-strukturen i variabler og bare bytt de to strukturene frem og tilbake.

+ Krever ikke omlasting av siden

- Må først reversere alt hardRape har gjort med artiklene

- Litt skitten MTP minnebruk

 

Løsning2:

Lag en cookie med av/på verdi. Ved hver omlasting leses denne variablen ut.

+ Enkel og ombrukbart, krever ikke reversering av nedrivning, ingen minnebruk

- Krever omlasting av siden

- Krever cookie som lager en liten sikkerhetsrissiko

 

 

Jeg tror løsning to er den jeg vil satse på i neste oppdatering.

Lenke til kommentar

Kjempe bra jobb med forsiden. Kommer absolutt til å bruke den videre framover.

 

Det ble en del bedre nå. Men det er noen små ting som kunne vært fin å ha, det er linker til søstersidene, prisguide og forum.

Lenke til kommentar

I dag skrev jeg en drøss hjelpefunksjoner som vil gjøre endringer en del lettere. Endringen av Hardware.no-forsiden gikk f.eks fra 60 linjer til 30. ( At hjelpefunksjonene var på omtrent 200 linjer skal vi ikke nevne for høyt )

Det er lagt til en av/på knapp, funksjonen som detekter hvilken side du er på er gjort mye mer solid og jeg har lagt til Gamer.no forsiden. I morgen legger jeg til Gamer.no-artikler hvor det tydeligvis er litt forskjellige strukturer på forskjellige artikkeltyper, men det regner jeg ikke med at tar lang tid.

 

Med andre ord kommer v0.2 ut i morgen.

 

EDIT: Linker til søstersider og andre funksjoner kan jeg sikkert legge til.

Lenke til kommentar

Viktigste for meg i så fall på disse søstersidene er:

 

Nyhetene enkel og grei (som nå)

 

Siste i fra forumet (som nå)

 

Kunne gjerne sett at noen av de siste fra bruktmarked kom med.

 

En direkte søke sak for prisguiden.

 

Og som nevnt over linker til søstersidene:)

 

Og sist og ikke minst Akam:)

 

 

Likte veldig godt at du hadde delt opp programvare osv nedigjennom, ver en artig sak..

 

Er det mye jobb og lage dette?

Lenke til kommentar

Det tar litt tid og du må til tider ha tunga rett i munnen i den verste DOM-manipuleringen, men for det meste er det relativt enkelt. Jeg har skrevet et par tusen linjer JavaScript på jobben og mye av dette er ganske identisk av det jeg har laget tidligere. Jeg vil med andre ord si at dersom du kan litt mer JavaScript enn formvalidering skal det ikke være for umulig å lage noe som dette.

 

Her er et eksempel på den mest avanserte biten, ingenting annet enn hårete:

 

for ( i = 0; i < articleRelatedArticles.childNodes.length; i++ ) {
		if ( articleRelatedArticles.childNodes[i].tagName == 'H3' ) {
			var temp = document.createElement( 'h2' );
			temp.innerHTML = articleRelatedArticles.childNodes[i].innerHTML;
			articleRelatedArticles.replaceChild( temp, articleRelatedArticles.childNodes[i] );
		} else if ( articleRelatedArticles.childNodes[i].tagName == 'UL' ) {
			for( j = 0; j < articleRelatedArticles.childNodes[i].childNodes.length; j++ ) {
				if ( articleRelatedArticles.childNodes[i].childNodes[j].tagName == 'LI' ) {
					var temp = articleRelatedArticles.childNodes[i].childNodes[j].childNodes[1].childNodes[1];
					articleRelatedArticles.childNodes[i].childNodes[j].removeChild( articleRelatedArticles.childNodes[i].childNodes[j].childNodes[1] );
					articleRelatedArticles.childNodes[i].childNodes[j].removeChild( articleRelatedArticles.childNodes[i].childNodes[j].childNodes[2] );
					articleRelatedArticles.childNodes[i].childNodes[j].appendChild( temp );
					temp.appendChild( document.createElement( 'span' ) ).className = 'clear';
				}
			}
		}
	}

 

Men det meste av koden er enklere og mer logisk som dette:

 

getElementsByType: function( type, parent ) {
	if ( typeof type == 'string' ) {
		if ( typeof parent == 'string' ) {
			parent = document.getElementById( parent );
		}
		if ( !( parent ) || ( parent && parent.nodeType != 1 ) ) {
			return false;
		}

		if ( ( elements = parent.getElementsByTagName( type ) ) ) {
			return elements;
		}
	}
	return false;
}

 

For øyeblikket teller jeg 445 linjer.

Lenke til kommentar

Når jeg bruker v0.1 får jeg ikke opp siden i det hele tatt, ved bruk av v0.2 er det ingen forandring. Hva kan jeg ha gjort feil?

 

Bruker nyeste version av Opera, norsk språklig version.

 

EDIT: Funket når jeg byttet til engelskspråklig version.

 

Tusen takk!

 

EDIT2:

Forslag til forbedringer:

HW Logo kunne heller vært oppe på siden, så slipper man å scrolle til siden med 1024x768 oppløsning.

På siden av HWLogoen(som skal være oppe :p), kunne det være linker til b.la prisguide, gamer, amobil osv.

Lenke til kommentar
×
×
  • Opprett ny...