Av: Svend Andreas Horgen, faglærer Ajax

I prosjektet i faget Ajax ble studentene utfordret til å lage et lite system for administrasjon av huskelapper. Du vet – de gule, grønne, blå og røde post-it-lappene du kanskje klistrer rundt her og der i huset ditt.

Penn og papir har sine ulemper

Slike lapper hjelper deg til å huske hva du skal gjøre, men det er mange fordeler med en digital versjon:

• Mulighet for å angi et tidspunkt for når lappen skal begynne å vises. Tanken her er at du kan registrere en lapp som ikke vises før et tidspunkt er passert. Hvis du for eksempel skal kjøpe billett til en konsert, og billettene ikke legges ut før om tre uker, trenger du ikke se lappen før dagen før utleggingen.
• Et lite søkefelt for å filtrere ut hvilke lapper som vises. En lapp har typisk egenskaper som id, tekst, tidspunkt og farge. I tillegg til vanlig tekst-søk, skal det være mulig å søke etter lapper med gul farge, alle som matcher et tidsrom og liknende.
• Mulighet for å lett legge til, slette, endre og flytte rundt på lapper.
• Det blir aldri noe problem å tolke sin egen håndskrift 🙂

Det kom inn mange gode svar. Her er to eksempler som har er brukervennlige, fine å se på, oversiktlige i navigasjonen, og med en god «Ajax-look-and-feel».

Tor Arne Pedersen Thune går på Informasjonsbehandling og har laget løsningen du ser i bildet nedenfor. Prøv gjerne løsningen selv på http://www.stud.aitel.hist.no/~tathune/ajax/prosjektoppgave/

Klikk på bildet for å teste løsningen

Simen Brenne Wigtil og Torstein Landrø valgte å jobbe gruppevis. De går i 3.klasse dataingeniør (systemutviklingsretningen) og har laget løsningen du ser i bildet nedenfor. Prøv gjerne løsningen selv på http://stud.aitel.hist.no/~simenbw/Ajax/prosjekt/

Klikk på bildet for å teste løsningen

Andreas Kristensen skal starte i 3.klasse og har laget løsningen du ser i bildet nedenfor. Prøv gjerne løsningen selv på http://www.stud.aitel.hist.no/~andreakk/ajax/prosjekt/login.php

Klikk på bildet for å teste løsningen

Er det noen detaljer som du liker i disse løsningene?

Dette innlegget har Comments off. Gjerne bidra :-)

Av: Svend Andreas Horgen, studieleder

Mange spør oss om pakker/kategorier av fag som naturlig hører sammen. Her er en liten forklaring til hva ulike web-relaterte fag handler om. Til slutt kommer jeg med en spesiell anbefaling av rekkefølge. Dersom du leter etter informasjon om programmeringsfag, så har vi skrevet blogginnlegg om det også.

• Webutvikling 1: grunnleggende HTML, CSS og liknende. Fokuset er på å lære å lage en statisk webside.
• Webutvikling 2: mer i dybden på hvordan en kan lage et dynamisk nettsted. Fokus er på å kunne forstå ulike teknologier og klare å benytte seg av ferdige løsninger som tilpasses. Slik kan du utvikle større nettløsninger raskt og effektivt og forstå (i bredden, ikke dybden) hvilke dynamiske komponenter som kan inngå i et større nettsted.
• Webdesign: Du lærer teori om utforming av gode webgrensesnitt og websider, du får praktisk trening i CSS og det settes også fokus på universell utforming.
• HTML5: Mange muligheter med dette nye markeringsspråket og en rekke API-er som følger med HTML5

• Webprogrammering i PHP: Serversideprogrammering, lær å lage dynamiske løsninger opp mot en database
• Webprogrammering i ASP.NET: Serversideprogrammering, søsterfag med PHP men rettet mot Microsoft-teknologien .NET
• Webprogrammering med Python: Introduksjon til Python med fokus på webutvikling

Støttefag det kan være lurt å ta

