Animation links (CSS3, parrallax, etc.)

http://en.wikipedia.org/wiki/History_of_animation

http://www.w3schools.com/css3/css3_animations.asp

http://css3.bradshawenterprises.com/animations/

http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html

http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

http://en.wikipedia.org/wiki/Parallax_scrolling

http://css-tricks.com/parallax-background-css3/

One last thing

HI. Forgot to ask if you could view my project in safari! thank you

Its done!

The Tea Room mobile magazine!

For the blog post go to my blog Geek Street.

Zulu Love Letter assignment: Robin Brink [BRNROB022]

Assignment submission: Robin Brink [BRNROB022]:

http://mendi.uct.ac.za/~brnrob022/zulu_love_letter/brnrob022/

Magazine feature and blog

The move to mobile

The trend nowadays is the use of mobile devices to browse the web. Smartphones and tablets have made it easier, now more than ever, to do so and the increasing popularity of these portables have led to the Mad (Mobile Application Development) era. The transition from desktops to mobile has meant that current website owners who wish to expand on their mobile users have to build or tweak their websites to suit mobile browsing (otherwise a browser automatically adds an page scroll which is not preferable in mobile browsing). Here a four methods which can be used for this transition.

Adjust

This method requires the programmer to adjust the viewport and text-size in the css. Webkit tools allows for the resizing and scaling of the webpages content. This approach is quick but problematic as the content and navigation is still made for desktop. This means that however a webpage would look on pc, it will look that way on mobile, just rescaled. Large files such as images would still have to load, slowing down the mobile usage.
An example in the coding would look like this:
1 html {
2 -webkit-text-size-adjust: auto; /* Automatically adjusted for Safari on iPhone. */
3 -ms-text-size-adjust: auto; }

Media Queries

