Unit 13: Website Development Lesson 7: Developing a website
So far Typical uses Features Types How can user experience of websites be improved? Designing a website
Typical uses of websites, including: ● presenting information (e.g. advertising, news) ● storing information (e.g. archiving, cloud) ● browsing and searching for information (e.g. real-time information) ● improving productivity (e.g. email, collaborative working) ● making decisions (e.g. financial, managerial) ● communicating with people(e.g. social networking, video conferencing) ● media sharing (e.g. listen to live radio, watch films) ● e-commerce (e.g. shopping, banking) ● education (e.g. libraries, online learning, assessments) ● downloading information (e.g. data, media).
Features ● hyperlinks ● action buttons ● hot spots ● templates ● email links ● registration and logins ● forms (user input and feedback) ● accessibility, e.g. text to speech. ● e-commerce facilities ● online forums ● aesthetics, e.g. colours, layout, graphics/video/animation, audio, text, styles (use of style sheets).
Types ● static ● dynamic
How can user experience of websites be improved? forms that allow customers to leave feedback dynamic interactions when socialising online applying style sheets to keep the same look and feel for a website making websites interactive by embedding digital assets.
Designing a website intended purpose and user requirements as defined in a brief documented design ideas/prototypes, including: original and/or ready-made digital assets (e.g. digital animation, digital graphic, digital audio, digital video or any combined assets). Sources for ready-made assets must be documented and referenced. storyboard, containing a number of panels, showing the intended content and structure of the website home page and folder structure site map, to illustrate how web pages are interlinked styles, templates and formats (e.g. colours,font size, font type, text and image alignment, page layouts) hardware, software and other resources required constraints, e.g. hardware and software availability, accessibility, browser compatibility, file and file formats, client-side functionality, and performance (bandwidth, processor, memory), availability of web plug-ins, e.g. ActiveX, Flash test plan, to test functionality a brief outline of alternative design ideas.
Website Options The College Sports Club Arches - Library/Internet Café. The Perry Orchard Restaurant. Pikes - Complementary therapy outlet. Tec Repairs - Computer repair and purchasing outlet.
Develop a website Prepare assets and create a website: prepare (gather or create) suitable assets, graphics, audio, video, other content such as text and external links use appropriate software tools/techniques create and edit web pages
Task Review your design Look at the assets table - add to it if needed What do you need to create? What do you need to source as a ready-made asset? Prioritise and start to prepare these assets. graphics, audio, video, other content such as text and external links
Home Page – using text editor <!doctype HTML> <html> <head> <title> The Arches Internet Café Home page</title> <!– other clever stuff to make your page work --!> </head> <body> <!– All the good content, how will it be laid out? !- - > <p><h1>Really Important Words to be Picked up by Search Engines</h1></p> <a href=“#”>Next page ‘#’ </a> <!- - link to next page !- - > </body> </html>
Alternative Use an Integrated Development Environment (Wow!) Such as Dreamweaver Advantages GUI Don’t need to know as much coding Intellisense Disadvantages Can result in untidy/unnecessary code Preview isn’t always replicated in browser Can feel you have less control Can be quicker to edit in text editor Don’t learn what the code is doing