Præsentationsportfolio for Thomas Riis > Blog > CSS

Kiggede på Asp.net MVC

Så har jeg fået lavet en test applikation i Asp.net MVC framework – det har været meget sjovt og lærerigt at kode en MVC løsning i et andet sprog end PHP som jo er det sprog jeg har mest erfaring i.

Jeg er imponeret over dette framework. Jeg synes at Microsoft har gjort et godt arbejde. I tiden fremover vil jeg kode noget mere C#. Inden jeg kastede mig over Asp.net MVC. Havde jeg gennemgået en del tutorials så jeg havde ret godt styr på C# syntaksen igen – men det er ikke den store forskel på de forskellige sprog. Dog er der en masse klasser i  .net frameworket som jeg naturligvis ikke kender – det kræver jo man koder C# til hverdag. Der koder jeg jo PHP.

Havde lidt bøvl med MSSQL kunne ikke finde ud af hvordan ASP.Net linkede til databasen for det var noget Microsoft havde klaret for en. Det er jeg ikke vant til i PHP så det bryder jeg mig ikke om – føler jeg mister kontrol ; ) Men det er jo kun et spørgsmål om tilvending.

Hyggede lidt med jQuery

Fredag eftermiddag kodede jeg lidt jQuery. Ville lave en cool måde at lave en navigation med rullende indhold.

  1. Lavede hurtigt noget markup der kunne bruges til at lave tre “content areas” der kunne skubbes rund i en div “container” som jeg gav en fast størrelse og satte overflow til hidden.
  2. Oprettede også en “sidebar” div hvor jeg kunne have links i.
  3. Så tænkte jeg at jeg ville starte ud med at lave løsningen som ren html udgave og så linke til indhold vha “#content-area”.
  4. Dette virkede faktisk bedre end jeg havde troet – når man klikkede på et link rullede indholdet ned til det rigtig område. Og det tidligere synlige del forsvandt. He he det gjorde linksne så også.
  5. Løste link issuet ved at anvende position: fixed.
  6. Det er så den løsning brugeren vil se hvis javascript er slået fra.
  7. Nu kunne jeg så kode løsningen i jQuery.
  8. Det var ret simpelt at lave animationen – da jeg først fandt ud af forskellen på at avende jquery metoden offset() og position().
  9. Jeg begyndte med at anvende offset() men det virkede ikke efter hensigten. Men fik hurtigt ændret til at benytte position() som giver div elementernes position realativt i forhold til den element de ligger i.
  10. Så løsning var i hus.

Tjek min løsning ud (bemærk ren prototype ikke noget fancy grafik) :
htmlversion

javascriptversion

Du kan jo snuppe kode – men jeg vil være glad hvis du spørg pænt ; )

Teletobbieland Designet

Jeg har den ide at designet skal være en modsætning til det mere dunkle design som er på sitet – på nuværende tidspunkt. Dog uden at jeg ønsker at ændre på typografi og elementer, da jeg synes de fungere rigtig godt. For længe siden faldt jeg over et tegnet landskab, som så lækkert ud. Jeg synes at det vil virke frisk at anvende dette naive og glade stykke grafik.

Farvepaletten
Jeg vil gerne holde farvepaletten i samme farver som landskabet – derfor tager jeg en farveprøve. Jeg har konstateret at den grønne der ca. er midtimellem den mørkeste og lyseste farve er #406B12.

Nu kan jeg så oprette min paletten oprette et Photoshop dokument. Tegner et kvadrat og sætter dets farve til #406B12 duplikerer kvadratet. Konstaterer hvad lyshed #406B12 har via LAB farve valgene er det kun L der er interessant. Som baggrund ville jeg have en blå, valgte ”L” 39 og kunne nu finde en blå i samme lysstyrke altså #006699. På den måde får jeg et site med harmoni i farverne. Artikler omkring LAB farver og farvekontraster som jeg har min viden fra:

