fredag 31. august 2012

Programmering Intro

Hei igjen!

Programmering er for mange et veldig mystisk og uforståelig ord. Veldig mange vet ikke hva det innebærer å lage et program.

Skal man lage et program må man først begynne med å bestemme seg for hva det programmet skal gjøre, hvilke problemer det skal løse.

Når det er på plass kan det være greit å se på hvilke muligheter som er tilstede, velge seg et programmeringsspråk. Der finnes veldig mange språk, og noen passer kanskje bedre til det du skal løse enn andre.
Søk opp ordet Programmeringsspråk på http://no.wikipedia.org og les hva som blir sagt der.
Utover høsten skal eg gjennomføre et kurs og ta eksamen i Programmeringsspråket Visual Basic.Net, samtidig med det skal eg prøve å komme med blogginnlegg her om opplevelsen og gjerne også inspirere til at nettopp du har lyst til å gi det et forsøk.

Visual Basic.Net er Microsoft sitt produkt. Det har tidligere vært Visual basic og Basic.

For å begynne å programmere i Visual Basic.Net kan det være lurt med et verktøy. Selv bruker eg Visual Basic 2010 Express.
Dette kan du laste ned gratis fra Microsoft sine sider:
http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-basic-express

Der finnes andre versjoner, så søk litt rundt og finn det som passer deg best.

Personlig har eg i mange år drevet og stilt masse spørsmål til folk som kan programmere og eg har søkt rundt på nettet etter informasjon. Og når det gjelder programmering er det greit å ha et litt edruelig forhold til det og gjerne samtidig innse at Rom ikke ble bygd på en dag.

Du vil ikke etter å ha lest mine blogginnlegg om Visual Basic kunne lage det neste store operativsystemet. Du vil ikke lage det neste store antivirus verktøyet og du vil ikke kunne konkurrere med de store spill selskapene.

Slike store prosjekter krever ekstremt mye koding og det er snakk om flere hundre mennesker bak de store prosjektene.

Men alle skal begynne et sted!
Utover høsten skal eg prøve å komme med litt tips, litt forslag til små programmer, litt forklaring på begreper og kanskje gi deg det lille du trenger.

Og ha det i tankene, eg er også under opplæring. Eg er ingen fullerfaren utvikler, men bruker denne bloggen mye for min egen del, samtidig som du også kan ta del i, og kanskje snappe opp noen gode triks.


Etter å ha sett denne videoen kan det være interessant å sjekke denne siden:
http://thenewboston.org/tutorials.php

Ser du nøye etter vil du se at han har lagt ut 200 tutorials angående Visual Basic.

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 29. august 2012

Sosial markedsføring og synergieffekter

Hei igjen!

Før i tiden hørte man stort sett om markedsføring av bedrifter. Det var store firmaer som sloss om oppdrag for å få markedsføre enda større firmaer. Vel sånn er det vel kanskje enda, men det har skjedd en endring. Nå for tiden er det mer snakk om å markedsføre seg selv, i sosiale medier og på internett.

Man får hele tiden råd om hva man IKKE bør ha liggende ute på facebook og man tipses om å også koble seg på twitter om man vil nå ut med budskapet sitt.

Tidligere i sommer har eg snakket litt om blogging, og hvordan eg bruker IFTTT til å fortelle verden at eg har lagt ut et nytt blogginnlegg.
Og dette er en ganske så enkel måte å markedsføre seg selv på. Men om man tenker seg om så underbygger det uttrykket: "Man høster hva man sår", og det er litt slik og med Sosial markedsføring.

Eg skriver blogg, publiserer den, IFTTT snapper opp at det har skjedd en endring på min blogg, publiserer dette på Twitter og Facebook. Etterhvert er det noen som snapper opp på twitter at det sitter en liten vestlending å skriver jevnlig innlegg på sin IT-blogg som de kan få følge med på om de følger vedkommende. Dette gjør til at mengden mennesker som følger en, øker. Og dette er den enkle biten, fordi dette går sakte, men sikkert av seg selv.

Men det er også viktig å være litt aktiv ved å gi venner og bekjente adressen til bloggen sin, selv om de ikke hverken er venn med deg på facebook, eller orker å følge med på twitter. For det kan godt hende at de har valgt seg et annet sosialt medie å følge, dem finnes det etterhvert mange av, selv om det er de to store som dominerer i nyhetsbildet. Og det kan godt hende at de omtaler deg der.

Når eg skal markedsføre meg selv, så velger eg stort sett å fortelle at eg har en IT blogg, og er folk interessert forteller eg de at de kan få melding på twitter, eller så viser eg de at de kan abonnerer på min blogg via RSS.

