week 10
• Exporting and compressing of digital assets into suitable file types.
Common tools and techniques used to produce websites
Use of tools and techniques and their suitability for different client requirements.
• HTML, HTML5 and subsequent updates.
• Tables.
Tables are very useful elements within webpages, as they allow data to be presented in a clear and clean way. Table tags look like the following.
This code generates the table holder, inside of this we will need to add table rows, these look like the following.
Inside each of the table rows that are created, we need to put table data.
The following code will generate the following table
the more tr and td tags that are added the more rows and columns will appear, e.g.
How to create a quick simple table
• Forms, text field, text area, buttons, radio buttons, checkboxes.
To create a form is to give the intention to record or capture data from those that are on the website. Forms over the past few decades have been part of a targeted area by those that want to phish for data and to spam sites. It is therefore important to remember the following video shows the process of creating a simple form, however, this is not a secure process that is suggested to be used in day to day creations.
• Navigation, menus, hyperlinks (internal and external), anchors.
• Interactive components, e.g. hot spots, pop-ups, buttons, menus, rollover images.
Interactive components provide webpages with some dynamics that enable users to have direct interaction with content and, or, features on the site. The use of these features will also enable the user to gain and gather feedback on actions that may have been done. For example, submitting information into a form. This level of interactivity whilst considered by many as a typical operation, users will want to know whether the first time that they clicked on the button was a success or a failure.
The interactive feature is simple however powerful.
• Colour schemes, styles and templates.
Colour schemes are used in many websites and pages to provide consistency and continuity. These themes will allow visitors to the site to know that they are still on the site when they move around it. Having pages that look and feel different users could be confused that they may have navigated away from the site.
Colour schemes have the ability to give an impression/status of the site.
If you took the theme from the after eight mints product and used this on the McDonalds theme, users could interpret McDonald's as being upper-class.
• CSS, e.g. background colour, background images, text formatting, borders, padding, heading styles, element position.
Cascading Style Sheets are additional files that are used in the creation of a website. These files can be accessed using a number of different ways, these are;
Inline -
Internal/Embedded -
External-
CSS, is used to control the style and presentation of a webpage, using selectors called
Class (represented as follows in css ".navbutton")
ID (represented as follows in css "#navbar")
Further information to the implimentation of these methods can be seen in the prezi below.
• Embedded multimedia/digital asset content, e.g. digital animation, digital graphics, digital audio, digital video.
• Accessibility features, e.g. alternative tags, zoom features, text-to-speech.
Accessibility, as mentioned in previous weeks, is one of the most pivotal areas within the development and design, down to the key point that companies can be fined if they are non-compliant to key legal legislation.
There are sources of information that can help in the pursuit of compliance, these are;
Bobby Compliance
WAI The Web Accessibility Initiative, created by W3C set out to provide guidance and guidelines to the ways developers and organisations can comply to make content and webpages accessible to all users.
Simple features to support users can be things such as;
alt Tags - These are additional properties inside of the img tag, this property enables the developer to add text to describe what the image is, this in turn can be read by screen readers on a users computer.
Browsers these days will provide options for users to zoom in to text and images so that elements can be seen.
• The World Wide Web Consortium (W3C®) standards for accessibility and HTML compliance.
The W3C was created on the 1st of October in 1994 by the man many refer to as the architect of the internet, Sir Tim Berner-Lee. The organisation governs the development and maintanence of web standards that are used to form the internet fabric and structure that we all are used to.
The W3C has a number of validators on their website that enables web developers to input their files or mark-up/code to get is checked against these standards to ensure that the pages created conform.
The W3C work with all the major browsers in the development of new tags and mark-up that provides users of the web interactivity and enjoyment.
To use the W3C Validators follow this link https://validator.w3.org/
• Platform compatibility, e.g. browser, operating system, mobile devices.
Other considerations that need to be reviewed are the devices that are used to access webpages such as tablets, phones and watches. These devices use different "viewports" that are windows to view the site, using HTML and CSS we are able to serve each device with an optimised web page suitable for the device that they are using, this feature is also known as "mobile responsivity" where the HTML checks the device viewport data and serves the CSS relevant to that data.
A useful feature to ensure that webpages are identical across all browsers is the use of the Eric Meyers CSS Reset. This section of code zeros any pre-set page settings.
To get this code follow the following link. https://meyerweb.com/eric/tools/css/reset/
• Exporting and compressing of digital assets into suitable file types.
When creating assets to appear on a website, consideration must be taken to the size and file type of them. Users that visit websites maybe using a variety of platforms and have varying bandwidth capability. These factors will have a direct impact on a users experience and enjoyment of a site. Quick wins in dealing with files are as follows;
For image use web formats such as PNG (Portable Network Graphics), JPG (Joint Photographics Experts Group), SVG (Scalable Vector Graphics)
For Audio use compressed formats such as MP3, WMA, or use a dedicated streaming service to provide the files like SoundCloud
For Video use compressed formats such as MP4, AVI, FLA, or use a dedicated streaming service to provide the files like YouTube
Last Updated
2018-04-23 13:52:02
Links to Learning Outcomes |
Links to Assessment criteria |
|
|---|---|---|
English
Maths
Using Numbers: Counting, Place value, adding and subtracting, multiplying and dividing.
How 2's Coverage
Simple Self Assessment - Learners compare their work against success criteria given to them by the teacher and identify ways to improve the work done so far.
-
Files that support this week
Week 9←
PrevWeek 10←
PrevWeek 11←
Prev→
Next→
Next
