Category: MMD2

Articles for second semester students at the Multimedia Design and Communication Programme @Business Academy Aarhus, Denmark. All materials for the second semester are on Fronter. These links are sources of inspiration: tutorials, how-tos and similar.

  • How to use the theme skeleton

    Skeleton and implemantation
    Finished version with costum frontpage (top) and the skeleton boilerplate (bottom).

    In this tutorial you’ll learn how to create your own version of a skeleton theme.

    The “Skeleton-F16-Bootstrap” theme for WordPress is a boilerplate, or a place to start, if you want to create a Bootstrap theme from scratch. Or almost scratch that is. The basic files are ready. The top picture is a variant of the theme. The picture on the bottom is what it looks like, if you download the theme as is.

    Here are the two versions:

    How to fork the code

    In order to get started it’s convenient to have your own version of the code. Create a github profile, if you don’t have one yet.

    1. Log in on Github.
    2. Then navigate to the Skeleton-F16-Bootstrap.
    3. Fork the repository.

    On your Github page, you’ll find the fork, that is a copy of the original repository. You’ll be able to edit files and upload your own versions of the files. In this way the repository is a starting point for your new coding adventure.

    The fork symbol
    In order to create a fork click on the fork symbol. Here it’s marked with a fancy red circle.

    When you click the fork symbol a new repository is created on your Github space. You can edit all files as you fancy.

    1. Add the forked repository to your Gitkraken (or whatever Github GUI you’re using).
    2. It’s often convenient to save the local files in your  ../wordpress/wp-content/themes/ folder on your localhost.
    3. Pull the files.
    4. Edit a file and save it.
    5. Stage the changes.
    6. Write a commit message.
    7. Push to the repository.

    On your own

    From this point you’ll be able to create your own markup. If you want to have 6 columns in stead of 3 on large screeen you can fix the Bootstrap / HTML markup. Bootstrap and Jquery will work out of the box. So you can add carousels, accordions and other fancy Bootstrap og Jquery stuff as you please. Since you’re in charge of the markup, you can even create hardcoded menus. You don’t have to do everything in the WordPress way.

    The costum CSS editor is enabled in the plugin. You can experiment with styles in the editor. As soon as you’re satisfied with the styling, you can add the styles to style.css.

    Costum CSS
    Costum CSS: here the text describing an image is changed from centered to left. The font-size is changed too.

    The sample code has several branches. The origin master is the actual skeleton. The branch called Multimusen was developed as an implementation of the skeleton for my website Multimusen. Multimusen’s branch has several costum pages, such as pages for categories, or special designed pages like a CV or similar. In this case the CV should stand apart from other pages. The focus should be on the text, so asides such as the sidebar are removed. The markup and PHP for the costum page is found in page-cv.php. I guess that you don’t need a page exactly like this. But if you need one, you can create your own costum templates. Just copy a page template that’s similar. Edit the code, and name the file page-SLUG.php.

    In WordPress costum files have a name convention. The system is described in detail in the Theme Developer’s handbook.

    In fact: whatever you’re able to do with markup, you’ll be able to implement in a theme. So you can have a look at the Bootstrap grid tutorials on W3 Schools, and even add a Jquery theme after your own choice.

    If you want to use JavaScript libraries for animation or parallax you can either edit header.php and footer.php or add scripts via functions.php (don’t do both options!). Adding scripts via functions.php may seem a bit abstract. But it is the best practise.

    Here are a few libraries, that’ll add immersive experiences to your WordPress theme:

    Whatever you’re able to do with HTML, CSS, JavaScript and libraries – the same is possible in a WordPress theme.

    Proceed, and experiment according to your creative vision.

  • GitKraken Tutorials ( YouTube )

    A few introductions to Github, and the gui GitKraken.

     

    A very fast video

    https://youtu.be/j1rP21RcbH0

    If you’ve got one hour …

    https://youtu.be/f0y_xCeM1Rk

     

  • WordPress and REST API

    The newest version of WordPress came with a REST API. It will revolutionize the ways we think about themes. You don’t have to use PHP any more. With HTML, CSS and JavaScript you can get content via Json.

    What is REST API?

    The very short version is: WordPress will return Json objects from certain endpoints. Here’s a sample:

    yourWordPressSite.nu/wp-json/wp/v2/posts

    A URL like this will return a Json object with the 10 most recent post. Why don’t you try it in your browser:

    https://multimusen.dk/wp-json/wp/v2/posts

    But what’s the fuzz all about? Well JavaScript can transmute Json to content on a web page. So now you may program your frontend via JavaScript. This is really good news for Nodejs-developers. But in fact you may develop your web page in any language, that’s able to manipulate Json.

    REST API is much more that reading content. You can create, read, update and delete content on the server.

     

    With the REST API WordPress will open the gates to a very interesting future. Perhaps themes as we know them will be obsolete in the near future. Even the Dashboard could be something in the past.

    Bang the drums, and hoist the flags! WordPress  with REST API is here.

  • Jquery first fiddle

    Here is a very, very short Jquery introduction on Jsfiddle.



    After a while the document ready function becomes boring. However there is a shorthand version:

    $(function() {
        // ... your code ...
    });
  • Create a WordPress Plugin

    In this tutorial you will learn how to create a WordPress plugin that will get data from the WordPress database – or other tables residing in the same database.

    As a starter here’s a video from the “Tips and Tricks HQ”. See the full blog post here. The tutorial will add a new tool in the Dashboard.

     

  • Images in Child Themes / Themes

    How to display images in a theme or childtheme in WordPress.

    On Linux and perhaps some Mac systems you may have to change the owner of the folder to daemon:daemon and set chmod to 777 during development.

    When you launch the site online the file permissions must be more strict. Make sure that:

    • All directories should be 755 or 750.
    • All files should be 644 or 640. Exception: wp-config.php should be 440 or 400 to prevent other users on the server from reading it.

    Sometimes the images will not display because of user rights. On Linux and perhaps Mac you may have to set the owner to daemon and the usergroup to daemon:

    • # sudo chown -R daemon:daemon yourWordPressFolder/
  • Know WordPress

    1. Create some posts. Just some text that comes to your mind.
    2. Add an image to the post.
    3. Why not share a video from YouTube.
      Tip: just paste the share link into your post. Save and see …
    4. Create a page. Adorn with videos and images you fancy.
    5. Add your page to the menu.
    6. Go to the frontend. Try out your menu.
    7. Write a post where you explain the difference between a PAGE and a POST. The intended target group is a teenager who sees WordPress for the first time.
    8. How can you add a POST to your menu?
    9. Try out the themes.
      1. Find alternative themes online.
      2. Install them.
      3. Choose one that you fancy.
    10. Upload a screendump (or screendumps) of your work to fronter. That’s the mandatory assignment for today.
  • How to write about code

    In most projects at the Multimedia Communication and Design programme you will be asked to write an academic report following the academic standards from Harward.

    Since interaction and code has a weight of some 25% at the first and second semester and around 30% at the third semester it is natural to expect a similar weight in a report. So if you’re supposed to write say 15 pages then roughly a quarter of the pages would be ok.

    Strategy I: The Silo
    Now there are certain strategies you can follow. Old school reports tended to have divisions for each subject. So the students would write something for the business, communication, design and interaction teachers.

    Doing so is not bad at all. But the report will look a bit like four silos. And if you divide the stuff there is a tendency to focus only on the subject at hand.

    Then you may forget, at one subject is closely linked to another subject. Ideas from design will affect the code – and vice versa.

    Strategy II: The Cross-subject Report
    Another strategy is to see how the subjects are connected. Perhaps your communication leads to a persona.  She’s 25 years old and just loves webpages with pink animations of running horses.

    In that case you have ideas for the design. There will be horses. And the color pink will play an important role in your design. One way or another you will have to animate the horses.

    This again leads to the code that you have to write. Perhaps you’ll use the Jquery plug-in Spritely.

    So you draw a spritesheet in Photoshop. Yep, that’s design. And then you implement some animation code on the website. That’s interaction. Perhaps you made a sketch too. And so you have something, that could turn into interesting pages in the report. Here’s the code:

    $('#pinkHorses').sprite({fps: 12, no_of_frames: 7});

    You may imagine the pink horses and so in your mind …

    In one illustration you could have your sketch, the code needed and the result in a browser. And here you cover more than one subject in an interesting way.

    Don’t tell it – show it!
    A sound creative writing principle is “don’t tell – show”. Let your report demonstrate how you developed your idea. And how you implemented the code in the end.

    Perhaps the censor does not know anything about code. So you have to explain what your code does. It’s a bit like expaining the rules of a game to a younger sister or brother.

    In the codesample above you could explain, that:

    • The sprint was made on a sunny tuesday in march.
    • Tell that you have importet the script pinkHorses.js.
    • $(‘#pinkHorses’) is Jquery. It will select the tag with the id pinkHorses.
    • In the CSS you have styled the tag, so that you only see one of the horses in the stylesheet.
    • Basicly the plugin will move the background with 12 frames per second. The result is the illusion of moving pink horses.
    • You could discuss whether 12 fps is satisfying or not.
    • You could countinue to animation principles from the Disney studios from “Steam Boat Willie” and on.
    • And how about the sounds of the running horses … and the cute Jquery controlling the sounds.
    • By thine own ingenium invent more …

    Now you have a cross-subject line from business, communication and design to an interaction code sample.

     Third party code
    Jquery and a Jquery plug-in is third party code. Since you did not invent either Jquery or the Spritely plug-in you have to give the sources in your report.

    In the bread text of your report you may give the url to Spritely in a footnote. Do it like this:

    http://spritely.net/documentation/ (visited 16.3. 2015)

    At the end of the report you’ll have a list of sources. Here you must write all thirdparty code used. If possible sorted by author – or at least by the name of the code library.

    Harward Academic Standards
    Here is the link to the academic standards that we use at the Aarhus Business Academy. Use them because we expect you to do so.

    You link to a website like this:

    NHS Evidence, 2003. National Library of Guidelines. [online] Available at: <http://www.library.nhs.uk/guidelinesFinder> [Accessed 10 October 2009].

    So how would you write, that Jquery and Spritely was used in your academic report?

    Remember that a PDF file can handle hyperlinks. So use links in your report – and link to your product on the frontpage too.

    Conclusion
    When you write about code you have to demonstrate your powers as a coder. Don’t explain what HTML and CSS is. It’s far better to explain why your markup looks as it does.

    Perhaps you wrote some cool class in PHP, that can generate the HTML for the user. Or functions you can reuse for other animations. How are these classes and functions connected to your overall design ideas, why do the look the way they do … and could you have acheived the same thing in a better way?

    To be honest your teacher and censor love discussions and usertests. Well, this may be off topic. But even the coolest code is worth nothing if your user cannot use your product.

    To sum up:

    • Show how your code works.
    • Try to demonstrate the path from the rough sketch to the finished code.
    • Give credits to the authors of ANY third party plugins.
    • Use the Harward System.
  • The image registration point

    On at JavaScript canvas the registration point is the top left corner.

    So in hit detection you have to calculate the x-position, the image width and height. In layout you should be able to figure out where to plage the images, and illustrations.

    • Y = “up / down”
    • X = “left / right”

    ( I tend to forget this … )

    The image registration point.
    The image registration point.
  • The X and the Y axis

    The x and y axis.
    The x and the y axis.

     

    • On the HTML canvas the top left corner is x = 0 and y = 0.
    • The y-axis is “up & down”.
    • The x-axis is “left & right”.
  • Canvas Animation

    With a canvas you can animate your page. You can use images or draw geometric figures on the canvas. Here are some tutorials for canvas animation.

    Parallax Effect ( Multilayer animation )

    The following presentation is not strictly JavaScript but a sum up of a bunch of animation methods for the web:

  • HTML Kickstart og PHP

    HTML Kickstart wireframe
    HTML Kickstart wireframe

    HTML Kickstart (http://99lime.com) giver et framework til hurtig udvikling af html. Siderne kan konverteres til .php sådan:

    • Gem din fil som minfil.php
    • Herefter kan kode genbruges ved includes.

    Det kan være en god ide at lave en skitse over din side, således at du får en ide om, hvad du vil udvikle.

    Husk at en række = 12 kolonner.

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close