Senest i dag fikk eg vite at eg hadde fått en ny "follower" på twitter. Og en av grunnene til at han følger meg er at vi deler en felles interesse, så naturlig nok la eg meg inn på vedkommendes "follower" liste.
For en liten stund tilbake så eg et innlegg på internett om kjente folk, stjerner, som har flere hundretusener av "followers", men som selv kanskje bare har valgt 1 å følge. Det gir ikke det helt store inntrykket.

Poenget er, og det gjelder med alt som har med markedsføring å gjøre, enten det er av deg selv, ditt enmannsfirma eller større firma for den saks skyld. Spre informasjonen over flere kanaler, og gjør det regelmessig.

For å gjøre dette litt visuelt; tegn 4 søyler, og la de være hvite. Så kan du se for deg at for hver gang du poster et innlegg på bloggen din, eller tvitrer, eller sprer lenken din, så øker det litt etter litt på hver av søylene. Et innlegg på bloggen din kan føre til at flere av søylene øker. Poster du noe på facebook som en av dine venner liker, eller kommenterer så kan du være sikker på at noen av vedkommendes venner ser det.

Som eg ofte gjør så har eg også denne gangen tatt turen innom youtube. For å finne en video som sier litt om det eg sier, men kanskje på en litt annen måte.
Videoen i dag er 3 år gammel, men her er mange gode poenger. Selv om det fokuseres på ditt firma, så gjelder dette i aller høyeste grad om du vil markedsføre deg selv.


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!

mandag 27. august 2012

Google II - Google Sites

Hei igjen!

Tidligere i år, i midten av mai kom eg med 1 innlegg om Google sitt mangfoldige tilbud. I forbindelse med at eg nå har blitt IT-student åpner det seg endelig en mulighet til å få testet ut enda flere av alle muligheter som ligger ute, klar til å ta i bruk.

I løpet av denne sommeren har eg presentert en del innlegg som går på det å lage hjemme sider, eller sider med HTML koder, en liten introduksjon til CSS har det også blitt. Ikke alle synes det er like kjekt å bruke masse tid på å lære seg avansert koding for å få frem sitt budskap.

Google Hjemmeside tjeneste - https://sites.google.com

Her kan du med enkle grep, veldig likt slik oppsettet for å skrive blogginnlegg, lage deg en hjemmeside.Selv uten den helt store innsikten er terskelen for å sette i gang veldig lav.

Skrive inn tekst, legge inn bilder, hyperkoblinger, til og med tabeller er enkelt å sette inn.
Og igjen, akkurat som eg tidligere har sagt om blogging, det er deg det kommer an på. Hva du ønsker å skrive om.

Kanskje du har en hobby, eller kanskje du vil ha en enkel hjemmeside der du kan presentere deg selv på web for en fremtidig arbeidsgiver?


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 23. august 2012

CSS og grafikk

Heisann!

Eg har tidligere lovet at eg skal skrive litt om CSS og grafikk. Og ingenting er vel en bedre knagg å henge det på en sangen der vi synger: "med blanke ark og fargestifter til.."

Vi lager oss en ny html side. Som vi kaller index.html Om du har glemt hvordan, så kan du se her. Eg tar også med linjen som henviser til css filen. Lag en ny css fil som du kaller style.css. Og som vanlig holder vi oss til Charset UTF-8

index.html:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Grafikkeksempel med CSS</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</HEAD>
<BODY>

</BODY>
</HTML>

Lagre filen index.html i en ny mappe. Lag så en undermappe som du kaller images

For øyeblikket har eg utelatt å legge inn noe under <BODY> - taggen. Grunnen til det er at vi no skal finne oss et img å lage grafikk med.

Ikke alle bilder er bra til den øvelsen vi no skal gjøre; husk at vi skal gjerne ha tekst opp bakgrunnen og da er det best å ha en motsetting av skrift fargen. Skal du ha en mørk farge på skrift er en lys bakgrunn best.



Eg søkte på google med søkeord paper.gif og fant dette bildet.
Det vi nå skal gjøre er å dekke hele bakgrunnen med dette bildet, det vil gi siden vår en effekt av å være et papir. Finn et lignende bilde og lagre det i undermappen images. For denne øvelsen er det ikke så viktig hva du velger som bakgrunnsbilde, men det er greit å ha i bakhodet at en dårlig bakgrunn fort kan ødelegge helhetsinntrykket av siden.

La oss lage filen style.css, Charset UTF-8 og lagre denne i samme mappe som vi la index.html.
Ta style.css opp i notepad og legg inn følgende kode:

body
{
background-image:url('images/paper.gif');
}

Som du ser av taggen så er det området på siden din som heter BODY som vil bli endret.
Det vi ønsker å endre er bakgrunns bildet og vi legger også inn linken til dette bildet.

