På denna sida ges ett antal länkar till resurser som kan vara användbara för webbutvecklare. Det handlar om beskrivningar av tekniker, referenslistor, bildarkiv, etc. Denna länksida används i flera kurser och tar därmed också upp tekniker som inte ingår i alla kurser, men du bör hitta rätt genom rubrikerna i rutorna.
Allmänna resurser och standards
- W3C
- Webbplats för organisationen som bl.a. tar fram standards för många av de språk och tekniker som används på webben.
- WHATWG
- Webbplats för organisationen som arbetar med utveckling av HTML Living Standard.
- w3schools.com
- Denna webbplats har många bra tutorials och referenslistor för bl.a. HTML, CSS och JavaScript.
- Mozilla Developer Network
- "Resurser för utvecklare, av utvecklare." Referenslistor och beskrivningar av HTML, CSS, JavaScript, m.m.
- Can I use
- Man kan skriva in en kod i HTML, CSS eller JavaScript och kontrollera i vilka webbläsare det är implementerat. Bra, då man använder sådant som är nytt i språken.
HTML
- Referenslista för HTML
- Taggar och attribut i HTML (w3schools).
- Validator för HTML
- För validering av HTML-kod.
- Validator för HTML
- Samma validator som ovanstående, fast på en annan server och url.
- Character Entity Reference Chart
- Lista med många olika entiteter som finns definierade i HTML.
- CUTF-8 encoding table and Unicode characters
- Lista med alla tecken i UTF-8. Listan är uppdelad i flera block, där man väljer block i en dropdown-meny i början av sidan.
CSS
- Referenslista för CSS
- Egenskaper i CSS (w3schools).
- Zen Garden
- Klassiskt exempel på hur en webbsida kan presenteras på olika sätt med CSS.
- W3C CSS Validation Service
- För validering av CSS-kod.
Responsiv webbdesign
- Responsive Web Design
- Marcottes artikel där responsiv webbdesign introduceras (Ethan Marcotte, A List Apart).
- Why you don't need device specific breakpoints
- Artikel om responsiv design (Justin Avery, responsivedesign.is).
- Using the viewport meta tag to control layout on mobile browsers
- Beskrivning av meta-taggen för val av viewport (Mozilla Developer Network).
JavaScript
- Referenslista för JavaScript
- JavaScript och HTML DOM (w3schools).
- JavaScript på MDN
- Sidorna om JavaScript på Mozilla Developer Network.
BOM och DOM
- JavaScript HTML DOM
- Tutorial för / sammanfattning av DOM och koppling till JavaScript (w3schools).
- JavaScript Window - The Browser Object Model
- Tutorial för / sammanfattning av BOM och koppling till JavaScript (w3schools).
- JavaScript and HTML DOM Reference
- Länkar till referenslistor för BOM- och DOM-objekt (w3schools).
XML och DTD
- XML Tutorial
- Introduktion till XML (w3schools).
- DTD Tutorial
- Introduktion till DTD (w3schools).
- What is XML Good For?
- Film där föreläsaren ger en bra förklaring av XML. Några år gammal, men fortfarande aktuell. Urusel filmteknik, men lyssna på vad han har att säga. Titta (lyssna) gärna på fler filmer från författaren (BobBoiko) - en hel del är intressanta.
- XML Validator Online
- För validering av XML-kod mot en DTD. Denna validator kräver att både XML- och DTD-koden finns i samma fil.
- Validate an XML file
- En annan validator för validering av XML-kod mot en DTD. I denna validator skickar man först upp XML-filen och sedan DTD-filen.
JSON
- JSON - Introduction
- Introduktion och tutorial till JSON (w3schools).
- Introducing JSON
- Kort beskrivning och illustration av syntaxen för JSON.
Samma sida på svenska
API för Flickr och Google Maps
- The App Garden
- Dokumentation av Flickr API.
- Leaflet
- Tutorial och dokumentation av ett bibliotek för att hantera interaktiva kartor. Det använder sig av OpenStreetMap
- Google Maps API
- Exempel och referenslista av Google Maps API. Referenslistan är inte så lätt att hitta i, så det brukar vara bäst att börja med tutorials och utgår från dem.
- Google Maps Tutorial
- Introduktion och exempel på Google Maps API (w3schools).
Internet
- Warriors of the Net
- Klassisk film som illustrerar tekniker vid kommunikation på Internet (TNG Medialab). Klicka på länken Movie, för att välja version av filmen eller gå till den direkt på YouTube.
- Svenska datatermgruppen
- Rekommendationer om hur aktuella datatermer bör hanteras på svenska.
Användbarhet, användartest, m.m.
- Usability.gov
- Guide för utveckling av "usable & useful web sites" (U.S. Department of Health & Human Services). Webbplatsen uppdateras inte längre, men många intressanta artiklar och guider med råd och tips finns kvar.
- Nielsen Norman Group
- Artiklar, m.m. om användbarhet och användarupplevelse.
- Exempel på användning av en pappersprototyp
- Kort film som visar hur en pappersprototyp kan användas.
- How to Conduct a Simple User Test with Jakob Nielsen
- Film med en intervju av Jakob Nielsen.
- Usability testing
- Av Amberlight. Delvis reklam för företaget, men bra illustration av varför, när och hur man genomför användartest.
Tillgänglighet
- Web Accessibility Initiative, WAI
- W3C:s arbetsgrupp och dokument om tillgänglighet på webben.
- Vägledning för webbutveckling
- Riktlinjer för webbutveckling och tillgänglighet från DIGG, Myndigheten för digital förvaltning.
Sökmotoroptimering (SEO, Search Engine Optimization)
- Riktlinjer för webbansvariga
- Googles tips på hur man anpassar webbsidorna för deras sökmotor (Google).
- Search Engine Optimization (SEO) Starter Guide
- Riktlinjer för sökmotoroptimering (Google).
- Google sitemap
- Information om hur man skapar en webbplatskarta för Googles sökmotor (Google).
Obs! Detta är inte samma sak som en webbplatskarta (site map) som man kan ha med på webbplatsen som hjälp till användaren. - HTML Sitemaps, XML Sitemaps or Both?
- Film där skillnaden mellan webbkarta för användaren och webbkarta för sökroboten förklaras.
- What is An XML Sitemap?
- Film med ett exempel på XML sitemap för sökroboten.
- How to Add a Sitemap.xml File to Google Webmaster Tools
- Film som visar hur man laddar upp en XML sitemap till Google Tools.
- Vad är SEO Optimering och Sökmotoroptimering?
- En introduktion till vad SEO är och olika begrepp inom området (Sitea).
- SEO-analys av din webbsida
- En del företag som erbjuder SEO-tjänster, har också ett gratis verktyg för en SEO-analys. Följande är några exempel:
- Pineberry:
https://www.pineberry.com/analysverktyg/ - Effektiva hemsidor:
https://www.effektivahemsidor.se/seo-test-seo-analys/ - Website SEO Checker:
https://websiteseochecker.com/
- Pineberry:
Bildarkiv och andra media
- pixabay.com
- Arkiv med många bilder som kan användas gratis.
- Wikimedia Commons
- Många bilder, ljud och filmer som får användas under creative commons - många helt fritt.
- Icons Search
- Många ikoner i olika kategorier.
- Unsplash
- Arkiv med många bilder i olika kategorier.
- pxhere
- Arkiv med många bilder.
- Royalty-Free Music
- En samling med musik som får användas helt fritt. Inspelade av Kevin MacLeod.
- Google fonts
- Olika typsnitt som är gratis att använda.
- Upphovsrättslagen
- Sveriges lag om upphovsrätt (Sveriges riksdag).
- Vad är upphovsrätt?
- Kort beskrivning av upphovsrätt (Internetstiftelsen).
Kartor, satellit- och flygbilder
- Google maps
- Man kan ta fram kartor, satellitbilder, gatuvy och vägbeskrivningar. Genom menyerna på Google maps kan man få fram kod för att länka eller bädda in dem på sin egen webbplats.
- Eniro kartor
- Här kan man också få fram kod för att bädda in en karta. Man kan dock inte bädda in en flygbild, utan där erbjuder de endast en länk till vald plats.
- Hitta.se
- På denna webbplats får man endast en länk till kartan. Man får ingen kod för att bädda in den.
- OpenStreetMap
- En annan trevlig karttjänst, som har detaljerade gatukartor för tätorter. Där kan man också få fram kod för att bädda in en karta.
- Lantmäteriet kartor
- På Lantmäteriets webbplats kan man bl.a. hitta historiska kartor, som kan vara fria att använda, då de är äldre än 50 år. Det är dock inte så lätt att hitta, utan man får läsa deras information noga.
- Får man visa flygbilder på sin webbplats?
- Det finns lagar och regler som reglerar hur flygbilder får spridas. Även sådana bilder som man själv tar med en drönare. Du kan läsa mer om det på denna webbplats om spridningstillstånd.
Webbtjänster
- Google anpassad sökmotor
- Googles tjänst för att skapa en anpassad sökmotor (Google).
- Google Analytics
- Googles tjänst för besöksstatistik (Google).
- Gratis Formulär på olzzon.com
- Tjänst för att kunna skicka ett formulärs innehåll till en epost-adress. Du kan själv förändra formuläret som ges i deras exempel.
- Vackertväder.se
- Genom länken Vädervidget högst upp till höger, kan du skapa en vädervidget för vald plats och inkludera den på din egen webbsida.
Program och verktyg
- Visual studio Code
- Editor med stöd för många språk, inklusive HTML, CSS och JavaScript. Många tillägg kan installeras för mer stöd och hjälp i programmet.
- Git
- Versionshantering för att hålla reda på förändringar i filer i projekt. Även nödvändigt för att kunna koppla samman Visual Studio Code med GitHub och Netlify.
- GitHub
- Lagring av projekt i externa "resposities", som kan vara publika eller privata.
- Netlify
- Publicering av webbsidor på webben. Använder s.k. jamstack och stödjer webbsidor med klientbaserad teknik.
- Pixlr
- Bildredigeringsprogram som körs via webbläsaren. Finns två varianter, där Pixlr E är mer avancerad och liknar Photoshop i arbetssätt och gränssnitt.
- one.com
- Webbhotell, epost plus en del andra tjänster. Till en ganska låg kostnad kan man registrera en domän och få ett utrymme för webbplats och epost. F.ö. det webbhotell jag använder för enur.se.
- Cyberduck
- Enkelt, effektivt och gratis FTP-program för överföring av filer till t.ex. en webbserver. Finns för Mac OS och Windows.
- Audio Converter online
- Gratis online-verktyg för att konvertera ljudfiler till olika format.
- Video Converter online
- Gratis online-verktyg för att konvertera videofiler till olika format.
YouTube-kanaler
- Kevin Powell
- Han tar främst upp CSS och är bra på att förklara och exemplifiera olika tekniker och nyheter i språket.
- Traversy Media
- En hel del olika klientbaserade tekniker (även programmering) och en del om vad man bör tänka på och kunna som webbutvecklare. Det har också varit många filmer med "gäster" med andra bloggare eller utvecklare.
- Web Dev Simplified
- Många bra demos och förklaringar av tekniker i HTML, CSS, JavaScript och mycket mer.