epq presentation final
TRANSCRIPT
![Page 1: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/1.jpg)
How are HTML, CSS and JavaScript used to create Websites?
Extended Project Qualification 2014 Andrew Smith
![Page 2: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/2.jpg)
WebDesign+ ➢ Initial Ideas for Web Development
➢ Conclusion
➢ Demonstration of WebDesign+
➢ The development lifecycle of WebDesign+ ➢ Analysis ➢ Design ➢ Implementation ➢ Testing ➢ Evaluation
![Page 3: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/3.jpg)
! Christmas 2013 - Need for a resource that could be used as a reference guide for learning HTML and CSS.
! Create something that would involve me learning and putting into practice Web Design & Development Skills
! Supervisor – Create Artefact
! Idea that primarily began with the combination of wanting to create a resource to code Websites and research this in more detail through the Extended Project Qualification
! Front End Web Design focus Vs Back End Web Design focus
Initial ideas for Web Development - Analysis
![Page 4: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/4.jpg)
WebDesign+ The Development Lifecycle
Design Christmas 2013 – eBook Example 1
![Page 5: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/5.jpg)
WebDesign+ The Development Lifecycle
Design January 2014 – eBook Example 2
![Page 6: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/6.jpg)
WebDesign+ The Development Lifecycle
Design September 2014 – Final Edition
![Page 7: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/7.jpg)
WebDesign+ The Development Lifecycle
Implementation
➢ Principally made up on ‘3 series’ of lessons: HTML, CSS and JavaScript
➢ Each series of lessons includes sub sections, showing how something (mostly an
element) or how a certain setting can be coded using the respective a language of
those series of lessons
➢ Consistent template throughout – Navigation bar always present
➢ Different colours to represent 3 different languages.
![Page 8: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/8.jpg)
WebDesign+ The Development Lifecycle
Implementation➢ General need to show ‘raw’ code alongside ‘live’ code
➢ Use of ‘LiveBoxes’
➢ Tip boxes offering advice
➢ Learn boxes summarising useful information of the page
![Page 9: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/9.jpg)
Early LiveBox prototype
![Page 10: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/10.jpg)
Navigation Bar & Homepage
![Page 11: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/11.jpg)
WebDesign+ The Development Lifecycle
Testing ➢ Line of code to add a pink background to the element
➢ Shows the area that an element takes up
➢ Ultimately, used for diagnosing issues where elements overlap or take up excessive
space
➢ Further tests involved:
➢ Dry run trials
➢ Getting others to check and use site
➢ Validation tests using http://validator.w3.org/ ➢ Verification via beta tests
![Page 12: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/12.jpg)
WebDesign+ The Development Lifecycle
Main Issue – Adaptation to variation of screen resolutions & resizing
➢ Main issue throughout development
➢ How to make page react well to different screen resolutions
➢ Mr Wilkinson & Mr Copeman– Use JavaScript to detect screen
resolution, add variable container to allow an increase or
decrease of screen resolution
➢ Local Web Developer contact – Use CSS Framework
➢ AOL Work Experience contact – Use different positioning
➢ Final Solution: ➢ Add main container & guttering
➢ Varied the positioning type
![Page 13: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/13.jpg)
Rendering site on a Tablet Fixed screen resolution issue
![Page 14: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/14.jpg)
WebDesign+ The Development Lifecycle
Main Issue – Adaptation to variation of screen resolutions & resizing
![Page 15: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/15.jpg)
WebDesign+ The Development Lifecycle
Evalution ➢ Created a resource offering users the information needed when creating a
Website of intermediate level
➢ Put into practice skills that I had researched
➢ Used a wide range of sources to gather research
➢ Interactive courses – Useful, reliable & offer users a new learning
environment and experience
➢ CodeAcademy
➢ W3 Schools
➢ Long and ambitious project completed
➢ 27 pages
➢ 124 related files
➢ 8,317 separate lines of code
![Page 16: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/16.jpg)
Conclusion ➢ Gained new skills in the field of Web Design & Development
➢ HTML
➢ CSS
➢ JavaScript
➢ Experience a project in its full cycle; analysis, design, implementation, testing, evaluation – Often required
when pursuing a career in Computer Science (software projects)
➢ Opened up work experience opportunities & gave confidence to pursue other Web projects
➢ AdShack – Online Advertising Based Community
➢ Punchline Productions – Local Media Production Company
➢ AS Computing Web Design module
➢ Further research the topic
➢ JQuery
➢ PHP
➢ Back-end Web Development
![Page 17: EPQ Presentation Final](https://reader030.vdocuments.us/reader030/viewer/2022021417/58cff4891a28abfc0a8b49b7/html5/thumbnails/17.jpg)