Som du ser har vi fremdeles ikke lagt inn noe under <BODY> i vår html fil.

Lagre begge filene og åpne index.html i en nettleser. Se om du kan finne flere bakgrunnsbilder og lek litt med de på samme måte.

Samtidig kan det være greit å gå gjennom de andre blogginnleggene eg har publisert om html og css for å teste hvordan siden nå vil se ut, med tekst og bilder oppå denne bakgrunnen.

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!

tirsdag 21. august 2012

Blogging

Heisann!

Siden dette er innlegg nummer 35 og vi snart har passert 1100 visninger av bloggen syntes eg det var på tide å snakke om blogging.

Hva er det?
Hva kan det brukes til?
Hvorfor skal eg blogge?
Hvordan blogger eg?
Hvordan får eg andre til å lese bloggen min?

Blogging er sammen med twitter og facebook en måte å vise seg frem på. Dette liker eg, dette kan eg og dette vil eg gjerne dele med resten av verden.
Det fine med blogging er at du er din egen redaktør og kan selv velge hva du skal skrive og hvordan du skal presentere det du har på hjertet.

Hva kan det brukes til? Man kan bruke det til å lære opp venner, inspirere andre mennesker, eller man kan gjøre det for seg selv å lage seg et "kunnskaps-bibliotek"
Kanskje du studerer historie eller medisin og vil skrive om temaer som du senere kan ha nytte av.

Dette fører oss over til hvorfor skal man blogge. Mennesker lærer på forskjellig vis. Noen lærer av å lese, andre av å skrive, mens en tredje gruppe gjerne lærer best gjennom å høre at det blir opplest. En god kombinasjon av alle tre kan være med på å gi et godt grunnlag for å lære mest mulig.

Hvordan blogger man? Her kan eg kun dra ut av egne erfaringer. Når eg bestemte meg for å begynne å blogge valgte eg å gjøre dette via Blogger.com
Grunnen til det er at Google bruker disse.

I tillegg til å kunne sitte på en vanlig pc med nettilgang har eg også lastet ned appen til Blogger på min iPad. Det vil si at når eg sitter i sofakroken hjemme og kun vil surfe litt på nettbrettet har eg mulighet til å drodle ned noen tanker / lage et utkast til et blogginnlegg eg vil skrive på et senere tidspunkt.

Etter at du har skrevet blogginnlegget og publisert det er det jo alltid kjekt om andre leser det, og kanskje også kommer med tilbakemelding på det du har skrevet. Men hvordan skal folk vite om bloggen din? I en jungel av veldig mange andre blogger?
Personlig har eg valgt å publisere linkene på twitter og facebook. Dette fordi det er store sosiale nettverkstjenester som veldig mange benytter seg av. Facebook for å nå vennene mine og Twitter for å nå resten av verden.

Har tidligere skrevet et innlegg om IFTTT; If This Than That

På denne tjenesten har eg laget meg 2 oppskrifter slik at når eg publiserer et innlegg på min blogg vil mine statuser på henholdsvis facebook og twitter automatisk oppdatere seg. På denne måten slipper eg å tenke på å måtte logge meg inn for å fortelle at eg har skrevet noe nytt!

Velger denne gangen å IKKE legge ved en video. Der er mange videoer på youtube ang temaet, og det er gjerne aller best å se en tutorial (opplæring) etter man har valgt blogging tjeneste.

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!

tirsdag 14. august 2012

Terms of Service; Didn't Read

Utover de neste 2 ukene vil klasse etter klasse, skole etter skole starte opp igjen etter en lang sommer. Kanskje har du brukt sommeren til å jobbe, kanskje brukt tid på å slappe av, men en ting er eg sikker på. Har du en smart telefon eller et nettbrett har du garantert fått tips av venner om apper og sosiale nettverk som du må laste ned og begynne med.

Alle steder der man må opprette en bruker for å kunne bruke tjenesten har de en Terms of Service eller brukervilkår.

Har du lest brukervilkårene til facebook eller twitter? Vel du er ikke alene om du  ikke har gjort det.
Er det noe de fleste av oss er dårlige på så er det å lese brukervilkårene før vi krysser av på 'I Agree' og velger Submit.

ToS;DR eller Terms of Service; Didn't Read om du vil er et prosjekt som startet i Juni i år som HAR lest brukervilkårene og rangerer de fra Class A (Beste) til Class E (verste).
Sidene til prosjektet er http://tos-dr.info/

Personlig synes eg dette er en spennende tanke! Å sette merkelapper på tjenester nesten på lik linje med Svanemerket eller andre merkinger av produkter.

