Back log on the blog front.....

The rest of LAST week in Codeigniter

Wednesday April 20th 

I got most of the functionality working including reading to the database. We were given a check list in class and I checked my list of tasks from the sheet. The difficult part of this project is styling in CSS so I decided to leave it and catch up with my final year project. A large part of creative multimedia programming depends on bringing factors together; the layout (HTML), styles (CSS) , user functionality (JavaScript)  and server side functionality (Codeigniter and php with a connected database). I am starting to see the reason and big picture and how and why all of these factors come into play.

Using Codeigniter as a tool and a platform for a near enough real life project is helping me understand more about the user experience and how this ties in with designing and programming functionality into a project. The user has to be in mind at every step! 

This is what I have achieved in basic HTML and CSS it is responsive so far...

Image 1: Three responsive views of 'Go West' news site featuring day trips in the West of Ireland 

Thursday - Friday was spent on a different project - a different Codeigniter and creative multimedia programming exercise.  More about that later...

The weekend of April 23rd - 24th 

ALL Weekend was spent not trying to get the articles to be updated, deleted and read to the database like I wanted but spent getting everything to look nice! Most of Sunday was spent trying to get a registration form to style. This is what happened: when I fooled around in google inspect - (note I did NOT touch the CSS)...

Problem?

Fix? Copyied & pasted a 'good' login form to a dummy sheet and pasted the 'good' form data part from the messed up one (that I know is being read to the database) and smushing it together again.

Anyway it worked but instead of being overjoyed I was relieved that I don't have to ask another silly question!!!!

Image 2: Two navigation bars - Register User Page 

Image 3: Correct Navigation Bar - Register User Page 

This is making me wonder about this industry as a whole. Little regulation and weird stuff like this that can take hours to fix. Don't get me wrong, the levels of satisfaction I have felt this week are enormous but it is soul destroying when you can't execute any creative multimedia programming techniques that you want to do.

I am saying is it takes one away from other tasks and valuable creative/analytical thinking if you are going around in circles. Turns out I inserted two by accident and I can't seem (by Monday night to get rid of it!) .....

Also from image 3, the container id that styles the registration form in the above fields, in the Register User page seems to be semi-working today - another weird CSS thing, and horay another thing that is 'less mess' to fix. Below is the 'good' login page with all ids' being read into Codeigniter from linked assets CSS file. 

Image 4: Good log in form reading the CSS to be centered & behaving well 

 What I learned this week:

- That I can easily link & write views in codeigniter!

 - I am using the inspect element in Google & it is saving me so much !!! Thank you   Google! 

- I learned to (finally) tab my code correctly so that it mimics the natural form of the document how it is being read by the browser, whats more I understand why. A small step but enlightening.

Messy weekend programming issues continue....

I had a messy moment linking files and trying to implement the ‘alt’ attribute to an image in Codeigniter. I am still unclear which of the below is correct to use I am going to ask a tutor tomorrow I assume the latter, with the alt tags. Feel free to comment.... 

No alt tags:

 <?php echo "<img alt=\"Galway Lake with Mountains\" src=\"$img_base/assets/images/lake.jpg\" />"; ?>

Alt tags:

<img src="<?php echo $img_base . "/assets/images/skellig3.jpg"?>" alt="Skellig Bee Hive Hut" />

I am also getting red errors on inputs in a form and I don't know why but I have a feeling its because I don't understand enough about forms and buttons and taking in data from the user. I need to go back and learn about forms and buttons. We are designers, our job is to make a world with richer user experiences and lets face its all about the user in creative multimedia programming! 

Image 5: From Input Codeigniter and errors appearing (again!) 

Not fluent in creative multimedia programming!!!!

It has been a crazy week trying to get creative ideas to execute in via creative multimedia programming. I am listening to rubbish house music partially to relax and partially because this week was spent in a lot of silence!  However, I will start the blog by saying HOW MUCH I have learned about codeigniter, its framework, functions and the general flow of data. My last post dealt with database structure and getting basic inputs from the view to controller to model and back to the controller to be sent lastly to the view.

Crawl before the wobbly walk….