Den lysegrønne er en farveprøve fra landskabet af den lyseste grønne – nemlig #78C823 som således skal virke som kontrast farve til de andre. Klik på billedet for at se det i fuld størrelse.

Til bordere og baggrundsfarver i områder indenfor ”body” anvendes #406B12. Som baggrund for hele sitet laver jeg et en gradient med #006699 som den mørke farve og #FFFFFF (hvid) som den lyseste.

Oprettelse af gradienter
Slicer / gemmer gradienten til en jpg som jeg kan benytte som baggrund som kan gentages horisontalt via CSS’en. Som ”footer ” laver jeg en gradient med farverne #406B12 til #78C823. Laver en slice som ligeledes kan gentages horisontalt i “footer” området.

Logo
For at lave en visuel identitet på sitet anvender jeg et logo som jeg har lavet for længe siden “tr” desværre kan jeg ikke huske hvordan processen var da jeg lavede det logo. Det er min idé at dette logo skal beholde sin horisontale placering selvom hovedområdet af sitet bliver større eller mindre. Samtidig er hovedområdet af sitet centreret, og er styret at størrelsen på browser vinduet, som således flytter sig i forhold til logoet.

Alternativt webdesign

Har i et stykke tid gået og barslet med en idé – brugeren skal kunne vælge mellem flere forskellige webdesign. Jeg synes at brugeren gerne må få en oplevelse af en ‘personlig’ side som hun/han selv kan ændre designet af. Jeg synes rent personligt at det er fantastisk at man ved at skifte ”stylesheet ” og dermed ændre designet radikalt.

Målet for projektet er:
Give brugeren muligheden for at kunne ”customize” sitet ved at vælge mellem flere forud definerede design. Dog vil jeg begrænse mig til kun at lave et ekstra layout i denne opdatering og fokusere mest på at få selve koden til at virke. Det alternative design vil kun ændre header billede og farver. Men det er min mening at forberede løsningen til at man kan lave ”helt” andre webdesign.

Teknologier:

  • Javascript (cookies, onload event og DOM manipulation)
  • (x)html (form – dropdown menu)
  • CSS (ekstra ”stylesheet ”som tilføjer ændringer af designet)

Flowcharts for applikationen:
Flowchart over onload eventen

Flowchart over onchange eventen

Workflow
Jeg fik hurtigt implementeret løsningen.

Skrev hurtigt de to funktioner.

For at give brugeren mulighed for at vælge mellem designs oprettede jeg en dropdown menu (select) og gav den en id så det var muligt at finde den via javascript.

Samtidig satte jeg onchange til setStyleCookie(). På den måde vil setStyleCookie() blive kaldt hver gang brugeren vælger en værdi.

Umiddelbart gik det nemt og smerte frit. Men desværre virkede løsningen ikke som forventet. Nogle dage efter fandt jeg ud af applikationen ikke kunne håndtere hvis brugeren ikke havde været på siden før. Det viste sig at jeg havde lavet min if struktur lidt for hård. Derfor løste jeg op for den så jeg bare checkede på Cookie(’mode’). Det tog noget tid at få det til at virke efter hensigten.

Men nu er løsningen klar så den kan nemt udvides og fin justeres.

Forskellige “sitebars”

Under en søgning efter et Sitemap plugin fandt jeg et plug-in som kunne generere forskellige ”sitebars” til forskellige sider og indlæg. Det havde jeg så tænkt mig at benytte senere. Fik hurtigt og smerte frit installeret plug-in’et. Dog virkede det ikke umiddelbart – manglede noget kode i min sitebar.php fandt jeg ud af. Rettede funktionskaldet: dynamic_sidebar() til generated_dynamic_sidebar(). Og så virkede det – nu var det bare at oprette en sitebar og tilføje den til de sider hvor den skulle vises. For at håndtere dette findes en dropdown menu under sider / indlæg i administrator modulet. Og nu kunne jeg så gå ind og finde sitebaren under ”widgets” og så tilføje de ”widgets” jeg vil have på den ”sitebar”.

