tag:blogger.com,1999:blog-14645018780092816802024-03-05T21:48:59.677+01:00Gayr's Multimedia StoryGayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.comBlogger288125tag:blogger.com,1999:blog-1464501878009281680.post-71048068384666994382011-05-11T22:05:00.002+02:002011-05-16T11:30:33.863+02:00Artefact 6 Evaluation<!--StartFragment--> <p class="MsoNormal"><span style="mso-ansi-language:EN-GB;font-family:Verdana;">Overall I am very happy with artefact six and the point it has brought me to within the personal research project. Due to the feedback I received from artefact five I feel that creating a ‘web package’ made from an iphone application, ipad application and website will attract a broad range of students. I have made the iphone and ipad application connect with the same scoreboard but for different variations of the game. This will bring a sense of competition to the game and bring students together over facebook as they can share/compare their scores therefore this will advertise the art gallery more.<o:p></o:p></span></p> <p class="MsoNormal"><span class="Apple-style-span" style=" ;font-family:Verdana;">Another reason why I have created two variations of the game for different reasons is because of the user experience design. The iphones size is restricting therefore it would be difficult for users to recreate pieces of artwork to that scale successfully in the amount of time given. In place of this game on the iphone I have created a question and answer game. By creating these two games I will attract a broad audience made from more logically minded students that will be attracted to finding out more facts as well as students that are more attracted to the creative aspect of the application.</span></p> <p class="MsoNormal"><span class="Apple-style-span" style=" ;font-family:Verdana;">I think that the applications work well together as they all create a sense of what the art gallery is like through its graphics, layout and artwork displayed within the application. As a final artefact the web package incorporates all aspect that new web interfaces has done to change traditional artwork within education. It is a developed interactive web interface that allows students to develop their education and experiment with forms of artwork both traditionally and digitally. Entwining their museum experience with a new web interface gets students more involved with the artwork.</span></p> <!--EndFragment-->Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-57799759843274742112011-05-11T21:34:00.001+02:002011-05-16T11:31:22.407+02:00More Artefact 6<div>Due to the feedback from my last artefact I have created an iphone version of the game with a social networking element to advertise the gallery and give the gamers some one to compete with. </div><div><br /></div><div>I have done a different game for the iphone due to UX issues. It would be hard for the user to create a drawing of a high quality on such a small scene so I have made an ipad version that could be used by visitors within the art gallery. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdCncI3TDTf47GW6wdpxM8GQGh2ipSM3qgpn7-d2c9i3zMRuP8iVa93-cxfQdf1kZcfvgd8KTeQewdNyXe6wsNeJXLPFNZqTzXDwgDBykVjmJzccPp2vv-aR1X9lZEWBhFNRNN68Elcgk/s1600/iphone_UI.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 176px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdCncI3TDTf47GW6wdpxM8GQGh2ipSM3qgpn7-d2c9i3zMRuP8iVa93-cxfQdf1kZcfvgd8KTeQewdNyXe6wsNeJXLPFNZqTzXDwgDBykVjmJzccPp2vv-aR1X9lZEWBhFNRNN68Elcgk/s320/iphone_UI.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605544538415583106" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMDrRr-gskuOEvQNajGLHCLkariV9J1HDHN3yq4344TXWZoHFQ7S5Ej-ZOc9NGM0A6dGKaNfVSKEcjt6kezWEwHmOfKIPQaBR3G0F-W9l2mHSrf6pPV2q0zEtPwr5je6W8iav88lOb2vo/s1600/iphone_UIQUESGAME.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 176px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMDrRr-gskuOEvQNajGLHCLkariV9J1HDHN3yq4344TXWZoHFQ7S5Ej-ZOc9NGM0A6dGKaNfVSKEcjt6kezWEwHmOfKIPQaBR3G0F-W9l2mHSrf6pPV2q0zEtPwr5je6W8iav88lOb2vo/s320/iphone_UIQUESGAME.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605544532312791346" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKIUIWvsHH3xnMBWPrBo-oIHfAnThf6OPLjEfWIoTGhL9fLOZthDcMnbQDIrDIZ72iH5DLoqQzrmKag5miozwfdpDDcCVut97NeVbtOObU6uB0IEd6TPCNApi_fGx0db8n5vdDq-gpsw/s1600/iphone_UIscoreboard.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 176px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKIUIWvsHH3xnMBWPrBo-oIHfAnThf6OPLjEfWIoTGhL9fLOZthDcMnbQDIrDIZ72iH5DLoqQzrmKag5miozwfdpDDcCVut97NeVbtOObU6uB0IEd6TPCNApi_fGx0db8n5vdDq-gpsw/s320/iphone_UIscoreboard.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605544524098527218" /></a>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-73688500036994887602011-05-11T21:17:00.001+02:002011-05-16T11:32:06.142+02:00Feedback from Artefact 5<span class="Apple-style-span" style=" color: rgb(51, 51, 51); line-height: 14px; font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;"><div><span class="Apple-style-span" style=" color: rgb(51, 51, 51); line-height: 14px; font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;">This is the main feedback I have used to create artefact 6</span></div><div><span class="Apple-style-span" style=" color: rgb(51, 51, 51); line-height: 14px; font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;"><br /></span></div><div><span class="Apple-style-span" style=" color: rgb(51, 51, 51); line-height: 14px; font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;"><br /></span></div>I like it. I also agree with sam on the social media approach too.<br />Some possible developments I would suggest...<br /><br />Add easy, medium and hard levels to each portrait/image<br />easy - image is transparent<br />medium - select parts of image is transparent, the rest blank<br />hard - blank background only<br /><br />Maybe a larger iPad version would work better for kids too. Could be attached to the wall for passing kids to play on as art galleries are usually boring for kids.<br /><br />Win medals rather than extra pens/brushes. Giving them more tools would be a natural development of the game anyway. Start with a pencil only then develop to full colour set of pens, etc. The rewards should be medals for completing each artwork. Gold for 1 - 10 seconds, silver for 11 - 20 seconds, bronze for 21 - 30 seconds finally 30+ seconds 'FAIL!' These times would obviously depend on how complex the artwork was to start with.<br /><br />With using these medals you would still be able to include the leaderboard. 'John got a Gold medal for completing Fisher Boy in 4.5 seconds. Do you think you could beat his time?' Also you could after collecting x amount of gold medals give them 'youve won a £5 voucher to use at our gallery gift shop'<br /><br />Overall I think its a brilliant idea that if produced well could spark more than just the 8 - 13 year olds playing on it. Yes, this means that I would be trying to beat Johns time of 4.5 seconds to gain myself enough starts to get a £5 voucher <img class="emote_img" src="http://static.ak.fbcdn.net/images/blank.gif" alt=":-)" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; height: 16px; vertical-align: top; width: 16px; background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/zC/r/eKCEtE1PXyK.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; overflow-x: hidden; overflow-y: hidden; bottom: 1px; margin-bottom: -2px; position: relative; background-position: 0px 0px; background-repeat: no-repeat no-repeat; " /></span><div><span class="Apple-style-span" style=" color: rgb(51, 51, 51); line-height: 14px; font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;"><br /></span></div><div><span class="Apple-style-span" style=" color: rgb(51, 51, 51); line-height: 14px; font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;">f you wanted to take this further and put it out there as a proper artistic-kids product I would suggest running two Apps simultaneously, an iPhone App which forces kids to look at the images, but instead of draw what they see, they could answer questions about things like what colours were used, what type of paint, what was in the picture, how old do they think it is etc. And then you could have an iPad/tablet App, which could be downloadable, or just used within the gallery itself for kids to act out the original idea.</span></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-29239810388573251462011-05-11T15:16:00.004+02:002011-05-11T15:49:30.729+02:00Artefact 6<div style="text-align: left;">For my final artefact I have decided to make a web package that will include my art/game app as well as information about the Usher Art Gallery, The collection (museum linked to Usher). I think this would be beneficial in a real life situation as all aspects are linked to form the Ushers online identity.</div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">I have included a user interface for the ipad as it will link to the iphone and get rid of any UX issue that effects drawing on the iphone. All of the ideas that I have created in artefact 6 have been developed from the online focus group that I created to get feedback. </span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">The Usher Art Gallery has tarted to create a new online identity that I wanted to carry on through my entire web package. The web page is designed for the user to spend longer gaining knowledge and sharing their art work with each other with the museums community. </span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSo3CYUVZ88r1ojl37a8yz1oO4P2S5REz_AhHwGgks4-5e8bXMjTUsQZveDykWnNLK7dGQinKic534KuWN2hxPsAxlrxI_0Gzj1RjTXdyDjTw-ltmkwsWyXjNcWdVqRoPkEmdmbiO-3o/s320/Usher_web.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447657580205394" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 161px; " /></span><div></div></div><div>You can view the original art work and compare it to the work created through the app to make it more personal. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXTr5ru4HUjLcPHN5AHK8rPEFQuvqScWL7UQU5tcaBwoG6VLAHPODIagqnH0ClDJfW3r_hBWK6UUFfBy2euyJEGnaQthLrK8UVzuqpq2e7quURcqygAP9d1MjT_wF5VX9FCo6rJrzg6to/s1600/Usher_web1.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 166px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXTr5ru4HUjLcPHN5AHK8rPEFQuvqScWL7UQU5tcaBwoG6VLAHPODIagqnH0ClDJfW3r_hBWK6UUFfBy2euyJEGnaQthLrK8UVzuqpq2e7quURcqygAP9d1MjT_wF5VX9FCo6rJrzg6to/s320/Usher_web1.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447764264822514" /></a><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "></span><div><div style="text-align: left;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><b>The iPad design</b></span></span></div><div style="text-align: left;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><b><br /></b></span></span></div><div style="text-align: left;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">The navigation is designed to keep within the theme of the website. It uses the same colours with simple, self explanatory heading to keep within the theme of the package. </span></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color:#0000EE;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj-RYXIFA1n4fsLkmdtTOAUTGVQ_YejvtL_LeXF3zj-e2q2OA-DxLB8w4W3B-HpSf_tRoZUqIkKDEC0RpRgCWW-xHnsN3m-WASUrA4uK0IIY_KKfD3PbBhc1LLoT5QXP5xE3Y1Ye7XSGc/s320/ipad_UI.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447438635656418" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 320px; " /></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">This is the Usher interface I have designed for the option of 'Play Art Project'. (Art project isn't its final name). The background is designed to give the audience a sense of what the game is about. </span></span></span></div><div><span class="Apple-style-span" style="color:#0000EE;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhpzRDveblifB5t5BaX6YsHik6VvLLWnoj1bXgJHn3oe9icDdFmIBHCYfhz5gGFcZwCd9fRhs_Cj0JOU-eVLx54F_DG890mGFLpGpi26jgpLlUInuERrPtd5v6viFH7RJy9qcQyN4FQqA/s320/ipad_UI1.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447435904866994" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 320px; " /></span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Before they start the game thy have to randomly choose which material etc they have to use as part of the challenge and to get the students out of their artistic comfort zones. </span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqJ6VN8ebLqc-MdKduuDSIZtRqWCavq4q-atx9Ni0oP-MHcoOj7CgkTOl1XCy_NTCnvPMAcj1r6W49daL-lzSuZbgZ7YnR9G36K0waiNvpE6ZoW1lshz1Z_K9FcKUoM5kYqHAWkws-g2A/s320/ipad_UIRANDOM.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605454828093641106" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 320px; " /></span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><br /></span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Once again I wanted the background to further suggest what the game is about so I have done a gradual fade of the background to replicate what will happen in the game on different levels. </span></span></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color:#0000EE;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqYroWP9lN0hHw6BTlUbU0rZH77RFj_OzVR34B1i8TZ_vhlji99sV6Wj8VrZKuIRao2PnxIvtpyi7K_ujvY59hFni_IxzZvDNP0M1kxMHl9Y4UoAEaNQzI80uRZPi2sNigR3L_p8GheMg/s320/ipad_UIRANDOM.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447667650607266" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 320px; " /></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">As Always the instructions are always helpful...</span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF76jDpcuIqsKewr85tzNvKDVVv5YC709Y5eaz0fDroSqG9qY21ieVLMBWF8F_xEHO6mX_fqNquRkZ93KjvwCRZS9ToS9X5z6gWYwVYWIX4d9RO4XCCKrvd-erjBG43uBAKfsrEEiceUk/s320/ipad_UIINSTRUCTION.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447434499780562" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 320px; " /></span></span>On the hard level there is a blank background therefore no guidance of how to recreate the image. The aim of the game is to recreate the art work in the quickest time possible in the materials, colour etc set the idea is that the students will gain a deeper interest of the art work if they recreate it in their own way. </div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Kof1GfbigjLre7ynhz30yWAP71xteGHVUQrF0SGMCx2xKvfOzA803R6khZLQFdSN32i8fDdEFrDcHWOVQcfomyLHkr9OdcrnacNxF6PUeVzjdXzBiZXVQRHC8tIwZeNynUm-tsEDDMY/s1600/ipad_UIlevelHARD.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Kof1GfbigjLre7ynhz30yWAP71xteGHVUQrF0SGMCx2xKvfOzA803R6khZLQFdSN32i8fDdEFrDcHWOVQcfomyLHkr9OdcrnacNxF6PUeVzjdXzBiZXVQRHC8tIwZeNynUm-tsEDDMY/s320/ipad_UIlevelHARD.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447675850707074" /></a>At the Medium level you can only see a faded image.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5L0dFmSODi2KXZaVBiQu2luWW1aIGSuPenIZRfYjTyyidEV9qdc9kVNyS4LH4PH4DxsHYY5FvGGqDJe8ORRnvR2mghQmX_RBE5XX60reUev510Vzdcw570IvghwWSwGsKXI7ZYdB6zeg/s1600/ipad_UIlevelMEDIUM.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5L0dFmSODi2KXZaVBiQu2luWW1aIGSuPenIZRfYjTyyidEV9qdc9kVNyS4LH4PH4DxsHYY5FvGGqDJe8ORRnvR2mghQmX_RBE5XX60reUev510Vzdcw570IvghwWSwGsKXI7ZYdB6zeg/s320/ipad_UIlevelMEDIUM.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447675710333906" /></a><br /><div style="text-align: left;">The Easy level gives you the most guidance as you can see all of the image</div><div style="text-align: left;"><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbF0lwkSXElIVceJ0xpNhqsR1YjGv8smVgkFkIav_GBLX5iJct_BrPZEsIyvL1DvajXazH7UQ0vb9lMwxTVnGY3fX8nuUa-YShMYi8-Z5ImewRby4jDB2XEMNH-gX8wL0hpViEedjcuf0/s320/ipad_UIlevelEASY.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447427534792818" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 320px; " /></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">The scoreboard will keep the level of competition up. The aim is to reach certain targets of amount of medals won in a certain time to win a voucher for the gallery. </span></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqYroWP9lN0hHw6BTlUbU0rZH77RFj_OzVR34B1i8TZ_vhlji99sV6Wj8VrZKuIRao2PnxIvtpyi7K_ujvY59hFni_IxzZvDNP0M1kxMHl9Y4UoAEaNQzI80uRZPi2sNigR3L_p8GheMg/s1600/ipad_UIRANDOM.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_uX1Serm_GUSN1LKjX2rceliuj2MLsFzipVrT05XbLrm03ht3LPt03SEur9qOh8n7SSLx7e-_orxocmgq9cAOKiq4c09GBnLBn4Haq8MoZ941ZytSx1m5QAQqxFaoxgTVxqznbWLmrRY/s1600/ipad_UISCOREBOARD.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_uX1Serm_GUSN1LKjX2rceliuj2MLsFzipVrT05XbLrm03ht3LPt03SEur9qOh8n7SSLx7e-_orxocmgq9cAOKiq4c09GBnLBn4Haq8MoZ941ZytSx1m5QAQqxFaoxgTVxqznbWLmrRY/s320/ipad_UISCOREBOARD.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5605447657598176370" /></a><br /><div style="text-align: center;"><br /></div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSo3CYUVZ88r1ojl37a8yz1oO4P2S5REz_AhHwGgks4-5e8bXMjTUsQZveDykWnNLK7dGQinKic534KuWN2hxPsAxlrxI_0Gzj1RjTXdyDjTw-ltmkwsWyXjNcWdVqRoPkEmdmbiO-3o/s1600/Usher_web.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><br /></a></div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhpzRDveblifB5t5BaX6YsHik6VvLLWnoj1bXgJHn3oe9icDdFmIBHCYfhz5gGFcZwCd9fRhs_Cj0JOU-eVLx54F_DG890mGFLpGpi26jgpLlUInuERrPtd5v6viFH7RJy9qcQyN4FQqA/s1600/ipad_UI1.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><br /></a></div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF76jDpcuIqsKewr85tzNvKDVVv5YC709Y5eaz0fDroSqG9qY21ieVLMBWF8F_xEHO6mX_fqNquRkZ93KjvwCRZS9ToS9X5z6gWYwVYWIX4d9RO4XCCKrvd-erjBG43uBAKfsrEEiceUk/s1600/ipad_UIINSTRUCTION.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><br /></a></div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDO8xjnzH87m14cziPOfMfH0kBfz9BieD8cWtDQ-Y5nQnXKMp0Lwufwm483i91JfVYpjhbO8rQA4wsAxfv4IkGoUOi7ZPjyl2ir6W3JeFN8KXaeRHxtdFxSBotJvbKlgyv1FAUjiUg26Q/s1600/ipad_UIlevel.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><br /></a></div><div style="text-align: center;"><br /></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbF0lwkSXElIVceJ0xpNhqsR1YjGv8smVgkFkIav_GBLX5iJct_BrPZEsIyvL1DvajXazH7UQ0vb9lMwxTVnGY3fX8nuUa-YShMYi8-Z5ImewRby4jDB2XEMNH-gX8wL0hpViEedjcuf0/s1600/ipad_UIlevelEASY.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"></a></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-21477222320574896812011-05-01T17:03:00.002+02:002011-05-01T17:05:41.522+02:00<iframe width="425" height="349" src="http://www.youtube.com/embed/vBpoXoazIp4" frameborder="0" allowfullscreen=""></iframe><div><br /></div><div>iplots seems like a good way to see if the navigation on a device will work, especially when it comes to designing for new devices. Although it seems to be useful I would only use it when it comes to designing new UI for iphone but I couldn't use it due to the complexity of my navigation as it is a gaming app. </div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-5290848253654613302011-05-01T15:01:00.005+02:002011-05-01T15:59:14.029+02:00Artefact 5<div style="text-align: left;">My aim for Artefact 5 was to create a User Interface for one of their exhibitions. However after looking at their newly designed website, with added information about their growing education section I decided to create an app that can be used for any one of their exhibits. I think that this approach is the best way to go as the app could be adapted to any exhibit that the museum may want to advertise, especially in this time of need (funds).</div><div><br /></div><div>This is their new website <a href="http://www.thecollectionlincoln.org/usher/?page_id=43">http://www.thecollectionlincoln.org/usher/?page_id=43</a>. The main page that changed the direction for my app is the Saturday workshops that they provide for 8-13 year olds. The children get to use different mediums varying from collage to paint and learn about the art work within the museum. I have created an art app that is based on their workshops on a Saturday, giving them the chance to get more involved with the gallery/ recreating artwork in both traditional and digital methods. </div><div><br /></div><div>I have focused on how the navigation will work within the art/game app as it is a key part to how the audience will interact with the app. </div><div><br /></div><div>The first interface is based on the art app artstart that was designed by a teacher as a way of inspiring children with different projects. </div><div><br /></div><div>My version is basically the same concept but leads on to an art gaming challenge. I have slightly changed the navigation so that the audience can change the sub sections individually. I think changing them individually is a good idea as it will get the students to think about one medium and how it can be used in different ways to challenge their comfort zones. </div><div><br /></div><div>Unlike art start the version I have created is designed to get the children to recreate the art work in different mediums so that they students can get more involved with the artwork therefore forming a connection with it and the museum. By recreating it they'll want to find out more about it. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCQ5Lkk-Oygz7WQqq6Fg-zZvrJlcJ1FDu2o_2fvMDDeGmRAkBorc5IRQ3r9NZ7DVp4EdxeF7gmhuhQvuPhTrSCexRcx3AchybPvQq0HRE6MQ4t42_JwHfbM6Mz0OnBsEB3qdmQnfTZJAk/s1600/UI_4.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 210px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCQ5Lkk-Oygz7WQqq6Fg-zZvrJlcJ1FDu2o_2fvMDDeGmRAkBorc5IRQ3r9NZ7DVp4EdxeF7gmhuhQvuPhTrSCexRcx3AchybPvQq0HRE6MQ4t42_JwHfbM6Mz0OnBsEB3qdmQnfTZJAk/s320/UI_4.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5601732246505112578" /></a>Once the colour, medium and artwork has been chosen it will be summarized on a UI with the painting in full that they will then recreate on the next screen.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipMEw4oq_n5JEKmnmrwH5oXpZyT5Y4X-Jr2odRUdHEwqukUKMBE8LXoyqmDhOxTXZaflXJNRac2IMpbp_hX_fMGxQwZ2xYie2CIxy3qEiK5tymAy_loq2URwsaeCVWotiiksZYFRmbwyk/s1600/UI_4a.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 210px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipMEw4oq_n5JEKmnmrwH5oXpZyT5Y4X-Jr2odRUdHEwqukUKMBE8LXoyqmDhOxTXZaflXJNRac2IMpbp_hX_fMGxQwZ2xYie2CIxy3qEiK5tymAy_loq2URwsaeCVWotiiksZYFRmbwyk/s320/UI_4a.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5601732243952479826" /></a>They have a set time to recreate the artwork. If they complete it in the set amount of time they win an art tool. All art tools won can be used at the end of the game (once they've completed all levels) to create their own artwork that has been inspired by the previous stages of the game.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFx1o2c9o574wHNXgnW4upvQmWeMCfYE2RKPs2kYD5Lwftdk5jyAdh4rzl1UdVEzBxfKEjp10_4XrMjy1HjQ5uiQ8MOfABFu9cdmg9sVaMLqYxezr5O9u1DjHVNdEVWwn-0sA-5IoDfQ/s1600/UI_4b.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 210px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFx1o2c9o574wHNXgnW4upvQmWeMCfYE2RKPs2kYD5Lwftdk5jyAdh4rzl1UdVEzBxfKEjp10_4XrMjy1HjQ5uiQ8MOfABFu9cdmg9sVaMLqYxezr5O9u1DjHVNdEVWwn-0sA-5IoDfQ/s320/UI_4b.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5601732243981225746" /></a>The UI sums up what art tools they've won. If they choose to they can go onto the information section to learn more about the art work or move on to create they've own piece of art on a blank UI.<div><br /></div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgRI8Iq9bNTAbhYNUVCJwWHTp9Dbh6sZLgs9TqJop-xUBLEbBDJTBk-8EdyLw0TVDEUS_WG1T17fAYFbb7_AcLQdDk8DlMaTQbh_NkrBlXA6r2j5y7rFdXVAraWhckWvuXsz26_S9IzYw/s1600/UI_4c.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgRI8Iq9bNTAbhYNUVCJwWHTp9Dbh6sZLgs9TqJop-xUBLEbBDJTBk-8EdyLw0TVDEUS_WG1T17fAYFbb7_AcLQdDk8DlMaTQbh_NkrBlXA6r2j5y7rFdXVAraWhckWvuXsz26_S9IzYw/s320/UI_4c.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5601732237825383730" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 210px; height: 320px; " /></a><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Once the levels have been completed</span><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "> the children will have the option to look at the knowledge section or...</span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIDlHQCpzGKMn9p8DyG1VSDyieWuoP9AJZZvcEwFLKBS1pOO6W2rSjNU8YVtrRt0dqD0MP4aX3mPIj-j34QNeBPGs0SFN7XWJAcS-rY9axLN2CbKrtPfjFtwMKJcPOUbUIRUXee9LNto/s320/UI_4d.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5601745802819812130" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 210px; height: 320px; " /></span></div><div><div style="text-align: left;">Create their own artwork using the tools they've won from the game. </div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><div style="text-align: center;"><u><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLO0JYIIJ6L0aw1lwxTwhA8Zsx4KNA4pSg_A4LwX098SBoF8FVSsZsahEpsigsFLCWxqmuBPQEh31_5Km_z7q6f1NEcijlCQwkRbTbvjZIclaZ_eyoN7YmSZRNIhUs9wnzLDDNcinmK8/s320/UI_4e.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5601745795608220642" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 210px; height: 320px; " /></u></div><div><u><br /></u></div></span></div></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-81284501130744988872011-04-29T13:16:00.003+02:002011-04-29T13:27:10.445+02:00User Interface Design (revisited)<div style="text-align: left;">I have designed 3 UI's for the iphone. They are all based on a question/answer game using different navigation to see how I can get student of a different ages to engage with UI for learning that they don't see as a task. </div><div style="text-align: left;"><br /></div><div style="text-align: left;">This UI uses a simple touch option to select the answer. Simple, easy to use.</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8vvIepmFw8xH_-SliEAF7xLvRcK4DITE-TGotKGZYVKpCmEtVGX5BZIXn10DL8ht7l5dDOB8Bx90IUu2MvLUL7MmAQOZRWRZqLRcWkcsR7IqJtpBFGlElbMiXM8v8ivuqQQhInWn1fE/s1600/UI_3.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJk2oNyfVuMiWPQGOOvqtGKIk_jPiBWMe1vf8h5zkuplYharvcG0Apnh4bmLlmRtXDwwfGLfmyYTxhQlQu59wZXyKyW_D7JCGjbHs8kaIIULjbG3VjBDUKc5nhdrKaQNJtsw7u2w4LF_M/s1600/UI_2.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 210px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJk2oNyfVuMiWPQGOOvqtGKIk_jPiBWMe1vf8h5zkuplYharvcG0Apnh4bmLlmRtXDwwfGLfmyYTxhQlQu59wZXyKyW_D7JCGjbHs8kaIIULjbG3VjBDUKc5nhdrKaQNJtsw7u2w4LF_M/s320/UI_2.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5600962924049188434" /></a>This is based on the same question/answer game however I have used a different navigation that gets the audience to interact with the interface a bit more. This is a typical technique used by apple.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdYfQ0KSucpNXD76SCW8Z4SoLJUj_wxN8PeGt7Egf6rEEPH5duoVIzDplZGXlbVG0FaJ4DrP1aNk1G_FCC91Bl2t3Y5_NZyPYN6r8OQYfENiVQnRW1cgDTgIjSjGTqeZ-U006gHPBN2U/s1600/UI_1.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 210px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdYfQ0KSucpNXD76SCW8Z4SoLJUj_wxN8PeGt7Egf6rEEPH5duoVIzDplZGXlbVG0FaJ4DrP1aNk1G_FCC91Bl2t3Y5_NZyPYN6r8OQYfENiVQnRW1cgDTgIjSjGTqeZ-U006gHPBN2U/s320/UI_1.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5600962921335445570" /></a><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color:#000000;">I have added a new element into this interface to engage the audience in a simple game- guess the answer to the question before the water level goes down. The quicker the audience does this the more life they keep.</span><br /></span><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8vvIepmFw8xH_-SliEAF7xLvRcK4DITE-TGotKGZYVKpCmEtVGX5BZIXn10DL8ht7l5dDOB8Bx90IUu2MvLUL7MmAQOZRWRZqLRcWkcsR7IqJtpBFGlElbMiXM8v8ivuqQQhInWn1fE/s320/UI_3.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5600962925565805570" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 210px; height: 320px; " /></span><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">I think that the challenge now is to make sure that the game is suitable for the Usher art gallery. </span></div></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-55003013738276694702011-04-29T12:29:00.003+02:002011-04-29T12:32:53.234+02:00Art App Development of ideas<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFyswybkIxJr_ct7W6Wm_CEh75y0IzIFcHfVUUxRTYw5MoezmQPsW3HKjTOMum0PlwdubLmU_aJUOh3SBxBZlkDjUstfL4Q1Vvh9Vxqt2lXcOEgMx-K9CB1z0_IiaFIB2FgGT_hVXy4uU/s1600/sc000090c5.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 236px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFyswybkIxJr_ct7W6Wm_CEh75y0IzIFcHfVUUxRTYw5MoezmQPsW3HKjTOMum0PlwdubLmU_aJUOh3SBxBZlkDjUstfL4Q1Vvh9Vxqt2lXcOEgMx-K9CB1z0_IiaFIB2FgGT_hVXy4uU/s320/sc000090c5.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5600950903186129522" /></a>I have tried my previous idea with an iphone interface. I am having slight problems with the adjusting to the size of the screen from designing for web, in terms of navigation. I have to be very careful where the navigation is positioned in order not to clutter up the page and ruin the UI as the audience won't be able to see the full UI to see what the game looks like.Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-79203298125369111332011-04-28T14:12:00.004+02:002011-04-28T14:20:43.075+02:00Story Boarding for Art Museum App<div>The idea of this art/game app is to get children more involved with the art work in museums. Through gaming they learn about the pieces of art work through acceding through the levels to win art tools as prizes before they run out of life. The game is quite simple so will attract most ages as they won't see if as a task they have to do. </div><div><br /></div><div>They gain more points/tools by guessing the answer to the question before the water level is at its lowest point. I still intend to design this based on the <span class="blsp-spelling-error" id="SPELLING_ERROR_0">Lincolnshire</span> Usher art gallery exhibit. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhReDM0OaJ1lCMtSq_k_LJI6kTdwUGPlpDNI5yafhINmYCGEsDKw8ucPNnWqZMsggch-d9fSX184f4AA9iRDCZYrz76KNLD8SKktfktcGaKVOny8-26iAYPd6ddw9E8aPnL3vPlcCzGZys/s1600/sc00051776.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 238px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhReDM0OaJ1lCMtSq_k_LJI6kTdwUGPlpDNI5yafhINmYCGEsDKw8ucPNnWqZMsggch-d9fSX184f4AA9iRDCZYrz76KNLD8SKktfktcGaKVOny8-26iAYPd6ddw9E8aPnL3vPlcCzGZys/s320/sc00051776.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5600606311053871842" /></a>At the final stage the 'prize' is to create a drawing with the tools that have been won. My aim to to inspire children through this art app to use techniques and expand their ideas through absorbing ideas from masters of the discipline that they have gained knowledge about by playing the game. <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLcl3RIp4Y5hHPFrVHTH-6PHlINsh-N3E4IEzN-w-Oifv1RVNfZFr8OX8aEHHa_TBoF7uLr0hZEhTMtu8OsesHWysQgEqE6NOVvZLgaYrKURR64oFY8euhlIGUNyYeSU7FRioUWNCzfng/s1600/sc00055823.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 275px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLcl3RIp4Y5hHPFrVHTH-6PHlINsh-N3E4IEzN-w-Oifv1RVNfZFr8OX8aEHHa_TBoF7uLr0hZEhTMtu8OsesHWysQgEqE6NOVvZLgaYrKURR64oFY8euhlIGUNyYeSU7FRioUWNCzfng/s320/sc00055823.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5600606308923991586" /></a>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-2372222615258904222011-04-28T13:13:00.001+02:002011-04-28T13:15:57.104+02:00App Map<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DuPH4gzhORZ1a_erLmkgYDOG3mlx2GZm9YsRBhDX5PGxlCkwvJWlZl83QyhwrJlLIeOob1tkrqhJBA5QNe8zmqbKKMtmDODP9puGBIz4WmpsghXWCJxZgNLab0A2aIU6HAysS7rU2Ts/s1600/sc0002073b.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 208px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DuPH4gzhORZ1a_erLmkgYDOG3mlx2GZm9YsRBhDX5PGxlCkwvJWlZl83QyhwrJlLIeOob1tkrqhJBA5QNe8zmqbKKMtmDODP9puGBIz4WmpsghXWCJxZgNLab0A2aIU6HAysS7rU2Ts/s320/sc0002073b.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5600591268476519266" /></a>This is a map of how my app will be navigated, what functions it will have and how people will engage with it between each interface....Now for the game plan and design.Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-64128955175421034682011-04-27T20:16:00.002+02:002011-04-27T20:19:01.470+02:00Example pic<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_A7p-l0sTFV_pBmrARPNmKzy2odi5K8CNRxW1k5DFBRfpo-bIOviwhmcTGub0D0BhNCvQu33IBwpDbAVBq6E7YZlgXEj7AGTZ_nfduSM-LDaGQzbKU_GwQJSdUYJZQLPgZG-vi9gpii8/s1600/DSC_0038.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 214px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_A7p-l0sTFV_pBmrARPNmKzy2odi5K8CNRxW1k5DFBRfpo-bIOviwhmcTGub0D0BhNCvQu33IBwpDbAVBq6E7YZlgXEj7AGTZ_nfduSM-LDaGQzbKU_GwQJSdUYJZQLPgZG-vi9gpii8/s320/DSC_0038.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5600329437395588242" /></a><br />This is one of the photos that we are using in the multimedia catalogue for 2011. (sorry Sam your voted as the 'example'). It'd be great if everyone could get the raw file version and the jpg version. Cheers!Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-16675337532801637592011-04-26T17:17:00.003+02:002011-04-26T17:41:09.846+02:00UI IOS Navigation<div>The <span class="blsp-spelling-error" id="SPELLING_ERROR_0">iphone</span> is very restrictive, it is very small, <span class="blsp-spelling-corrected" id="SPELLING_ERROR_1">doesn't</span> have a keyboards and few buttons so I have to be thoughtful when it comes to navigating such a small screen. It needs a navigation that doesn't clutter up the <span class="blsp-spelling-error" id="SPELLING_ERROR_2">UI</span>. </div><div><br /></div><div>Navigation on an iPhone generally allows you to-</div><div><ul><li>explore all of the level of the flow diagram and get to where you want to be easily</li><li>switch between main functionality systems without loosing your place within the app</li><li>edit and adjust info without loosing your place</li><li>display a list of info or choices</li></ul><div><br /></div></div><div>This is a<b> <span class="blsp-spelling-error" id="SPELLING_ERROR_3">tableview</span> controller</b>. It uses a tab list that is scrollable. Each option provides another list once tapped. This allows for a clean design that is easy to navigate. Easy to understand as items of a similar nature are generally listed in the same category/section. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnII6H2N4E0Fx1vP7KlLpiYLwZrMozGgBHlC9s-RCNUu4fvefs4ODNG4CZojs54mWJC8MRendD44Bi9HEeT1NtaWDgmxIpuw58-GetC9Zmp_xAI7bnEuiVHEx-R7ZRyjhmskISEzEoOw4/s1600/Picture+2.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 167px; height: 241px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnII6H2N4E0Fx1vP7KlLpiYLwZrMozGgBHlC9s-RCNUu4fvefs4ODNG4CZojs54mWJC8MRendD44Bi9HEeT1NtaWDgmxIpuw58-GetC9Zmp_xAI7bnEuiVHEx-R7ZRyjhmskISEzEoOw4/s320/Picture+2.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599913049840928850" /></a>This is a <b>tab bar controller. </b>It is designed to save space on the screen once you choose the option to hide the main screen. Each button has a menu that pops out individually that you can hide easily.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNEwuYIuKDZF9e4sN9kp5iJeMUNPTbd6pi2CLX1m1YIf2w2iIGKYHmz9o83uppvZBdoY0Sh3s-xXSw9DJa7yIjrYxCaf5tzJ8YFjoCxl9hRMi7-32WiaVpJ3ON7RVv3xcGsAki-eRpTD4/s1600/Picture+3.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 164px; height: 240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNEwuYIuKDZF9e4sN9kp5iJeMUNPTbd6pi2CLX1m1YIf2w2iIGKYHmz9o83uppvZBdoY0Sh3s-xXSw9DJa7yIjrYxCaf5tzJ8YFjoCxl9hRMi7-32WiaVpJ3ON7RVv3xcGsAki-eRpTD4/s320/Picture+3.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599913040920071666" /></a>This is an example of <b>flattened navigation hierarchy. </b>It is usually used in information rich apps. It works by having a single type of main view with multiple option within each of them.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoWgmQqNoQlh0_GZk4nWQY2C29p2pCGH4sRIgqImPxkmUw246hBvNg9wNHFYB9i7max2HKZpFbljCwXCmPaHG0TfebOvX6XkE7WZVG3zSyWuMY1a-Z4_NXoATHzzBiVslYVIzOO8_hMI/s1600/Picture+4.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 162px; height: 241px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoWgmQqNoQlh0_GZk4nWQY2C29p2pCGH4sRIgqImPxkmUw246hBvNg9wNHFYB9i7max2HKZpFbljCwXCmPaHG0TfebOvX6XkE7WZVG3zSyWuMY1a-Z4_NXoATHzzBiVslYVIzOO8_hMI/s320/Picture+4.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599913035006682834" /></a>The 2 app navigational systems below aren't standard navigation systems but they focus around one interaction point. The first app uses a <b>ticker wheel</b> that is designed by <span class="blsp-spelling-error" id="SPELLING_ERROR_4">weightbot</span>. It has a mechanical spinning wheel for selecting items.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGNC99HN_VBxGadkLOo2vQO2ihyZBfu0QJSfExzk0ai4pWrjkSyZqHYtgl5D5Ll0uNJMrWj5SrwdZqPnCflPsP8GxLABAs9br7af7Cc44VRt0xC3ZKi0-QmjyOe-DsGWAXwr77APtQdn8/s1600/Picture+5.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 277px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGNC99HN_VBxGadkLOo2vQO2ihyZBfu0QJSfExzk0ai4pWrjkSyZqHYtgl5D5Ll0uNJMrWj5SrwdZqPnCflPsP8GxLABAs9br7af7Cc44VRt0xC3ZKi0-QmjyOe-DsGWAXwr77APtQdn8/s320/Picture+5.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599913029317491970" /></a>This navigation is used mainly for musicians but is a different version of the <b>tab controller</b> as it is placed in the middle of the screen instead.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ79Qa5-XkJs-R8RgowNHxUj8VggvsUaqsmAuJLbcRCp-Mc2DCBqwJ3c4_F2zgLcLG2bdL7uNMmFO2WgIrJUhL3tpNPrLcfVgQ01k9GGFbquPSgxeIBzid6-xHqp9dRgffTDXc4hyphenhyphenbrFU/s1600/Picture+6.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 299px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ79Qa5-XkJs-R8RgowNHxUj8VggvsUaqsmAuJLbcRCp-Mc2DCBqwJ3c4_F2zgLcLG2bdL7uNMmFO2WgIrJUhL3tpNPrLcfVgQ01k9GGFbquPSgxeIBzid6-xHqp9dRgffTDXc4hyphenhyphenbrFU/s320/Picture+6.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599913032377462482" /></a>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-33316948839398775362011-04-26T16:39:00.003+02:002011-04-26T17:15:41.513+02:00User Interface Design Tips<div style="text-align: center;"><br /></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQOW11y8SzGYKr6vZqiFxk4Y-mV8JcM5ZZ8MLqlnAwEdTdtUsHCJ7s_-tkqj1ZfBhmNRDg9poGU6cwc19ISzT_yxW0dRyjlGbSRUGluR6subRfP3rbop-UcO085Hmleuqp8jZ8-6Iz4_Q/s1600/Picture+1.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"></a><a href="http://www.ambysoft.com/essays/userInterfaceDesign.html">http://www.ambysoft.com/essays/userInterfaceDesign.html</a><div><br /></div><div><ul><li>User need to know how to work the UI that you designed for them so keep the UI consistant throughout the design. </li><li>Use a interface flow diagram.</li></ul><div>E.g.</div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQOW11y8SzGYKr6vZqiFxk4Y-mV8JcM5ZZ8MLqlnAwEdTdtUsHCJ7s_-tkqj1ZfBhmNRDg9poGU6cwc19ISzT_yxW0dRyjlGbSRUGluR6subRfP3rbop-UcO085Hmleuqp8jZ8-6Iz4_Q/s320/Picture+1.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599902877289439122" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 167px; " /></span></div></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">The flow diagrams used is to form the architecture of the app and how the user can move through the stages. It can also be used to form the behavior of the user. It gives me the chance as a designer to see if the system of the app will work. The main purpose of the UI flow diagram is to see if the UI is useable. </span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></div><div><ul><li>Design the navigation left to right, top-bottom as in western cultures this is the format that we read in. It will seems more natural. </li><li>Colour should be used appropriately. If you use it as a highlighter make sure that you use something else to highlight it as well as people might be colour blind. Also use it sparingly so as to not overwhelm people. </li><li>Use the contrast blue e.g blue on white is easy to read, red on blue isn't</li><li>Align the fields. Left justify so make all the fields line up in a straight line. MAke the other fields right aligned so that it is organised. Make it is visually appealing and efficient. </li></ul><div>Constantine and Lockwood have a set of principles that guide UI design</div></div><div><span class="Apple-style-span" style="font-family: Arial; font-size: 13px; "><ol><li><p class="MsoNormal"><b>The structure principle</b>. Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.</p></li><li><p class="MsoNormal"><b>The simplicity principle</b>. Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.</p></li><li><p class="MsoNormal"><b>The visibility principle</b>. Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.</p></li><li><p class="MsoNormal"><b>The feedback principle</b>. Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.</p></li><li><p class="MsoNormal"><b>The tolerance principle</b>. Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.</p></li><li><p class="MsoNormal"><b>The reuse principle</b>. Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.</p><div><br /></div></li></ol></span></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com1tag:blogger.com,1999:blog-1464501878009281680.post-45137682190516135292011-04-25T20:53:00.002+02:002011-04-25T21:09:23.071+02:00IOS UI Revisted<a href="http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/AppDesign/AppDesign.html%23//apple_ref/doc/uid/TP40006556-CH19-SW1">http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/AppDesign/AppDesign.html%23//apple_ref/doc/uid/TP40006556-CH19-SW1</a><div><br /></div><div>I have visited this website at the start of producing the artefacts. It is really helpful as it provides a lot of information about how to create an IOS app. I have gone through the basic structure of how to plan my app in order to see how my plans have developed a few artefacts on. </div><div><br /></div><div>Potential features users might be interested in:</div><div><ul><li>Creating artwork</li><li>earning points</li><li>Socialising through earning points (international/local scoreboards)</li><li>gaining art knowledge</li><li>throwing paint game</li><li>exploring different art games</li></ul><div>What is most important to the users</div></div><div><ul><li>They are artists</li><li>want to learn about art in a fun, game experience</li></ul><div>3 characteristics that app buyers have</div></div><div><ul><li>Love to experiment with art</li><li>gain knowledge of art</li><li>want to experience art in a new way</li></ul><div><b>App definition statement </b>(this is to be referred back to at any time to focus the app)</div></div><div><b>"An art knowledge tool for creative students that love the gaming experience"</b></div><div><b><br /></b></div><div>The app should have classic characteristics of IOS apps.</div><div><ul><li>IOS users are accustomed to the look and feel of IOS so the buttons have got to feel like they belong to that device.</li><li>Controls should look tappable</li><li>App structure should be easy and clear to navigate. IOS provides the navigation bar for drilling down through hierarchical content and tab bar for displaying different peer groups of content/functionality.</li></ul><div>User feedback for IOS: should be subtle but clear (an animation for example).</div></div><div><br /></div><div>The user expects to accomplish something in an app.</div><div><br /></div><div>Design for touch- get familiar with UI elements and patterns of IOS. Examine menus, interaction initiated by hovering and links.</div><div><br /></div><div><b>If the app is a game or provides an immersive story driven by experience people expect to enter a unique world filled with rich, beautiful graphics and innovative apps. </b></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-82668116892272540832011-04-25T17:17:00.004+02:002011-04-25T17:38:03.989+02:00User Interface Design<div style="text-align: left;"><a href="http://www.sourcebits.com/user-interface-design">http://www.sourcebits.com/user-interface-design</a></div><div style="text-align: left;"><br /></div><div style="text-align: left;">I have been exploring the process of User Interface design (<span class="blsp-spelling-error" id="SPELLING_ERROR_0">UI</span>) and have come across a company that produces <span class="blsp-spelling-error" id="SPELLING_ERROR_1">UI</span> for a wide range of platforms (android, <span class="blsp-spelling-error" id="SPELLING_ERROR_2">ipad</span>, <span class="blsp-spelling-error" id="SPELLING_ERROR_3">iphone</span>, blackberry etc). The company <span class="blsp-spelling-error" id="SPELLING_ERROR_4">Sourcebits</span> are about creating beautiful, easy to understand <span class="blsp-spelling-error" id="SPELLING_ERROR_5">UI</span> design. They see the design as being very important because it is what will leave the user with a lasting opinion. They create apps for the web and mobile, making them very flexible. </div><div style="text-align: left;"><br /></div><div style="text-align: left;">Art whirled is one of their most successful art apps as it provided the audience with a simple, easy to use spinning canvas. It replicates how paint splatters in real life without the mess. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnYR_gFsxwoSnN_JmMSWukJhH2PhPzFfbbc7OBGv9_kQJ9M31KcLvpcB0oWC_LMkFN-t8is1hik3SEkNSE-SFdYEagV-voHcnwNM8mdWAyZ6tgb0ypxoOnLwuSRDD_qnhlEWjAS_8jUM/s1600/Picture+4.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 122px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnYR_gFsxwoSnN_JmMSWukJhH2PhPzFfbbc7OBGv9_kQJ9M31KcLvpcB0oWC_LMkFN-t8is1hik3SEkNSE-SFdYEagV-voHcnwNM8mdWAyZ6tgb0ypxoOnLwuSRDD_qnhlEWjAS_8jUM/s320/Picture+4.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599541015723775602" /></a><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color:#000000;">Screen shot of <span class="blsp-spelling-error" id="SPELLING_ERROR_6">UI</span></span><br /></span><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkh0ep3eqjyVnb2iOvNRXZ9zoGcCJlxZ5w6d_Pi6dRKKciVEyv2wLUyMCp0bKTczuJ3Vhofi9Nzh-W8TWkJ39J8jCJmdYD_L6Fj58GMCJJEE9asJE6uyAPNrxrUXevL9gimjCvfvv_03c/s320/Picture+1.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599543443928088274" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 234px; " /></span><div><div style="text-align: left;">Layout of <span class="blsp-spelling-error" id="SPELLING_ERROR_7">UI</span> (<span class="blsp-spelling-corrected" id="SPELLING_ERROR_8">wire frames</span>): each frame has a <span class="blsp-spelling-corrected" id="SPELLING_ERROR_9">wire frame</span> designed with functionality high on the list so it is easy to use</div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_o6aZWO14u5V_GyeVMvokmSeJRALTVmLJy_FAQD-5LEJ1i9dKhHoLXm0_2TryQEDDXeB9PADwhSP16aeYjX6kMc5Xc6NNy9YsEXXO_S1ayHFhl4j4uMznmTMUs5nQGsYLU0rUEcTfeU/s1600/Picture+3.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_o6aZWO14u5V_GyeVMvokmSeJRALTVmLJy_FAQD-5LEJ1i9dKhHoLXm0_2TryQEDDXeB9PADwhSP16aeYjX6kMc5Xc6NNy9YsEXXO_S1ayHFhl4j4uMznmTMUs5nQGsYLU0rUEcTfeU/s320/Picture+3.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599541005141456290" /></a><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Inspiration for U</span><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">I</span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VG9KoOVfMfsF3dxY25Q-kYeWYrzEpi0LMwo-aZQEDUPXX7DvQTcrGMeQ2EAlyq3F4Chs80fsBSrE2LUHTE6c4w4NULn42WPd1uFCVRhqpcMwgbrR8uSQ0ljjbdMIkcfyia3wRd2lV3M/s320/Picture+5.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599541025671851378" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 227px; " /></span><div><div style="text-align: left;">Objects that the paintings created in the app can be <span class="blsp-spelling-corrected" id="SPELLING_ERROR_10">transferred</span> to. </div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "></span></span><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiSMft3VneCW9Ya1tPbeQvwBrDDBPnL4oYXXkr2Fp0qhCqw50C5ovabYmjvdPcSPKES2YbXuI0dw-djGjHKl2L29RPRYXWr4eW1XHBgaH2KrZsUS5q_gDmtz7H288z_MBohDPLFLMBbBc/s320/Picture+6.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5599541040822016818" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 215px; " /></span><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><br /></span></div></div></div></div></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-6543956644906428822011-04-25T15:59:00.002+02:002011-04-25T16:59:58.954+02:00What do art galleries need from apps?I think it is very important that an educational art app gives the user a taste of what the art gallery is like. I think the app should encapsulate what the art gallery has to offer through its graphics, information provided, layout and purpose of the art app. <div><br /></div><div>I am looking into options of creating an art app for The Usher Art Gallery in Lincoln. It is a small art gallery, not unlike The Tate. It does have a large education section <a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/new-investigate-art-programme-at-the-usher-gallery/">http://www.lincolnshire.gov.uk/visiting/museums/the-collection/new-investigate-art-programme-at-the-usher-gallery/</a> that aims to give students an experimental experience of the art gallery. I want to give the students an experience through the app that they won't get in any classroom to inspire them, spark their imagination. </div><div><br /></div><div>The Usher Art Gallery also offers an educational program called 'Investigate', which is designed to engage students in 'hands on' activity. I want to replicate this in a user interface design. </div><div><br /></div><div>The education department holds work shops that cover many areas such as: </div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/ancient-egypt/64617.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); ">Ancient Egypt</a></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/ancient-egypt/64617.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); "></a></span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/dinosaurs/88971.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); ">Dinosaurs</a></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/dinosaurs/88971.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); "></a></span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/time-detectives/77473.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); ">Time Detectives</a></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/time-detectives/77473.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); "></a></span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/vikings/56171.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); ">Vikings</a></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/vikings/56171.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); "></a></span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/settlers/88969.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); ">Settlers</a></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/settlers/88969.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); "></a></span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/ancient-greeks/64618.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); ">Ancient Greeks</a></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/anglo-saxons/56172.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); ">Anglo-Saxons</a></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/anglo-saxons/56172.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); "></a></span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/romans/56169.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); ">Romans</a></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/romans/56169.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); "></a></span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(241, 121, 1); font-weight: bold; line-height: 21px; "><a href="http://www.lincolnshire.gov.uk/visiting/museums/the-collection/schools-and-education/cross-curriculum-museum-workshops/archaeology/88970.article" style="color: rgb(17, 17, 17); text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(17, 17, 17); ">Archaeology</a></span></div><div><br /></div><div>For example the Time detective section goes through what detectives do to find out what the art work is about. I could recreate this in an art app that the students could feel like they are just playing a game. In fact they will be learning without knowing it. </div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-67029228193604189292011-04-23T09:54:00.002+02:002011-04-23T10:24:17.529+02:00The Game Theory Behind Apps<b>Game Theory: The Basics <a href="http://herselfsai.com/2007/03/game-theory.html">(http://herselfsai.com/2007/03/game-theory.html)</a></b><div>Game theory is the study of how people make decisions and how people will react during these processes. According to the Nash Equilibrium many of peoples actions can be predicted as it is assumed that they will go for the rational choice. Rational choice is defined by 'the action chosen by a decision maker is at least as good as every other available action'. (Jon Von Neumann). To me this suggests that one action my be preferred over another because it is seen as being benifical to them (e.g. they gain more points by choosing option 'A' over 'B'). </div><div><br /></div><div>Nash Equilibrium is when a player can do no better than one another no matter what the other person decides to do. </div><div><br /></div><div><b>iPhone Gaming <a href="http://gametheoryonline.com/2011/02/16/app-store-video-games-disposable/">(http://gametheoryonline.com/2011/02/16/app-store-video-games-disposable/)</a>, (<a href="http://www.appolicious.com/articles/1958-game-theory-q-a-with-joe-wee-of-chillingo">http://www.appolicious.com/articles/1958-game-theory-q-a-with-joe-wee-of-chillingo</a>)</b></div><div>iPhone gaming has created a new trend of 'the disposable game'. For instance people like angry birds for its experience without making a commitment to it through its cheap price. It has also changed the way that game are distributed, bringing gaming further into the distribution digitally. Also gaming through the iPhone adds a more socially focused element to gaming through global scoreboards that keep people coming back for more to top the score boards. Apple have landed on a money making scheme through peoples need for social integration. gaming apps fill the market for those of us that will only go on social networking sites before feeling a bit 'stalkerish'. Gaming apps are a perfect opportunity to fill your time and still interact with other on a different level. </div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-46630902209470159812011-04-21T13:39:00.007+02:002011-04-21T13:55:44.135+02:00The Usher Art Gallery<div>The direction of my research project has gradually become more focused towards User interfaces. After experimenting with a few art/game app ideas that aren't based on particular exhibits I thought it'd be a good idea to base one on a current art exhibit. I have chosen the Usher Art Gallery in Lincolnshire as in is a small gallery with a growing educational sector. Although the educational development officer was interested, they want to see the product after I have completed the research project.</div><div><br /></div><div>The pieces of artwork below are from different exhibits within The Usher Art Gallery. I choose these as I think that they represent the art gallery and I want to create a User Interface that encapsulates the atmosphere of the gallery. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0fbRj6yMNMsMmm6IT64HyCcNuh7IYNdY7ptQ1BvFdYRF-nJpAI6Rv48mJ_AxZ375OAhK3u4qtIvlqLhGlifKnNsWwNUEYmc0PRpVBLJpozaXJnD8CP20NSDhyphenhyphenfo2qLiSDqmnmJg_bBmM/s1600/sc0003b03c.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 244px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0fbRj6yMNMsMmm6IT64HyCcNuh7IYNdY7ptQ1BvFdYRF-nJpAI6Rv48mJ_AxZ375OAhK3u4qtIvlqLhGlifKnNsWwNUEYmc0PRpVBLJpozaXJnD8CP20NSDhyphenhyphenfo2qLiSDqmnmJg_bBmM/s320/sc0003b03c.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5598003617399037042" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7DyuUsA9lmrfnLhcQU0l1JRIVYevAVioviB0GuPtMcpu3RbK_HcgGeKoc8u7XrbRPHjkEwI_c1V7U32oPS3CrjGHt2ytD3qv1f6UnmrJ2DcqfCUQF3I3ywvWKewHWB9GAdqi-uDKs3T4/s1600/sc0003da6b.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 217px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7DyuUsA9lmrfnLhcQU0l1JRIVYevAVioviB0GuPtMcpu3RbK_HcgGeKoc8u7XrbRPHjkEwI_c1V7U32oPS3CrjGHt2ytD3qv1f6UnmrJ2DcqfCUQF3I3ywvWKewHWB9GAdqi-uDKs3T4/s320/sc0003da6b.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5598003611371065954" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBF64HokKc1ioZWMtkX2lQYSAYoIrwKPgIiL7HWkK2HXvWGD0OYUsfI36RyaA2LouKPy6AmDDxs2UiQtZFNTiFi6Io0lR1wk9-HlyM77sUxBZGPJg5bguI-KGWWwRhGcxbhmNPx6QJvag/s1600/sc00036727.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 227px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBF64HokKc1ioZWMtkX2lQYSAYoIrwKPgIiL7HWkK2HXvWGD0OYUsfI36RyaA2LouKPy6AmDDxs2UiQtZFNTiFi6Io0lR1wk9-HlyM77sUxBZGPJg5bguI-KGWWwRhGcxbhmNPx6QJvag/s320/sc00036727.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5598003451477992546" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXuBl5mXg7Y2E8z2QSHD1OeRPi7SCfY0_Qgf2l3-14_eAegMw8vxx6TdofTbTVTfPhqW8OqkMGFZcpJZYY7H1S7TLI-N98QRhech8YNdzGqNgcHuXrzrA0l5voWYAvM1B6vGqUR3e1sI/s1600/sc0003811f.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 232px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXuBl5mXg7Y2E8z2QSHD1OeRPi7SCfY0_Qgf2l3-14_eAegMw8vxx6TdofTbTVTfPhqW8OqkMGFZcpJZYY7H1S7TLI-N98QRhech8YNdzGqNgcHuXrzrA0l5voWYAvM1B6vGqUR3e1sI/s320/sc0003811f.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5598003450886469650" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbpw1RobSK-6aQR8vsmHnvCg0UNbgpNihAoSPdJ2DEW85KQgQEazOQn6TbHZwcuoIQ8m3-sEZy3MveW9JCFi3a_E4JW4wYoQS41bs6Pkbmbbfsb4tYk1BBuy_Xi-z4ytkhYV7qlgLg16o/s1600/sc00049d2b.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 224px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbpw1RobSK-6aQR8vsmHnvCg0UNbgpNihAoSPdJ2DEW85KQgQEazOQn6TbHZwcuoIQ8m3-sEZy3MveW9JCFi3a_E4JW4wYoQS41bs6Pkbmbbfsb4tYk1BBuy_Xi-z4ytkhYV7qlgLg16o/s320/sc00049d2b.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5598003445036101874" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaUbmrGXZdocv99APjqUhY-m6FwYuzhFSBT-dkEfF6HW_hUlDrIzSM5N5vwJujviJ0knCoPiDyqj902knBGrE7nA51LtBcKvzPArm7BHJrS0qdxNyumkULRFp2_s2nohCueH82a2XZqmA/s1600/sc00048e87.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 214px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaUbmrGXZdocv99APjqUhY-m6FwYuzhFSBT-dkEfF6HW_hUlDrIzSM5N5vwJujviJ0knCoPiDyqj902knBGrE7nA51LtBcKvzPArm7BHJrS0qdxNyumkULRFp2_s2nohCueH82a2XZqmA/s320/sc00048e87.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5598003437013164578" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYG_MSPOimgElxGQwVfHA16AhTE2ZLbz-ion4x0bcH2aWJLjaqsYCfuAUccDprvd-L8hHSn9QGz0SxyWLfouaysN5GwpSeMgPCdaXk4Z1QNlEhyfIt8L8ZRPV-cG3pzf3WbUKIF3b2EvM/s1600/sc0004abf2.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 225px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYG_MSPOimgElxGQwVfHA16AhTE2ZLbz-ion4x0bcH2aWJLjaqsYCfuAUccDprvd-L8hHSn9QGz0SxyWLfouaysN5GwpSeMgPCdaXk4Z1QNlEhyfIt8L8ZRPV-cG3pzf3WbUKIF3b2EvM/s320/sc0004abf2.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5598003438718050834" /></a><br /><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgscpRzeZkc_NsfwIwrLwlMVOZ1csl7ZJzpiuJt3wMvPdzzWpgDdRRnne42JSY0LMbaFd0DfSSyg7gGHXgF-EGb_ybLkA0Ixb1XB1TLPETjKHL6R_pPcxuWFihzJXLI52gdwpIgvHFuOdw/s1600/sc0004bb69.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 206px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgscpRzeZkc_NsfwIwrLwlMVOZ1csl7ZJzpiuJt3wMvPdzzWpgDdRRnne42JSY0LMbaFd0DfSSyg7gGHXgF-EGb_ybLkA0Ixb1XB1TLPETjKHL6R_pPcxuWFihzJXLI52gdwpIgvHFuOdw/s320/sc0004bb69.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5598002390216941378" /></a><div style="text-align: center;"><br /></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBLPNgoZ2ZtmSKIHEy4NAP35iQTSKdnQ570oT9907PktSFQPpn1bXvlJIjqAKVbH_chhdjRFe-OaB4e7jr2Thterld_e6YFdxQNv-3M8ma-1Bt6OXOUYBMt8TuQYSzQa99xlrEIJCpaI/s1600/sc00047d88.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 224px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBLPNgoZ2ZtmSKIHEy4NAP35iQTSKdnQ570oT9907PktSFQPpn1bXvlJIjqAKVbH_chhdjRFe-OaB4e7jr2Thterld_e6YFdxQNv-3M8ma-1Bt6OXOUYBMt8TuQYSzQa99xlrEIJCpaI/s320/sc00047d88.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5598002126905635666" /></a><br /><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-40219326599032842122011-04-13T14:17:00.008+02:002011-04-13T15:28:56.412+02:00Validation Process<div style="text-align: left;">I have validated all of the main pages of the website. It document type is XHTML so it is a bit stricter than standard HTML.</div><div><br /></div><div>The errors that arose are below. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztBSH0YpsoaBr8tjYcLcSSb6dJdsZOc2ym42goeDAb8Bhaa3OqlxAfHamm8ZxcjeHQZ1UDwidapMz6mA5tOxe6WEhCPqPx2tae5J28Ydj4gsRG2tZV6UqFl4ggiyo_7yoTG-8oS35AAY/s1600/Picture+4.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztBSH0YpsoaBr8tjYcLcSSb6dJdsZOc2ym42goeDAb8Bhaa3OqlxAfHamm8ZxcjeHQZ1UDwidapMz6mA5tOxe6WEhCPqPx2tae5J28Ydj4gsRG2tZV6UqFl4ggiyo_7yoTG-8oS35AAY/s320/Picture+4.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595042402725145314" /></a>One of them was that that some browsers don't support the cursor hand but only supports pointer. This just refers to the type of icon used to show that it is a clickable image.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdlaNjSFOheDpGekKmuYxCWtUnafgzUJyrGHtchC1q0vHlAzCCpPRutPH7bFeGkgeLGLV5hIhTQsr4SMb-vfvttGmt-e2z92pwtkbvRxLMmC1FL3pZpM6XtgmRHcN1b4dYGSm3Pm8Q6c0/s1600/Picture+5.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 158px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdlaNjSFOheDpGekKmuYxCWtUnafgzUJyrGHtchC1q0vHlAzCCpPRutPH7bFeGkgeLGLV5hIhTQsr4SMb-vfvttGmt-e2z92pwtkbvRxLMmC1FL3pZpM6XtgmRHcN1b4dYGSm3Pm8Q6c0/s320/Picture+5.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595042395599438130" /></a>Next error= Z index<div>The Z index signifies the stack order of an element. This means that the Z index only works when the positions of elements are set to fixed, relative or absolute.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBbnbW13KQtrB2N1MRy9ooKsrB3DXWKAcFleyLqhil43NWIGVtL_Y6umb3cect7860ut7BNX-ZVXMMxrY65Px1b-GXkDRu4OACXIAv_9k_lpFyM5zZ2e6zc1SEShAFcOttKqYnBNFB0og/s1600/Picture+7.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBbnbW13KQtrB2N1MRy9ooKsrB3DXWKAcFleyLqhil43NWIGVtL_Y6umb3cect7860ut7BNX-ZVXMMxrY65Px1b-GXkDRu4OACXIAv_9k_lpFyM5zZ2e6zc1SEShAFcOttKqYnBNFB0og/s320/Picture+7.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595042391637073138" /></a>This is one of the problems caused by the tags in the ditto call, connected with the Hpfeatured and HpfeaturedTPL<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcl39CthHe-yycl0gUqc_lwuZF82VBH5U5Z0y1lSFnFxHRoYmtvsNg7V1F5jj6sfJu7bVRfbbB0KhSCwphmH4LUFDkeo8UN3jicKE-sNbv0_krhyFsGsAOi10EFWnelL07k2OdsBlhPE/s1600/Picture+8.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcl39CthHe-yycl0gUqc_lwuZF82VBH5U5Z0y1lSFnFxHRoYmtvsNg7V1F5jj6sfJu7bVRfbbB0KhSCwphmH4LUFDkeo8UN3jicKE-sNbv0_krhyFsGsAOi10EFWnelL07k2OdsBlhPE/s320/Picture+8.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595042387971245714" /></a><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aIvJn_yL6MrAT14gJt6d6BJ6Qt6JOO7ldUhFje7BzP8H9RH_o1RsPgL1EEGJQ5fYe8q5GvpCLT5ZxLaB9EEIbwz2mWqbVYjUPJEzb6e-yxqgi33ZAJAv2dvjTVwEdAYuwBAgTuAdTI4/s320/Picture+10.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595045672016099362" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color:#000000;">This means that</span> script language <span class="Apple-style-span" style="color:#000000;">is wrong it should be</span> script type <span class="Apple-style-span" style="color:#000000;">instead</span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih17Y55Zf9nwOEqjmDZ2HR9rr_-_omg-MJxHidx5I1EcJvX_SAzO6SpH6eZ4NhJGHsCIIksv5sLirEGO5SwjRWzvjsx35i0KJcm-BXmxLipJNRigoW_xXllRXApjsGoyAqbjBzVsoqsMs/s320/Picture+11.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595045669048620354" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 43px; " /></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">This error is referring to the border "0" being referenced constantly so should be set in the CSS as a div class to create cleaner code. </span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSNiR5V_x6IpSRxWjC9bEyIXD_0Yu_xDPCkQBtxw5RIFXuuiVgo9z8TPywjmv08-vlmMUaRTB3uWYkPhDoQC2o8XGAp7a9rOn99QmHMo63sYI_ED6NBbzi1xMpHaXddHF59hwC2OrQWA/s320/Picture+12.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595045665079658898" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MOPNcLoyFZyiRIfEYB_m6r5yzCHoivaRXGAiRk1mKT8snRWTIEPzSRZFg21BPccmBK_8RiRPW7KHMFVqd7XU4g2uaNVecicKmF5HP7XWN9AmyrFTUpcg_Jmk6B3FmZrMOytUjQlmxDY/s320/Picture+13.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595045657511414226" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwyKWpY1iZbnoo947iYjjSNgQ-FZrQofInwvwKXwtIh1NZxVcEj_Qr8DkocruVduYSkwhrYvd3xUFtxXW6a7Uz5aeUdzBwoQcKlGe-AKrFl2iMvViA_HgViLx3-41gI_6hX8RoOZ8aAtc/s320/Picture+14.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595045652955480738" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Result- Homepage validated!</span></span></span></span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjgVMopWBGWdcyfhIV0q0zL8n-WaFTcsMA59Otz_lNfKMRFQaAYBMguyNmSaM8_wg5dXbflSsNZ65Qk0orrBK_-is_mfZNvOLQjolle6cHxyKrVAO2XbLOWfo6FENiVnTA5eqNpeuWlg/s320/Picture+9.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595058565216278050" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Validating the 'About Us' page</span></span></span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></span></span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Extra div in the foot section</span></span></span></span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib7emQoxkhgydetncg_Nn_dcV5x7VEwDBChbnUnjgTDVAtpxocgd6XwclFQZ8retJ4nHlIFE0pPtswl4VfI1XxlZdov2G8IhBIwEn6rTVPdLgNhe7QBzvc5SMIT5bTg5W3oJUD-Br7apk/s320/Picture+2.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595058879968031922" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></span></span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2VDu9bHxB-i-nbjJqNqqnFWw0RzRjJDfZY59-AHgDDkSJCEM34070ZImreRYrSlmXmDs3Uwx9bEXBUshtJYVii57F8EFuvzsdnDxOgSr9IsgqiF3zZ7f0CE_oVmJinJaCQnwLBVq8M5M/s320/Picture+6.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5595059295183246962" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></span></span></span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></span></span></span></span></span></span></span></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-64932654259675694702011-04-11T22:22:00.005+02:002011-04-13T15:29:46.951+02:00To have HTML5 or not to have<div style="text-align: left;">My original plan was to explore HTML5 intensively throughout the duration of the client project but I had to adapt to the clients requirements. The most important element that changed my mind was that they needed to be able to constantly update their website so I had to learn a content management system. This would allow the client to be more flexible with the content and be able to update the website whenever needed. This will keep more people interested in the website for longer and ensure repeat visitors as they will come back for updates on events etc.</div><div><br /></div><div>One of the main issues of HTML5 is that I would've had to make two websites as HTML5 isn't compatible with older browsers. Originally I didn't realise how long learning the content management system would take so thought I could still complete both learning a new content management system (Modx) and do HTML5. I have finished slightly early so I am exploring the basics of HTML5 and its potential. </div><div><br /></div><div><a href="http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/">http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/</a> The first thing that I have noticed is that HTML5 is structured differently with tags such as <span class="Apple-style-span" style=" color: rgb(69, 69, 69); line-height: 20px; font-family:monospace;font-size:12px;"><header> <span class="Apple-style-span" style=" color: rgb(69, 69, 69); line-height: 20px; font-family:monospace;font-size:12px;"><nav> <span class="Apple-style-span" style=" color: rgb(69, 69, 69); line-height: 20px; font-family:monospace;font-size:12px;"><section> </section></span></nav></span></header></span></div><div>All of these sections, particularly <nav> are used to function more like classes. The main overall difference these ids make is providing a stricter structure, that will be easier to follow.</nav><nav><br /></nav><nav><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWT5-7iJ7DlBpKA_X0-2gh9KspxkjkpgKR33_WIYlXRPr9_UvlyOOYUfqnsFficWiqyEhT3QadefXdbkocuqJmwdw5IxBLVHtP8JgK3xeEj2H3DbmAm9_S_4vNRxyNfe4POUkhh7MQ8VU/s320/Picture+3.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5594434724729972178" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 235px; " /></span></nav></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Another element that I have been recommended to explore my a fellow website designer is a HTML5 boilerplate.<a href="http://html5boilerplate.com/">http://html5boilerplate.com/</a></span></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-41625776006282599212011-04-10T20:16:00.007+02:002011-04-10T21:19:41.774+02:00The Footer<div style="text-align: left;">Although this section isn't seen as the most important part of any website it is a detail that I think can make or break a website. It is a standard area of a website that people expect to be there and hold additional details. In the case of charities they are usually social widgets or some type, charity details, address and contact details.</div><div><br /></div><div>My original problem with the footer is that it doesn't seem to go with the design of the rest of <span class="blsp-spelling-corrected" id="SPELLING_ERROR_0">the</span> page. It seems separated by the line created by the div box. The client wants the footer to include the charity details-contact, legal details (charity number etc). Also through talking to <span class="blsp-spelling-error" id="SPELLING_ERROR_1">ibrow</span> media, the website designer has recommended that putting a second navigation in the footer is good practice as it means people don't have to scroll to find where they are therefore making it easily to navigate. </div><div><br /></div><div><i>When you wish upon a star</i> have requested that their Twitter account and <span class="blsp-spelling-error" id="SPELLING_ERROR_2">Facebook</span> account be added to the footer to make the charity have a stronger online presence. This will give the target audience more options to keep updated with what the charity does. </div><div><br /></div><div>Original Mock-up=small footer can't fit all of the charity information in. </div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_WftTaqlE_QA9Z2tiPGKX1STQwAexC0AlmhGvoFbTVFtyutuBWz_OF26yFJ_c3VLAI1wzrbt6cnYClN7-7rF6RqNlpe_CNBkM7Fmn73SU71eosfQrAfGwKWjjmkpkLM6Bq7_J62XamLA/s320/client_mock19.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5594026255345847794" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 290px; " /></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Footer 2= bigger to fit in all of the information in, green to integrate it into the colour scheme of the rest of the website. <span class="blsp-spelling-error" id="SPELLING_ERROR_3">Facebook</span> icon needs the <span class="blsp-spelling-error" id="SPELLING_ERROR_4">CSS</span> altering to move it into the middle. </span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZthQGpaMEe0SvGi0pW6UXF1t60Hau7GwW0s6qY-kn0Ge-ZTpcL5B7VJNuKbQJcEOKX49mdINHMNKp_0OqnadTG-VmMUo4H8U0H7XIIEPQRakazQ3kFxVc8rUGi8hR-DxnkB2Ph_vKO8/s320/Picture+7.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5594022458360604530" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Final Footer</span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">I have used the hand drawn line from the hills illustration to integrate the footer with the main website. Centralized the widgets to give the footer some symmetry. Changed the colour of the footer from green to a mid blue to give the website some balance with the colour scheme and so it goes with the sky and charity colours. Overall I am very happy with the footer design I think that it brings the website together. It makes a simple block of information interesting to look for a wide range of people. </span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOk7nbbMBRlZVe3UxJ65G-ELLTRXiVYuCOapIFM7XyQUo6DskvfMrZYaNC48wSYIE9BWV8VihtwlXCb_Uy1enT0haRLMpZm8tm0RjHjQK6z6AIa-kNjyivVQAU9at2aqDuiQvA9GG1wcI/s320/Picture+3%25282%2529.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5594027154653808450" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 181px; " /></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">To create a footer with an uneven line presented me with a few problems so I had to create an extra div to provide me with the space to add padding so that the green line would overlap the faded white background instead of being covered by it. </span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Within Modx I created a div id called widgets and set the width and height to 50 along with setting the image to source to the hand drawn facebook logo. I made sure the border was 0 aswell. </span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj70kLCKy1ndtC4dPpBKQGbTPffY410B4T0hvcNKEmLKqJOwVWlXPyKC0e5naRX4LA83Pyr9KHcdlHWU8bcHxAH76ZVCFPqmorPTjIDKoR0d70PdFX2c-bKrf030w3XG9DSEq4k-LQFLU/s320/Picture+8.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5594035540733665810" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPD_hDjavQEArEthWISdcEEXWBX17LsWZDClxrBMEHYRinbqNtXeY-IaY4fybrfmMMj-ky6aj_X9aMJKgpmERH-4KSImMMdPvcRby0PgYbLEhcFZCLGRoCsFGsUaRoySYdq6U6-fq_IFA/s320/Picture+2.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5594035535116471538" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></span></span></span></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-92157630754500427122011-04-06T22:35:00.005+02:002011-04-06T23:01:30.976+02:00Sponsorship Page<div style="text-align: left;">The sponsorship page has always been a bit of a task for me as it is a lot of information and logos to display on one page. The challenge is how to get people interested in a series of logos that may not necessarily interest them. Also it is important that I take into account the companies that take priority as they have contributed substantial amounts of money as well as the smaller companies/individuals. So I have decided to create a image that will contain the logos and constantly be changing so that each sponsor will have equal amounts of time at the top. This will be at the top of a series of 3 logos that will change, at random each time the page is refreshed that way no company is seen to be preferred.</div><div><br /></div><div>Also by formatting it this way it means that the page won't 'grow' too big with each logo that is added therefore making the audience scroll too far and get bored. </div><div><br /></div><div>Below is a basic diagram of how the page is structured. I have created it using the same code as the news ticker on the homepage, except in Modx I changed it to the marquee settings so it flickers in and out rather than scrolling up and down. </div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1oe3VSNw8JJFhLObb52210BgzJ0PxFtdEFSP0LDVs-IW6sEPgbJiWmNz4vgf9GE5rJeIL96S8VBnoEFVw7arCZmVZc41ZRvzYoZnVkvxevmGcBg8WDCUUJAtJIbYn2l6jbvXlwTmnzJg/s320/sc000cf390.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5592575079990087682" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 287px; height: 320px; " /></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Creating the sponsorship pages in Modx</span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">I had to create an individual page for each logo/sponsorship so that the audience can interact (if they wish) with each sponsor equally and find out more information about them. This ensures that each sponsor gets equal coverage. Also creating each page helps to connect the logos with the fading in and out logo. </span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">To ensure that all of the logos are presented well and load quickly I saved them for web to a 72 res. I saved them all in a supporters folder so that the client can choose which logos are presented from a folder. </span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqNe9tSmbFGX0kFa7xwUoi-VbAs4Fw-t8FjIDAIE9y-axNPQQR4O2A4vLH6wDYAiXVsbbCUucvf5R3RSfmjaCR_-cq7CwXiA6j2F2uernKLtKpW3s2r64dXg_El2CyDis9DpNdxlU_KGU/s320/Picture+2.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5592576438627765074" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">I made sure the page is published in Modx so that it can be viewed as part of the live website. </span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaNDPrhd8nijFjohoq-Vb0MhEhTqrCHOzdG7vGu9EKPWUxNzpH-2udbgAAofp1odKxK8GdoQr6Ud8dAmHSKn6z7rUNyZ2t3RMM4fPZds3EGDoeeTrPblCuFBSTtuJTmotaVI33h8v6FSY/s320/Picture+3.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5592576433061895138" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Click icon to browse folder of uploaded images that I had altered in photoshop.</span></span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNpNjL6JqZtdhTDwE8MhXyrr7L4vD01N2tVMYtpwaTFXIpXWV0jDCbc7lQR-qMXcfkSPET9nh17ApJwGhtvgEiISrlKVoLHfh0Lc0Tq5QbOv0aMMAcWl0_BlMktt0f-QLqc9rcN3QvP5s/s320/Picture+4.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5592576423459251602" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></span></div><div><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">Take away the image size so the image doesn't pixilate. If i kept the dimensions in the logo would automatically try to format itself to those dimensions. </span></span></span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTh0_CPawklF03ZT4xYyusyuh6rxfvcdSAEn-j3cANSWlDzFD2U1LH7Yx12pPyIRLHMM3RiY4YQlVG6cwyW6VSGyJsUYGVhYdOIZT0Nf7M_ENuJ3_ar75HUPFgcA6oZ1r4KsWxkLCyZsA/s320/Picture+5.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5592576421699126418" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span></span></span></span></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><br /></span></span></span></span></span></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-5004173852642200962011-03-29T22:56:00.002+02:002011-03-29T23:13:13.127+02:00The Events Page Carried On<div style="text-align: left;">In some ways the events section is one of the most important pages of the website, if not the most important as it is the section that will inform the audience of that is going on within the charity. It gives them the key information and quickly if they want to get involved. I have done this through the interactive map so that they know where it is and don't have to deal with a lot of information. It gets the audience involved in the website. </div><div style="text-align: left;"><br /></div><div style="text-align: left;">My next aim was to make the individual events stand out in a similar way to the information. I did this by redesigning the calender icon in photoshop so that the text stands out. I altered the CSS in dreamweaver to make the a block space for the image with a margin to separate the text. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3rka39ZmYgwosPfDeCE-IQKp6atag5yhijJwv28bptMiaS8emq4LPwtzfxITA4nsQFhfeTG7LuGg1_hwicMbX8mEMGjgzjwNoRV3DiS8RTh9tLDxv5jOw6iHQDrpjTuHdRf4t3kz2WwU/s1600/Picture+8.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzG7GSMO1_C9XjT-KzW8w5hLJ5h2ywvdI1HdUGnv4JwnWCctcmz0QAYzCrdvNSDdXrlkFGFgxkopFdQIb3ONk9jx2t7_JF-nproQJnsz0u3B2AOw2DC26U25kV2e_5jU-OTqWgLvXSqEs/s1600/Picture+3.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzG7GSMO1_C9XjT-KzW8w5hLJ5h2ywvdI1HdUGnv4JwnWCctcmz0QAYzCrdvNSDdXrlkFGFgxkopFdQIb3ONk9jx2t7_JF-nproQJnsz0u3B2AOw2DC26U25kV2e_5jU-OTqWgLvXSqEs/s320/Picture+3.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589608970576427154" /></a>See the<span class="Apple-style-span" style="color:#CC33CC;"> .supporters </span>for the CSS I added to it.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwrkoTVdc6zFaumszhoH0VwoOqrGXgeRvRrS_NPHwDsc56Jo_WCIUiYt4URfpQybdwTW5xv0aXS4z7Q1QXbie7gTm-j6a7S82OwcMzcB4g_5GPM9plQapzsV2ERF01BMgKYwt0-Wo4w8/s1600/Picture+4.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwrkoTVdc6zFaumszhoH0VwoOqrGXgeRvRrS_NPHwDsc56Jo_WCIUiYt4URfpQybdwTW5xv0aXS4z7Q1QXbie7gTm-j6a7S82OwcMzcB4g_5GPM9plQapzsV2ERF01BMgKYwt0-Wo4w8/s320/Picture+4.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589608967054196994" /></a>However the text wasn't clear enough so I made the red section of the calender bigger so the text was clear.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6TDGnS45ecNciUP4Xp6ax6BoOTTyqlcxT4Gfg-UpiHvWZUsCnpJEg0GK0zl2wetBPbXUzMZthujluZGjpf9_pmuYgFYkBo0M1hYMYbdhMEJeC3snwSRRHW3wT7Wxq9ZHyPtWek4B-70/s1600/Picture+5.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6TDGnS45ecNciUP4Xp6ax6BoOTTyqlcxT4Gfg-UpiHvWZUsCnpJEg0GK0zl2wetBPbXUzMZthujluZGjpf9_pmuYgFYkBo0M1hYMYbdhMEJeC3snwSRRHW3wT7Wxq9ZHyPtWek4B-70/s320/Picture+5.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589608960480434690" /></a>Code for calender image above<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8x6IBuvKuTL5bUFy3up9AFNtSX3nRC9FMPiREhbM4whIhbW0JOTUPUaAqL9RKipG4TSEUTREJvCndxXk-fXDGXjGfAlazryLs0rAxwqeaPzjYxXCKU3v2-iKJut4R040qy5uVAPJmsw/s1600/Picture+6.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8x6IBuvKuTL5bUFy3up9AFNtSX3nRC9FMPiREhbM4whIhbW0JOTUPUaAqL9RKipG4TSEUTREJvCndxXk-fXDGXjGfAlazryLs0rAxwqeaPzjYxXCKU3v2-iKJut4R040qy5uVAPJmsw/s320/Picture+6.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589608952094877282" /></a>Here come the Modx bit. I created a template variable called {{list-events-tpl}} it sets teh date, tells the links to look for [~+id+~}, which means look for the div id with the styles and pick up the date [+date+]<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCOSvXnOoyscWNlhkY5hZeaaymUcqOTC_7D8Oo5UmD0-Hkx9Sf3aCUDdKbD_VBCvR_0zNsZpEcOGQv85LA0_Rqlzy7vnJOZChJoXxbhZ58E3jhzXPSRqyw_V84O-AoRSzge8bw2C5arcY/s1600/Picture+7.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCOSvXnOoyscWNlhkY5hZeaaymUcqOTC_7D8Oo5UmD0-Hkx9Sf3aCUDdKbD_VBCvR_0zNsZpEcOGQv85LA0_Rqlzy7vnJOZChJoXxbhZ58E3jhzXPSRqyw_V84O-AoRSzge8bw2C5arcY/s320/Picture+7.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589608949142926594" /></a><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="color:#000000;">Final result of icons highlighting the events</span><br /></span><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3rka39ZmYgwosPfDeCE-IQKp6atag5yhijJwv28bptMiaS8emq4LPwtzfxITA4nsQFhfeTG7LuGg1_hwicMbX8mEMGjgzjwNoRV3DiS8RTh9tLDxv5jOw6iHQDrpjTuHdRf4t3kz2WwU/s320/Picture+8.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589609046938767298" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 200px; " /></span><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><br /></span></div></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-30068153118174644112011-03-29T22:36:00.005+02:002011-03-29T22:55:48.632+02:00Attracting and keeping the audiences attention of the events page<div style="text-align: left;">My goal for the Events page was to create a format that would make it easy for the audience to know exactly when, where, who to contact and what website to visit quickly. So I have used icons along with a bold title to make the information eye catching. This means the audience doesn't have to spend ages searching for information or get bored of looking for it.</div><div><br /></div><div>To add in the icons I had to create a div id for each, changing the name of the image, adding a class to position the icon and I <span class="blsp-spelling-corrected" id="SPELLING_ERROR_0">referred</span> it back to [*<span class="blsp-spelling-error" id="SPELLING_ERROR_1">Eventphone</span>*],[*<span class="blsp-spelling-error" id="SPELLING_ERROR_2">Eventemail</span>*]etc changing it for each icon so that it picks up the template variable that will style it in M<span class="blsp-spelling-error" id="SPELLING_ERROR_3">odx</span>. The * means that the template variable will refer to the page that I am now on. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY8ziN7G9aylb5U-1dduHwP9RqTBb66Egl3FlghAenauRe7T1PDO0pIr7kJnxieC0rnIK3oFi6zj3LfQXEEf1NZz3qfQRw7fdUYAjmDeAfY6rub02Tizd81NUYIlaLtCC32kV3G0TAmAk/s1600/Picture+1.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 112px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY8ziN7G9aylb5U-1dduHwP9RqTBb66Egl3FlghAenauRe7T1PDO0pIr7kJnxieC0rnIK3oFi6zj3LfQXEEf1NZz3qfQRw7fdUYAjmDeAfY6rub02Tizd81NUYIlaLtCC32kV3G0TAmAk/s320/Picture+1.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589603828082981506" /></a>The code above create the icons below<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdS6SVcmblZaRTF4ZAW8qmKmHiOWiBR4n2-z2K0lFpuZoJqhV1n5t0MHpxUjB1dv3l-2F2RRk6aLYjgLDlKMg3PTEIfRQif490SYkmuuU92bM5wQ2ZDGynu1niqMcbFBRzEVllxuyl9E/s1600/Picture+2.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdS6SVcmblZaRTF4ZAW8qmKmHiOWiBR4n2-z2K0lFpuZoJqhV1n5t0MHpxUjB1dv3l-2F2RRk6aLYjgLDlKMg3PTEIfRQif490SYkmuuU92bM5wQ2ZDGynu1niqMcbFBRzEVllxuyl9E/s320/Picture+2.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589603827123341154" /></a><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; ">That I then styled into all of the defining icons. At first it was adding the email icon in <span class="blsp-spelling-error" id="SPELLING_ERROR_4">the</span> wrong place so I had to take out</span><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><br /></span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcJpxxIs3Ok2kd_sYVlpS_AQ_2VNa0Spfxv_9-J5J_uvzKHW6kx48d5zoQPZYlSjtA6-6Qqxz_IfM3rXxpcIO8zymDLpplmXcX7-y8lQz0wxgqJN2LLzXqPHM1gebabSbknZYme37FDN0/s320/Picture-1.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589607920521824466" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 112px; " /></span></span></div><div><div style="text-align: left;">Final result of specified event page</div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: underline; "></span></span><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAf7yOB_6jh2JSDI3pTlPx7UxwYhtCsvZ8kF6cgaT3e8gUYoar_3nCMtRMGlwytX3HLRxwueREUVX_TFqUb2ulXoIloTU3Ebj_2uQx1mf_cnzh4Waciqkh1P0X6uqFWH2V3JmzEBl3Uuk/s320/Picture+1%25282%2529.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5589606779219359026" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 320px; height: 181px; " /></span><div><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><br /></span></div></div></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0tag:blogger.com,1999:blog-1464501878009281680.post-34304965302050090492011-03-27T21:53:00.002+02:002011-03-27T22:15:23.288+02:00Adding Up-dateable Content in Modx<div>I have constantly been in contact with the client about what content she wants in the website. She has provided me with a word document, containing all the information, photos etc that she wants included in the website. From there it is my job to ensure that I provide a easy to use, flowing way that she can update the content in the future. It also has to be in a way that fits the style of the website. </div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivIdXzM4mBTUdoKlqM9BfEhmCJoiY4cg3wdakIoZkzyum9Lv3Qal30PHbKbn56nO9alryCxE3903OFg1a7qLEcSSAontcH6EtM2QoaP4JqynON5EESXJaFxzV0YaO0pTFjuQ9g8RjWOxk/s1600/Picture+9.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivIdXzM4mBTUdoKlqM9BfEhmCJoiY4cg3wdakIoZkzyum9Lv3Qal30PHbKbn56nO9alryCxE3903OFg1a7qLEcSSAontcH6EtM2QoaP4JqynON5EESXJaFxzV0YaO0pTFjuQ9g8RjWOxk/s320/Picture+9.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5588850569790731650" /></a>Again I have followed the structure of the previous pages of adding content (within Modx). The client adds the content into title, long title, intro text and then the main content area. Modx styles it according to which area it is put into e.g. the title and intro text will be in a bold, dark blue text and the main content will be in a normal, black text. <div><br /></div><div>I have learnt that it is important to but the text into the document with the insert icon within the Modx interface. If I just copied and pasted it into the general text area in Modx it tends to add code into it from word. However by doing this it doesn't completely get rid of unwanted code it has added breaks instead of paragraphs <p> at time which I have had to go through and alter in the 'edit HTML' section.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOF0MkTzuUt7ucO68wf1Vu7UK8XmeY0LjXi4_DRt5STBlygPM2ga0iXAbokLvVWawTo4APHKtV5YNNp6NM-Q7YEXD-0vJZXbuA5RXbXN3g9-mC4feo1_LmYEmrk_UReHZJUny9b5aze2Y/s1600/Picture+10.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOF0MkTzuUt7ucO68wf1Vu7UK8XmeY0LjXi4_DRt5STBlygPM2ga0iXAbokLvVWawTo4APHKtV5YNNp6NM-Q7YEXD-0vJZXbuA5RXbXN3g9-mC4feo1_LmYEmrk_UReHZJUny9b5aze2Y/s320/Picture+10.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5588850561081591698" /></a>Another really good thing about Modx is that you can alter the content/layout of the website in the front end. I have experimented adding pictures through the front end (only work in the browser you have logged into Modx with). </p></div><div><br /></div><div>First you go to the quick edit section, manage picture and choose the files that you want to upload then press the upload button. It then accesses the gallery code that I have created to format the photos.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHL3pyY7OLeGUXfxmPPD_nRck5je9knqlrAwyBjdwJtmYnNCOJs6yhbGIYZz7NloCEjiiPnknGn90C5JIivVBABiFW6kH2JN8QyI0xunDBwVe_LbsZKgCQ8dk8wL8tooE0D9m9FPQ0_o/s1600/Picture+11.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHL3pyY7OLeGUXfxmPPD_nRck5je9knqlrAwyBjdwJtmYnNCOJs6yhbGIYZz7NloCEjiiPnknGn90C5JIivVBABiFW6kH2JN8QyI0xunDBwVe_LbsZKgCQ8dk8wL8tooE0D9m9FPQ0_o/s320/Picture+11.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5588850550711010114" /></a>Final look of the photos.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzU1iO53YLPYDnwn9_W1bEhz-Qh1MsQm8sCD_qF3Nmw8kaQRcL-LaZwCXZWQJPORUyMzrOEo3d995Ltc59jNhKdJglKDpviE0X-YE-v2vQp44j_nA8FZWgYgg5_HJtxKT2XNatto2b2u4/s1600/Picture+12.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzU1iO53YLPYDnwn9_W1bEhz-Qh1MsQm8sCD_qF3Nmw8kaQRcL-LaZwCXZWQJPORUyMzrOEo3d995Ltc59jNhKdJglKDpviE0X-YE-v2vQp44j_nA8FZWgYgg5_HJtxKT2XNatto2b2u4/s320/Picture+12.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5588850548769427138" /></a>To create the gallery I have 'nicked' the code from the images that I have on the homepage (3 pictures that can be up date able) however again I have altered the code to adjust the size and position of the photos. As you can see from the screen shot of the code below I have changed the height from 500 to 250 and changed where it links to <a href=""></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hg6azqb69tm0u01yeXmkGG76YnriFcO7uonSfyJJFcWGZ18ChpA1vEt-bUKkt9q8b3iI8Cva1kN-uYGmWplmLlgT8xuIK0wUV5kn7ZlSa2qFGBYpCNQto65x7OOUnFh6863fhPUTiZA/s1600/Picture+13.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hg6azqb69tm0u01yeXmkGG76YnriFcO7uonSfyJJFcWGZ18ChpA1vEt-bUKkt9q8b3iI8Cva1kN-uYGmWplmLlgT8xuIK0wUV5kn7ZlSa2qFGBYpCNQto65x7OOUnFh6863fhPUTiZA/s320/Picture+13.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5588850534173490642" /></a><br /></div>Gayr Stareshttp://www.blogger.com/profile/08390321354393779254noreply@blogger.com0