One of the perks of HTML5 is its responsive layout capability. Using media queries, a webpage can adapt to suit different screen sizes. Problem with this approach is that HTML5 is still new so not all browser versions like IE8 are compatible with it. In favour of this method, I find it the easiest and method effective method (on a tight budget) to transition to suit mobile adaptability. Reason being is that with this method web designers can remove certain content from a webpage depending on the screen size. Using id or class div tags, content can be arranged in media queries so that large file assets such as large images wont load if say perhaps the screen is 480px. But this method would become strenuous in undertaking for existing websites already hard-coded to suit desktop layouts.
An example of this approach in the coding would look like this:
1 @media only screen and (max-device-width: 480px) {
 2 .desktopcontent { display : none;
3 }

 

*My magazine uses both the above mentioned approaches 

 

Redesign

A more expensive and timely approach for mobile conversion is redesigning the entire site. The site is designed specifically for mobile browsers so only necessary content and navigation are used, making mobile browsing easier and quicker. A link to the entire site should be provided if this option is used. An example of such site would be recognized (not exclusively though) by URLs ending with .mobi or contain mobile.site.com.

Apps

Anybody with a smartphone or tablet should know plenty about these. Apps are designed to best suit these portable devices. They are installed and used as programmes on mobiles, just like application software on pcs. Apps are lightweight and the most preferable option for mobile browsing. They are also quite intense in designing as they require most skill and expertise to make. There is now available apps for most popular websites such as facebook and twitter and other media (magazines and newspapers) such as Time and Daily Telegraph. 
 

Further reading on mobile design

smashingmagazine

alistapart

onextrapixel

slideshare

 

Saving image from canvas

To save the image on the canvas, a function toDataURL() is used to save the image object to the image data URL. This saves the image onto the local storage where is can be accessed as an image file. Another function that allows the user to save an image from URL is that window.URL.createObjectURL() but this function only works on Chrome. For this project, GIF images of beads will be used to draw on the canvas, so to save the image as one or to make all the individual bead images to render as one image, an array can be used. This array can save the images, convert them to strings appending them to the URL and when the URL is called the image will reconvert from string to image. The URL will be used as the "file location" to send the zulu love letter in an email so that the custom made love letter image is viewed by the chosen recipient(s). To see more on these methods, click here.
For my project a different approach is used. This method, which i think is easiest to use- and programme- is to convert the image to jpg, bmp or png using Canvas2Image. The user can rightclick or double tap after image is converted and choose a file location on local space to save the image. This method is explained further here.

Further reading on canvas

w3schools

tutsplus

 

My links 

BEADS Magazine
tholoana23blog

shani assignment link

Link to 'Ayoba Online Magazine' : http://www.mendilab.co.za/FAM3007F/2012/bdlsha002/Ayoba/index.html

Another Problem Identified: Gallery

Responsive Gallery is now completely Unresponsive!

Sadly, my gallery has stopped working also as a side-effect of the inclusion of a custom pop-up box. While I have struggled to get it to respond, I am unable to be successful.

However, I have identified the cause of the problem after removing code piece by piece. The gallery works perfectly until I attach this javascript file to it, which unfortunately is a key component of the pop up box:

<script src="SexyAlertBox/mootools.js" type="text/javascript"></script>

There is definitely some code in the "mootools.js" that conflicts with the code in my gallery's own .js file.

Having said that and weighed all the odds, I have decided still to keep the popup box. I have included many galleries into the websites I have built over the passed year, but I have never customized an alert box in javascript. And through this experience I am learning so much about how easily the javascript codes in the plug-ins we download and install into our websites conflict. Also doing an alert box is new for me and I feel I have gained more by including it into my project than the gallery. Although I have left the code for my gallery in as it is, it has just rendered itself unresponsive for a responsive gallery...what an ironic end to my project!

Swirl Magazine: Zulu Love Letter Feature

Swirl Magazine Feature Article Zulu Love Letter (w/interactive component)

Access my Assignment:

Click here to access my Zulu Love Letter assignment.
Click here to access my Blog.

Reflections & Rationale

About the Magazine:

My magazine is titled Swirl. I chose Swirl as it reflects a magazine that is both fun as well as trendy. I had no desire of creating a magazine that had an African focus as I wanted to place the concept of a Zulu Love Letter within the context of a more broader (and global) sphere.

Swirl magazine is meant to be a stylised craft magazine with a sentimental/nostalgic character. The magazine will showcase various crafts, art, and trends within those categories and the magazine is aimed at young teenage girls specifically.

About the Interactive Component:

The interactive component (i.e. building a Zulu Love Letter) was a great pleasure to create. I feel that as an interactive component it covers two essential functionalities, (a) it offers users the ability to create and manipulate as well as, (b) offering users the ability to share what they have just created -- adding a sense of social value to the component.

Reflections on the Assignment:

I genuinely enjoyed this assignment, I consider it a breath of fresh air! While I would've preferred to have the opportunity to really get our hands dirty with the JavaScript - as I feel we just saw the iceberg in the distance, not even got to the tip of it - I am pleased with what we've managed to learn. This very brief introduction to JavaScript has opened my eyes to the realm of possibilities that exist within this language and it is very exciting to add interaction to our work.

As far as media queries go, that must probably be the most useful thing we've learnt so far. With the migration of most web-based browsing to mobile and tablet, this certainly has been an upgrade to our skills and abilities and I am pleased that we have by now managed to get a solid fix on fluid layouts, which of course is integral to the use of media queries. Thank God for HTML5 and CSS3!

In terms of the different strategies magazines have been adopting in order to ease into the mobile era have been making use of scalable designs, such as the one we have produced through the use of media queries. With the wave of touch screens that have taken the mobile (and tablet) markets by storm, a major interest and curiosity surrounding interactivity has been ignited. In terms of this, magazines have begun investing resources into producing online versions of print magazines in the form of websites as well as mobile apps. These apps offer interactive components, competition entries via the mobile apps, sharing and 'liking', hyperlinking (for example in fashion magazines to brands and products) as well as other unique and exciting features. Transforming magazines in this manner also allows for animation effects and the incorporation of multimedia content such as videos and audio, making the experience of magazine viewing a million times more interactive, informative and innovative than their print versions. Magazines are also thus more affordable and can be read 'on the go'. These are just some of the aspects magazines have honed in on in their transition into the mobile era.

On the whole, I feel pleased with what we have learnt and it will definitely prove extremely useful for our SRP and other future projects we will be lucky to find within our reach.

Identified Problems

Below is a list of key problems I have identified in my code:

Function: "Undo"

The problem I identified with the undo function is as follows: when one adds a bead and removes it, the bead 'physically' removes, however, it does not remove from the beadArrayData we have defined. So if one saves the bead array, then it will still load with the bead that was undone in place. I attempted to rectify this by adding a piece of code (into my removeBead function) that read something like this: 

beadArray = beadArray + new Array ();

Sadly this didn't work. Though it did clear the removed bead from the string but when one added the next bead and upon that added another, the second bead (and consecutive) added after it changed the colour of the first bead added after the removed bead and continued to only change the colour of the one bead and not actually add another bead. So that attempt failed.

Function: "Append"

For some strange reason, when the URL is appended, the string of beads are too long and exceed the width of my div id="logg" that I have defined. While I believe the solution to this is attainable and probably simple, I couldn't manage to figure it out without breaking the append. The append function also on occasion causes my "component" div to shift left after it has loaded the URL in some views -- I'm not certain how to fix this.

Custom Alert Box

I managed to customize my alert box (which you will be able to view if you click "save" or "save as PNG". While there is no error to speak of really, I just wasn't able to customize it to the extent I would've preferred.  The CSS, while straightforward, corresponded to the JavaScript, which was not quite as straightforward. Also the Alert box is NOT responsive and I didn't fully understand how to achieve that without completely dissecting the CSS (which I don't have as much time as I would like to do so).

So I hope my efforts will at least be noted in this department.

Page Height

I do not wish to take out the custom alert box that I made but ever since I added it, the height of my page seems to exceed the footer. While it doesn't affect my media queries (that's why I have decided to keep the custom alert in), it still forces my webpage past the footer, which then displays just the gradient background with the pattern as set in the CSS of the page.