Der opstod dog et problem – ikke alt i ”sitebaren” var genereret af ”widgets”. Disse elementer måtte jeg fjerne fra ”sitebar.php”.

Nyt problem
Nu har jeg en masse sider hvor jeg gerne vil have forskellige ”sitebarer” på. Men jeg havde ikke særlig mange ”widgets”. Så jeg måtte ud og finde ”widgets” som kunne forbedre mit site visuelt og funktionelt. Jeg fandt en del gode ”widgets” som jeg installerede dog også nogen jeg afinstallerede igen. Bl.a installerede jeg et ”widget” der kunne indsætte et RSS link på ens side. Jeg ville installere et RSS link så brugere kan abonnere på ændringer på min side – men grundlæggende synes jeg bare det er en pæn detalje med et RSS logo. Desværre var der fejl i så jeg fik 404 fejl i min rapport over SEO.

Egen løsning – RSS link
Men jeg overvejede at det nok var rimeligt simpelt at lave en løsning selv via html text plug-in’et. Det er bare at oprette et link med en id. Også oprette en regel med noget god padding og et baggrundsbilled. Selve logoet havde jeg fra den tidligere ”widget”. Lavede samme løsning til mine Flikr og Facebook links kunne nu også afinstallere et andet ”widget” (find-me-on). Jeg synes dette er en meget bedre løsning især fordi jeg helt har kontrol med hvad der er oprettet.

Et andet lækkert widget
Information om hvem der er online på sitet – synes jeg ikke er så væsentligt men det tilføjer dynamik på siden – på den måde at brugeren får indtryk af at siden er levende og bliver opdateret. Men samtidig giver det her plug-in mange muligheder i backend’en bl.a. kan man følge med i hvem der er online nu. Og hvem der har været online i de sidste 30 dage. Man kan tydeligt se ip-adresse, siden de kigger på og hvilken side de kommer fra eller om de har tastet adressen direkte. Desuden kan man se dem som prikker på et verdenskort. Søgemaskiner bliver også registret. Fantastisk plug-in.

Problem med ”Who is online” plug-in’et
Desværre var dette plug-in ikke oversat til dansk. Så jeg måtte sætte mig ind i hvordan man oversætter sprog filerne til WordPress. Det viser sig at de anvender GNU oversættelses ”frameworket” – GNU gettext. Altså et Linuxbaseret værktøj. Du kan læse mere om oversættelse af WordPress her. Der findes en mere behagelig udgave til windows Poedit. Poedit kan åbne et oversættelses katalog altså en *.pot fil. Når man åbner en sådan fil i Poedit. Listes original sproget i en kolonne og oversættelses sproget i en anden. I bunden findes to tekst bokse øverst vises en gentagelse af den celle man har valgt i de to kolonner. Man kan så oversætte i den nederste tekst boks. Når man så gemmer – gemmer man en *.po fil hvor den danske oversættelses kode da_DK er den sidste del af navnet. Bagved gemmes også en *.mo fil som er den endelige oversættelses fil. Efter jeg havde oversat kunne jeg oploade disse to filer til ”language” mappen i plug-in mappen.

Justering af kommentarer

Beskrivelse af Issue
Kommentarer og indlægsinformation glider ind i selve brødteksten på alle indlægssider.

Workflow

  • Loadede en indlægsside i Firefox.
  • Fandt elementet med Firebug.
  • For at bryde floatningen fortog jeg følgende tilføjelser i css’en:
    • .postmetadata { padding-top: 1em; clear:both; width:100%}
    • .comments {clear:both; width: 100% }

Procesevaluering projekt 4

Jeg havde allerede ret omfattende erfaring med at lave hjemmesider. Så for mig har udfordringen mere været at for styr på den tavse viden jeg har.

Altså den viden der bare er lagret igennem årene som jeg tror andre har (uden de har den). Viden som jeg har fået af erfaring men som jeg har svært ved at begrunde. F.eks. var det svært at forklare at jeg i nogen tilfælde (navigations lister) anvender “class-selectorer” frem for “id-selectorer” selvom elementet kun optræder en enkelt gang på siden.