Det skal bli kjekt å følge dette prosjektet videre!

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!

PLN - Personlig Lærings nettverk

Hei igjen!

Mange av Dere har sikkert hørt om PLN, uten å ha noe videre kunnskap eller forståelse for hva det er.
PLN som overskriften tilsier står for Personal Learning network eller personlige læringsnettverk.

Her siterer eg rett og slett Svend Andreas Horgen:

Et PLN består av et sett av verktøy, strategier og metoder for å lære, typisk i nettverk sammen med andre. Et PLN er personlig og kan variere for hver enkelt person. Sosiale medier (som Twitter, Facebook og blogg), samskrivingsverktøy (som Google Docs, Etherpad og wikier), samhandlingsverktøy (som Skype og Adobe Connect) og informasjonshåndteringssystemer (RSS, sosiale bokmerkesystemer og liknende) er noen eksempler på verktøy som kan være sentrale i et PLN. Et PLN endres over tid, både innholdsmessig og med tanke på bruk av verktøy, informasjonskilder og personer i nettverkene.

Med andre ord, et PLN er de tjenester som nettet tilbyr oss for å innhente informasjon. Hvem kjenner seg ikke igjen der poden kommer med et spørsmål så vanskelig at man må slå opp på wikipedia, eller logge seg inn på facebook for å spørre en venn?

Det som gjør det personlig er at man velger selv i hvilken grad man ønsker å bruke de forskjellige mulighetene. Hva som gir en de beste svarene.

Hva er ditt PLN? Ka bruker du selv, bortsett fra Twitter og Facebook?

Høsten er over oss og det er på tide å gå tilbake i det eg tidligere har blogget om. Både i april og i mai hadde eg innlegg som gjaldt flere av de ovennevnte mulighetene.

I tiden fremover vil eg veksle mellom å være IT-student og familiefar i fullt arbeid.

Om du er interessert i PLN, her er en liten teaser:

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!

mandag 13. august 2012

Css og fonter Del 2

Hei igjen!

Vet at eg lovet et innlegg om CSS og grafikk, men aller først vil eg at vi skal gå litt videre med fonter. Forrige innlegg snakket eg litt om de fem store nettleserne og foreslo at du kanskje kunne laste de ned.
I innlegget om fonter la vi inn en font som heter Sansation_Light, har du testet den siden i Internet Explorer? Virker ikke helt slik du hadde forventet kanskje..
Internet Explorer krever en annen type format på fontene. Det vil si at vi må skaffe oss den og for vårt bibliotek. Bruk google.com og søk på Sansation_Light.eot, pakk den ut og legg den på samme sted som den andre fonten.

Vi har allerede i vår CSS fil laget klart for denne fonten, så om du ikke allerede har lagt inn resten av banen, så er dette et godt tidspunkt å gjøre dette på.

Oppdater din Internet Explorer 9, og se at dette endrer seg! :)

Nå ser du kanskje viktigheten av å teste i mer enn en nettleser, og kanskje du også etterhvert ser hvor viktig det er å åpne for i dine CSS filer muligheten for at alle brukerne kan få fullt utbytte av det du har laget.

Kanskje du nå kan laste ned flere fonter og teste.

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!

lørdag 11. august 2012

Browsere

Hei igjen!

De fleste av oss vet hva en browser er. Eller på norsk, nettleser. Når du kjøper en pc får du gjerne en forhåndsinstallert nettleser på maskinen din. For eksempel Internet Explorer.

Men det er ikke dermed sagt at det er det eneste eller beste valget for deg. Der finnes mange nettlesere der ute, de støtter litt forskjellig teknologi og de har litt forskjellige måter å vise frem sidene på.
Når eg har skrevet mine blogginnlegg har eg snakket om de 5 store.

Og skal du drive med webutvikling er det absolutt en fordel å kunne teste sidene sine i mer enn 1 nettleser.

Internet Explorer.
Internet Explorer er laget av Microsoft, det samme selskapet som tilbyr deg Windows. Mange av oss kjører på pc'er med en eller annen versjon av Microsoft Windows, og da er det helt naturlig at nettleseren vi blir tilbudt er laget av samme selskap. Men om du leste mitt forrige innlegg om CSS og fonter så ser du at for at vi skulle få fonten Sansation til å fungere måtte vi laste ned en egen versjon for Internet Explorer.
Internet Explorer har lenge vært på markedet og har bygget seg et godt merkenavn.

Vil du lese mer om denne nettleseren kan du gå her:
http://windows.microsoft.com/en-us/internet-explorer/products/ie/home

Google Chrome.
Dette er en nettleser mange foretrekker, og eg stiller meg i rekken av beundrere her. Google Chrome er laget av Google Inc. Den har en behagelig måte å vise frem informasjonen på. Google Chrome er freeware og har over 32% av markedet for nettlesere.
Vil du lese mer om Google Chrome kan disse sidene være interessante:

http://en.wikipedia.org/wiki/Google_Chrome
https://www.google.com/intl/no/chrome/browser/?hl=no

Opera:
Opera er norsk og startet som et prosjekt i norges største telekom selskap Telenor.
Denne nettlesere er tilgjengelig for Windows, Mac og Linux. For de som bruker mobile enheter er den mulig å laste ned både for android og iOS.
Vil du lese mer om Opera kan du gå til denne siden:

http://www.opera.com/products/

Mozilla Firefox
Hos Mozilla omtaler de seg ikke som et tradisjonelt programvare firma, men som et samfunn. Mozilla står blant annet bak epost klienter som Thunderbird og Sunbird, som er en kalender applikasjon. Også Mozilla har sett verdien av å være cross-plattform, dvs at den ikke bare kan brukes utelukkende av en.

Les mer om Mozilla her:

http://www.mozilla.org/en-US/

Den siste nettleseren eg vil nevne i denne omgang er Safari.
Safari er nettleseren fra Apple og naturligvis den du får med når du skaffer deg en iPhone eller iPad.
Min bruk av Safari for PC er veldig begrenset, men på Apple apparatene iPhone og iPad har det fungert strålende hittil.

Vil du vite mer om denne leseren går du her:
http://www.apple.com/no/safari/

Uten å fortelle deg hva du skal eller ikke skal bruke så er mitt generelle tips at du bør laste ned og teste hver av de. Et mulig problem som kan oppstå da er at en av disse kan sette seg opp som den foretrukne browseren hvis du klikker på linker fra mail, og det er ikke sikkert at du ønsker. Men har du flere apparater kan du jo gjerne fordele nettleserne litt og så sammenligne.

Nedenfor ser du en test av en hjemmeside i alle disse fem nettleserne. Dette er fra september i fjor.


Ha en god helg og lek deg gjerne med html5 og CSS og test dine sider i disse nettleserne.

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!

fredag 10. august 2012

CSS og fonter

I sist innlegg lovet eg å skrive et innlegg om CSS og fonter.
Den siste CSS standarden heter CSS3, og det er denne eg har tatt utgangspunkt i når eg skriver dette innlegget.
Som alltid så refererer eg til www.w3schools.com sine sider.
Og linken til CSS3 er: http://www.w3schools.com/css3/default.asp

Om du har brukt CSS til å behandle font tidligere så er det kanskje noen nye ting å lære seg.

Det fine med CSS3 kontra det som tidligere har vært tilfelle er at man no kan bruke hvilken font man ønsker.

Hver oppmerksom på at det ikke er alle browsere (nettlesere) som støtter det samme, derfor vil det i eksemplene bli definert på en måte slik at flere browsere støtter dine CSS krumspring.
Browserene det henvises oftest til er: Firefox, Chrome, Safari, Opera og Internet Explorer. Det kan kanskje være artig å se siden din i flere browsere etterhvert, så om du ikke har lastet de ned allerede kan det være greit. Om ikke annet enn for å teste noe annet enn det du vanligvis bruker.

Når det gjelder fonter finnes det flere typer. Du kan lese om de her http://www.fileinfo.com/filetypes/font
Du kan gjerne lese litt der om .ttf .otf og .eot

Til dette blogginnlegget synes eg det kan være greit å lage en ny html side og css fil. Om du velger å bruke det du har startet på går det også helt fint.

Mal:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
</BODY>
</HTML>

Du må også lage style.css om du velger å begynne på nytt (legg disse to filene i en ny mappe.)

Den fonten vi skal bruke heter Sansation_Light. Om du ikke har den bør du laste den ned. Et kjapt søk på google.com gir deg muligheten til det.
Om du ikke har en winzip versjon som fungerer og ikke har lyst å kjøpe til 30 USD så går det an å laste ned alternativer. Denne gangen valgte eg å laste ned 7-zip og legge fonten i en mappe som heter 'sansation' som er en undermappe av den du har lagret siden din i.

Igjen velger eg å bruke <h4> som tag til teksten. Legg inn tekst og lukk igjen med </h4>
For å helt tydelig se forskjell så lager eg også en tekst med <h5> taggen. Husk å lukke igjen etter du har skrevet det du skal.

Min html side ble seende slik ut:


<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta name="author" content="Brumle Blichfeldt" />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
<h4>Dette er et forsøk på å bruke CSS3 og @font-face</h4>
<h5>Her er en tekst som ikke er modifisert</h5>
</BODY>
</HTML>