Project

I have emailed you about an issue with my javascipt+canvas detect, but you haven't replied. Here is the link to my site www.mendilab.co.za/FAM3007F/2012/apspai001/magazine/index.html . I have the detected code in my html document but have commented it out because it deletes the browser scroller.
All my other blog post I have been making are on my personal blog: http://www.mendilab.co.za/FAM3007F/2012/apspai001/

Strategies Magazines Use to Adapt to the Mobile Era

In a day and age where people are constantly on the go, individuals have become increasingly reliant on info on-the-go, as opposed to physically being confined to their chairs in front of a desktop or television.  Whether magazines display on mobile devices as scanned images embedded in a Flash object which can be navigated like a physical magazine, or as responsive web pages, there is a general expectation that magazines that are trendy, tech savvy and forward-thinking, will be available on multiple platforms. This is a valid expectation for magazines to embrace the mobile era, considering how doing so can broaden their target markets, thus raising their notoriety and increasing their sales via online subscriptions.

But adapting to mobile requires implementation of carefully planned strategies.  Whether they be through creating a unique mobile application, a dedicated mobile site, through adaptive layouts, or tweaks, users expect a funtional and easy to navigate platform, especially since iOS and Android offer mobile browser support similar to that on desktops. People want to be able to fill out forms sithout facing stumbling blocks because the developers did not take into consideration the fact that connectionas are slow, mobile screens are smaller,  or text is problematic, and therefore did not think to use check boxes, select menus or lists or radio buttons as opposed to text fields.  Anything to make inputing info easier and quicker. This is a key issue if magazines do not consider that their physical magazines are very different from their virtual counterpart. Considerations must also be made for email newsletter design on mobiles to increase viewer readability. Things like adjusting the viewport and text size while taking into consideration that downloads of things like stylesheets can slow the process and result in a bad user experience.