Min forklaring er at i tilfælde hvor man gerne vil styre formateringen af et element der skal have en tilstand eller evt. flere. Anvendes class attributten i stedet for id. Da et id ikke bør skifte. Det er mere logisk at en class attribut ændres frem for id attributten.

Kom også i tanke om uskrevne regler så som at man bør lave mapper til CSS, javascript o.lign. hvis man har mere end en fil af pågældende type.

Arbejdet i gruppen:
Jeg synes at vi endnu engang har fungeret rigtig godt som gruppe.

Det sværeste var at finde ud af hvordan vi skulle samarbejde om at lave en hjemmeside. Skulle vi alle kode hver vores website eller skulle vi kode et enkelt website i fællesskab?

Samtidig havde vi den udfordring at der var stor forskel på hvad vi havde af viden omkring hjemmesider.

Vi valgte at kode websiten i fællesskab – en skrev koden. Men der blev kun skrevet kode som vi alle i gruppen var enige om.

Alle i gruppen skulle forstå hvad der foregik i koden. Der var nogle af mine kode forslag som blev forkastet fordi den blev for kompliceret.

At alle i gruppen skulle forstå hvad der foregik var en god proces, som sikrede at koden blev nemmere at forstå. Samtidig fik det også mig til tænke koden mere igennem.

Projekt 4 – Jazz website

Jeg havde igen problemer med at lave sitet og havde mange ideer.

Havde en idé om vi skulle lave et website med halvgennemsigtige områder til indholdet. De andre fra gruppen kunne godt lide ideen.

Vi havde alle ideer om at jazz websites typisk består af pangfarver på en mørk baggrund. Så farverne var vi ret enige om.

For at vise min opfattelse af “jazz” til gruppen lavede jeg en kollage med en saxofon med den farvepalette som jeg forestillede mig skulle laves til sitet.

Workflow:

  1. Gik ind på flickr.com for at finde en saxofon som jeg kunne frilægningen søgte efter billeder under ‘creative commons’ licensen.
  2. Jeg besluttede mig for at anvende ’quick mask mode’ til frilægningen.
  3. Tegnede saxofonen op
  4. Skiftede til ’normal mode’ igen.
  5. Gemte masken som “path” for at sikre at jeg kunne få masken frem igen.
  6. For at vælge baggrunden i stedet for saxofonen – foretog jeg “select inverse” kommandoen.
  7. Herefter slettede jeg baggrunden fra saxofonen.
  8. Desværre bemærkede jeg at jeg ikke havde fået alt baggrund væk og havde også slettet noget af saxofonen.
  9. Tænkte at jeg ville fortryde nogen de iterationer jeg havde lavet. Det kunne jeg ikke bruge til noget for så forsvandt min klippemaske.
  10. Forsøgte at trække maske “path-et” over i et andet dokument.
  11. Fortrød trinene i oprindelige dokument.
  12. Og trak “path-et” over.
  13. Desværre var det ikke til nogen hjælp – da de to dokumenter havde forskellige størrelses forhold (sådan opfattede jeg det)
  14. Så jeg kunne ikke benytte den løsning. Så jeg valgte at begynde forfra.
  15. Da frilægningen endelig lykkedes lagde jeg et justeringslag over saxofonen (levels) og fremhævede den varme glød i saxofonen.
  16. For at lave farvepaletten lavede jeg en rektangel med rektangel værktøjet.
  17. Dobbelt klikkede på farve ikonet i laget satte lab farve delen L til 41
  18. Nu kunne jeg så gå igen med at vælge min farvepalette.

Her er det endelige resultat (klik på billedet for at se en større udgave)

Logoet:
For at lave en pæn hjemmeside burde vi have et godt logo. Vi gik alle hjem og lavede forslag til et logo.