Om du ser etter har eg også lagt inn at det er eg som har laget siden og eg har valgt charset UTF-8. Om du følger de oppskriftene eg tidligere har lagt ut på bloggen vet du at eg bruker UTF-8 uten BOM. Derfor har eg valgt dette charset.

CSS filen vår. Her skal vi legge inn det som får skriften til å endre seg. (Forutsetter at du har fonten)

Vi skal bruke en funksjon som heter @font-face. Ved å bruke funksjonen kan du bruke den fonten du selv måtte ønske.

vi legger inn i style.css

@font-face
{
font-family: minH4font;
src: url('sansation/Sansation_Light.ttf')
    ,url('Sansation_Light.eot'); /* IE9+ */
}

font-family blir på en måte en tag eller krok om du vil der du henger på informasjon om hvilken font du vil bruke. Så når vi etter på skal fortelle hva som skal endres, så kan vi fortelle at vi ønsker å knytte teksten vår til den font-family som heter minH4font.
Som du ser at url'en eg har valgt har eg en mappe som heter sansation der eg har lagt denne fonten inn. Om du skal få dette til å fungere i IE9 må du ha Sansation_Light.eot også tilgjengelig.

Neste skritt er å legge inn følgende i style.css

h4
{
font-family:minH4font;
}

Dette skal få teksten du la inn mellom <h4> og </h4> til å endre seg, mens teksten du la inn mellom <h5> og </h5> vil være som den var.




Om du vil lese litt mer om css og fonter kan dette kanskje være en god side å starte på:
http://www.w3schools.com/css/css_font.asp

Der finnes litt forskjellige videoer på youtube av ymse kvalitet, men om du ønsker å titte ekstra på det kan du kanskje plukke opp noen tips. Som for eksempel siden http://www.fontsquirrel.com/ Denne refereres det mye til!

I neste blogginnlegg om CSS vil eg vise noen andre små triks som kan lage en litt kul bakgrunn på din hjemmeside. For eksempel noe som ligner på et tregulv.

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!

lørdag 4. august 2012

CSS og farger

Hei!!

Endelig har vi fått litt fart på blogginnleggene. Og du lærer no å lage enkle html sider i et litt større tempo enn vi gjorde i starten! BRA!

Sist gang snakket eg litt om HTML og CSS.
For å repetere kjapt.
Denne linjen må ligge i <HEAD> - delen av html siden din for at css skal virke:
<link rel="stylesheet" type="text/css" href="style.css" />

Filen din trenger ikke hete style.css, men så lenge vi kun opererer med 1 CSS fil synes eg det er greit å bruke det som en standard. På større sider kan du om du sjekker kilden se at de har opptil flere css tilknytninger. Det kan gjerne være gunstig når man skal begynne med toppmenyer og menyer på venstresiden osv.

Det er mange veier til ROM. Som kjent fører alle veier dit. Og litt sånn er det med CSS og farger også.
I forrige blogg viste eg litt med HEX-koder. Svart og Hvit.Motsetninger av hverandre. Men det finnes jo så klart et hav av andre farger. Ikke alle farger er gode nok til å bruke på web. Derfor er det laget Charts som viser hva man kan bruke, med HEX-kodene.

For noen år tilbake ble det laget en liste med 216 gode farger å bruke på web. Stort sett skulle det holde, og det er den eg tar utgangspunkt i her.

Listen finner du her:
http://www.w3schools.com/cssref/css_colors.asp
Under overskriften 'Web Safe Colors?'

Bruk gjerne den som referanse til å begynne med, til du føler du har kontroll på CSS og farger.
Men det er flere måter å velge ut fargen på enn å bruke hex-koder som #ffffff

Du har for eksempel RGB, som står for Red, Green, Blue.
Velger du å bruke denne metoden vil det i din CSS-fil se slik ut:

body
{
background: rgb(255,0,0);
}

Som gir fargen rød. Setter du  rgb(0,255,0); vil du få grønn.
Du skjønner sikkert tegningen etterhvert.

Om man tar skrittet videre kan man også definere rgba.
Bokstaven a står her for alpha channel.
Og hva er så en alpha channel? Her må eg si at eg lett kan tråkke i salaten og tar gjerne i mot innspill og forbedringer av blogginnlegget.
Men en alpha channel ifølge w3schools er en forlengelse av RGB som sier noe om gjennomsiktigheten til en farge.

Måten du bruker det på:


body
{
background: rgba(255,0,0,0.5);
}

Skalaen går fra 0.0 til 1.0.
Lek litt med denne for å få den ønskede effekten.

Så langt har vi nevnt: Hex og RGB.
Vi har enda en HSL; Hue, Saturation, Light.
Hue står for fargetone
Saturation står for metning.