• Programmering i Visual Basic: I flere av webfagene forutsettes det at du har grunnlegggende programmeringsferdigheter. I dette faget lærer du om løkker, if-setninger, funksjoner og liknende. Syntaksen er anderledes enn i webfag som for eksempel PHP, men prinsippene er veldig nyttige å kunne.
• Programmering i Java: I motsetning til Visual Basic, er Java-faget objektorientert. Det er fokus på if-setninger, løkker og andre grunnleggende programmeringsprinsipper, men i tillegg en introduksjon til objektorientering. Syntaksen er noe mer lik webfag som PHP, men Java har noe høyere vanskelighetsgrad enn Visual Basic.
• Databaser og Databaser 2: Utvikling av webløsninger krever ofte at en har en database i bunn hvor data langtidslagres. Jo bedre forståelse for databaser, jo mer elegante webløsninger kan en lage. En avansert SQL-spørring kan spare deg for ganske mange linjer med programmering og leting etter feil.
• XML: Nyttig grunnlagsfag for å gjøre datautveksling mer effektivt. Smart i kombinasjon med database-fagene. De som skal jobbe mye med Ajax-teknologi kommer ofte borti XML for datautveksling. Vi hadde før et fag på Ajax, men har faset det ut og heller tatt med noe jQuery etc i HTML5-faget.
• Sosiale medier: Dette er et fag som i utgangspunktet gir innsikt i forretningsmessig bruk av sosiale medier. En lærer mye om ulike Web 2.0-tjenester. Men – de som kan programmering vil få et nytt perspektiv på sosiale medier i tillegg til det forretningsmessige, som kan berike webprogrammeringskunnskapene. Det å få erfaring med nye tjenester øver nemlig evnen til å tenke nytt om brukergrensesnitt og funksjonalitet på web. Det er lettere å få innsikt i hvordan slike tjenester må være konstruert for å virke rent teknisk, når en blir vant med å prøve dem i praksis.
• Grunnleggende datafag: Vi har en rekke datafag som klassifiseres som grunnleggende: Datakommunikasjon, operativsystemteori og liknende. Slike fag bidrar til å styrke forståelsen for databehandling generelt, og det er ikke noe minus når en skal utvikle på web.

Anbefalt rekkefølge er sånn ca slik de står listet opp, med unntak av programmeringsfagene Visual Basic og Java. Dersom du mangler grunnleggende programmeringskunnskaper, så bør du ta et av disse to fagene før du starter på PHP, ASP.NET og HTML5. Kan du ikke databaseteori, bør du ta Databaser enten i parallell eller før du tar PHP/ASP.NET. Du trenger ikke databasekunnskap for å ta HTML5. Du vil derimot trolig ha glede av å kombinere HTML5 med enten PHP eller ASP.NET. XML kan være nyttig å ha uansett hva du tar (øke forståelsen for datarepresentasjon og utveksling mellom systemer). Vil du lære mer om for eksempel mobiltilpassede websider, bruke geo-lokasjon og lage brukervennlige web-applikasjoner, så er HTML5-faget aktuelt. Noen fag er mer teoretisk orienterte. Det betyr ikke at de er unyttige for pragmatikere. Tvert i mot. All erfaring viser at de som har en grundig teoretisk og metodisk forståelse vil lage mer solide løsninger.

Les om alle disse fagene på http://itfag.no og spør i kommentarfeltet om du lurer på noe.

Dette innlegget har 8 kommentarer. Gjerne bidra :-)

Studentene Eirik Smedsrud og Knut Hellik Kvale har startet et prosjekt som har til hensikt gjøre billettformidling for mindre arrangører enklere, raskere og billigere. Programmeringsspråket Ruby on Rails. I dette innlegget kan du også lese litt om Ruby on Rails.

Studentene ønsker kontakt med ressurspersoner som synes prosjektet er interessant, dette være seg studenter, lærere eller andre.

De to studentene fikk også tildelt gründerstipend på 50.000,- og er blant de 6 nominerte i Midt Norge i forretningsplankonkurransen Venture Cup. Vi gratulerer!

Hva er så Ruby on Rails? Studentene forklarer at Ruby on Rails består av programmeringsspråket Ruby og rammeverket Rails. Ruby dukket opp som et dynamisk objektorientert språk i Japan på midten av 90 tallet, med inspirasjon fra Perl, Smalltalk, Eiffel og Lisp. Yukihiro Matsumoto hadde et ønske om å gjøre programmering intuitivt og morsomt og på denne måten lette hverdagen for alle frustrerte kodere rundt om i verden.

Det blir ofte sagt at Ruby har noe humant ved seg, så lenge en forstår engelsk kan en forstå store deler av Ruby syntax ved å lese det som vanlig engelsk. 5.times { print «Iskrem og sitronbrus» } vil som man kanskje forstår printe ut “Iskrem og sitronbrus” 5 ganger. Altså et språk designet med mennesket i fokus, ikke datamaskinen.