Jeg havde mange ideer som jeg gennemførte.
Her er et udpluk af logoer jeg lavede.



Men de holdt bare ikke – de lagde ikke op til “jazz”.

Lavede nogle håndskitser fik nogen ideer med at få et instrument til at indgå i logoet bl.a. havde jeg nogen ideer med at lade piano tangenter indgå.



Men det logo der fungerede bedst var en kombination mellem “Giant Steps” og en tegning af en trompet. Den virkede rigtig under arbejdet i illustrator fik jeg den idé at jeg ville lade “Steps” være ventilerne i trompeten.

Udfordringer under i projektet:
Naturligvis var der udfordringer undervejs bl.a havde vi et problem med at centrerer navigationen.

Det viste sig at vi manglede at definere en fast størrelse på div-elementet. Og sjovt nok virkede den forkortede version, margin: 0 auto; ikke.

Vi fik en MUL studerende fra 2. semester til at kigge på problemet. Han foreslog at vi benyttede margin-left: auto; plus margin-right: auto; også virkede det.

Så nu ved jeg at hvis man ikke kan få centreringen til at virke kan man forsøge på den måde.

Samtidig er det nødvendigt at elementer der skal centreres har den præcise størrelse som de elementer den omslutter (ikke noget nyt for mig)

Oprettelse af breadcrumb mv

Jeg var ganske godt tilfreds med WordPress-temaet. Men synes at det manglede en “breadcrumb”. Således at slutbrugeren tydeligt kan se, hvilken side hun eller han er på. Altså her på mit portfolio. Dog vil indlæg ikke kunne vise den foregående side i hierarkiet. F.eks. linker Studieprojekter siden over til flash-bannerkampagne som er et blog emne desværre ved blog emner ikke hvilket link der fører til dem. Så i stedet for vil jeg anvende kategorier. BreadcrumbNavXT understøtter den funktionalitet. Senere vil jeg fikse dette således at jeg anvender javascript og “document.referrer” til at indsætte tidligere besøgte side i stedet for kategorien. Og så vil jeg indstille BreadcrumpNavXT til at skjule kategorien.

Workflow:

  1. Søgte først efter om der var en udvikler der havde lavet et breadcumb plugin. Fandt et jeg kunne lide.
  2. Downloadede applikationen og uploadede den til min wordpress installation.
  3. Herefter aktiverede jeg plug-in’et.
  4. Først kunne jeg ikke se outputtet fra plug-in’et.
  5. Men ved hjælp af firebug var det nemt – kunne hurtigt finde tag elementet.
  6. Lavede en ny CSS-regel til at styre klassen breadcrumb med.
  7. Havde issues med den markup der blev generet. Der var ikke noget jeg kunne anvende til at markere nuværende sidenavn.
  8. Fandt ud af at jeg kunne ændre på indstillingerne i plug-in’et så nuværende sidenavn fik class-attributten “current”. Så var det nemt at lave en regel for nuværende sidenavn.

Det var dejligt nemt at tilføje plug-in’et. Synes faktisk det er mere besværligt at tilføje et lignende plug-in i Joomla!.

Nu hvor jeg var i gang med at ændre i css’en besluttede jeg mig til at fjerne de ekstra side links som var i temaet. I stedet for ville jeg hellere vise links til ressourcer der interesserer mig. Ændrede herefter sorteringen i hovedmenuen. Rykkede siden om mig helt til sidst da den ikke skal være siden man kommer først ind på. Da det ikke er det vigtigste i portfolien.

Ændrede i ‘parmalinks’ for at gøre sitet mere “SEO” (Search Engine Optimazation) venligt. Således at url’en forklarer destinations siden. Ændrede også lidt i titlerne for at få bedre urls. Kunne dog ikke anvende den metode jeg helst ville. Ville anvende mod_rewrite. Men urlen index.php/yyyy/mm/dd/titel er ganske fint. Når systemet ikke er opsat til mod_rewrite er der ikke så meget andet at gøre.