I dag stoler eg på ordbøker :)

HSL skriver vi slik i CSS:

body
{
background: hsl(120, 65%, 75%)
}

Test det ut og se hvordan det virker. Også på HSL har vi en alpha channel. Da heter det HSLA.

Det siste eg vil nevne er Cross browser predefined farger.
Her er 147 farger som er predefinert med fargenavn istedet for koder.
Listen finner du her:
http://www.w3schools.com/cssref/css_colornames.asp

Skal du bruke farger på denne måten blir det slik i CSS:

body{
background: blue;
}

Det finnes veldig mange browsere. Ikke alle browsere støtter alt.
Som du sikker har merket henviser eg veldig ofte til www.w3schools.com sin sider.
Så langt har eg funnet det meste av det eg trenger der, og de kan være en grei side å bookmarke.
19.04.2012 skrev eg et blogginnlegg om Delicious.
Som er en smart måte å bookmarke sider på. Bruk denne og bookmark sidene eg har listet opp.

I dag har det vært mye å lese og lære. Men eg håper at du har fått littegrann verktøy å leke med siden din.
Neste gang tenker eg at vi snakker litt om fonter.

Som Dere alle etterhvert vet, så liker eg å friste med en liten video:



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!

fredag 3. august 2012

HTML Kodeskriving VI

Hei igjen!

Etter forrige blogginnlegg fikk eg tilbakemelding om at det å skrive HTML egentlig ikke var programmering siden det ikke skulle kompileres. Eg ser veldig mange steder på nett at det omtales som HTML programmering, men lytter til vedkommende og omdøper det til Kodeskriving. Så får resten av Dere velge selv :)

Sommeren er over og det er tid for å ta fatt på nye blogginnlegg.
Siste innlegg var av det korte slaget, så eg regner med at du er klar for å ta fatt på nye utfordringer.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" /><br />
<h4>Dette bildet er tatt på forsommeren av en iPhone4 og redigert av en iPhone4S med en liten app</h4>
<br />
<h4>Bildet er tatt av Brumle Blichfeldt</h4>
</BODY>
</HTML>

Nå har vi et godt utgangspunkt for ett av temaene eg vil ta opp; CSS
Men før eg skal gå inn på det temaet vil eg fortelle om noe som heter 'id'
'id' er en Global attributt. Det vil si at når du har tildelt et element den attributten vil det elementet kunne adresseres av blant annet en CSS fil. Eller et Javascript.
Vi skal etterhvert se på CSS. Det står for Cascading Style Sheets og er blitt mer eller mindre standard for måten layout/grafikk defineres på en html side.
På side 2 har vi et bilde, eller et <img>. Dette kan vi tildele en 'id'
La oss kalle bilde for bilde2. Bak taggen <img> som definerer dette bildet legger vi til attributten slik. id="bilde2"

Da vil html kode for side2.html se slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<img src="images/bilde2.jpg" id="bilde2" width="200" height="200" alt="bilde 2" /><br />
<h4>Dette bildet er tatt på forsommeren av en iPhone4 og redigert av en iPhone4S med en liten app</h4>
<br />
<h4>Bildet er tatt av Brumle Blichfeldt</h4>
</BODY>
</HTML>

Med CSS kan vi definerer farger, vi kan dele inn siden vår i deler (for senere å bygge menyer), vi kan bestemme posisjonen til elementene ved å knytte css opp mot 'id'en som vi nettopp definerte, vi kan endre tekst; font og farger.

Nok snakk om CSS. La oss opprette en css fil og sette i gang! Eg tar utgangspunkt i at du no vet hvordan du skal opprette nye dokumenter til websiden. Lag en ny tom side som du lagrer som style.css
Dette skal du lagre i samme mappen som dine html sider. Har du gjort det rett vil ikonet i mappen se ut som et papirark med et tannhjul på og under egenskaper vil du få beskjed om at det er en css fil. Egenskapene til en fil finner du ved å høyreklikke.
La style.css bare være tom for øyeblikket. VI kommer fort nok i gang med tastingen.

Nå skal vi knytte sammen html sidene dine og css filen.
Det gjør vi ved å legge inn følgende informasjon inn i <HEAD>-taggen:

<link rel="stylesheet" type="text/css" href="style.css" />

Dette gjør du på begge html sidene dine.Grunnen til dette er, og det er også hovedformålet med CSS, at du da kan endre fellesinformasjon ett sted.
Tenk deg at du har laget 15-20 html sider og må endre informasjon hele tiden på alle. Det er tungvint!

Din <HEAD>-tag på begge sidene skal se slik ut:

<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>

