Webutvikling Oblig 5. Oppg 1. Her ser du sidebar og widgets som er tilgjengelig.

Like dokumenter
Oblig 4 Webutvikling. Oppgave

Webutvikling Høst 2016

WEBUTVIKLING OBLIG 4. Installasjon

Oppgave 1. Webutvikling. Oblig 5. Sette opp WAMP og Wordpress. Først og fremst må man laste ned WAMP.

Oblig 5 Webutvikling

Oblig 4 Webutvikling

Tilpassning av Wordpress - Enterprise Theme

Dennis Myhre Oblig 4 Wordpress Dokumentering og Eksamensoppgaver

CSS-formatering: stilark med kommentarer

Steg 1: Vi starter fra toppen

Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

CSS: Endre utseende og stil på tekst Nybegynner

Oblig 1 Erlend Hannestad

Jeg lastet ned wordpress 4.0 fra wordpress.org og lastet dette opp til public_html på webområdet mitt via en ftp-klient.

OBLIG 1 - WEBUTVIKLING

TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE

Businesscatalyst PAGES

CSS: Style nettsider. Introduksjon. Skrevet av: Arve Seljebu

Brukerkurs 16.februar 2012

Høgskolen i Telemark EKSAMEN Webpublisering (inkludert denne) Hjelpemiddel: Ingen

Hvordan setteopp en wordpress site med wampserver. Lokal site på din pc.

Manual for PENDULUM MUSIKER WEBSIDE

EKSAMEN / 6101N WebPublisering

HTML: Publiser nettsiden din. Publiser nettsiden din på Internett. Github. Brukernavn.github.io

Innstallasjon og oppsett av Wordpress

Webutvikling oblig 1 Marius Hanssen

Oblig 1. Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

HTML5 og CSS. Webdesign med Dreamweaver. Glemmen vgs - Medier og kommunikasjon 1. januar Arly Dale 2013 Side 1

Håkon Tolsby Håkon Tolsby

Steg 1: Animasjons-attributtet

I denne oppgaven skal du lære hvordan du kan flytte rundt på elementer og gjemme elementene bak andre elementer ved hjelp av CSS.

CSS: Animasjon Nybegynner

Oblig 2: Oppgave 1. section { width: 50%; height: 30%; margin: 5% 0 0 0; } h1 { color:#000000; font-size:2em;

EKSAMEN Webpublisering

Oblig 3 Webutvikling

file://c:\etext\document\dlftools.xsl

Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Wordpress Kort fortalt

notater Gule lapper Mine Et praktisk eksempel med objekter IT2 Læreplansmål Gløer Olav Langslet Sandvika VGS

Introduksjon til WordPress 2013

HTML-del. 1. <!-- ikke slett min kode, vær så snill --> er a) en HTML stil-tag b) en CSS stil-tag c) en HTML kommentar-tag d) en CSS kommentar-tag

BORRENYTT. Dette er en innføringsguide om hvordan man kan legge til nye poster, og hvordan disse bør settes opp.

EKSAMEN. Elektronisk publisering. INNFØRING MED PENN, evt. trykkblyant som gir gjennomslag

I denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene så langt og/eller er kjent med <div> - og HTML5-taggene.

RAPPORT WEBP MAGNE SILJAN

EKSAMEN Web-publisering

Steg 1: Canvas-elementet

WordPress for transmark-subsea.com

Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Installasjon InfoMediaPlayer:

Javascript. Mer om layout

Byafossen.no. Brukermanual

Stilark Cascading Style Sheets - CSS

Stilark Cascading Style Sheets - CSS

En Introduksjon til Wordpress

OBLIG 1 WEBUTVIKLING. Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Lage nettside med squrespace

Bilder, tabeller. Kirsten Ribu 26.09

KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress

Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems.

Administrasjon av FLT-Sunnhordland Web-side

CSS: Style nettsider Nybegynner

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html

PUBLISERING AV INNHOLD TIL KVAMSSIDA.NO

Oblig 3 Webutvikling. Oppgave 1

file:///c:/users/michaelp/sites/dkdm/dw5/dreamweaver5_1.html

WordPress startguide

SENSORVEILEDNING. Dato: Eventuelt:

Publisere på nvfnorden.org

Bergeland IKT. Elev guide

HR analysen. Ny versjon Brukermal. Administratorer

E-post: Tel.: Hurtigkurs for nybegynnere

Rammer. Mer om Javascript

