torsdag 28. juni 2012

HTML programmering Del III

Tredje blogg om å lage hjemmesider med HTML. Sist gang sa eg at eg skulle snakke om linking.
Og det skal vi!

Men før vi skal lære å linke må vi ha noe å linke til.
Og det gjør vi i 2 steg.

Steg 1
Finn en side på nettet du bruker mye. Ta vare på linken.

Steg 2
Lag en ny side (følg samme oppskrift som før)
Lagre den i den mappen vi allerede har lagret og kall den side2.html

Fra forrige gang så vår hjemmeside slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
<H2>OVERSKRIFT MED H2</H2>
<H3>OVERSKRIFT MED H3</H3>
<H4>OVERSKRIFT MED H4</H4>
<H5>OVERSKRIFT MED H5</H5>
<H6>OVERSKRIFT MED H6</H6>
<br />
<p>Her setter vi inn "brødteksten" vår! </p>
</BODY>
</HTML>

Den endrer vi til slik:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<br />
<H2>Mine egne sider:</H2>
</BODY>
</HTML>

Lagre den og åpne den i nettleseren din.

Som min link fra nettet velger eg en norsk nettavis som eg bruker mye: vg.no
Denne setter eg inn under linker fra nettet. Da vil siden vår bli seende slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
</BODY>
</HTML>

Som du kanskje ser har eg satt inn linjen:
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>

Og da er det på tide med en liten forklaring. Dele den opp litt.
Det som står rett etter a href er linken til stedet du vil linke til.

Target=blank forteller nettleseren at du vil åpne siden i et nytt vindu.
Har du ikke denne med vil den nye siden overskrive den du allerede bruker.

Det som står i klamme bak title er det som vil komme opp om noen beveger musen over.

Og det aller siste som står rett før </a><br> er det som stå som en link på siden din.

Men vi hadde en side til. Kanskje vi skal få laget linken til den også.
Under "Mine egne sider:" legger du til følgende linje:

<a href="side2.html">Side2</a>

Da ser siden vår slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
<a href="side2.html">Side2</a>
</BODY>
</HTML>

Som du ser er den litt annerledes.
Lagre siden din og prøv den i en nettleser.

Om du har gjort det rett skal du få opp begge linkene.
Siden fra nettet du valgte å linke til skal komme opp i nytt bilde om du klikker på det og
din egen side vil komme opp i samme vindu som du har siden din i. Og med mindre du har laget
noe på side2.html vil den komme opp blank.

No har vi lært overskrifter, tekst og linker.
Neste gang er vi klare for å legge til bilder!

Tips! Kanskje du kan ta mobilen/kameraet ditt ut en tur og ta noen bilder.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

onsdag 27. juni 2012

Begreper Del II

De siste to bloggene har handlet om hvordan man kan starte opp med å lære seg å lage sider med HTML
og da spesifikt HTML5. For deg som no fryktet at eg skulle gjøre dette til en ren programmeringsblogg, det skal eg ikke.

Om du er en av de som sitter mye på nettet, på forskjellige sider i forskjellige sammenhenger, så kan du nesten ikke unngå å komme borti uttrykk som er relatert til internett og nye teknologier.

Det er ikke lenge siden eg sjøl hørte om Web2.0 og trodde at "WOW! Er dette noe som kommer?" For kun å få lese for enda kortere tid siden noen snakke om Web3.0. Det å finne informasjon om dette og sortere var faktisk verre enn eg hadde forventet. Tror eg skal allikevel klare å forklare forskjellen.

Så... Hva er Web2.0?
Hva betyr dette for den vanlige brukeren?

Web2.0 er, og dette er hentet fra wikipedia,en populærbetegnelse på den nye situasjonen World Wide Web, med deltagerdrevne, interaktive nettjenester.
Her inngår alt fra blogger til wikier og sosiale nettverkstjenester.

Link til wikipedia er: http://no.wikipedia.org/wiki/Web_2.0

Kort fortalt er ikke Web2.0 noe som kommer, men en betegnelse på det som kjennetegner internett i dag, der de fleste av oss er inne og bruker en sosial tjeneste som for eksempel facebook. Eller har mulighet til å være journalister via våre blogger.

Hva er så Web3.0?

Web3.0 ,og igjen må eg henvis til andre steder på nettet, ifølge buzzle.com, vil handle om bruker spesifikke data (User Specific Data)
Og ka mener de med det? I dag er det slik at om du og eg bruker google sin søkemotor og skriver inn det samme så vil vi få samme svar. (Statisk) Mens i Web3.0 vil søkemotorene bli mer "personlige". De vil lære å kjenne brukeren og gi brukeren svar som er mer riktig for den brukeren.

http://www.buzzle.com/articles/web-30-vs-web-20.html