Nå skal vi legge inn den første informasjonen i vår style.css
Lim inn følgende:

body
{
background: #000000;
}

Du skjønner kanskje alt no at noe skal skje med bakgrunnen på websidene.
Lagre style.css og om du allerede har sidene dine oppe, Trykk F5.

#000000 er en HEX kode for fargen svart. Der finnes andre måter å definere farger på med CSS, men eg foretrekker personlig HEX-kodene.

På min side2.html valgte eg å skrive littegranne skrift med <H4>.
<H4> kan vi også behandle med CSS.
Legg inn følgende:

h4
{
color: #ffffff;
}

#ffffff er koden for fargen hvit.
Du ser måten eg skriver koden inn i CSS på.
Element som skal endres på
Åpningsbracket
Hva som skal endres: hvordan;
Lukkebracket

Du har no fått en liten smakebit på CSS. Kanskje du kan endre litt på fargene selv. Om du har lest mine tidligere blogginnlegg om det heksadesimale tallsystem så vet du at det går fra 0-9 og videre fra A-F. Av de 6 tallene du kan endre på kan du erstatte en 0 med hvilket som helst av de tallene i det heksadesimale system.

Skal snakke litt mer om css og farger i et senere innlegg!

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 2. august 2012

HTML programmering Del V

For en stund siden lovet eg at eg skulle komme tilbake med en ny blogg der eg skulle vise hvordan man gjør bildene om til linker.

Og løfter skal man holde. Det er vi opplært til alle som en.

Sist vi holdt på avsluttet vi med følgende webside:

<!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>
<br />
<img src="images/bilde1.jpg" alt="bilde 1" /><br />
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" /><br />
<img src="images/bilde3.jpg" alt="bilde 3" />
</BODY>
</HTML>

La oss ta utgangspunkt i bilde 2 som er det minste bildet.

Erstatt linjen som ser slik ut:
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" /><br />

Med en linje som ser slik ut:
<a href="side2.html" target="_blank"> <img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" border="0"></a><br />

Det vi nå får er et bilde som er omgjort til en link. Klikker du på bildet slik du ville gjort med en link kommer du til side2.html som vi tidligere har laget. Med mindre du selv har gjort noe får du opp en blank side.

Til neste gang kan du gjerne leke litt med side2.html slik at den senere ikke bare kommer opp som en blank side. Så skal eg gjøre det samme.

Det nærmer seg et punkt der det er naturlig å snakke litt om CSS. Det kan vi se litt på neste gang når vi har 2 sider å leke med!

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 1. august 2012

Outlook.com

Hei igjen!

Flere av nettstedene som har hovedfokus på it-relaterte hendelser har i dag skrevet om at Microsoft no har kommer med outlook.com. Den ble lansert  i går.
Når eg skal oppdatere meg på it-nyheter starter eg som oftest med å gå inn på denne siden:
http://itgutta.no/it-nyheter/

En av de som omtaler Microsoft sin nye mail tjeneste på web er ComputerWorld, og en av tingene de legger vekt på er at denne nye tjenesten etterhvert skal overta for hotmail.

Det var jo klart at eg måtte teste denne!

Om du tar opp siden outlook.com og logger deg inn med hotmail kontoen din setter du i gang en prosess for å gjøre hotmail om til outlook.

I prosessen får du mulighet til å endre brukeren din, så om du var lite fornøyd med hotmailnavnet ditt har du nå fått en ny sjanse! Om du er raskt ute slipper du kanskje å bli anita527. Enda en i rekken av personer som har nesten samme mailadresse som deg.

Outlook.com er ganske flott å se på, men minner veldig om noe man har sett før om man har fartet rundt på nettet en stund.

Prosessen for å bli Outlook.com bruker er nesten smertefri, men Microsoft har fremdeles noen få ting de burde endret på... Som for eksempel å kutte ned på antall meldinger med sifre man må taste inn for at man skal få opprettet en konto, som når man har logget av og på igjen et par ganger virker som den skal.

En annen fin ting er at Microsoft på en enkel måte lar deg flytte alle de gamle hotmailene inn i en egen mappe og lover å videresende mailer som kommer til den gamle adressen og flytte de til denne mappen.
Sånt liker vi!

For ingenting er kjekkere når man får en ny mail enn at den faktisk er TOM, samtidig som man ikke mister det gamle!

Om noen vil lese ComputerWorld sin artikkel er dette linken:
http://www.idg.no/computerworld/article250258.ece

Her er en liten video som forteller litt (amerikansk tale)


En annen ting som gjerne er vært å nevne før man logger ut er at outlook.com er sterkt knyttet opp mot facebook og twitter. Og knyttet til Microsofts Sky tjeneste.

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!