Name: Claire O'Rourke
Student Number: 10955742
Date of submission: June 8, 2010
This site is W3 Standards compliant:
This report provides a detailed examination of the learning path I have taken in Digital Media Technoloiges (DMT), from March-June 2010. The report outlines learning objectives I set for course and will document the system I have constructed in order to meet those objectives. In the report I have demonstrated the consistency between what I have documented and what I have built, and include deviations I have taken from the learning proposal and system plan submitted earlier in the course. Macro and micro analyses of the technologies I have used for the project are included in the report, which overall demonstrates a greater understanding of a number of digital media technologies attained throughout the course.
Learning Objectives
In order to assess the extent to which I have achieved my learning objectives in Digital Media Technologies (DMT), it is important to consider my background and skill level. I am a trained print journalist, and I now work as a campaigner and communications professional for a non-profit organisation, the International Federation of Journalists Asia-Pacific.
While I am an avid user of online media and applications such as websites, Google documents and social media applications such as Facebook, LinkedIn and Twitter, at the outset of the course I had very basic knowledge of how digital technologies are created and maintained. (For example, I had not begun a blog until this course began.) I sporadically uploaded content to websites using the Joomla content management system, but my web development skills were basic.
I set a number of learning objectives for this subject, which were outlined in my Learning Proposal (O'Rourke, 2010):
In order to achieve the learning objectives oulined above, I have built a website for a friend's civil celebrant business. The technology 'problem' here was that my client was looking for a simple, yet functional website as part of the marketing strategy for her new business. I have considered the potential market and users of the site in order to design a system that will satisfy my client's needs.
The client's broad market is people local to southern Sydney and the Illawarra/Shoalhaven regions of New South Wales, Australia, who are planning a civil ceremony including weddings, commitment ceremonies, renewal of vows and naming ceremonies for children.
Celebration Rites site visitors are most likely to be those who are planning their wedding, and reports from the client indicate it is more likely to be females who are searching for this information.
In NSW in 2004, the median age of brides was 28.8 years, and grooms was 31.2 years (ABS, 2006). Given the age demographic, these people are likely to be working, and many site visitors are likely to be searching for information from the workplace, which required information to be quick and easy to find.
People who are looking for a civil celebrant for their second marriage are likely to be in their late 30s to early 40s - in 2004 in NSW, the median duration of marriage was 11.2 years (ABS, 2006).
Other users of the site would include people who are considering the following ceremonies:
Reports from the client indicate that, like marriage, people considering naming ceremonies for their babies and young children are likely to be within the mid-late 20s to late 30s age demographic, and again, are more likely to be female, while those considering renewal of vows are more likely to be aged 40 and above. Commitment ceremonies are anticipated to be in the minority of users for this site, but even so, the content should be welcoming to these visitors.
Site activities
People will use the site for three key functions:
Users will also use the site to compare the likely services of my client to others who operate in the region. Therefore the site must be professionally presented, upload quickly and be free of errors. People who use the site may not have the most recent browsers so it must easily adapt to a variety of browsers. Site pages and resource material must be easy to print out and share so that the user will return to my client as a reliable source of information.
User Analysis matrix
Considering the above user analysis and technology 'problem' outlined by the client, the 'solution' that I have designed and built for my client is the site "Celebration Rites" which:
The site uses XHTML to create the site, Cascading Style Sheets (CSS) to determine the site's look and interactive menu, JavaScript for alerts, and PHP for the email form and date stamp. The site also uses LongTail JW Player for video and JPEG format for images/logos.
Major screens of the application
For consistent design and ease of navigation of this fairly simple site, the following elements appear on every page:
Each screen appears in the form shown in the screenshot below. An exception is when the user views a PDF file from the resources page of the site - these files will be viewed on the Issuu website or, if the user prefers, in the browser. To return to the site, the user will go 'back' in their browser.
Site map
The system I have built reflects the site map below, as each page links from the home (index) page and each page has a link in the bottom of the content section that takes the user to the booking page.
Architecture diagram
The system I have built reflects the architecture diagram below.
Diagram of technologies used in the site
The diagram below outlines the specific technologies used on each page.
In order to enhance my understanding I have undertaken a macro and micro analysis of the major technologies I have used in the site. I have also included any deviations from the original System Plan.
XHTML
Macro Analysis
XHTML, a client-side technology, is directly translated to mean Extensible Hypertext Markup Language. XHTML is an open language, that is, anyone can use it to code web documents. XHTML is compatible with HTML 4.01 and became a World Wide Web Consortium recommendation in 2000 (w3schools, 2010). The World Wide Web is commonly understood to be a system of interlinked hypertext documents contained on the Internet and pages written in HTML can be parsed (analysed) by a software application known as a web browser (Wikipedia, 2010).
XML describes data, while HTML displays data, so the combination of HTML with stricter XML syntax results in well-formed documents, which means they can be recognised and supported by most browsers (w3schools, 2010).
The common understanding is that there has been conflict between those promoting HTML and XHTML, with detractors of HTML citing problems such as the lack of support for XHTML in Internet Explorer (Wikipedia, 2010) a problem as 34.9 per cent of web users use IE as of March 2010 (w3schools, 2010). However, the soon to be released Internet Explorer 9 has added support for XHTML (Hachamovitch, Dean, 2010), which should rectify this criticism. XHTML and HTML 5 are in development with the aim to incrementally introduce the new languages in order for more comfortable adoption by developers (Berners-Lee, 2006).
Micro Analysis
XHTML determines the overall structure of my site and is the foundation of each web page I have designed. It is suitable for this task as it is recognised by most browsers (w3schools, 2010).
XHTML was a good match for my skills and needs as I already had an elementary working knowledge of HTML. My skills were extended as structuring a document to be recognised by older and/or rarer browsers - some which may not recognise Cascading Style Sheets - was a challenge for me. I needed to know the rules before I could innovate and break them, or indeed follow them to consder how adherence can strengthen [my] work (Holzschlag, p20, 2002). This desire, along with my learning objectives, were fulfilled in this case by gaining a working understanding of the code, which is W3 Standards compliant.
CSS (Cascading Style Sheets)
Macro Analysis
CSS stands for Cascading Style Sheets, a standardised syntax that gives developers control of the look of web pages (Schmitt, preface, 2009). This client-side technology was created by the W3 Consortium to solve the problem of developers needing to define the style of every page within each page, which was problematic and time consuming for developers, particularly on larger websites (w3schools, 2010). CSS styles are often stored in separate files to the HTML document so changes to style of a site can be made in one file (w3schools, 2010).
CSS1 was published as a W3C recommendation in 1996 (w3.org, 1996) and CSS2 became a recommendation two years later - the latest revision to remove errors was in 2009 (w3.org, 2009). However, it was only with the increased use of Internet Explorer 8 that drove the widespread use of CSS2 (Schmitt, preface, 2009). Most newer browsers support the latest versions as they are updated (Schmitt, preface, 2009). CSS3 is currently under development (w3.org, 2010).
Browser style specified by the user overrides CSS, so it is important that the HTML elements in a web page are constructed logically so the page can be understood. This is also important when considering accessibility - web pages should be able to be read by a screen reader in a fashion that ensures the document is logical and not loaded up with repetitive, non-essential content at the top of the page.(Cederholm, 2008, p29)
The common view is that CSS is a better system for styling elements rather than layout, which means some browsers will render CSS in different ways (Wikipedia, 2010) and this needs to be taken into account by developers.
Micro Analysis
The ability to change styles was useful for my project, first as my client is not yet decided on final style and colours, so it will be more efficient to change these from the one file.
Second, I have used CSS as an alternative to JavaScript (see below) to create changes to the navigation menu (colours) on the page(s) when the mouse rolls over them. I found that CSS was a simpler way to achieve this in the time available for the project, and there is the added benefit of being able to change the colours of the menu in the same file as the rest of the site style.
Also as there are a number of documents on the site that visitors may want to print, I have developed a second style sheet (print.css) to allow for a print-friendly version of pages, one that takes out a lot of the colour and decorative elements, but retains key items of content and emphasises my client's contact details.
The navigation menu items did include CSS 3 properties which created curved corners (Schmitt, 2010, p357) in earlier manifestations of the site, but this feature would not validate in either CSS 2.1 or CSS 3 so it was abandoned.
PHP
Macro Analysis
PHP stands for PHP: Hypertext Preprocessor and is an open-source server-side scripting language created by Rasmus Lerdorf in 1995 (Wikipedia, 2010). PHP supports a large number of databases including MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC (w3schools, 2010). The PHP Group is generally understood as the informal standardard for PHP as there is no formal standard as yet (Wikipedia, 2010).
PHP can be used for server-side scripting, that is, "anything any other CGI program can do, such as collect form data, generate dynamic page content, or send and receive cookies" (PHP, 2010), but can also be used for command-line scripting and writing desktop applications (PHP, 2010). PHP is commonly understood to be the most popular Apache HTTP server module (Wikipedia, 2010) and more than "20 million Internet domains had web services hosted on servers with PHP installed" (Wikipedia, 2010, PHP, 2007)
Micro Analysis
I have used PHP to create a date-stamp function for my site that will update every time a page in the site is refreshed, which required ensuring my web server has PHP and MySQL installed. I also discovered a PHP mail form (Red-X, 2008), that I incorporated on the site in the 'booking' page The form has drop-down elements and delivers email to the required inboxes with server-side email validation, fulfiling the desired site functionality.
JavaScript
Macro Analysis
JavaScript is an open source programming language that works as a scripting language in a host environment - unlike the host, JavaScript does not communicate with the outside world (Willison, 2010). The host is most commonly a web browser but can also be found elsewhere including Adobe Acrobat and Photoshop (Willison, 2010).
The client-side version of JavaScript allows a web page to include executable content, that is, programs that interact with the user, control the browser, and dynamically create HTML content (Flanagan, p1, 2006).
JavaScript was invented by Netscape developer Brendan Eich and was first adopted in the browser Netscape Navigator 2.0, and in Internet Explorer 3.0 and in all subsequent versions of both popular browsers (W3schools, 2010). The language is governed by the European Computer Manufacturers Association Standard, first recognised by the International Standards Organisation in 1998. The official name of the open-source language is ECMAScript, and should not be confused with Java, a high-level programming language developed by Sun Microsystems (Flanagan, p2, 2006).
The third edition of the ECMA standard, adopted in 1999 and published by the ISO 2002 has seen the language common among all web browsers and the fifth edition of the language adopted in 2009 recognises new interpretations of the language by browsers and includes features such as a strict mode that provides enhanced error checking and program security (ECMA, 2009, vii).
Micro Analysis
I had intended to add dynamic features to my site with JavaScript, such as menu items where I want to change the content of the item on mouse rollover. However I found that the dynamic look I wanted was easily and quickly achieved with CSS as outlined above.
I also wished to use JavaScript for a form, but discovered that PHP was a more appropriate technology to use for this function (see below). I had, however, intended to use JavaScript to validate email addresses on the client side. JavaScript is the most appropriate technology for this task as it will perform the task without any server use, saving processing requirements (w3schools, 2010). However, the learning required in the time allowed for the project prevented me from achieving this particular function.
To achieve my learning objective to get a working knowledge or familiarity with this technology, I created a series of pop-up alerts on the 'resources' page of the site. When the user clicks on an link in the 'Links' list on the page, an alert appears warning that the user is about to leave the site.
Longtail JW Player for Flash
Macro/Micro Analysis
Longtail JW Player for Flash is an open-source, client side technology that supports playback of any media content supported by Adobe Flash players (Longtail Video, 2010). The media files are uploaded to the server then the player code is embedded into the HTML document. I have used the player to embed video into the home page of the website.
Issuu
Macro/Micro Analysis
Issuu, a client-side technology allows for a visually-appealing way to view PDF files from a website. The developer uploads the document(s) to the Issuu website, then embeds either a link or a widget on the web page. When the user clicks on the link for a PDF it is viewed on a dedicated webpage or in the originating site if using the widget (Schonfeld, 2008). I was attracted to using Issuu as it presents documents in a more professional manner. However, Issuu embed code does not validate, and investigation on Issuu support forums (Issuu, 2010) show that there is no solution to this problem as yet. As a work-around, I have made an image link to the Issuu website location where the document is held, allowing the user to view the documents using this attractive technology.
Images and Illustrations
Macro/Micro Analysis
I note I have use JPEG format for compressing photographic images for inclusion on the site. JPEG reduces file size of images by removing detail that your eyes would be unlikely to notice (some colour and some fine detail) (www.jpeg.org, 2010) so that images will be retrieved quickly and with less processing strain on the server.
My learning proposal identified the single biggest threat to my project was time, and while I achieved the majority of my learning objectives, client-side email address validation in the booking form using JavaScript was attempted, but it proved too complex in the time I allowed myself towards the end of the project schedule.
Items flagged as additional options if time permitted, namely the Google map and calendar, and blog embedding were not attempted due to time constraints.
Revised schedule of work
The schedule of work below outlines an adjusted schedule, reflecting the work as it occurred.
Regarding other changes, I also included links to social media sites, which would be replaced with direct links to my client's pages (she has none at present). Social media and search are considerations as these applications and functions are likely to be increasingly important to business, particularly small business, which is largely driven by word of mouth (Small Business Center, 2010). I have included keyword and description information in the header of all pages, but these need to be refined in order to see the site ranking higher in Google search.
Video content was not provided, so I placed the video lower down on the Home (index) page, using a short video to test the technology. I also learned how to embed YouTube videos (see my blog), but have not included it in the site as initial problems with the JW player were overcome and YouTube was unnecessary.
This report demonstrates that I have learned a great deal across the course and that overall I have satisfied my learning objectives. I have also reflected on what I have learned and the process of learning as the course unfolded through in-class reflection, discussions with lecturers, students and work colleagues, researching relevant books, articles and websites and using web-based tutorials (both text-based and on YouTube).
Evidence of reflection on this learning is primarily evidenced in my blog that can be found at http://raucousthoughts.wordpress.com, where I documented class lectures and practical exercises, along with the workflow of particular site technologies. Here is one example from the blog.
I have also compiled a list of relevant links that have assisted my learning, which are housed in the social bookmarking site delicious: http://delicious.com/claireorourke/MIM_95564.
Overall, this course has given me the basis to go ahead and teach myself how to do more web development.
I hope to turn the site I have built into templates for use with the Joomla content management system, so my client can update the site without my assistance. Further plans also include photo galleries and inclusion of a Google map and calendar. I will recommend that my client consider an alternative to free webhosting, as 000webhost is not always loading quickly.
I have obtained a thorough understanding of what a web developer needs in order to complete a project, which include, but are not limited to:
I have also learned that a web developer should always ask a client what the purpose is of the site and the purpose of elements within it, which will allow the designer to provide the best 'solution' to the technology 'problem' and make for an enhanced user experience.
Adobe, 2010 Kulerhttp://kuler.adobe.com/
Australian Bureau of Statistics 2006 Demography, New South Wales, 2004, Final, viewed 3 May 2010, http://www.abs.gov.au/ausstats/abs@.nsf/productsbytopic/D5C2D0490FE54E4ACA256E8B000578F8?OpenDocument
Berners-Lee, T. 2006 Reinventing HTML, viewed 8 April 2010, http://dig.csail.mit.edu/breadcrumbs/node/166
Boss, B. 2010, Cascading Style Sheets, Current Work, W3 Consortium, viewed 8 April 2010, http://www.w3.org/Style/CSS/current-work#table
Cederholm, D. 2008, Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS 2nd Edition, New Riders, Berkley, CA
Flanagan, D. 2006, JavaScript: The Definitive Guide, 5th Edition, O'Reilly, Sebastopol, CA
ECMA International 2009, Standard ECMA-262 5th Edition, ECMA, Geneva
Flanagan, D. 2006, JavaScript: The Definitive Guide, 5th Edition, O'Reilly, Sebastopol, CA
Google Code, 2010, Google Maps API, viewed 8 April 2010, http://code.google.com/apis/maps/
Google Code, 2010, Google Calendar APIs and Tools, viewed 8 April 2010, http://code.google.com/apis/calendar/
Hachamovitch, D. 2010 HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers, viewed 8 April 2010, http://blogs.msdn.com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-available-for-developers.aspx
Holzschlag, Molly E. 2002, "Raise your standards: Knowing the rules gives you freedom to break them and the skills to make your content more powerful (Design Integrated Design)", in Web techniques, vol 7, no. 2.
International Federation of Journalists Asia and Pacific, viewed 28 May 2010,http://asiapacific.ifj.org/en
Issuu, 2010, Issuu, viewed 11 April 2010, http://issuu.com/
Issuu, 2010, The embed code is not XHTML strict compliant; how to solve? , viewed 31 May 2010, http://getsatisfaction.com/issuu/topics/the_embed_code_is_not_xhtml_strict_compliant_how_to_solve
Joint Photographic Experts Group, 2010, FAQ: What is JPEG 2000?, viewed 8 April 2010, http://www.jpeg.org/faq.phtml?action=show_answer&question_id=q3d5bc0701c9b6
Joint Photographic Experts Group, 2010, FAQ: What is JPEG encoding?, viewed 8 April 2010, http://www.jpeg.org/faq.phtml?action=show_answer&question_id=q402c46de47d16
Joomla, 2010, Joomla Absolute Beginners Guide, viewed 3 June 2010, http://docs.joomla.org/Beginners
Longtail Video, 2010, FAQ: JW Players, viewed 8 April 2010, http://www.longtailvideo.com/support/faq
O'Rourke, C. 2010, Learning proposal - final, viewed 28 May 2010,http://www.corourke.vacau.com/learning-proposal-final.html
O'Rourke, C. 2010, Claire O'Rourke - Macro/Micro Analysis, viewed 3 June 2010,http://www.corourke.vacau.com/100413_macro_micro_analysis.html
O'Rourke, C. 2010, "MIM_95564", in Delicious, viewed 3 June 2010,http://delicious.com/claireorourke/MIM_95564
O'Rourke, C. 2010, Raucousthoughts, viewed 3 June 2010,http://raucousthoughts.wordpress.com/
O'Rourke, C. 2010, "Claire O'Rourke - System Plan", viewed 3 June 2010,http://www.corourke.vacau.com/100511_system_plan.html
PHP, 2010, Usage Stats for April 2007, viewed 11 April 2010, http://www.php.net/usage.php
PHP, 2010, What can PHP do?, viewed 11 April 2010, http://au.php.net/manual/en/intro-whatcando.php
Red-X, 2008 "My contact form", in 000webhost Forum, viewed May 21, 2010http://www.000webhost.com/forum/7306-post51.html
Schmitt, C. 2009, CSS Cookbook, 3rd Edition, O'Reilly, viewed 8 April 2010, http://my.safaribooksonline.com/9781449377250
Schonfeld, E. 2008, "Finally, a Web-based PDF Viewer That Does Not Suck (Issuu)", in Techcrunch, viewed 11 April 2010, http://techcrunch.com/2008/02/06/finally-a-web-based-pdf-viewer-that-does-not-suck-issuu/
Small Business Center 2010, Small Business News: Mastersing Social Media, viewed June 3, 2010, http://smallbizczar.org/2010/06/small-business-news-mastering-social-media-4/
W3 Consortium, 2008, Cascading Style Sheets, level 1 W3C Recommendation 17 Dec 1996, revised 11 Apr 2008, W3 Consortium, viewed 8 April 2010, http://www.w3.org/TR/CSS1/
W3 Consortium, 2009, Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Candidate Recommendation 08 September 2009, W3 Consortium, viewed 8 April 2010, http://www.w3.org/TR/CSS21/
W3 Schools, 2010, Browser Statistics, W3 Schools, viewed 11 April 2010, http://www.w3schools.com/browsers/browsers_stats.asp
W3 Schools, 2010, XHTML Introduction, W3 Schools, viewed 8 April 2010, http://www.w3schools.com/xhtml/xhtml_intro.asp
W3 Schools, 2010, W3C XHTML Activities, W3 Schools, viewed 8 April 2010, http://www.w3schools.com/w3c/w3c_xhtml.asp
W3 Schools, 2010, XHTML - Why?, W3 Schools, viewed 8 April 2010, http://www.w3schools.com/xhtml/xhtml_why.asp
W3 Schools, 2010, JavaScript Introduction, W3 Schools, viewed 8 April 2010, http://www.w3schools.com/js/js_intro.asp
W3 Schools, 2010, CSS Introduction, W3 Schools, viewed 8 April 2010, http://www.w3schools.com/css/css_intro.asp
W3 Schools, 2010, CSS Introduction, W3 Schools, viewed 8 April 2010, http://www.w3schools.com/css/css_intro.asp
W3 Schools, 2010, PHP Introduction, W3 Schools, viewed 11 April 2010, http://www.w3schools.com/php/php_intro.asp
Wikipedia, 2010, Cascading Style Sheets, viewed 8 April 2010, http://en.wikipedia.org/wiki/Cascading_Style_Sheets
Wikipedia, 2010, JPEG, viewed 8 April 2010, http://en.wikipedia.org/wiki/JPEG
Wikipedia, 2010, PHP, viewed 11 April 2010, http://en.wikipedia.org/wiki/PHP
Wikipedia, 2010, World Wide Web, viewed 8 April 2010, http://en.wikipedia.org/wiki/World_Wide_Web
Willison, S. 2006, "A re-introduction to JavaScript", Mozilla Developer Center, viewed 8 April 2010, https://developer.mozilla.org/en/A_re-introduction_to_JavaScript
*This report is W3 Standards compliant:
