Categories
Adobe Animate Animation javascript Multimedia Deign WordPress

Adobe Animate and the OpenWeatherMap API

Part One: Adobe Animate and API

Do you want to fetch data from an API and use the data in your Adobe Animate CC creative work? Animate CC productions are made by JavaScript and HTML canvas. In theory getting data should work.

Let’s try!

OpenWeatherMap

The data from OpenWeatherMap is only available when you have a token. The first step is to create a user profile, and then to create a token. Then you can create the URL to fetch the weathere data.

Above you see the API call. That’s the information we need in order to get data from the website. The data will be returned as JSON, but we can fetch the content and display it in Adobe Animate. You can create the string along these lines:

var weather = 'https://api.openweathermap.org/data/2.5/weather?q=YOUR-CITY-HERE&appid=ADD-YOUR-TOKEN-HERE';

The url will fetch data from the API in the form of JSON. The URL for the weather data is formed in the variable weather.

A JSON object from OpenWeatherMap.

The fetch() function will use the variable above, and that’s how we get the data for the JavaScript into the document:

fetch( weather ).then( ... etc ... );

Dynamic Texts

Now we have the data. Then we want to use the data in the design. Here we will work with Dynamic Text Fields.

Dynamic Text Field.
Here the Dynamic Text Field is selected. In Propterties to the left it is named theCity. Now we can change the content dynamicly with JavaScript.

On the stage you see two Dynamic Textfields called theDescription and theCity. If you want to change the text of these fields you could do it like this:

_this.theCity.text = “Hello World”;

But we need the text from the API. If you check out the content of the weather data in the console, you can see, that the name of the city is:

data.name

The city name is added to the Dynamic Text Fiels like this:

_this.theCity.text = data.name;

If you use the Inspect Tool in the browsesr you will be able to create Dynamic text fields for all the data in the object from OpenWeatherMap.

The JavaScript

In the actions layer you can add your Vanilla Javascript. Here is the script I used:

/**
 * OpenWeatherMap API Demo
 * IMPORTANT
 * Don't use the code beautifier. It will ruin the => in the Js.
 **/

// get this as a global var
var _this = this;

// Openweather API string
var weather = 'https://api.openweathermap.org/data/2.5/weather?q=Aarhus&appid=ADD-YOUR-TOKEN-HERE';

// get the weather data via query URI
fetch(weather).then( response=>{
	
	return response.json();

}).then(data => {

	// JSON data to the console for inspection
	console.log(data);

	// add the weadther description,texts or images to theDescription
	_this.theDescription.text = data.weather[0].description;
	_this.theCity.text = data.name;

}).
catch (err => {
	// Do something for an error here
	console.log('There was an error.');
});

Now you can test the production. Use the inspection tool in order to use the data from the JSON object in Dynamic Text Fields.

So that’s what it takes if you want to create an Adobe Animate production that can display data from OpenWeatherMap’s API. Of course you can work in a similar manner with other API’s and JSON objects.

Display the Weather Forecast in WordPress

In order to show your work in WordPress, you can use an iframe. Upload your production to a folder on your server. Then add am iframe along these lines:

<iframe src="https://yoursite.net/yourFolder/weather.html" height="480" frameborder="0" style="overflow=hidden;"></iframe>

When you upload your work you’ll need the HTML, JavaScript file and the images/ folder – of course with the images in the folder. You don’t need the .fla file, since it’s for production only, but I would recommend to put it there anyway. If you want to change anything, you’ll know where it is.

Resources

Categories
Multimedia Deign WordPress WordPress Workshop

A Sandbox for WordPress

One line of code. That’s all you need in order to get your sandbox. Developers often need a place where the can experiment with design ideas or Minimal Viable Productions. This tutorial will show you how to do this.

  1. Download WordPress from https://wordpress.org/download/
  2. Unzip the files.
  3. Delete the file wp-config-sample.php
  4. Download the file wp-config.php from your WordPress on your web host.
  5. Edit wp-config.php in your favorite editor.

If you have WordPress up and running the settings in wp-config.php will be almost the same. But you have to change one line of code, if you want to run more than one WordPress installation on your web host.

wp-config.php

Find this line:

$table_prefix = 'wp_'; 

// change this line to:

$table_prefix = 'sandbox_';

If you need more WordPress on your web host, just change the table prefix every time.

More about edition the wp-config read this page.

Categories
Multimedia Deign WordPress

Tutorial: Custom Frontpage with Widgets

It’s on “Jensen’s WordPress Show”

(18 minutes)

WordPress logo

Learn how to create a frontpage where you can edit the content. On top of that you’ll get three – or more – widget areas for your featured content.

Categories
Multimedia Deign WordPress

WordPress Guide

WP: Fall 2020

Here is a guide to WordPress 5.5. This version is just released by WordPress (august 2020). We have a brand new block editor with exciting features.

WordPress

What’s new in WordPress 5.5?

By now WordPress is skipped with a fantasctic block editor. Some even predict that the days of mighty Elementor and other competing block editors are counted. You don’t need a plugin in order to create fantastic content. Now WP is faster and more easy to use than ever before. Creating content isn’t harder than using Libre Office.

WordPress will load faster, and images will load “lazy”. Here is a guide to WordPress with tutorials ranging from installation of WordPress on your web host to advanced features on costum made pages – and themes. If you know your HTML and CSS knowledge about a content managing system is the next logical step.

Advanced Tweaks

If you want to tweak a theme and create some advanced stuff that the theme was not meant for you still may to do this in either PHP or use JavaScript with the WordPress REST API. If something is possible in HTML then you can certainly do it in WordPress. That is if you know how to.

Tutorials

Below you will find my WordPress 5.5 for Multimedia designers.

Install WordPress

If you don’t have WordPress on your webhost yet: here is a tutorial. Follow the step by step tutorial and pause the video while you install.

The host I use in the video is One.com. Of course this is only a sample.

Since I use One.com there is a discount offer for you here (and the discount will give me a similar discount too so you will support Multimusen too).

You can follow the steps on other hosts too. So if your website is on say Unoeuro or something else – just follow the steps of the tutorial.

Jensen’s WordPress Show: Follow the new trends on WordPress

Jensen’s WordPress Show

Here is Per’s new WordPress channel on YouTube where you will find more and more videos about WordPress. If you follow my channel you’ll know about the latest trends right away.

Create a Post

JavaScript in Gutenberg

Multimedia designer often add interactive UX elements such as small animations via JavaScript.Use the custom HTML block element. Add your script like this:

You have to use window.onload = function( ){ } in order to check that all elements are loaded. Just add whatever scripts you have inside that function. If you use document.getElementById without the window.onload your script will not work.

The Child Theme

Why use Child Themes?

Use a child theme if you want to tweak the theme with your own code or stylesheets. If you change the code in a theme and update to a new version your changes are lost. The changes you make in a child theme are your own.

Create a Child Theme

Here is a quick guide to child themes. First you have to create a child theme. Follow the steps in thies tutorial.

Add Widgets to Your Child Theme Frontpage

If you choose a static frontpage for WordPress your theme will use the template file front-page.php. In the next tutorial I will add a few wdget areas to the frontpage.

A Living Document

Per’s guide to WordPress 5.5 is a living document. During the fall of 2020 I will add more tutorials from my WordPress classes at the Business Academy Aarhus to this page. Eventually you will find tutorials about:

  • Themes
  • Child themes
  • Costum pages
  • Recommended Plugins
  • SEO
  • WordPress Securitu

Have fun: Code is Poetry.

More About WordPress

Did you know: There are more than 50 articles in the WordPress category on Multimusen.dk.

Categories
Multimedia Deign WordPress WordPress Workshop

Murat’s WordPress Tutorials

Murat Kilic is one of our fellow senior lecturers at Business Academy Aarhus. He is a WordPress expert, and his video will help new WordPress users in many ways.

On Murat’s </ startlearning > there are plenty of cool guides to WordPress tweaks.

On </ startlearning > you will find Murats videos and tutorials about WordPress tweaks.

Here are a few of Murat’s tutorials:

Install WordPress on UnoEuro

Categories
Artikler danish dansk WordPress

Sådan sætter du WordPress op på din localhost

Som webudvikler har man ofte brug for at kunne eksperimentere med sagerne i en sandkasse, hvor andre ikke har adgang. Her er en vejledning i at sætte WordPress op på din localhost – det vil sige en WordPress, der virker på netværket derhjemme.

Sådan sætter du WordPress op på din localhost (1:2)
Sådan sætter du WordPress op på din localhost (2:2)

Her er de vigtigste links fra disse tutorials:

Læs mere om WordPress i min bog “WordPress in the Classroom” (2017). Her får du blandt andet historien om, hvordan WordPress themes har set ud gennem tiderne – og du kan lære mere om, hvordan man selv kan bygge et theme.

Opsætning af databasen i Windows
I videoen er password = root og bruger = root; men sådan er det ikke på et Windows system. Her er bruger = root og passwordet er en tom linje.

NB: Denne tutorial er udviklet til et forløb på Multimediedesigneruddannelsen, hvor klasserne blandt andet lærer at sætte et WordPress-udviklingsmiljø op på en localhost.

Categories
MAMP Multimedia Deign WordPress

Create a WordPress Sandbox on Your PC

How to install WordPress on your PC or Mac

When you develop a web site it is often more convenient to work on a local computer.

A) Install the Apache Server MAMP

B) Install WordPress on MAMP

Set up WordPress on localhost

In order to run WordPress needs a server environment with PHP and a MySQL database. Here you have several options. Whether you prefer one or the other does not matter much. Here are a few options, choose one of them:

After installing the localhost, you can install WordPress on your local machine. Follow these instructions. If you prefer to follow a video tutorial, here is one more:

Test content

Of course you could write a lot of test content, just to see how every HTML element, any image or whatever works. A better alternative is this: use the WordPress test unit. Here you download test pages, posts and images – and then you will be able to inspect whether everything works as it should.

The Theme Unit Test consist of a xml file with posts, pages, images and so on. You can import them via Tools > Import. You may have to add a plugin in order to import.

In fact this option is very practical. You can import and export content from a localhost to your online WordPress when everything is ready. But first you should try out some themes, and see how they behave with the test content.

In the menu section assign the test menu to the menu location. Now you are ready to see your theme in action.

Try out a few themes

As soon as you have the test content you might want to test a few themes. In the Dashboard go to Themes > Appearance and search for new themes. There are thousands of themes out there, so try to find something that looks like the design you want. In my opinion you should go for an open source theme. Not because it’s “free”, but because these themes have a code-base that’s more easy to change. Often the so-called professional themes have a horrible code, and it is meant to be so. If the user is not confused, how could they continue to sell more solutions?

A Few Useful Plugins

When you have found a good theme, you should add a few plugins. Whatever you choose is a matter of taste, but I’d recommend these as a starting point:

  • Jetpack (performance, tweaks, speed and more)
  • Akismet (fight spam)
  • A page builder, like:
    • Elementor
    • Page Builder (Site Origin)
    • Or just use the standard Gutenberg editor (it is better than most people think).
  • For SEO
    • Yoast
    • The SEO Framework
  • Security
    • WP Limit Login Attempts
  • Webshop
    • WooCommerce (very popular solution)

There are thousands of plugins for galleries, portfolios, shops, images and so on.

Create Content

As soon as these things are done, you are ready to create the actual content. When we develop web solutions it is best practise to work with real content, rather than the boring Lorem Ipsum.

In order to avoid confusion do this:

  1. Delete the content from the Theme Unit Test
  2. Create real content:
    1. Pages for static content, such as “About Us”
    2. Posts for the blog posts
  3. Add widgets

Remember to use Categories and Tags. It will improve your SEO and give more power to your menus.

When you create the content, try you can try page builder!

Pagebuilding with Gutenberg

You should try out Gutenberg. It has many of the features, that you expect to find in Elementor and friends. WordPress’ new editor was not popular among developers when it was introduced.

The following tutorial is a fine introduction to Elementor by Adam Preiser. If you like the tutorial you can visit his tutorials on https://www.wpcrafter.com/ .

Pagebuilder: Elementor

Elementor is a pagebuilder plugin. You can drag and drop content elements where you want them. And if you have wireframes, you can imitate a basic wireframe in a few minutes.

From localhost to the Web

When your content is ready for production, you will have to export the content and the theme. The theme is separated from the content – that’s why you must do the export in two steps. But first you’ll have to install WordPress on a server.

Most web hotels have a “WordPress in one Click” option. Just create the WordPress site. Give it a name. And you’re ready to go. The next steps are:

  1. Install the theme (in the same way as you did on the local machine).
  2. Install all the plugins you want to use.

As soon as this is ready, you go to your local machine. Enter the Dashboard > Tools > Export – and export all content.

Now you go to your online version of WordPress and choose import. Remember to check the box with import media files. If you do so the local images will be copied to the online media library.

Now your site is online, and ready for whatever purposes you or your clients may have.

FAQ

Sometimes things work fine, but now and then we run into troubled waters. In this section I have listed some common problems, we see again and again in the multimedia classes.

Problem: you try to install a theme or a plugin, and get a prompt where you are asked to use FTP.
Solution: Check the folder permissions. Make sure, that the server has write and execute permissions in the folders.

Problem: I get a database connection error during WordPress install on MAMP.
Solution: In MAMP the password and user is ‘root’.

Problem: I get a database connection error on XAMPP.
Solution: On Windows the user is root and the password is blank. On Mac the user and password is root.

Problem: XAMPP crashes.
Solution: Use MAMP … 😉

In my experience XAMPP has a steep learning curve, and often errors occur out of the blue.

So if you work on either Mac or Windows I’d recommend MAMP.