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!) 

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