Adaptive layout uses media queries with modern devices able to query things like device width and height, orientation, touch, and much more. Ofcourse, source order in the mark-up should be impeccable, for content to display in the proper order. Scalability must be considered for adapting to different layouts. This is cheap in terms of adapting an online magazine’s content because only minimal additional design is required. However, older mobile browsers (including Internet explorer 8) do not support media queries thus excluding customers in this bracket. Also, images can render slower when the content in HTML is downloading, also because of low bandwidth in Africa than overseas.

Creating an altogether new dedicated mobile website version of the magazine is more ideal but a micro website will cost more money to build since they reside on their own domain or sub-domain (for example ‘magazine.mobi’ or ‘mobile.magazine.com’). Ensuring that visitors are redirected to the dedicated website correctly (with option to view the full site version) and keeping assets such as images to a minimum, will improve performance in terms of quickness and will attract  more consumers because of this appeal. However, maintaining the micro site (in terms of optimizing assets and adapting content) can be expensive for a magazine, and if not designed well, can throw customers off if the design is too different from the full version(desktop).

Applications/Apps for example are great to consider for a mobile magazine since they offer search functionality, sort and filter UI design and apps are a n increasingly popular mobile development trend. They are popular because they are scalable, work cross platform and are a more affordable option. An app is also a handy when refining the data the customers are after. For apps to be effective though, magazines will definetly need to invest in a public relations marketing campaign and creative narratives around hot news, also perhaps running contests to promote it. Apps are valuable because they offer users a more streamlined journey and they use native device controls. They also offer better perfomance and speed as they are lightweight and rely on minimal bandwidth. The tricky things when considering apps include, again, ease of use, easy setup for customer and must have some value to the customer through visual appeal or personal connection. Apps on the downside, require pre-approval from a third party and their creation and maintainence, like a micro site, is costly.

Magazines therefore have decisions to make with the options available in order to keep moving with the times, embracing the smartphone and tablet era to attract a wider customer base and cater to existing customers.

The World Needs More Love Letters...

YAY! I have finished this assignment.... and... it WORKS! Hooray!
I really enjoyed learning more about how sites are so easily adaptable for desktop, mobile and tablet. But I think it's safe to say, I am glad the assignment is done and uploaded.

I struggled a little to keep up with the speed in which we covered the assignment and often felt like I didn't want to add anything extra in case I broke the code, it stopped working and I didn't know how to fix it.

I think that most magazines need to have an online version these days. The whole world is moving towards an online location and print media is just not as profitable as online media. The ability to create interaction allows users to build a relationship with the magazine by interacting with it. I have seen many magazines use interactive quizzes which end with a recommendation about what type of clothes to wear, or what kind of food you should cook etc. The interactive elements allow the user to not only interact with that one particular page, but to follow other links provided on the page, and perhaps even do further research on the topic or item they are interacting with. Another aspect which online magazines are using, as we studied in this assignment is the ability to send and save our Love Letter for example. Not only could they send or save their results from the magazine app but they can share them on Facebook and Tweet them too, which helps the magazine to get more followers and potentially more readers.

As well as all the above mentioned points, an interactive online magazine which is available in tablet and mobile format is of huge value to readers who do a lot of reading on their phones and ipads. For example business men who commute on the trains for 2 hours every day and need something to read on their ipads. Rather than buying a new magazine every week, they can simply access the mobile version of the magazine which results in more readers for the magazine, more frequent downloads because it could never be sold out, easily transportable magazines, and feedback from their readers as to what they enjoy, and what they interact with the most.

 The interactive component helps to attract readers, keeps the magazine fresh and up to date, keeps it accessible on mobile devices and tablets and thus brings 'print' media into the digital age. Therefore I think the future of magazines is to head towards an online, interactive, mobile-able version.

Here is the link to mine, it's very simple, but that's how I like it. No one wants a site that's going to take a thousand hours to download and chew up all the data on your phone!

http://mendi.uct.ac.za/~cnlemm001/