DT069G - Multimedia för webben - VT16_P4

Transkript

1 DT069G - Multimedia för webben - VT16_P4 Lärmodul 5 CMS MaSv1219 Malin Svensson Kravspecifikation - Uppgiften för den här lärmodulen är att: 1. Skapa en webbplats med valfritt CMS. Webbplatsen ska uppfylla alla kriterier som du anser vara viktiga vad gäller tydlig navigering, lämplig design och informativt multimediainnehåll. Omfattningen på webbplatsen är valfri men den måste var i form av ett child theme (eller liknande om något annat CMS än WordPress används) där du även gjort justeringar i koden, och inte enbart via CMSets gränssnitt. Dessutom ska de funktioner, plugins, widgets etc. som du tycker en modern webbplats bör ha läggas till på ett genomtänkt sätt. Den ska följaktligen minst innehålla följande funktioner: statiska sidor, blogg, möjlighet till kommentarer, koppling till någon/några sociala nätverk och RSS. 2. Inkludera dina lärdomar från andra lärmoduler där det passar, såsom CSS-sprites, animering, 3D, inbäddad video och streamad video. Uppgiften är medvetet löst formulerad för att du ska få fria händer att göra en webbplats som passar just dig. Viktigt dock är att du i skapandet använder dig av den kunskap du erhållit från programmets tidigare kurser om webbutveckling. Genomförande Jag installerade Wordpress via Wordpress.org download wordpress Jag installerade om Xampp samt anpassade portar, då min Xampp krockade med andra installerade programvaror som använts under terminen. Så skapade jag en MySQL-databas i phpmyadmin. Jag skapade ett child theme i Wordpress genom att ladda ner Wordpress lokalt och utgå ifrån twentyfourteen-temat. Jag justerade efterhand samt skapade egna templates, genom att utgå ifrån befintliga filer, skapa egna i den nya temamappen och modifiera innehållet: index.php, content.php, sidebar.php, functions.php osv. Göra egen template <?php /** * Template Name: No Sidebar

2 * * This is a template that displays pages with no sidebar Jag skapade två nya templates, en med full sidbredd (page_template1) samt en utan sidmeny. Dessa går att välja i dashboard när man skapar sidor. Functions.php I functions.php hanteras funktionalitet och dynamik. Infoga js och jquery Js infogas bäst i functions.php: //include new js-script function twentyfourteen_child_scripts() { wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js', '2.1.3', true ); wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), '3.3.6', true ); wp_enqueue_script( 'extra', get_stylesheet_directory_uri(). '/js/extra.js', true); add_action('wp_enqueue_scripts', 'twentyfourteen_child_scripts'); Ny meny Ny meny registreras i functions.php: function twentyfourteen_child_register_menu() { register_nav_menu( 'new-menu', ('Multimedia site Menu')); add_action( 'init', 'twentyfourteen_child_register_menu'); Widgets för sociala media Det finns redan en widget man kan använda till footern, men jag lade till en extra för sociala media, för att visa att jag kan i functions.php: //add social media function twentyfourteen_child_footer_widgets_init() { register_sidebar( array( 'name' =>'footer social area', 'id' => 'footer_social_area',- 'before_widget' => '<div class="footer_social_area">', 'after_widget' => '</div>', 'before_title' => '', 'after_title' => '', )); add_action( 'widgets_init', 'twentyfourteen_child_footer_widgets_init');

3 Ultimate social media plus För sociala media och RSS valde jag ett plugin som gav ikoner och länkar jag länkade till wordpresssidor via att lägga in url:er. Fler installerade plugins Akismet minskar risk för spam. Hello Dolly ingår per default, men medför ingen funktion, finns kvar mer av tradition. Custom Meta widget - Ändrade och tog bort vissa länkar i metamenyn. Kod för metamenyn ligger i core files och därför föredrog jag att använda ett plugin. Hade visserligen också gått att åstadkomma via funktioner i functions.php. Plugin Responsive Column widgets För att kunna lägga till kolumner till postat och från admin skrivet innehåll, valde jag att använda ett plugin, som la till funktionen att aktivera responsiva kolumner. Sedan övergick jag mer till Bootstraps färdiga kolumner det var mer lättanvänt. All-in-One WP Migration För migration av webbplatsen från lokalt till publicerat på rätt domänadress. Ändrad huvud meny via CSS.header-main { text-align: center;.primary-navigation { float: none; Layout - bredd Jag ändrade layout så att sidorna tar upp full skärmbredd via att i CSS-filen lägga kod för positionering. Layout, CSS padding Via Sublime, kan man välja fil i detta fall föräldratemats style.css och via inspektera element i browsern kontrollera klassnamn och var i css-filen stilen för denna finns, vilket radnummer. Genom att i filen leta upp denna rad, kopiera koden, klistra in i barntemats CSS-fil och korrigera den så att resultatet blir som önskat, kan den personliga stilen sättas. Så gjorde jag för olika element t ex extra padding-top för sidebar:en i desktop-läge. Bootstrap Jag har inkluderat Bootstrap för att enkelt kunna justera viss stil.

4 Statisk hemsida, bloggsida För att skapa en statisk hemsida, skapades ny sida via admin, som döptes till Hem Moment 5 och Blogg skapades samtidigt som en annan ny sida. Via inställningar i dashboard, menyval => Läsa, valdes sedan inställningar för startsida Hem till statisk sida och Inläggsida till Blogg. Hemsidan representerar Moment 5 som startsida, även om det i realiteten är hela webbplatsen som inräknas till den uppgiften. Övriga moment finns representerade i menyraden som olika lärmoduler. Två sista lärmodulerna De två sista lärmodulerna lade jag på extern webbplats och länkade till dessa i menyn, då jag fann detta smidigare än att baka in animeringarna på Wordpress-siten. Ny användare För att lärarna på kursen skall få behörighet lade jag till ytterligare en användare, som fick full behörighet: Användarnamn: Teacher E-post: masv1219@student.miun.se Förnamn: Teacher Efternamn: Teacher Webbplats: Lösenord: teacherpass#%"&16 Roll: Administratör Varsågoda att prova! Migration Arbetsgång för export av webbplats via plugin All-in-One WP Migration: 1. Installera Wordpress på den domän som man ska migrera till. 2. Ändra inställningar i config-filen. 3. Följ installationen från domänplatsen. 4. Ändra url via find and replace-funktionen i plugin:et. 5. Exportera den lokala webbplatsen via All-in-One WP Migration. 6. Logga in på den utlagda webbplatsen och installera All-in-One Migration även där. Importera export-filen. 7. Sedan är den exporterade webbplatsen färdig och redo att tas i bruk, den lokala finns kvar så länge config-filen lokalt har kvar sina ursprungliga inställningar. Resultat Specifika mål Uppfyll. 1 Skapa en webbplats med valfritt CMS Ja

5 2 Webbplatsen ska uppfylla alla kriterier som du anser vara viktiga Ja 3 Tydlig navigering, Ja 4 Lämplig design Ja 5 Informativt multimediainnehåll Ja 6 Vara ett Child theme. Ja 7 Göra justeringar i koden Ja 8 Övervägd funktionalitet Ja 9 Plugins som tillför förbättringar Ja 10 Widgets Ja 11 Statisk sida Ja 12 blogg, Ja 13 Möjlighet till kommentarer Ja 14 Koppling till någon/några sociala nätverk Ja 15 RSS Ja 16 Inkludera lärdomar från andra lärmoduler Ja Gällande resultatet anser jag att jag infriat samtliga punkter utifrån satt kravspecifikation/lärmodulsinstruktion. Dock har jag som nämnt valt att inkludera vissa lärmoduler externt (externa webbplatser) av praktiska skäl. I början av kursen fick vi rådet att inleda med att skapa barntemat i Wordpress och lägga in modulerna efterhand under arbetets gång. Det tog jag fasta på och Lärmodul5 består således av mitt Wordpress-tema med samtliga samlade lärmoduler från hela Multimedia-kursen. Håll till godo!