Avslutter denne lille, kanskje forvirrende bloggen, med en liten humoristisk videosnutt.



Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

torsdag 21. juni 2012

HTML programmering Del II

Sist blogg laget vi en blank html-side. Kanskje ikke så veldig spennende, men eg ga en utfordring om å legge inn tittel og overskrift. Slik eg har gjort her:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
</BODY>
</HTML

Om du ikke allerede har gjort dette så kan du ta og oppdatere index.html som vi laget i forrige blogg og åpne denne på nytt i en nettleser. En liten merknad: Der finnes mange forskjellige nettlesere, og du vil sikkert lese at eg viser til de 5 store.
Da snakker eg om følgende 5: Internet Explorer, Firefox, Opera, Chrome, og Safari. Om du bruker noen av disse må du selv følge med at du har siste versjon.

La oss gå litt videre.
I den siste versjonen av vår html-side la vi inn taggen <H1>. Gjør no det samme med <H2> til og med <H6>. Lagre filen og se resultatet.
Da vil filen din se slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
<H2>OVERSKRIFT MED H2</H2>
<H3>OVERSKRIFT MED H3</H3>
<H4>OVERSKRIFT MED H4</H4>
<H5>OVERSKRIFT MED H5</H5>
<H6>OVERSKRIFT MED H6</H6>
</BODY>
</HTML>

Som du ser og kanskje har tenkt over så plasseres alt til venstre.
Det er fordi vi enda ikke har sagt noe om plassering og venstresiden er default/standard plassering.
Plassering av tekst, farger, skrifttyper og alle andre grafiske justeringer gjør vi med CSS (Cascading Style Sheets), noe eg skal omtale senere.
Grunnen til at vi skal bruke CSS er fordi vi da kan lage 1 fil som vi henviser til fra html siden vår og sette 1 standard for alle de andre sidene vi lager. Ikke tenk mer på dette foreløpig ;)

Vi går litt videre.

Taggene fra <H1> til <H6> omtalte vi som overskrifts tagger.
For "brødtekst" eller avsnitt kan vi bruke noe som heter <p> eller paragraph.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
<H2>OVERSKRIFT MED H2</H2>
<H3>OVERSKRIFT MED H3</H3>
<H4>OVERSKRIFT MED H4</H4>
<H5>OVERSKRIFT MED H5</H5>
<H6>OVERSKRIFT MED H6</H6>
<br />
<p>Her setter vi inn "brødteksten" vår! </p>
</BODY>
</HTML>

Om du no sjekker siden vår i en nettleser vil du se at "brødteksten" er større enn <H6> taggen.
Skriftstørrelse er også noe vi skal se på siden.

Tenker vi setter en foreløpig sluttstrek der.
Om du har lyst å kjøre litt på og ikke vente på neste blogginnlegg kan http://www.w3schools.com/html5/default.asp anbefales å ta en kikk på.

Neste gang skriver eg om å lage linker på siden, en vesentlig årsak til at internett har blitt så stort. Om du ikke har tenkt å lage en stor side for
et firma, men mer som et verktøy for deg selv, er linker til andre sider ofte en stor hjelp.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

onsdag 20. juni 2012

HTML programmering Del I

Da var det på tide med en ny liten blogg! Og denne gangen var tanken å ikke reklamere for et produkt.
Eg kan allerede avsløre at eg ikke kan unngå det. Dagens tema som eg har tenkt å blogge litt rundt er programmering, mer spesifikt programmering av web sider.
Veldig mange ser på programmering som ekstremt vanskelig og gjerne noe som de mer "nerdete" blant oss driver med. Det trenger ikke være slik.

Men det er klart. Alt man virkelig vil lære seg må man bruke tid på. HTML programmering er intet unntak der.

Dagens lille reklame snutt er et verktøy som eg selv har begynt å bruke når eg skal skrive sider i html, css og php. Og det er et verktøy som eg har fått anbefalt av andre. Verktøyet heter Notepad++ og kan lastes ned på siden http://notepad-plus-plus.org/
Grunnen til at eg vil du skal bruke dette er at du etterhvert vil se at det hjelper deg litt på veien med å holde styr på programmeringen din.

Notepad++ Tips og Tricks hentet fra youtube



Denne videoen gir deg et lite inntrykk av verktøyet.

Så over til den biten vi skulle blogge om i dag.
Programmering i HTML. HTML står for HyperText Markup Language og ble definert allerede i 1989, noen steder blir det sagt 1990.

Det første du gjør, og denne gangen velger eg te-skje-metoden.
1. Lag en mappe som du legger på skrivebordet. Den kan du kalle det du ønsker.
2. Ta opp notepad++ (eller en annen editor om du ønsker dette), lag et nytt dokument som du lagrer som index.html i den mappen du laget.
I menyen på notepad++ kan du velge hva slags tegnsett du skal ha, til denne første øvelsen kan du godt velge UTF-8.