I had to back track a little and last weekend I spent Sunday, all day Sunday doing a tutorial. I spent the day getting php errors in the browser but this exercise (creating a table of authors on the database) to render an updatable view to the browser was invaluable in showing me the creation of a variable and how to retrieve the data. At one point I was trying to pass a variable into itself without really understanding why. Then with help, ( phone a friend time) I had a chat and then knew I was trying to pass an array of data to the $variable. Wow a revelation. What has this to do with creative multimedia programming? Turns out everything – I can’t make anything that is dynamic, creative or functional for an end user without this skill set.

The idea here is to take another project designed to be responsive and bring it into Codeiginiter to have more functionality for the user.

Responsive GoWest News website: three views in various screen states. 

Monday April 18th 

Stepping up a bit I took our tutors project from class and had a few good reads of it to see how the ‘Local Notice’ project works. There is a lot going on in the project and covers all parts of the CRUD functions. I spoke to a few class mates, the previous Friday (April 15^th) and ‘they’, the classmates, said it was  a synch to shoe horn this project into our News project. I was skeptical.

After getting little understanding from class on Monday and no further down the line of understanding I just started studying, again and going through the basic tutorial from Sunday, again.

Tuesday April 19th 

I was basically at this again all day. There was talk of the FYP (Curious Room) going into codeigniter and I got the energy from I don’t know where to try the news project first to see if I could get something working in codeigniter that actually pertained to course work. Enough messing about!

In the evening from about 7 onwards I started on the News Articles assignment, this assignment is part of two modules, advanced programming for the web and emerging web technologies. I could not get anything to work. Then after a few hours rest it dawned on me that my fields in the data base have to match every query in the PHP project exactly. I got out of bed and took a fresh file and started using the find and replace tool again, page by page, function by function. There were 17 I think in all.

 Lesson learned here: (since the previous Friday April 15^th) I was trying to use the editor Netbeans but on a personal note brackets seems to suit me, a beginner in this creative multimedia programming gig a lot better. I got it working in under an hour and just thought it cannot be true. So I went to bed and looked at it on Wednesday.

There were still a lot of error messages and glitch things going on by my understanding of tracking them down is getting better, every day by reading the messages. What I learned from this project was where to find files from the controller and how the flow of information is passed from the view to the controller to the model and back to the controller again before being sent lastly with a response, an action to the user. 

I spent around 4 hours adding some navigation bars to three pages to my FYP and frankly by Saturday I could see that they were not useful, it was a lesson learned in the world of creative multimedia programming but a good lesson!

It has been a bit ridicilous trying to get two projects going in code igniter and not actually knowing: 

a) how to tackle errors 

b) how to write functions that do something unique to that project.

Consensus: A good week in exercises over all. 

Mobile Responsive Web Development Multimedia Project

 Image 1: Home Page  'Go West' news website

A large part of the course work in the HDip in Creative Multimedia one project was to explore techniques to make websites responsive and mobile ready. In semester one we were taught the basics of designing websites and the correct usage of syntax and mark up. Using forms and classes such as pseudo classes (ie for use in hover states) were also implemented in some simple web layouts. Semester two is focused on how to make website responsive by exploring different techniques to execute designs by manipulating HTML 5 and CSS3 to render pages in different views. Some techniques we have explored include media queries, the flexbox model, fluid grid layout and bootstrap. The first assignment was to build fully a responsive website and design a news type website. I chose to design a website highlighting trips on the Wild Atlantic Way as an additional source of material for the tourist or native traveler to the west of Ireland. It was exciting to dig out photos and video from last year and develop stories that would interest a user.

 Image 2: Home Page  'Go West' Iveragh Penninsula Page

For this assignment a lot of research went into how news type websites are built and also how travel bloggers approach the design and content delivery of their sites. I wanted a site that would hold the users attention and offer unique photographs. The website was kept simple and to echo the sentiment of reading a newspaper. The inspiration for the site layout was the simplicity of the New York Times and the BBC news websites after the article is clicked into, 

Image 3: 'Go West' zoomed out footer area 

The assignment was a challenge and it works responsively. This was done with media queries. Images were embedded in CSS as well as embedding them (traditional method) in HTML. A form was also created and froms are always a challenge especially when changing viewing widths on screen. From articles I have read SASS is a good tool for developing for mobile but there is no time this semester to explore this option. 

