Hi there!
This particular blog post is a result of me spending hours to find a solution. This fall I have been working with HTML5 as a subject on my journey of getting a bachelor degree. And the end term project is to make a solution which updates a map with information regarding whether there are or are not free parking spaces in one of four parking areas.
The incoming data is a simulated Server Sent Event which sends data each 5 seconds.
Regarding the state of the area the markers are going to change color. Red if full, yellow if less than 20% and blue if more than 20% free parking spaces. In addition the user is supposed to be able to set a limit of minimum free parking spaces in a parking zone using a slider. If it is too few parking spaces available, the marker for that area is supposed to disappear. For this project I made my own custom made markers.
And this is where the problems that led to this blog post starts.
For my solution I chose to go for the google map api, which is the one most likely to be used if I ever get a web page developer position. At this point I had completed too much of the project to go back and start over regarding my time limit. As always I tend to go for a solution that is 1 part by the book and 1 part by my head, and my head had been making this part extra difficult. If you read up on google api multiple markers, they tend to go for an array of markers. I had done no such thing.
I had made if-statements for the placement of each marker on the map. Something like this:
if ((parkingStatus == total) && (userInput === 0)) {
image = 'img/red.png;
}
In googles map api documentation and on the pages of stackoverflow.com the advice to hide the markers were:
Google Remove Markers
https://developers.google.com/maps/documentation/javascript/examples/marker-remove
Stackoverflow:
http://stackoverflow.com/questions/3647711/what-is-the-difference-between-marker-setvisiblefalse-and-marker-setmapnul
Well... none of these worked for me, so I thought that I could use something like this:
if (free<= userInput) {
image = '';
}
This only replaced my custom made marker with google map standard marker.
After I had been giving this some thought I came up with the solution. What I wanted to appear on the map was NULL. So I changed my If-statement so it looked like this:
if (free<= userInput) {
image = 'NULL';
}
This actually worked! So whenever the simulated Server Sent Events changes the free parking spaces to something less than the user sets as a limit, that marker disappears, and it reappears when the conditions change. No buttons involved.
If I do not get broken up into bits or adopt a binary form it will soon be a new blog with new experiences from my IT adventures!
Viser innlegg med etiketten html5. Vis alle innlegg
Viser innlegg med etiketten html5. Vis alle innlegg
søndag 16. november 2014
onsdag 14. mai 2014
HTML5 - favicon
Heisann!
"Hva nå?", tenker du kanskje når du leser overskriften.
Hva er favicon?
De fleste brukere av internett i dag kjører på nettlesere som er fanebasert, og for enkelte av oss kan det fort bli veldig mange faner.
"Hva nå?", tenker du kanskje når du leser overskriften.
Hva er favicon?
De fleste brukere av internett i dag kjører på nettlesere som er fanebasert, og for enkelte av oss kan det fort bli veldig mange faner.
Facebook, twitter, linkedIn, google, Adobe, listen kan bli ganske lang etter en kveld med mye surfing og problemløsing. Mange av disse sidene har egne små ikoner. Dette er det som kalles favicon. Når eg startet jakten på hvordan dette skulle legges inn på en side trodde dumme meg at dette var så enkelt som å legge en <img... inn i <title>-taggen.
Den gang ei.
Så var jakten i gang, uten at eg da visste at det var det som var kalt favicon. Så det ble google søk med image og title og ingen av resultatene ga meg helt det eg ville, før eg tilfeldigvis ramlet inn på en side som omtalte elementer man kan ha i <head>-taggen.
Først fant eg en side som fortalte meg at det var bare å laste opp et bilde til en online tjeneste og konvertere det, prøvde det, fikk ned en fil og var like langt. Etter litt mer leting fant eg ut at et slikt bilde må være 16x16, ha en oppløsning på 72 pixels/inch, en farge oppløsning på RGB Color / 16 Bit, en bakgrunn som er hvit eller gjennomsiktig og være lagret som en .ICO fil. Dette er en oppgave for Photoshop tenkte eg...
Tidligere i vår pga studiene mine inngikk eg en studentavtale med Adobe om Photoshop CC. Så eg satte i gang programmet, la inn innstillingene og begynte å designe, bare for å IKKE finne hvordan eg skulle lagre det som en .ICO fil. Etter mye leting og lesing på forumer fant eg ut at nå prøver eg en online tjeneste.
Tjenesten eg fant var http://www.favicon.cc/ som viste seg å ha et veldig greit brukergrensesnitt som gjør at man kommer igang med det samme. Samtidig som man designer får man se kordan det vil se ut
Det fine med denne er at den utvikler seg i takt som man legger inn designet. Måten man gjør det er å finne den heksadesimale fargekoden man skal bruke, og så kan man som eg gjorde bygge den opp brikke for brikke. I og med at dette er et veldig lite bilde så går det greit å gjøre det på den måten.
Etter å ha lastet opp bildet til serveren eg benytter var det å forsøke å oppdatere Chrome, Internet Explorer (uten hell), som eg har skrevet om i andre blogginnlegg så er det ikke alle nettlesere som reagerer likt på samme kode, så man må ta høyde for slike ting når man utvikler. Mozilla Firefox derimot aksepterte koden eg brukte og eg fikk frem mitt favicon der.
Enden på visen er at eg nok må lete meg frem til en kode som fungerer.
Har du et godt svar så ta gjerne å lim det inn som en kommentar!
...og jakten fortsetter...
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 28. desember 2012
Vel overstått Jul
Heisann!
Da var julaften forbi, alle eksamener er levert og forhåpentligvis bestått.
Men hva har man igjen etter et halvt år på skole? Bortsett fra et hode som er tungt, mange flere timer foran pc'en enn man kanskje har godt av og avslutningsvis en førjulstid bestående av eksamener?
Man har fått kunnskap! Kunnskap til å gjøre mer avanserte ting enn man kunne før.
Så tenker kanskje du som leser dette... Hva slags ting? Det er da man må se på HVA man har lært.
En av de "tingene" eg har gått gjennom det siste halve året er HTML, hvordan man bygger opp en webside. Hvordan man kan kombinere forskjellige teknologier, og også hva som er tilgjengelig.
Med HTML5 nå ferdig definert av W3C så er det jo bare å sette i gang og utvikle HTML5 sider.
Hva skal man så utvikle? For min egen del blir det å videreutvikle den websiden eg allerede har. Tilføre nye elementer og gjøre et forsøk på å få den til å virke mer profesjonell.
I november i år skrev eg et innlegg der eg nevnte at det kanskje kom en blogg med et tips om årets jule app. For min del har bruk av iPhone, iPad, pc bestått av noe heeelt annet enn skolerelaterte temaer. Spill har preget det meste av bruken. Og det er jo litt det julen handler om. Å koble av, kanskje koble ut og gjøre noe annet.
I denne bloggen har ikke fokuset på spill vært det som har tatt størst plass, men denne gangen, i en av året 2012s siste innlegg vil eg fremheve ett spill som har tatt min tid mer enn en gang denne julefeiringen.
"Where's My Water?" av Disney som er i sjangeren av spill som krever at man kan utføre forskjellige hendelser i riktig rekkefølge. Av og til starter brettet med det samme så man ikke får sjans til å tenke og planlegge sitt neste trekk, men det er bare litt av morroa!
Spillet passer for de fleste fra sånn ca skolealder til godt opp i åra!
Om du vil lese mer om det er linken her:
https://itunes.apple.com/no/app/wheres-my-water/id449735650?l=nb&mt=8
Ønsker Dere alle en fremdeles God Jul og et Godt nytt år i 2013!
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!
Da var julaften forbi, alle eksamener er levert og forhåpentligvis bestått.
Men hva har man igjen etter et halvt år på skole? Bortsett fra et hode som er tungt, mange flere timer foran pc'en enn man kanskje har godt av og avslutningsvis en førjulstid bestående av eksamener?
Man har fått kunnskap! Kunnskap til å gjøre mer avanserte ting enn man kunne før.
Så tenker kanskje du som leser dette... Hva slags ting? Det er da man må se på HVA man har lært.
En av de "tingene" eg har gått gjennom det siste halve året er HTML, hvordan man bygger opp en webside. Hvordan man kan kombinere forskjellige teknologier, og også hva som er tilgjengelig.
Med HTML5 nå ferdig definert av W3C så er det jo bare å sette i gang og utvikle HTML5 sider.
Hva skal man så utvikle? For min egen del blir det å videreutvikle den websiden eg allerede har. Tilføre nye elementer og gjøre et forsøk på å få den til å virke mer profesjonell.
I november i år skrev eg et innlegg der eg nevnte at det kanskje kom en blogg med et tips om årets jule app. For min del har bruk av iPhone, iPad, pc bestått av noe heeelt annet enn skolerelaterte temaer. Spill har preget det meste av bruken. Og det er jo litt det julen handler om. Å koble av, kanskje koble ut og gjøre noe annet.
I denne bloggen har ikke fokuset på spill vært det som har tatt størst plass, men denne gangen, i en av året 2012s siste innlegg vil eg fremheve ett spill som har tatt min tid mer enn en gang denne julefeiringen.
"Where's My Water?" av Disney som er i sjangeren av spill som krever at man kan utføre forskjellige hendelser i riktig rekkefølge. Av og til starter brettet med det samme så man ikke får sjans til å tenke og planlegge sitt neste trekk, men det er bare litt av morroa!
Spillet passer for de fleste fra sånn ca skolealder til godt opp i åra!
Om du vil lese mer om det er linken her:
https://itunes.apple.com/no/app/wheres-my-water/id449735650?l=nb&mt=8
Ønsker Dere alle en fremdeles God Jul og et Godt nytt år i 2013!
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 24. oktober 2012
HMTL5 og video-tag
Heisann!
Bloggen min heter "Mitt IT-eventyr", og innimellom så føles tiden foran pc'en slik.
Som et eventyr á la Alice i Eventyrland som er blitt digitalisert.
Forleden dag fikk vi på skolen i oppgave å finne en av våre egne videoer og lage en html side med den som en del av den. Kordan vi valgte å gjøre det var opp til oss. Ukjent med utfordringene eg kunne komme til å støte på kastet eg meg over denne "enkle" oppgaven. Hele leksjonen på 5 ulike oppgaver skulle ikke ta meg mer enn kanskje en time, mente eg.
Eg startet med nullpunktet mitt, slik eg alltid gjør med standard html tagging for å lage meg en html fil og knytte den til en standard style.css fil. Alt slik kan du lese om i tidligere innlegg på denne bloggen.
Så bestemte eg meg for å bruke en video fra min iPhone4. Filformat .mov Først rotet eg meg inn på en runddans med <object> - taggen. Der alt viste seg å virke fint i browseren Google Chrome (på min maskin). Fortsatte testen med de 4 andre browserne eg bruker til slik testing og oppdager plutselig at dette ikke virker slik det var tiltenkt. Jaja... Vi får prøve på nytt.
De fem eg bruker er Google Chrome, Firefox, Internet Explorer, Safari og Opera.
Som sagt, eg skulle prøve noe annet. Så eg satt i gang med HTML5 sin <video> tag. Og en .mov fil. Eller quicktime format om du vil..
Før eg går videre vil eg du skal forstå at video, video redigering, formater og slikt er ikke daglig kost. Så eg satte i gang og laget siden med nytt mot.
Denne gangen var opplevelsen at videosnutten min ble vist frem "oppned", noe som var veldig frustrerende når eg skjønte at eg kanskje måtte filme en ny snutt. Så siden tanken min var at alt kan ordnes så fant eg en måte via CSS å snu den på! Og gleden over å ha klart det varte akkurat så lenge som det tar å innse at også 'play' knappen og alle andre knapper nå var på hodet.
Etter et desperat søk på google innså eg at det var mulig å lage en knapperad i javascript, men nå hadde eg allerede brukt så mye tid at eg ønsket ikke den biten i tillegg.
Så da ble det nytt forsøk og et tredje forsøk. Legg merke til at eg fremdeles roter med filer med .MOV format.
Lager det til slik eg tror det skal med både visning av feil og rett video, sjekker at alt fungerer i mine browsere og så legger eg det ut på serveren, kun for å oppdage at det er kun hjemme hos meg det fungerer.
Leser over leksjonen igjen, og begynner å innse at eg kanskje burde heller prøve å få et annet format på disse snuttene. Så en ny jakt starter, jakten på en converter. Som tidligere skrevet er ikke dette mitt største interessefelt (så langt), men en gang skal være den første.
Så nedlastingsraten i heimen økte sakte, men sikkert i takt med stressnivået.
Følgende convertere ble prøvd:
EasyHTML5 Video
MIRO Video Converter
Any Video Converter
Handbrake
og sist, men ikke minst...
VLC
Når eg hadde vært gjennom denne runden hadde eg konvertert begge snuttene til både .mp4 OG .ogg
Som er formater som skal virke bra med <video> - taggen.
Joda, det skaffet meg noen erfaringer, og eg har denne gangen fått testet ny kunnskap til gangs.
Fremdeles synes eg det minner om et eventyr, for i de fleste eventyr ender det godt. Det gjorde det også denne gang, trodde eg i går når eg slo av maskinen for å legge meg, nesten en time etter eg BURDE vært i seng.
Kun for å oppdage når eg kom på jobb i dag og skulle se på resultatet i en versjon av IE9. Jammen?Det virket jo..? Så klart skjønte ikke en amatør som meg dette. Der var ikke noe som tydet på at her var noen videoer. Eg husket å ha lest at eg burde legge inn en tekst/melding til brukeren i slike situasjoner.Men det hadde eg jo ikke gjort. Hallo? Det virket jo?
Så det er klart at det første eg gjorde når eg kom hjem var å rette opp den lille tabben. OG testet mot IE9.
Om DU har lyst å lage en html side med video så kan du lære om det her:
http://www.w3schools.com/html/html5_video.asp
Og der kan du også teste om browseren/nettleseren din takler dette.
Og her er videoen som eg KANSKJE burde sett FØR eg rotet meg inn i dette på egen hånd ;)
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!
Bloggen min heter "Mitt IT-eventyr", og innimellom så føles tiden foran pc'en slik.
Som et eventyr á la Alice i Eventyrland som er blitt digitalisert.
Forleden dag fikk vi på skolen i oppgave å finne en av våre egne videoer og lage en html side med den som en del av den. Kordan vi valgte å gjøre det var opp til oss. Ukjent med utfordringene eg kunne komme til å støte på kastet eg meg over denne "enkle" oppgaven. Hele leksjonen på 5 ulike oppgaver skulle ikke ta meg mer enn kanskje en time, mente eg.
Eg startet med nullpunktet mitt, slik eg alltid gjør med standard html tagging for å lage meg en html fil og knytte den til en standard style.css fil. Alt slik kan du lese om i tidligere innlegg på denne bloggen.
Så bestemte eg meg for å bruke en video fra min iPhone4. Filformat .mov Først rotet eg meg inn på en runddans med <object> - taggen. Der alt viste seg å virke fint i browseren Google Chrome (på min maskin). Fortsatte testen med de 4 andre browserne eg bruker til slik testing og oppdager plutselig at dette ikke virker slik det var tiltenkt. Jaja... Vi får prøve på nytt.
De fem eg bruker er Google Chrome, Firefox, Internet Explorer, Safari og Opera.
Som sagt, eg skulle prøve noe annet. Så eg satt i gang med HTML5 sin <video> tag. Og en .mov fil. Eller quicktime format om du vil..
Før eg går videre vil eg du skal forstå at video, video redigering, formater og slikt er ikke daglig kost. Så eg satte i gang og laget siden med nytt mot.
Denne gangen var opplevelsen at videosnutten min ble vist frem "oppned", noe som var veldig frustrerende når eg skjønte at eg kanskje måtte filme en ny snutt. Så siden tanken min var at alt kan ordnes så fant eg en måte via CSS å snu den på! Og gleden over å ha klart det varte akkurat så lenge som det tar å innse at også 'play' knappen og alle andre knapper nå var på hodet.
Etter et desperat søk på google innså eg at det var mulig å lage en knapperad i javascript, men nå hadde eg allerede brukt så mye tid at eg ønsket ikke den biten i tillegg.
Så da ble det nytt forsøk og et tredje forsøk. Legg merke til at eg fremdeles roter med filer med .MOV format.
Lager det til slik eg tror det skal med både visning av feil og rett video, sjekker at alt fungerer i mine browsere og så legger eg det ut på serveren, kun for å oppdage at det er kun hjemme hos meg det fungerer.
Leser over leksjonen igjen, og begynner å innse at eg kanskje burde heller prøve å få et annet format på disse snuttene. Så en ny jakt starter, jakten på en converter. Som tidligere skrevet er ikke dette mitt største interessefelt (så langt), men en gang skal være den første.
Så nedlastingsraten i heimen økte sakte, men sikkert i takt med stressnivået.
Følgende convertere ble prøvd:
EasyHTML5 Video
MIRO Video Converter
Any Video Converter
Handbrake
og sist, men ikke minst...
VLC
Når eg hadde vært gjennom denne runden hadde eg konvertert begge snuttene til både .mp4 OG .ogg
Som er formater som skal virke bra med <video> - taggen.
Joda, det skaffet meg noen erfaringer, og eg har denne gangen fått testet ny kunnskap til gangs.
Fremdeles synes eg det minner om et eventyr, for i de fleste eventyr ender det godt. Det gjorde det også denne gang, trodde eg i går når eg slo av maskinen for å legge meg, nesten en time etter eg BURDE vært i seng.
Kun for å oppdage når eg kom på jobb i dag og skulle se på resultatet i en versjon av IE9. Jammen?Det virket jo..? Så klart skjønte ikke en amatør som meg dette. Der var ikke noe som tydet på at her var noen videoer. Eg husket å ha lest at eg burde legge inn en tekst/melding til brukeren i slike situasjoner.Men det hadde eg jo ikke gjort. Hallo? Det virket jo?
Så det er klart at det første eg gjorde når eg kom hjem var å rette opp den lille tabben. OG testet mot IE9.
Om DU har lyst å lage en html side med video så kan du lære om det her:
http://www.w3schools.com/html/html5_video.asp
Og der kan du også teste om browseren/nettleseren din takler dette.
Og her er videoen som eg KANSKJE burde sett FØR eg rotet meg inn i dette på egen hånd ;)
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!
Abonner på:
Innlegg (Atom)