Inläggsplanering

Tankar och idéer om vad vi kan komma att ta upp, täcka och gå igenom i framtiden

– Och fler kan tillkomma

  • Webbutveckling diskuterat för bättre förståelse för vad som ingår
  • HTML5 – Grunder och nybörjare
    • tick Bakgrund, syfte och introduktion – Länk (inkl. terminologi – Länk)
    • tick Grunder och Syntax – Basics för att kunna koda på egen hand – Länk
    • tick Goda praktiker (praxis) från XML – Länk
    • tick Webbsidors uppbyggnad granskad i detalj, dissekerad till de fundamentalaste byggblocken – Länk
    • tick Var man skriver HTML-koden – Länk
    • tick Inspektion av HTML-kod i webbläsaren – Länk
    • tick Hur man sparar och sen förhandsgranskar resultatet av sin HTML-kod – Länk
    • tick ID och Klasser för selektion och identifiering av element (inkl. användning av multipla klasser/ID:n för ett och samma element) – Länk
    • tick HTML-Kommentarer – Syftet bakom och exempel på användning – Länk
    • tick HTML5-Semantik – Innebörd och funktion – Länk
    • tick Validering av sin HTML-kod – Vad det är och varför man bör göra det – Länk
    • tick HTML Wrappers – vad/varför och vilken funktion de fyller – Länk
    • tick HTML5 Grundmall att utgå från – Länk
    • tick Introduktion till visualisering och realisation av layout från scratch och skiss med HTML5-semantiska element – Länk
    • tick Ankarlänkar till specifika delar av webbsidor via ID på sidan, angivet i URL:en för sidan – Länk
    • tick HTML Länkar och användbara länk-attribut – Länk
    • tick HTML Specialtecken – Matematiska tecken, typografiska tecken, ikontecken, pilar och indikatortecken, lagliga tecken (copyright t ex.), m.fl. andra användbara tecken – Länk
    • tick HTML Listor – Sorterade & o-sorterade, list-item element samt dess value attribut förklararat och genomgånget – Länk
    • tick HTML iFrame – Ladda in utanförstående webbsidor och externt innehåll till sin egen webbsida – Länk
    • tick HTML-Bildtaggar (<img>) & Figure + Figcaption (HTML5 bildbehållare) – Länk
    • tick HTML Tabeller – Hur de är uppbyggda, När de bör användas samt Vilka möjligheter som finns (<table>, <caption>, <colgroup>, <col />, <thead>, <th>, <tbody>, <tr>, <td>, rowspan, colspan) – Länk
    • tick Text och inline taggar – Radbrytning (<br>), paragraf (<p>), fetstil (<strong> / <b>), kursiv stil (<em> / <i>), kod (<code>), rubriker (<hX>), länkar (<a>), understruket (<u>), upphöjt (<sup>), nedsänkt (<sub>), citat (<blockquote>, <cite>, <q>), span (<span>), mark för text-highlightning (<mark>), rubrikgrupp (<hgroup>), sektionsindelare (<hr />) – Länk
    • tick Behållare – semantiska och icke-semantiska i HTML – Länk
    • tick HTML Dokuments <head> område och meta-data taggar som: <link>, <script>, <noscript>, <style>, och <meta>, m.fl. – Länk
    • HTML Globala attribut som kan ges till samtliga element!
    • HTML Formulär
  • HTML5 – Expert/Mer avancerat
    • HTML5-Video
    • HTML ImageMaps
    • HTML5 Utökad mall (inkl. externt ”main-stylesheet”, ”alternative-stylesheet” (printstyles/responsive styles), meta-taggar, favicon, jQuery och JS implementation, ev. Visitor tracking script, Google Web Fonts)
  • CSS – Grunder och nybörjare
    • Syfte och introduktion
    • Grunder och Syntax (inkl. kommentarer)
    • Olika praktiker att koda och rekommendationer
    • CSS-Reset genomgång för en ”clean slate” innan start
    • Användbara CSS-Selektorer och pseudokod
    • Måttenheter: t ex. pixlar, procent och EM som måttenheter förklarade
    • Användbara attribut – kategoriserat efter användningsområde
      • Display-attributet och hur det kan påverka element och vad som skiljer värdena inline, block och inline-block
      • font-family och hur man anger ”backup-typsnitt” att kicka in om första angivna ej skulle vara tillgängligt
    • Positionering och float + Clearfix
    • Box-modellen
    • Styling av länkar
    • Alternativa utskrifts stilar (print styles)
    • Typografiska regler att tänka på och rekommenderas följas för bra upplevelse
    • CSS3 – nya häftiga och användbara attribut(!)
  • CSS – Expert
    • LESS
  • Uppgifter:
    • Drop Down Meny
    • Sidfot alltid fast längst ned i webbläsaren
  • PHP
    • Syfte och introduktion/inledning till PHP-kodning
    • Grunder och Syntax (inkl. kommentarer/dokumentation)
    • Användbara funktioner
    • PHP Sessioner
    • PHP Server-variabel och information man kan hitta i denne, samt hur man kan använda den
    • PHP Debugging enabled/disabled
    • Databas API för att jobba med MySQL/SQLite
    • phpMailer för bearbetning- och direktsändning av e-post meddelande från ens webbsida
    • PHP Loopar, villkorssatser, variabler, skapande av egna funktioner, m.m.
    • Script och uppgifter:
      • Auto-uppdaterande copyright årtal (skönt att slippa ändra copyrightårtalet varje årsskifte – enkelt med PHP)
      • Göra om tidigare statiska HTML5-mall, till en Dynamisk PHP-mall, för smartare och effektivare redigering av webbplatsen
      • Säsongs-firande script (jul, nyår, etc.) för bloggar och andra PHP-giltiga webbsidor
      • Egen-utvecklad visitor-tracker med hjälp av Databas/Textfils datalagring + PHP-Server variabel data
      • Visa hur man kan indexera statisk webbinnehåll till en on-page sökmotor (t ex. sphider)
      • Hur man kan indexera databaslagrat dynamiskt webbinnehåll till en on-page sökmotor
      • Förbättrad version av den Utökade HTML-mallen (Dynamisk via PHP)
    • m.fl..
  • JavaScript och jQuery (och Ajax)
    • Syfte och introduktion
    • JavaScript Grunder och Syntax
    • jQuery Grunder och Syntax
    • Ajax med jQuery för realtidsprocessing med PHP-filer
    • Weighted/Biased Random number generation
    • Generating random numbers in intervalls
    • Prototyper och arv i JavaScript
    • Node.js
    • Uppgifter:
      • Eget jQuery tooltip
      • Hur man gör sina egna jQuery plugin
      • Egen jQuery Lightbox
      • Realtids (Ajax) sökresultat-visning vid sökning
      • jQuery Galleri
    • m.fl..
  • Databaser
    • SQLite introduktion
      • Hantera SQLite databas via Mozilla Firefox’s SQLite Manager
    • MySQL introduktion
    • SQL introduktion: Grunder och Syntax
      • Skapa och Droppa tabeller
      • Datatyper och definitioner
      • Främmande och primära nycklar
      • Databas Modellering med Dia Windows mjukvara
        • Modellerings syntax
        • ER-Diagram
        • Relationer
        • Kardinalitet
        • Attribut
        • Logisk modellering
      • Skapa kolumner
      • Lägga till enskilda- och multipla värden via INSERT
      • SELECT-satser
      • Inre, yttre och simpla JOINS
      • Aggregatfunktioner
      • Skapandet av vyer
      • Funktioner
      • Stored procedures
        • Loopar
        • Singulära och multipla return-values
      • m.m.
  • Responsiv webbdesign
    • Grundläggande Syntax (CSS Media Queries)
    • Vinnande strategi – Mobile-First vs. Mobile-Last approach, m.m.
    • Filosofi och tankesätt
  • Sökmotoroptimering
    • tick Introduktion och översikt av: on-page SEO – Länk
    • tick Domännamn och title-tagg – Länk (title) & Länk (domännamn)
      • Inkl. Rekommenderade guidelines
    • tick Meta-taggar – Länk
      • Inkl. Rekommenderade guidelines
    • tick Rubriker och semantik för kod – Länk
    • tick Bilders bristande förmåga att sökmotoroptimeras, samt: HTML-bildtaggens ”alt” attribut – Länk
    • tick ”Content-Aware-Typing”/Innehållsmedvetet skrivande av webbinnehåll (hur ordval kan spela roll och påverka sökmotoroptimering via texter) – vad det är och hur man kan göra det själv/anlita professionell för att göra det – Länk
    • tick Sökmotoroptimerings analys (t ex. via Sokmotorkonsult.se’s analysverktyg) – Länk
  • WordPress
    • Skillnader mellan WordPress.com och WordPress.org
    • Installation av WordPress på egen (lokal) server
    • Interface/gränssnitts grunder och genomgång – Var man hittar allt, och vad allt gör
    • Child themes för säkrare, smartare och bättre manipulation av WordPress teman
    • Redigering av och tillägg av egna CSS-stilar
    • Användbara och bra plugin
    • Inställningar som främjar sökmotoroptimering
    • Pingbacks och vilken funktion de fyller?
    • Tankesätt för ”Content-Aware-typing” (som rubriker, text), taggar och permalänk för Sökmotoroptimering
  • Versionshantering med Git- och GitHub
    • Hur man kommer igång med Git
    • Skapa sitt första Repository
  • Webbhotell och Hosting
    • Skillnad mellan parkering och hosting (pris och funktions- skillnad)
    • Hur man kommer igång med en domän och ett webbhotell
    • One.com
      • Tilläggsdomäner – vad är det? hur funkar det? varför skaffa det?
    • Loopia
      • Parkering av domän? Vad, varför och hur?
  • Webbdev matematik
    • tick Bildproportionalitet – Länk
    • tick Hexadecimala färgvärde förklarade för förståelse – Länk
  • Utvecklingsmiljö – programvaror, verktyg, etc.
    • IRC som support- och kommunikationsforum för webbutvecklare
      • Kommando för att registrera ett eget användarnamn
      • Kommando för att byta användarnamn
      • Inställningar för standard-kanaler att koppla upp sig till
      • Hur man kopplar upp sig mot IRC-kanaler
    • Smart mappstruktur och namn konventioner
    • Notepad++
      • Remote access via sftp plugin
      • Formatering NO-BOM
      • Syntax highlightning
      • Dual-panels
    • FileZilla
    • XAMPP – lokal webbserver (behövs t ex. för PHP-development, m.m.)
    • EasyThumbnails – för effektivare multi-bildkonvertering och multi- bilddimensions-ändring
    • NetBeans – för stabilt samlings-webbdev-IDE (Integrated Development Environment)
    • JSFiddle.net och Codeshare.io för kod-delning
    • (Online photoshop // Photoshop // GIMP)
    • tick Google Developer tools och Mozilla Firebug – Grymt bra webbutvecklings verktyg för smartare, och effektivare webbutveckling – Länk
    • Google Web Fonts
    • Google Analytics
    • Miro Video Converter för HTML5-video fil konvertering
    • PSD (photoshop) Design av webbsida
  • Användbara Webbutvecklings kunskaper, tips, insikter och förklaringar
    • tick URL:er: Globala vs. Lokala – Lära sig hur de fungerar, vad som skiljer dem, och när man använder vilken – Länk
    • tick Typografisk insikt för webbinnehåll, skillnader mellan typsnitt, och vilka som funkar bäst vart och varför, samt tips för textinställningar – Länk
      – För detta inlägg skall senare läggas till referenssidor där man kan se vilka typsnitt som fungerar vart ”by default” utan att man själv behöver lägga in specifika typsnitts filer till ens webbsida, såväl som skriva sammanfattat regler för t ex. hur många tecken per rad som är att föredra för optimal läsning för besökare.
    • Favikoner (favicons) – Vad de är bra för, hur man lägger in dem på sin sida och hur man kan skapa dem enkelt och gratis
    • Hur man kan konvertera PSD-design av webbsida till en riktig webbsida (PSD->HTML konvertering)
    • Färglära (bra bok för detta) och hur man tar fram ett bra färgschema för en webbsida – och verktyg som kan underlätta processen
    • Minifiering och optimering av kod dokument för bättre prestanda, och prestanda koll för att se hur mycket förändringarna verkligen gör i praktiken
    • Skillnader mellan CDN (Content Delivery Network) vs. Egen hosting av filer som används på en webbsida – För- och Nackdelar
  • m.m..

1 kommentar

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *