Tristan Griffin s5006448 ::
Interactive Media 2015
The following document will explore the
technologies, code and software explored during first semester of
2015. Please refer to Journal website for examples, you will find
them categorize in the menu by week, then by class activity, group
activity and homework. There are approximately 25 inclass examples
and 38 homework examples provided in the digital Journal.
Over the course of the semester we
covered the basics of creating a HTML code structure and how to use
the HTML elements in conjunction with CSS and Javascript. The basics
of website file structure was also addressed, for example CSS, JS and
IMAGE folders and how to intergrate them into the HTML code. The use
of Sublime text editor assisted in the creation and editing of the
HTML, CSS and Javascript files. We were also introduced online
services such as GitHUB, codepen, w3 school, codrops and CSS diner
which assisted in our learning and development.
In week 4 we were introduced to
responsive layout design, creating an experiment with the 'responsive
man', this extended eventually into full responsive website layouts
which can be assisted by online responsive generators such as
www.responsivegridsystem.com
or throught the use of templating such as Bootstrap. I have since
made an effort to make all my web based creations responsive as
people will often be viewing content on mobile devices in preference
to a desktop environment.
Quite alot of time was spent on
intergrating CSS into our website content. We explored basic CSS
element control ( changing and applying attributes such as color,
size, shape, z-index and position ), as well as CSS animations and
transformations (week 7 – 8 ). I extended this exploration with
the creation of a program that displays an image as text
(http://artworkprocess.com/textify/index.html
). To achieve this effect I used a combination of AJAX, Javascript,
CSS and responsive webdesign.
Group activities play an important role
over the semester, i worked primarily with Ryan, Enya and Grace. I
found that group activities and assisting fellow class members during
the semeter on class activities helped in my learning, particularly
in being able to find code errors. As a group we looked at
javascript, intergration of video into websites, HTML5 boiler plate,
attribute selectors (which followed the CSS diner
'http://flukeout.github.io/'
test) , bootstrap and for the final group project we researched
'Content Management Systems'(CMS). As a part of the CMS project I
experimented heavily with javascript to populate content fields using
datablocks, jquery to populate content datablock based on user
selection and iframe intergration. I then had to do extensive
research into creating basic Image and Text CMS systems, using MySQL
and php handling of text and images. I discovered that storing an
image in MySQL has been banned by many webhosting companies due to
the belief that it degrades their services. This led me to
researching and learning the PDO (php data object) language and how
to dynamically create sqLite databases (the advantage of PDO and
sqLite being that you do not need to setup the mysql server
privledges. You just upload to the server, nothing else required).
This technology has been implimented into the final website project
and a digital artwork for NEW MEDIA.
Conclusion
Ive entered interactive media as a
first year Fine arts student with an IT background. Until this year I
had not contemplated combining these two disciplines but with this
course and new media I am begining to see the potential for this
combination. As a
result of interactive media and new media classes I feel that my
programming knowledge and traditional fine art techniques are
competent enough to be able to start to focus primarily on conceptual
development.
The
potential for the digital medium to create art that is performative,
sculptural, ephemeral,
interactive,
globally accessible, self running, adaptive, voyeuristic,
experiential and emersive excites and inspires me.
Week 1
Inclass: Introduced to 'sublime'
text editor for use in programming. Introduced to GitHUB and its
useage. Covered basic structure of a HTML page including creation of
a CSS file and its linkage in HTML
Group activity: working with
Ryan and Grace we were asked to briefly research javascript which we
then presented to the class
Homework: extention of HTML page
and experimentation with CSS to create buttons, shaped boxes,
responsive layout, slideshow and menu
Week 2
Inclass: Covered
the creation of a basic website with a menu to be used as a journal.
Group activity: working with
Ryan we research the use of video on a website, we created an example
using various methods of adding video to a website ie iframe, html5
and embedding .
Homework: Creation of a
responsive menu and responsive paragraphs. Exploration of Bootstrap,
creation of a bootstrap page with experimentation with bootstrap
image bordering.
Week 3
Inclass: Activity
was based on Skyes 'website' very brightly colored, not responsive.
Was designed to get a better grasp of html code layout
Group activity: working with
Ryan and Grace we research the use of HTML5 boiler plate.
Homework: Experiemtation with
javascript to populate content fields using datablocks, jqery to
populate content datablock based on user selection, iframe
intergration and basic PHP experimentation.
Week 4
Inclass: Bit
of fun with CSS in the creation of a responsive man, but resizing the
browser the positioning of his facial element and width of his head
changes.
Group activity: none this week
Homework: Initial research into
creating basic Image and Text CMS systems, using MySQL and php
handling of text and images. Discovered that storing an image in
MySQL has been banned by many webhosting companies due to the belief
that it degrades their services. Additionally researched various ways
to add sounds to a website and how to control those sounds
dynamically.
Week 5
Inclass: This
week we were asked to try and complete the CSS Diner test. A series
of 16 CSS selector questions, some of which were difficult.
Group activity: the group
activity with Enya was an extention of the CSS diner test in that we
had to be able to select various elements and alter them. In the
example I have colorcoded the selected items.
Homework: none this week
Week 6
Inclass: CSS
animation and transformation was the focus this week, playing with
the pulsing heart code which was from codepen.
Group activity: non this week
Homework: Focus was on embedding
elements. A pdf was embeded into an Iframe, to resize I learnt the
used of 100vh (vertical height) CSS attribute setting as using
percentage on vertical height can be problematic . I also embeded
icons into a responsive menu, the application of a Social Nav menu.
Week 7
Inclass: The
focus was on extending last weeks CSS animation and transformation
experimentation and extending it to moving objects with javascript. I
had fun with this project by creating a pacman chase game with sound
(the idea being if you click on pacman, your the ghost, that the
sound will stop). We also played with more examples from codepen.
Group activity: non this week
Homework: Extended learning and
knowledge of PHP language. Created first versions of 'textify'.
Week 8
Inclass:(this week Skye was away,
sent online lecture to complete) More
play with javascript, changing the content of html elements and
output. WE were asked to create a face with CSS animations, the
highlight being 'CSS face lost in the street'.
Group activity: non this week
Homework: Created an basic
online version of 'textify' which required AJAX intergration. Worked
further on PHP for reading a writing to a text file on the server.
And a little play with CSS to create 3D elements.
Week 9
Inclass: As
Skye was back we revised the previous weeks javascript, as a
challenge when you click on the color change buttons the dragon will
move around the screen, this is achieved by toggling the animation
cycle of the dragon on and off.
Group activity: non this week
Homework: Focus
was on responsive Image Galleries that were capable of holding HTML
content not just images. Secondly I explored creating a website that
would scroll tot he right and left , instead of up and down. This was
difficult as web code/design has been focused on downward sliding
content. This week also saw the completion of a
responsive/dynamic/online 'textify'
page completed
Week 10
Inclass: The
official introduction to bootstrap responsive grid system and
templates
Group activity: exploring
bootstrap code and templates, Enya and I produced a demo website for
our CMS group project.
Homework: Lost of homework this
week, due to the group project presentation coming up, dynamic UL
creation, image uploading to server via php, WYSIWYG text edit
intergration, adminLogin for sqlite, password protected pages, sqlite
server tests and the C3 website template/editor which is to be used
for the CMS. Also the early stages for my personal website using the
right and left scrolling website code from last week but extending it
to have mouse scroll overrides ( scrolling the mouse wheel scrolls
the screen left and right instead of up and down).
Week 11
Inclass: Playing
with javascript to call .data() and use the callback to change the
color of the screen, some work on the group presentation was made
this week as we will be doing it next week.
Group activity: non this week
Homework: Group presentation
next week so finalising how to use PDO server code to read write and
append the data base was the focus as well as intergrating the
dynamic menu system into webpages. Research into using javascript to
callin to and from PHP/the server and using the returned data was
made.
Week 12
Inclass: Presentation of Group project
www.interactivemediacmsgroupproject.weebly.com
No comments:
Post a Comment