Virus på Mac? JA! Det finnes. Denne guiden forteller deg hva som er problemet med virus på Mac hva du kan gjøre for å unngå å bli infisert selv

CSS. Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS

Om LifeVision CMS. Enklere og mer profesjonelt enn dette blir det ikke!

Velkommen til Creo Portal Kom i gang! Hvordan logge meg på? Oversikt over administrasjonssidene Sideoppsett...

som blanker skjermen (clear screen). Du får en oversikt over alle kommandoene ved å skrive,

Avansert tekstmodul Eksempel Administrasjon Bilde Eksempel på en bildemodul Eksempel på en bildemodul lagt til uten

Dette dokumentet er en produktrapport for vårt avsluttende hovedprosjekt våren 2008 ved høgskolen i Oslo, for ingeniør - avdelingen.

HTML: Del inn nettsiden

Brukermanual. PUS i Web. Mai 2009 (Versjon 1)

SPSS Høgskolen i Innlandet

WP-WATCHER WORDPRESS SIKKERHET

Lage klubbens webside i Rotary med verktøyet Webwiz 2.0

Steg 1: Felix har forsvunnet!

Web Computing AS Brukerveiledning WebWiz 3.0. WebWiz 3.0. Brukerveiledning

VisualMobility 2.0. Hurtigreferanse1.0. Funksjoner. Komme igang

Virus på Mac? JA! Det finnes. Denne guiden forteller deg hva som er problemet med virus på Mac hva du kan gjøre for å unngå å bli infisert selv

Introduksjon til Min Sky -

Oblig 5 Webutvikling. Av Thomas Gitlevaag

Innføring i Dynamisk HTML

Bildebehandling i GIMP

Oblig 1 Webutvikling av Jon-Håkon Rabben

Forprosjektrapport Gruppe 30

BRUKERMANUAL KOM I GANG... 2 BLOGGINNLEGG... 4 UNDERSIDER... 6 LAST OPP BILDER/VIDEO... 8 KOMMENTARER PÅ INNLEGG... 9 UTSEENDE...

SP Production. mywysiwyg User Guide. Version

CASCADING STYLESHEETS (CSS)

"Dette skjer når jeg trykker på denne knappen" "Når jeg skriver i dette feltet, ser jeg at det andre forandrer seg"

Produktdokumentasjon. Madison Møbler Administrasjonsside og Nettbutikk

Transkript:

Webutvikling Oblig 5 Oppg 1 Her ser du sidebar og widgets som er tilgjengelig. Dette er contact form plugins, funker som kontaktskjema i nettsida, må bruke text fra widgets og kopiere kode blir generert når skjema blir laga

Når man skriver post så viser categories og kan bare trykke på checkbox-en for new post. Er også mulig å laste opp image for post. Her er menyen. Du ser på panel-en at header er også tilgjengelig. Alle disse ble laga fra bunnen og ligger i koden.

Contact sida, og footer fra footer putter plugin. Contact på sidebaren er plugin. Content sida

Themes panel. Aktivert theme er den som jeg laga For denne oppg har jeg valgt å lage en enkel blog sida. Har lasta ned og installert MAMP for Mac, og alle fra wordpress.org. Jeg har valgt å lage min egen theme (veldig enkelt theme) fra denne tuts: https://www.youtube.com/playlist?list=plrikzyylb28nufbe0y9d-19uvkonhyxfe Mappe for koder

Index.php <?php get_header();?> <?php get_sidebar();?> <?php if(have_posts()): while(have_posts()): the_post();?> <h2><?php the_title();?></h2> <small>posted: <?php the_time("g:i");?> <?php the_time("f j, Y");?> <?php the_category();?></small> <div class="photo-thumbnail"> <?php the_post_thumbnail();?> </div> <p><?php the_content();?></p> <hr> <?php endwhile; endif;?> <?php get_footer();?> Med tid og dato