Rails er et rammeverk laget for å lette utviklingen av webapplikasjoner. David Heinemeier Hansson er mannen bak Rails, som ble unnfanget samtidig som han jobbet på Basecamp (prosjektstyringsverktøyet fra 37Signals). Første utgave av Rails kom i 2004, men fikk først skikkelig tyngde i 2006 da Apple valgte å integrere Ruby on Rails med Mac OSX Leopard.

Ruby on Rails er den mest kjente kombinasjonen med Ruby som språk, men det finnes mange andre varianter med forskjellig fokus. Tanken bak er den samme: øke produksjonshastigheten på web applikasjoner ved å legge et rammeverk med føringer for utviklingen i bunn. Det genereres også mye ferdig kode, spesielt i områdene som kommuniserer med databaser. Ruby on Rails har alltid hatt en kjent 5 minutters tutorial hvor man i løpet av – ja, 5 minutter – har en fungerende web applikasjon for å katalogisere platesamlingen sin online.

Stadig flere tar steget over fra andre språk som PHP til Ruby on Rails da fordelene stadig blir større. Twitter, Groupon og Shopify er noen av de større aktørene som benytter seg av Ruby on Rails.

Har du interesse av å få en liten innføring til Ruby on Rails på denne bloggen?

Dette innlegget har 2 kommentarer. Gjerne bidra :-)

Av: Svend Andreas Horgen, høgskolelektor og faglærer i blant annet PHP og Ajax

Dette innlegget er småteknisk, men jeg vil dele noen verdifulle CSS-erfaringer med deg. CSS er en standard brukt innen webutvikling og gjør det mulig å utforme slik at alle websider blir like med minimalt med kode.

Jeg fikk i oppdrag å lage en webside for forskningsprosjektet UnderstandIT. Dette er et EU-prosjekt, og websiden må derfor ha engelsk innhold. Designeren vår, Therese, lagde et forslag til utseende. Dette er vist under (klikk for større versjon i nytt vindu). Se nøye på bildet. Hvilke elementer har vi å gjøre med her?

Dette er egentlig en nokså kompleks layout. Det fins flere muligheter for å realisere en slik webside med HTML-kode. Tidligere har jeg brukt tabeller (table-taggen) til dette, og hvis en bruker verktøy ala DreamWeaver eller FrontPage, får en gjerne generert en hel masse tabeller nøstet i tabeller nøstet i tabeller nøstet i…. Det er lite fleksibelt og vanskelig å vedlikeholde, og tabeller anbefales ikke brukt til layout.

Men hvordan lage en såpass komplisert side med CSS? Er denne siden komplisert? Gruble gruble…. Løsningen jeg kom fram til, beskrives i et kommende blogginnlegg om noen dager.

Nå spør jeg deg: Hvorfor er dette komplisert? Hvilke elementer her byr på utfordringer? Hvilke særegenheter vil du si at siden er bygget opp av, som kan by på problemer? Legg gjerne igjen en kommentar nedenfor. Dine innspill er veldig nyttige og kanskje du lærer litt på veien!

Dette innlegget har 3 kommentarer. Gjerne bidra :-)

Av: Atle Nes, høgskolelektor og faglærer i programmeringsfag og webfag

HTML5 gir oss en helt ny standard måte å inkludere video i en webside ved å introdusere et nytt <video> element. Tanken bak er at det skal være like enkelt å legge til video på en webside som det er å legge til bilder med <image> elementet. Før HTML5 kom var inkludering av video nemlig kun mulig ved å bruke tredjeparts plugin til nettleseren, slik som QuickTime, RealPlayer eller Flash. Dette skjer ofte så automatisk at du ikke engang legger merke til at du bruker en plugin. Problemet oppstår først når du forsøker å se video på en platform/enhet som ikke har tilhørende plugin. YouTube.com bruker som kjent Flash, men har i den seneste tiden i tillegg gitt brukere muligheten til å velge HTML5 video.

HTML5 <video> elementet støttes av Firefox, Safari og Opera. Som du kanskje ser mangler den mest utbredte nettleseren Internet Explorer, som er ventet å få HTML5-støtte først i neste versjon (IE9). For 64-bit versjonen av IE8 … les resten av innlegget

Dette innlegget har 1 kommentar. Gjerne bidra :-)