Showing posts with label responsive media project. Show all posts
Showing posts with label responsive media project. Show all posts

Sunday, 24 April 2016

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 15th) 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 15th) 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. 



Monday, 4 April 2016

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