Functions.php Dette her er med navigation support, thumbnails og headers (så det blir mulig å laste opp bilder som ikon og header, også for featured image for posts. <?php function newtheme_script_enqueue(){ wp_enqueue_style("newthemestyle", get_template_directory_uri(). "/css/newtheme.css", array(), "1.0.0", "all"); wp_enqueue_script("firstjs", get_template_directory_uri(). "/js/newtheme.js", array(), "1.0.0", true); add_action("wp_enqueue_scripts", "newtheme_script_enqueue"); function newtheme_options(){ add_theme_support("menus"); register_nav_menu("first", "first navigation"); add_action("init", "newtheme_options"); add_theme_support("custom-header"); add_theme_support("post-thumbnails"); /* sidebar */ function new_theme_setup() { register_sidebar( array( 'name' => 'Sidebar', 'id' => 'firstsidebar', 'class' => 'custom', 'description' => 'Standard Sidebar', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); add_action('widgets_init','new_theme_setup');

Footer.php <footer> </footer> <?php wp_footer();?> </body> </html> Siden jeg brukte en plugin for footer har jeg sletta den teksten som jeg først skrev her. Page-template1.php <?php get_header();?> <?php get_sidebar();?> /* Template name: without date and time */ <?php if(have_posts()): while(have_posts()): the_post();?> <h2><?php the_title();?></h2> <p><?php the_content();?></p> <hr> Template kan brukes for pages og da kan brukeren velge hvilken template (i denne situasjon har jeg bare laga en template) for en bestemt side. I template kan du gjøre masse forskjelige, vise hva du vil og ikke vil. Du kan legge mer kode for dette her for andre ting du vil ha i templaten din. I min sida har jeg brukt denne template i Home og Contact sider, for da vil dato og tid ikke vise. Men for Contents er disse synlige. Sidebar.php <div id="sidebar" class="widgets-area"> <?php dynamic_sidebar(firstsidebar);?> </div>

Header.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>mamedran 1st theme</title> <?php wp_head();?> </head> <body> <?php wp_nav_menu();?> <img src="<?php header_image();?>" height="<?php echo get_custom_header()- >height;?>" width="<?php echo get_custom_header()->width;?>" alt="" /> Newtheme.css @import url('https://fonts.googleapis.com/css?family=scheherazade'); #menu-menu-1{ width: 80vw; display: flex; flex-flow: row; list-style: none; background-color: black; font-size: 30px; margin-top: 0px; position: fixed; #menu-item-81{ margin-right: 30px; #menu-item-84{ margin-right: 40px; a{ text-decoration: none; color: grey;

a:hover{ color: skyblue; body{ width: 82.3vw; margin: auto; text-align: center; background-color: pink; border: 1px solid black; height: 100vh; font-family: 'Scheherazade', serif; #sidebar{ float: left; border-right: 1px solid black; margin-top: 50px; height: 96.4vh; width: 15vw; #calendar-11{ margin-left: 45px; ul{ list-style: none;

Har ikke gjort så mye for innholdet til prosjektet. Fokuserte litt mer på hvordan å begynne å lage theme for wordpress. Jeg har brukt disse plugins: På description star det hva dem gjør. Siden jeg brukte footer putter har jeg sletta den som jeg skrev først for footer.php. Da jeg begynte å se på tutorial, trodde jeg at alle functions som å sette widgets, menus, og headers kommer automatisk. Jeg visste ikke at man må lage en kode for å få dem ut fra admin page. Må innrømme at jeg ble forvirret da jeg laste ned wordpress for at jeg ikke skjønte hvordan jeg skal starte med den. Men etter et par tuts fra nett så fikk jeg det med meg. Hadde også problemet da jeg ble logga ut for at jeg husker ikke eller hadde ikke peiling på hvordan man skulle logge inn igjen. I denne oppgaven har jeg fokusert hvordan å lage theme for wordpress. Det er ikke så komplisert, men er ikke enkelt heller, og det tar mye tid, avhenger selvfølgelig om hvordan brukeren vil style sida osv. Oppg2 Hvilke konkrete råd om sikkerhet vil du gi til de som skal sette opp og drifte et CMS? Begrunn rådene med hvilke trusler de skal motvirke der det er nødvendig.

- Oppdatere plugins osv for CMS en - Bruk bra kombinasjoner for passord, unngå å bruke admin for admin brukernavn. Velg noe som er unikk (slett admin eller i hverfall gjør endringer for det) - Det finnes password authentication tjenester nå, så om det er mulig, bruk den også. - Oppdater sida ofte! Oppg 3 Gi en mest mulig presis forklaring på hva et CMS er. Hvilke fordeler og ulemper ser du ved å benytte et CMS for henholdsvis utviklere og sluttbrukere? - CMS betyr Content Management Systems som gir adgang til brukere og utviklere i forskjellige grad for å håndtere innlegg til sida. I CMS er det mulig å lage en nettsida og lage innhold uten å kode (eller bruke html), og modifisere innholdet ved bruk av eksisterende plugins. Fordeler: - Lett å bruke - Trenger ikke å vite noe om koding eller programmering (kan laste ned eller kjøpe plugins og themes) - Det er gratis - For utviklere blir det tidseffektivt siden de egentlig bør ikke tenke så mye på kodingen, det eneste er at de må holde sida, innholdet (med plugins) oppdatert så ofte så mulig for bedre sikkerhet. - Det er mulig å ha flere brukere for vedlikehold (kost effektivt vedlikehold også) Ulemper: - Sikkerhet (det koster penger) - Blir litt mer komplisert å få den stilen man vil ha (må skrives koden om igjen for dette her) - Må sørge for at theme og plugins som blir brukt blir også oppdatert samtidig som software. Må sørge for at alt blir kompatibelt og vil fungere. Blir litt krise om man bruker et theme som ble laga av en annen person og må vente for oppdateringa - Bruker mange filer for kodinga - Begrenset på hva utviklere kan gjøre i forhold når man lager egen nettsida fra bunn med Oppg4 egne koder.

Norge følger etter en rekke land og innfører nå lovgivning som skal sikre universell utforming av bl.a. nettsider. (http://lovdata.no/dokument/sf/forskrift/2013-06-21-732) For oppgaven er 1,2,4,6,7 og 11 spesielt interessant. Se bort i fra det som står ang. automater. a) Hva tror du blir den nye lovens innvirkning på norske utviklere og brukere på kort og lang sikt. Svar fra et teknisk vinklet perspektiv. b) Det Norge her gjør er lignende det flere land alt har gjort eller står på trappene for å gjøre. Hva tror du betydningen blir for standarder og verktøy/teknologi i et større perspektiv. (Du kan gjerne svare på a og b sammen, men la det gå frem hva som hører til hvilken vinkling av spørsmålet) Svar: a) For utviklere kan dette blir for mye jobb. Spesielt for eksisterende nettsider som har ikke disse hjelpemidlene som kreves fra loven. Et problem som kan oppstå er at utviklere/eiere har ikke nok kunnskap for å formere disse endringer. Men selvfølgelig er det mulig å ta ekstra kurser osv for å kunne disse. Det er viktig å vise de som jobber i dette områder hvor viktig og lønnsomt det er for samfunnet å kunne kravene. Det er også viktig at utviklere vil tenke mye mer i sine forbrukeres perspektiv når de lager nettsider, apper, eller programmer. Og siden teknologien utvikler seg hele tida må utviklere være oppdatert for endringene, og kunnskapet dems må også utvikles for nye krav og løsninger som trengs. For forbrukere, spesielt for dem som er funksjonshemmede vil dette være en stor hjelp. Da kan de få tilgang til alle mulige deler av teknologier som eksisterer, de som de kunne ikke bruke før pga det finnes ikke noe hjelpemidler eller løsninger for sine situasjoner. Men dette gjelder ikke bare som er funksjonshemmede men også vanlige brukere. F.eks. det finnes nettsider som har for lite skrift, selv om har ikke problemet med synet så vil det ikke være lett og behagelig for deg å lese den du leser, da må du justere skriften selv fra pc eller mobilen så du ser det bedre. Men hvis den funksjonen er allerede tilgjengelig i selve nettsida så har du løsningen med å bare trykke på knappen. Loven ble lagt ut i 1. juli 2013, og disse kravene må være tilgjengelige innen 1. januar 2021. Da betyr det at utviklere har god tid, og at regjeringen skjønner at dette blir ikke lett å oppnå med en gang. Selv om vi sier at 8 år er en god tid, vil det ta mye jobb å lage disse funksjonaliteter og gjøre disse endringer. b) Som sagt, teknologien utvikler seg hele tida. Jeg kan tenke at de kravene som står nå, vil endre seg etterhvert til enten mer eller forbedret versjon. Og som jeg har sagt,

utviklere må få mer kunnskap, og ikke minst erfaring for å implementere disse kravene. Om disse kravene blir tas i bruk tenker jeg at det blir bare positivt, siden alle mennesker, uavhengig hvem vil ha mindre problem å bruke nettsider. På en måte kan det hende at standarder vil hindre utviklere og bedriftseiere å bruke sine egne ideer av nettsidas design. Men hvis vi tenker på et større perspektiv så kommer det til å være verdt det. Utviklere og nettsida eiere bør egentlig tenke på forbrukere mer, siden det er forbrukere som besøker nettsida dems, og de er nok forpliktet å tenke på tilgjengelighet av nettsider.