Det første du må gjøre når du skal lage en side i HTML er å definere hva slags HTML standard du skriver i. Om du er helt fersk, så tar vi her utgangspunkt i HTML5.

Slik definerer du den:
<!DOCTYPE HTML>

Som du ser så starter og slutter eg med < og >. I HTML bruker vi tags. DOCTYPE er ikke en HTML tag, men en instruksjon som forteller nettleseren hvilken versjon av HTML koding man benytter.

Den første taggen vi kommer borti er <HTML>. Denne skal omkapsle all annen informasjon enn DOCTYPE. Og må ha en begynnelse og slutt.
Det vil si at vår første webside vil så langt se slik ut:

<!DOCTYPE HTML>
<HTML>

</HTML>


En html-side gjør seg ikke selv, så vi trenger litt mer kjøtt på beinet. Vi har også to andre elementer vi må ha på plass før vi kan si oss fornøyd i denne omgang.
Neste element er head eller <HEAD> som gjerne inneholder informasjon som tittel på siden eller henvisninger til andre filer der man skal hente informasjon fra. Dette kommer
vi tilbake til.

Vi legger <HEAD>-taggen inn i html siden vår og får følgende:

<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>

</HTML>

Det siste elementet vi legger til er kroppen/innholdet på siden. <BODY>.
Under denne taggen har vi både bilder/grafikk, linker, tekst, menyer og evt annet innhold vi vil dele med andre.
<BODY>-taggen legger vi under </HEAD> og får en HTML-side som ser slik ut:


<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Lagre siden. For å se på denne siden, gå inn på mappen på skrivebordet, høyreklikk på websiden din og velg at du vil åpne den i din nettleser.
Det vi nå har er en helt blank side. Du synes kanskje det er mye arbeid for ingenting, men du vil senere se koffor det er bygget opp slik.
Et lite tips. Du kan godt lagre dette samme dokumentet i en egen mappe som en slags mal. For dette er et veldig greit utgangspunkt når du skal lage andre sider senere. (Min påstand!)

Utfordring!
Om du har lyst å teste litt selv, prøv å¨legge inn <TITLE> innenfor <HEAD> taggen og en overskrift <H1> innenfor <BODY> taggen.

Har allerede begynt å skrive på neste blogg, med løsning på utfordringen, og lover at det ikke blir lenge til neste.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

onsdag 6. juni 2012

Samarbeidsverktøy Del IV

Whiteboard

Det har vært en stund siden sist gang eg blogget, dessverre. Vet ikke om eg skal skylde på solen eller om eg skal skylde på streiken. I og med at sol er det man ønsker seg i juni får streiken skylden denne gangen og.

Er du en av dem som liker å tegne og forklare når du skal sikre deg at andre forstår? Det finnes veldig mange måter å gjøre seg forstått på. En kollega av meg er etter vært blitt viden kjent for sine excel regneark. Alt kan forklares med et regneark. Alt man trenger er en pc...
No er det en kjensgjerning at flere og flere av oss får oss smart telefoner og nettbrett, som vi bærer med oss overalt. I motsetning til tiden der folk kjøpte seg "bærbare" pc-er og dro med seg mellom jobb og hjem.

Dagens brett er mye enklere å ta med seg, til tross for at de faktisk er større og mer uhåndterlig enn telefonene som vi også bærer med.

Hvor mange ganger har du vært i en situasjon der du også skulle fått tegnet ved siden av forklaringene dine? Og ikke tro at du har penn og papir tilgjengelig eller en tavle å tegne på.
GreenGar studios er en av mange app utviklere som har skjønt dette: Whiteboard Collaborative Drawing.
Og litt av trikset her, vi er alle enige om at å samles rundt en iPad blir fort trangt. Om flere sitter i nærheten med enten en iPhone eller iPad, appen installert og søker opp den som skal holde presentasjonen via Bluetooth så kan man sitte og se på eget apparat mens den som skal forklarer tegner. Og tegningen kommer opp på eget apparat kanskje et halvt sekund etterpå.
Og ikke nok med det, man kan faktisk også være med på å utvikle tegningen.

Som du sikkert skjønner er nok dette noe vi vil se mer av på møter i fremtiden.
Har selv både iPad og iPhone og har testet dette litt. Det var iallefall mer enn nok til å overbevise meg om at dette er en bra ting å ta med seg!



Men det skal også være nevnt... Har man litt store fingre (som undertegnede) så hadde det kanskje vært bedre med en stylus pen. Har ikke fått testet det enda, men hey, er ingen som har sagt at alt må være et maleri ;)

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!