Image 4: 'Go West' news site zoomed in footer area  

Some time was spent using bootstrap to see if it was a good option for this project but this was ruled out early as my preference was to learn about semantic mark up well and this using good HTML5 was interesting and made me realize about more serious issues of web development such as usability and legal tag usage.  

As you can see from the designs all of the photography and advertising designs are original as well as the text. It is full filling to produce creative projects that are generated by my own hand. As part of preliminary research eight Americans and one Canadian were enlisted to fill out questionnaires to see if the content was viable as a project and it was a difficult task to get people to really fill them out and be honest. It was interesting how the opinions swung! Persons from other countries were chosen as they would be visitors and using the site to research their trips to the west of Ireland. 

The next step is split up the pages and to implement additional functionality by programming parts of the html with embedded php to be readable and editable using the framework CodeIgniter. The next step will involve using functions and calling them up through the view first, to the controller and finally the model and passing the data back to the user. This is sure to be a programming challenge from finding errors and bugs to hopefully getting the MVC working. It will be exciting to see the website come to life and loose its static qualities!

Image 5: 'Go West' news site mobile media query of footer area and navigation
Note: images are responsive 

Image 6: 'Go West' Mobile ready navigation width approx: 200 pixels wide

HDip in Creative Multimedia Programming

The year in some detail....

Creative Multimedia Programming is made of many parts. The Hdip in Creative Multimedia Programming offered in LIT is broken up into three parts. The first two semesters revolve around learning new technologies, applying them in the lab and producing projects that incorporate the different learning modules. The third and final part is spent on work placement to gain experience in mostly the front end development side of web development. Semester one of the Creative Multimedia Programming course was spent learning evolving web technologies including Java Script, HTML 5 and CSS3. Using MySQL and data base creation and management was another module that introduced us to the fundamentals of this subject for application in project work for semester two.

Other modules veered more on the creative side of multimedia including, 3ds Max. For this module we produced some art work and a small animation at the end. 3ds Max was taught in detail and we explored how to make and manipulate objects, apply materials to objects, adjust lighting and how the lighting is generated (ie raytracing). At the end of the module my understanding of 3ds Max is solid. However, to maintain this understanding I need to practice.

Fruit Bowl drawn in 3ds Max 

Another creative and design oriented module offered was Interaction Design which included exploring design elements and principles and where to apply them. Interaction Design made me realise how important this subject is regarding user face design and designing for users of multimedia products. This module also introduced drawing tools such as Photoshop and Illustrator. The software we used in this module was IntuiFace, useful for putting together interactive mock-ups and presentations. IntuiFace also for designing for touch screens so this was another facet to think of whilst designing the project in this module. Interestingly enough when I went to purchase a new pc I was shocked that touch screens are now so prevalent. Only a year ago it would have been unusual to see one in an average electronics shop.

 Semester Two 

The second part of the course in Creative Multimedia programming includes modules to expand understanding of web based applications. In one module we have explored evolving web technologies. It starts to get exciting when any knowledge from semester one is carried over and layered on top of new methods for producing web based media products. One developed project was a responsive web site. It was exciting to see the results of different approaches including bootstrap, media queries and flexbox. The knowledge from this module is helping in the production of the final year project which has to include all elements of creative multimedia programming.

Another module we are having a lot of fun with is advanced web programming. In this we are learning how to use php, the Codeignitor framework and to apply our understanding of the MVC framework in our final year projects. So far it is trying! The purpose for this module is to get our websites to read and update databases and take the development side of programming a web site a step further.

The design and creative aspect of the course is further expanded in the modules Interaction Interface Design whereby we had to produce a design for a mobile app. Our goal was to explore a set of use cases to understand the intricacies of the creative design step by step so in-turn, it helps the production of a project by showing in written and sketched form a detailed account for the programmers when it gets to that stage in the project. The use cases also included error handling functionality in the design. This project was great as it dealt only with mobile usability and got me thinking about programming the mobile part of the final year project. 

A low-fi sketch for a mobile app, part of project Interaction Interface Design 

A low-fi sketch for the mobile part of final year project 

Finally Interaction Interface Design includes producing an interactive portfolio pieces as a way to show potential employers what is produced after learning and applying principles of creative multimedia programming.