FIT1050 - web fundamentals WEEK 1 - 5

various layers and their types of connectivity

refer to notes for this

device addresses - for sender and receiver

- Internet addresses for computers - The IP naming system (e.g. 208.77.188.166 is a IPv4 address) - Going (just about gone) from IPv4 to IPv6)

DESIGN in the web

- "You only get one chance to make a good first impression" - Research has shown that most users make up their mind about the visual appeal of a web page somewhere in the 50ms - 1.7 s range - It's estimated that there are currently more than 13 billion web sites (and 1 million more went up while I was saying that sentence) - You have to impress (or at least not deter) users and you have to do it quickly otherwise they will go elsewhere - The homepage needs to be clear (quickly) about what your web site is about and what services and/or products it offers

When did The internet go commercial, and what are issues against it

- 1989: Agreement that private companies may become commercial Internet Service Providers - selling Internet access to whoever wants it - A source of controversy in the academic/research community: Contrary to the true purpose of the Internet - ISP licenses increase the number of Internet users; which reduces the individual cost of access; which increases number of users .... etc. - Net effect: The Internet becomes a much more 'available' and accessible communications tool

TOOLS FOR CREATING MULTIMEDIA CONTENT

- A complex world of technologies and tools available for creation and modification of content in all media - Usually designed for general media use, but often with specialised functionality for web-based content - Includes both software and hardware products - Functionality/sophistication/ease of use/price variable according to the level of expertise for which products are designed - from beginner to expert professional user - Note the limits to the commodification of design skills in tools; for example, a modern digital camera eliminates the need for technical skills in camera usage, but it still doesn't make me a good photographer!

roles for IT professionals in multimedia web content

- A range of possible roles depending on your individual skills o Doing it all - complement your IT skills with multimedia design skills to design/create/implement multimedia content o Doing some of it - developing skills in some forms of multimedia content o Understanding the need - confining yourself to doing user requirements definition in a classic systems analyst role (you will learn aspects of this in FIT2001) o Technical partner/advisor - helping multimedia specialists from other disciplines - Impact of form/function issues on the need for task specialists - Use of multi-disciplinary teams for multimedia projects

Tag soup: a consequence of the evolutionary path of HTML

- A term used to describe messy HTML, which is o incorrect (ie wrong syntax) o non-standard o incorrectly-used - Caused by the problems with: o HTML, o browsers, o HTML composers o web standards o web developers - Only possible because of 'forgiving' browsers that understand what you meant to say and therefore correct the code

VIEWER MULTIMEDIA FILES: PLUG-INS AND HELPER APPLICATIONS

- An old technology invented to enable software capability to be extended beyond what was built into it - Approach adopted for browsers to enable them to cater for multiple (and often-changing) media formats - Browser identifies MIME type and plug-in or helper application required to read it - Browser provides a 'socket' for plug-in to fit into; plug-in or helper application then reads the file format - User must ensure appropriate plug-ins are loaded on their access device eg Acrobat Reader, Flash, Quicktime, etc

how can images be compressed

- Another way to compress images is to store a letter where you would normally store the colour white, but it takes up less space. - Lossless compression works well with recognised data, but not so good with random files. entropy

THE CREATIVE ARTS SIDE OF WEB CONTENT AND LAYOUT DESIGN

- At a site level: o What are the purposes of the site and what sort of content and layout are needed to achieve them? o Site design features - themes o Standard site design elements - At a page level: o What are the functions/purposes of each page, and what components are needed to achieve them? o Page layout and structure o How does each page relate to all the other pages and the site as a whole - At a page element level: o What is the function of each page component within the context of the rest of the page, and how should this component be represented? o Element composition

all of us being great web designers

- Being accomplished in the technical aspects of web page creation does not automatically mean we have a good design eye - so probably not...... - but there are a few guidelines/conventions that we can follow to ensure that our sites don't invoke epileptic fits or cause users eyes to bleed - We'll look at a few, starting with why we have to worry about this in the web-world we currently live in.

colour on the web

- Certain colour combinations being visually appealing or unappealing is not an accident - Colour Theory describes the visual impact of specific color combinations which are based on the position they occupy on the Color Wheel - Monochromatic o Variations in lightness and saturation of a single colour. o Looks clean and elegant. o Very easy on the eyes, especially with blue or green hues - Analogous o Uses colours that are adjacent to each other on the colour wheel o One colour is used as a dominant colour while others are used to enrich the scheme - Complementary - consists of two colours that are 180° opposite each other on the colour wheel. - Tradic - Uses three colours equally spaced at 120°around the colour wheel NOTE: Colour schemes occur in images as well as text

design checklist things to look for

- Consistency o Use a CSS o Pick a font or two and stick with 'em o Pick a colour scheme and stick with it o Adhere to a HTML standard - Simplicity o Don't make your core business element(s) difficult to find o Don't hide the price - Usability o Test the most common tasks your users will perform on your site o How does it look in different browsers and different devices - Accessibility o Can your site be used by low vision users? o Does your site depend on sound? o Does your site depend on colours? - SEO o Your customers have to be able to find you o Meta tags in HEAD section o Frequent content changes o Sitemap (xml) o Frames or tables are frowned on

The techniques of digital representation

- Development of technology for converting media into digital form: o Numbers - use binary mathematics o Text and standard symbols - use a coding system in which numbers represent letters (ASCII code) o Graphics - convert image to a grid of dots (bit-map or raster), or mathematically-defined shapes (vectors) o Sound - convert sound wave frequency and amplitude to numbers o Video/animation - display a sequence of pictures in rapid succession - Note distinction between exact and approximate forms of reproduction - Relationship between quality of digital reproduction and quantity of digital data

disciplinary EXPERTISE IN THE CREATION OF CONTENT FOR DIFFERENT FORMS OF MEDIA

- Disciplines traditionally associated with skills/expertise in the creation of different forms of media o Text: literature/communication studies/journalism o Picture: art/photography/graphic arts o Sound: music/sound engineering o Symbols: graphic design o Animation: cartoonists/animators o Film/video: cinematography - Note also the development of various sub-specialties in different forms of each medium. For example in the case of written communication, compare and contrast the different skills and writing styles employed in different forms of writing: o poetry o plays o journalism o essays o novels, etc

browsing devices as media viewing platforms

- Diversity of viewing devices and their display characteristics - from desktop computer to mobile phone o Screen size (computer/other devices)? o Page scrolling (up-down/left-right)? o Screen resolution? o Quality of linework and colour reproduction? o Speakers and quality of sound? o Speed of processing (video/animation)? - Impacts on quality of page and user experience - The problem of increased user expectations: o What do they expect and what will they tolerate in terms of display quality? o (Remember 'grainy' screen displays, jerky movement, muddy colours, etc for old computer games? Would you still accept that today?

MULTIMEDIA FILE SIZE AND THE PROBLEM OF WEB PAGE TRANSMISSION

- Download time from server to browser depends on file size and speed of transmission - To calculate the download time for a web page: o work out the size of each of the page's elements (text, graphics, etc); o add them together; o convert to bits; and o divide by the transmission speed (in bits per second) - Answer = download time in seconds (adjust for real traffic speed, rather than theoretical!) - How big a file will a user be willing to wait for? o Slow downloads = unhappy users! (= failed site?!) o When does a download begin to be seen by its users as being 'slow'?

using digital multimedia on the web

- Drivers of innovation in multimedia web usage: o Recreational web usage - the need to entertain (games, etc) o Creative design - the need to present an image o Publishing on the web - the need to tell a story o Education on the web - the need to explain o Business on the web - meeting customer information needs --> We need to worry about what content we want to deliver, and how we'll do it

methods for solving the multimedia file size problem

- File compression - a very complex field: o Loss-less compression = no loss of quality; and o Lossy compression = some loss of quality File compression for examples is taking a video that is 24frames per second, and then getting rid of some frames, so the video is compressed, most people wouldn't even notice the change. - Simplification - remove web page elements which need big files - no video/sound/complex animation - Reduce actual size of web page elements - smaller pictures, shorter animation/video/sound/etc - Trade-off quality against file size - fewer colours, lower quality sound, jerky animation/video/etc - Nothing - rely on broadband access and the user's eventual satisfaction with what they get (or their lack of an alternative!)

typography on the web

- Fonts should be kept to a minimum (2-3) so as not to overwhelm your visitors. - Different fonts say different things about a design. Some look modern, some look retro. - The font you want may not be available to all users. Consider using an image instead - Sans serif fonts are easier to read on a web page - There needs to be contrast between text and background - Size - text is meant to be read, not just looked at. - Text sizes should be consistent, large enough to be read, and proportioned so that headings and sub-headings stand out appropriately. - The human eye finds it difficult to read longs lines of text (particularly on screen). - Fully justified text is difficult to read NOTE: Keep it simple, Users will rarely come to your site just to gaze in awe at your wonderful design capabilities - they want something and they generally want it quickly

implications for web developers due to document mark-up

- How do we cater for old browsers/old documents - How do we ensure that our pages are written in 'good' HTML which will display as we want it to, in any browser and on any viewing platform? - How much does it matter that we get it right? o How important is it that the page/site is visually attractive? o How important is it to have a page look exactly the way you want it to - for every user? - How much effort should a web developer spend on getting these things right? ... and how should you go about ensuring the desired outcome?

transmitting multimedia files on the web

- Identifying file types for transmission on the Internet - MIME-types (an old technology - originally designed for e-mail!) - Multimedia on the web - 'standard' MIME-types registered with IANA; for example: o Text - PDF o Bitmapped graphics - GIF, JPEG, PNG o Vector graphics - SVG o Sound - WAV, AIF, WMA, MP3 o Video - Quicktime, AVI, MPEG, WMV o Animation - Flash, GIF animations

ARTISTIC/CREATIVE DESIGN: DOCUMENT FORMATTING AND LAYOUT

- If a web site looks dodgy, you're less likely to access it and trust it - How much effort/expertise is needed to make a page/site look the way you/the reader want it to and is it worth it?

guiding the eye on the web

- In the Western world we read from left to right and therefore our brains see the left-hand side of a page as the past and the right-hand side as the future. - People usually scan the webpage in an F formation, looking at the left, top and middle of the site - This is why the big online companies, like Amazon, have their "Buy Now" or "Add to Cart" buttons on the top right of screen ...and as most people get their online shopping experience from one of these big companies, you may need to follow suit or prospective clients wont know how to use your site - There are tools you can use to direct the users attention: o Position - Where an element is on a page influences the order in which it is seen o Colour - Use of bold and/or subtle colours can tell the user where to look o Contrast - Being different makes things stand out o Size - Big takes precedence over little o Design Elements - If there is a gigantic arrow on the page, where will the user look? o Using bands/bars/blocks of colours to break up the page and guide the eye

need for specialised skills in the creation of digital multimedia

- Involvement of 'traditional' media disciplines: o Content which works well in other media (print/TV/etc) may not work well on the web (the problems of brochure-ware) o Specialised skills in the creation of traditional media content may not translate into skills in creating digital media content o Complexities of web technologies may be outside the skill set of practitioners from other disciplines - Involvement of IT professionals o Effective web site design may require specialist technical knowledge/understanding of the web o Creative web site design may require skills in 'non-traditional' media - interactivity/scripting, computer-based tools, etc o But, specialised skills in the technology of multimedia representation do not equate to skills in the creation of content (eg I know Photoshop very well, but that doesn't make me a skilled graphic artist)

how do we make effective use of multimedia

- Knowledge and understanding of the message (purpose/content/ audience) - Ability to recognize the most effective form(s) of representation of the message (nature of message content/delivery environment/ responsiveness of audience) - Ability to design a suitable representation of the message in the chosen form (creativity/design skill) - Ability to implement the design into the technology which has been chosen for delivery of the message (technical skills in delivery medium) - Availability of knowledge and skills to support ongoing maintenance and updating of content as required

design issues with connection links

- Link capacity - narrow band vs broadband o Legal definition of "broadband" can vary by country - Variability in speed - symmetrical and asymmetrical capacities - Availability - regional variations - Traffic levels and link performance - Cost and affordability o What is the 'digital divide

multimedia and information representation

- Media is defined as 'one of the means or channels of general communication, information, or entertainment in society' - What is multimedia The use of multiple forms of representation of the content of a message in order to convey the meaning of that message to its intended audience in the most effective way possible. - Thousands of years of development of human skills in using different forms of media to communicate: o Pictures/symbols o Written word o Spoken word o Music/sound/song o Animated drawings o Moving pictures/film/video

navigation on the web, whats trending right now and whats not

- Needs to be clear and easy to use, the user should find it easy to navigate and find pages - Should not depend on Flash or similar - because flash is dead and HTML 5 is very alive What's hot - Sticky menus/navbars - even while you scroll the navigation bar is still next to you and can be accessed - Vertical sliding navigation - No sub menus What's not - Hidden navigation - Animation for the sake of animation (in menus or anywhere else)

what is continuing with the web

- Ongoing evolution in web-based applications/ document types means demands for MLs and browsers become broader, more specialized/complex - Understanding and following developments in even one ML and how different browsers handle it becomes a difficult task - Diagram below gives an idea of these complexities; reality is much more complicated! ... and note, we have not yet started to think about the issues with multimedia - sound/video/etc (later weeks)

traffic flow and rules for transmission

- Packets and packet-switching; breaking messages into pieces - TCP/IP as the rules for data packets and their transmission on the Internet - Packets are given sequence numbers to preserve packet order - The server calculates and send a checksum value that is verified by recalculating the value using data that has been received. - The TCP/IP protocol and device independence (IPoAC = "IP over avian carriers" = messages carried by carrier pigeons! https://en.wikipedia.org/wiki/IP_over_Avian_Carriers ) - The lack of a 'network controller' and the concept of 'net neutrality' on the Internet

Examples of transmission via different connectivity types

- Person-person networks Telephone/Postal service/texting - Printed media networks Newspapers/Magazines (general or subscription)

design issues of web servers

- Setting up, configuring and managing web servers - Server capacity considerations o Normal load? o Peak load? - When does server performance matter? - May interface with other types of servers for additional functionality (often making use of other protocols): o Media streaming and multi-casting o Email o . Databases, etc

creating digital multimedia for the web

- Technological capabilities/constraints in creating digital multimedia o software capabilities and limitations o hardware capabilities and limitations o converting from analog to digital multimedia; artistic skills specific to digital media creation? - Issues in adapting implementation of multimedia to suit the constraints of the web as a delivery medium - Issues in understanding web user behaviour - how does a web page user view its content? - A further dimension to the form/function issues from week 4 - from artistic/ creative to functional/user-driven focus in site content/design Need to worry about the skill of the people in the company, that enable for multimedia to be on the web

connection link technologies

- Telephone line - dialup modem (ancient!) - Telephone line - DSL (ADSL, ADSL2) - Cable (HFC) - Fibre (FTTN, FTTP) - Mobile (2G GPRS, 3G HSPA, 4G LTE) - Wireless (Wi-Fi) - Microwave - Satellite

summary - multimedia in web based systems

- The capacity to support the use of multimedia is one of the most powerful features of the web as a communications medium - Ideas about how to make the most effective use of multimedia for different types of web application are still evolving - The technical complexity of digital multimedia has traditionally acted as a constraint on its usage and on the ability of media experts from other disciplines to be involved in it; this will continue to change over time - The role of the IT professional in multimedia will also continue to evolve as web technologies change

digital multimedia on the web

- The dream for the web as a communication medium: The web should enable documents containing information in any blend of media to be accessed and viewed by any user with any browser on any viewing platform - HTML support for incorporation of different media formats in a web page (see next week's classes) - Ongoing evolution in: o capabilities for creating and using digital multimedia on the web o innovation in ideas about how to make effective use of multimedia on the web o understanding about what works and what doesn't work

web technologies and applications - a process of continuous evolution

- The evolution of web technologies as a driver of change in web applications - The evolution of web applications as a driver of change in web technologies - What new types of web applications have you seen emerge in your time as a web user? - What do you know about the technologies which have helped cause these applications to emerge or which have developed in response to the emergence of the idea for the application? (Or maybe you don't know enough about the technology to be able to know which happened first!)

The evolution of the web and its applications, the opportunity

- The opportunity: can the simple web invented and made available by TB-L be enhanced to work better? - Can web technology be applied and used for other purposes? And what changes would be needed to the technology to support these other purposes? - Not always obvious - except in hindsight!

communication standards

- The problem of communication between separate computer networks - incompatibility of operating systems, devices and communications protocols - To operate many different services seamlessly, rules are needed to govern how computers communicate (protocols). - Protocols are task specific - designed to efficiently handle a specific single aspect of communication - The solution: TCP/IP and its associated technologies (Internet Protocol Suite)

examples of the evolving world of web applications

- The publishing web (newspapers, books, magazines, blogs, etc) - The presentational web (corporate web sites, advertising, etc) - The educational web (Monash, MOOCs, etc) and many more

introduction to technical issues/problems in digital multimedia on the web

- The rapid evolution of specialist technologies associated with multimedia - from graphics to sound to video - Almost any form of multimedia is now theoretically usable on a web page ... but technical constraints and the practicalities of the user environment limit which forms of multimedia can actually be used in practice - This section offers a brief introduction and overview of a complex topic area - Some of these topics will be discussed in more depth next week

pre-cursors to the web

- The web as a collection of information - the great library of Alexandria - The web as a 'responsive' information collection to which users can submit requests and receive replies - Paul Otlet and the Mundaneum - The web as a collection of inter-linked information: o Vannevar Bush's Memex o Ted Nelson's Xanadu project (the origins of 'hypertext') - Dreams/visions of computer-based information management and usage; for example, the world in 2000 as envisioned in 1969 is a certain documentary

file formats for digital multimedia

- There is a multiplicity of file formats for digital media (note similar problem as for text in the pre-HTML days) - For example: see http://en.wikipedia.org/wiki/List_of_file_formats - Issues with: o Specialisation of representation o Quality of reproduction o Efficiency o Proprietary formats and ownership - Problems with ensuring that the multimedia content of your web page is in an acceptable format which can be read by all browsers

name some examples of companies with initial web success, and ones with eventual success

- This included places like E-bay.com, yahoo.com, Craigslist.org and eventually Amazon.com

The invention of the web as we know it and aspects of the reason why it was created

- Tim Berners-Lee at CERN - the problem of information management within a community of scientific researchers - Aspects of the problem: o Making documents universally accessible o Making documents universally readable o Making documents universally connectable - TB-L's proposal for the web as a solution to these problems - The launch of the web as a tool within CERN; TB-L's release of it to the scientific community at large as a useful information management tool

IT professionals and multimedia

- To what extent can/should IT professionals be expected to have skills in content creation in any of these areas of media? - For example, should an IT professional be expected to: o Design layout and write copy for a newspaper? o Do photography for a specialist magazine? o Make a short film for TV? o Do a recording of a speech/song for broadcast over radio? - Repeating the lessons from week 4 about the limitations of our capabilities/design skills - So what role should the IT professional play in the creation of digital multimedia?

the changing face of connectivity - response times

- Two main factors influence response times o Bandwidth - the rate at which you send/receive data o Latency - the time taken to establish a connection - How will the user respond to different response times? o < 0.1 secs - user will not notice o 1.0 secs - user will feel they are waiting o 10 secs - user will lose concentration (and interest?) - Increasing bandwidth and decreasing latency - transitioning from dialup > cable/ADSL > Fibre - Decreased response times result in an increases the range of applications for which the web might be used

the changing face of connectivity - web/internet availability

- Web availability and usage within the community o How many households have broadband access? o How have the costs of computers and broadband access changed? o What percentage of the population have experience of web/Internet usage? - As the availability of high quality web access increases in the community, so too does the viability of applications and the range of user demands - The evolution of computing devices: from desktops to laptops to mobile phone. - Increasing availability and variety of portable and connected digital devices - The shift from shared devices to personal devices - The evolution and increasing availability and performance of high-speed wireless - Freedom from the constraints of the cable-bound desktop, increases the range of options for web usage

impact of the changing face of web connectivity

- Web developers can neither know nor control the connectivity characteristics of users. - Developers have to consider the range of likely connectivity characteristics and adapt their designs to suit - What will be the norm in web connectivity in another 5-10 years? - What impacts will this have on web applications? o Technology constantly improves (introducing new issues) o New applications arising to take advantage of improvements o Existing web applications becoming more accessible and attractive to a wider audience

device addresses - some design issues

- Web sites can be accessed using IP addresses. Why do we use domain names instead? - What is a good domain name worth? o Some people will pay millions of dollars for a good domain name - Choice of TLD (Top-Level Domain, e.g. .com) o Generic (gTLD) with 3 or more letters o Country code (ccTLD) with only 2 letters - The Domain Name System can be abused o Cyber-squatting and domain name fraud o DNS attacks o False DNS records (hacking or political influence)

FUNCTIONAL AND FORM REQUIREMENTS IN A WEB SITE

- What functional needs does the site aim to serve (ie providing user with usable content)? o Users and their information needs o Information required to meet needs - What needs does the site aim to serve in terms of its appearance (ie attractiveness/aesthetic appeal)? o How important is the form of representation of site content to the audience? o How important is the quality of representation of site content to the audience? o Does one have to be sacrificed for the other? - How much do these things vary from one application to another?

increasing user flexibility/control: making HTML extensible - XHTML

- What if I want to write a document which needs a special type of formatting? o Work around it within HTML? o Get new tags built into HTML? o Build a new specialised mark-up language? - The concept of the extensible language - XHTML: An enhancement of HTML, but with extensibility built in - allowed you to create and define your own tags - XHTML also tried to deal with the extra formatting aim of marking-up document content to make them more 'searchable' - Look at 'searchability', mark-up and XML in later weeks

HTML creation technologies

- When HTML was simple, all HTML formatting could be done by hand in text editors - As it got more complex, specialist HTML composers(IDEs) developed - Front Page, Dreamweaver, Brackets, WebStorm etc (even MS-Word can generate an HTML file) - 'Quality' of HTML from composer packages is very variable: o compliance with W3C standard? o 'fit' with different browsers and browser versions? - Often need to 'patch' generated HTML so it works in different browsers

power of different media to convey messages

- Written words - Pictures - Symbols - Spoken words - Sound effect/atmospheric music - Film --> different media can convey different messages and make us feel different things, so we need to find the most effective use of media for our purpose

branding

- Your website should (help you) set your brand apart from your competitors...and think about how your logo will age - Google changed their logo so it was flatter and looked better on a mobile device and in 2015 they made it sans-serif - Apple changed their logo to suit the clean simplistic design that they decided to pursue in 1998

The technological elements of web connectivity - web servers

A computer program (and/or the computer on which the program resides) which stores collections of pages and sends copies of them to anyone who asks - Listens for incoming requests from clients - Sends a response back to client (usually a file+header) - Features o Storage for files o Often able to run code to generate unique files o Finite capacity for responding to requests - Many different types of servers available with varying capabilities

What are the 3 main questions of any network

Any network has these 3 main questions 1. What are the available methods of making a connection, so that information can be transmitted? 2. How does the choice of connection method impact the nature of information transmission? 3. How does the choice of connection method affect how information can be used?

TBL's solution to document formatting

HTML • A SIMPLE MARK-UP LANGUAGE DERIVED FROM THE IDEAS UNDERLYING SGML • BASED on the use of tags which defined how a piece of text enclosed by a pair of tags should be displayed; eg • <title> and </title> • <h1> and </h1> • TB-L's initial version of HTML was very simple - 22 different tags for different document features; way simpler than the large and complex SGML tag set

what happened after the dot com bubble crash

Not everything on the web is always successful. After the dot com bubble and crash: - Ongoing rapid change in web technologies and applications - A more balanced and cautious appraisal of the ease with which new applications can be introduced and the rate at which they will be taken up - Greater appreciation of the need to study and understand the factors which make web applications successful - Advances in the development techniques used for web development - Outcome: Ongoing consolidation of the web as an integral feature of many industries and aspects of daily life in general

The internet and the WWW. And what concepts/technologies does it reply on

The World Wide Web is not "The Internet" - it is a specific application that runs on the Internet. The world wide web is an application that runs on the internet, such as emails, video conferencing. Originally designed for document distribution, it relies on a few key technologies/concepts: 1. Internet communication between clients and servers 2. Documents identification using URLs 3. Navigation between documents via hypertext links The structure of the Internet makes it practically impossible to control or manage what is spread via the web • Is this a good thing? ... or a bad thing?

COMPUTERS MEET DOCUMENT MARK-UP: CURRENT MARK-UP ANCESTORS - SGML - Standard Generalised Mark-up Language

an international standard (ISO accredited) for document markup first released in 1986: • Based on the same principles as GML and heavily influenced by the founders of GML • Designed to enable computer-based documents to be shared and read by users across any computer platform

spacing - white space

o White space doesn't need to be white. The term refers to empty space on a page (or negative space as it's sometimes called). o Used to give balance, proportion and contrast to a page. o A lot of white space tends to make things seem more elegant and upmarket. o Whitespace between paragraphs and around blocks of text actually helps people understand what they are reading better.

digression on language: usage and control

everyone speaks different languages, so things need to happen to as any people as possible can access the web

historical developments - Gopher (1991)

o A protocol presented as an alternative to the World Wide Web. Still operational, largely unchanged

historical developments - ARPANET (1969)

o An early packet-switched network, and the first to implement TCP/IP. Funded by the US Department of Defence

examples of what would make the WEB PAGE CONTENT DEVELOPMENT, LAYOUT AND GRAPHIC DESIGN a graphic design-based discipline

o Content design and creation o Fonts, typography o Screen layout, template design

examples of what would make the WEB PAGE CONTENT DEVELOPMENT, LAYOUT AND GRAPHIC DESIGN a technology based discipline

o HTML, CSS, XML, etc o Browsers, access devices, etc o Content creation software - Dreamweaver, etc

spacing - padding

o Padding is the space between elements and text. You should always have space there. o Text should never touch other elements. o Images should not be touching text, neither should borders or tables

spacing - line spacing

o Too little space makes it easy for your eye to spill over from one line to the next o Too much space means that when you finish one line of text and go to the next your eye can get lost.

historical developments - packet-switching

o Transmitting data in small blocks (packets), developed for military use to increase network robustness

examples of what would make the WEB PAGE CONTENT DEVELOPMENT, LAYOUT AND GRAPHIC DESIGN a user-based discipline

o User needs, expectations, etc o Human-computer interaction, user interface o User experience has become a new buzz word(s) o Is it one discipline (for all types of application) or many disciplines (for different applications)

COMPUTERS MEET DOCUMENT MARK-UP: CURRENT MARK-UP ANCESTORS GML - Generalised Mark-up Language

or Goldfarb/Mosher/Lorie): designed in 1971 for IBM: • Initially aimed to standardise the mark-up of legal documents, but then seen to be more widely applicable • Fundamental aim to separate the description of the document from the specific details of its use

TB-L'S SOLUTION TO DOCUMENT FORMATTING: THE BROWSER

• A piece of software which was designed to read and display HTML-formatted text; TB-L's initial version could also create/edit HTML documents • TB-L's initial version ran only on NeXT computers; subsequent versions were platform-independent, but lacked document creation/editing capability • Subsequent browsers offered better interfaces and more sophisticated capabilities; most notably, the Mosaic browser, which became Netscape Navigator • Issues in error handling: what should a browser do if it finds an HTML tag it does not recognize - crash like 'normal' software or just ignore it?

fundamentals of computer mark up language

• A set of standard formatting symbols, incorporated into an object/document to direct the computer how to use and display it • Can be used to describe: • how something is displayed (eg document structure/layout, text appearance, style sheets, etc • what something contains (eg topics, purpose, authorship, ownership, etc) • other attributes? (security, authentication, etc) • Collectively, these are called the document's metadata

markup in computer applications

• All computer software which deals with text must include mark-up controls • Normally kept hidden for clarity and to avoid confusion with actual document content • Usually designed on the assumption that viewing software and creation software are the same (ie author creating doc in MS-Word assumes readers will view it in MS-Word) • Mark-up controls unique to each software package - even to each version of the software (MS-Word as an example; rtf as an example of a file format which tries to be readable across software packages)

historical overview of document mark-up

• An age-old problem - from author to editor to publisher to printer - how do we ensure a document looks the way the author wants it • Document mark-up - instructions as to how a document should look • Examples of mark-up instructions: • 'Make this a header and centre it on the page' • 'Start new paragraph here' • 'Put this word in italics and underline it' • Impact of type of document on required types of mark-up instructions - eg contrast a novel with a maths textbook with a legal document There were many traditional types of mark-up and now it's computer applications Mark-up relating to document appearance - layout, spacing, fonts, etc versus Mark-up relating to document structure/content • E.g. A letter - recipient/greeting/(title/reference?)/body of letter/closing/signature/etc

The changing face of HTML

• An evolution from Berners-Lee's initial simple set of 22 tags to a large and complex ML • Five main 'standard' versions authorized by the W3C: o HTML 2.0 (1994); o HTML 3.2 (1996); o HTML 4.0 (1997); o HTML 4.01 (1999) o HTML 5.0 (2014) • Initial simplicity lost as new formatting capabilities added - but new capabilities enabled o Constant debates/fights over what to include in the ideal 'standardised' set of mark-up capabilities o Pressures for new mark-up languages to compensate for perceived deficiencies in the capabilities of HTML

HTML improvements: CSS

• Cascading Stylesheets • Developed to improve and simplify formatting document appearance: o enhanced formatting capabilities; o separation of content from presentation • Works like templates and stylesheets in Word, Powerpoint, etc • Enables definition of standard text style - fonts, typeface, etc • Purely focused on appearance issues • Went through its own evolution of versions with varying levels of browser support CSS 2.0, etc

BETTER MARK-UP: HTML FIXES/IMPROVEMENTS

• HTML's simplicity had helped make it popular o but this simplicity also made it hard to deal with more sophisticated needs • As web usage and document complexity increased, HTML grew to accommodate them but the more it grew, the more complex and messy it became... competition between browser manufacturers made things even worse ... while the W3C tried to act as a controller/ standardiser, despite its own internal conflicts and having minimal ability to enforce its views

BROWSERS AND HTML: THE GAME OF LEAP-FROG

• New ideas for HTML tags - better, more specialised formatting controls • New ideas for browsers - more features, better performance • Managing technological change: o Open vs proprietary o Standards vs innovation o Technological merit vs the market • The W3C and the attempts to create web standards • This became known as The 'browser wars'

display objectives of document mark-up and display technology

• Provide a simple (non-proprietary?) means for authors to create documents • Separate document presentation from document content (stylesheet concept) • Provide a simple (non-proprietary?) means for reading the document • Ensure that documents can be displayed and viewed by all possible audiences • Ensure that documents will always look exactly as the author intended to all audiences • Permits/prevents user influence on how a document looks?! (highly controversial in design circles!)

document mark-up and display: TB-L and document sharing at CERN

• The digital document environment at CERN: • Massive collections of documents • Many specialised document formatting needs (maths, physics, graphic display, etc) • Multiple formatting standards - Word, Wordperfect, LaTeX, Postscript, Troff, SGML, etc, etc • The document formatting problem at CERN: • The Internet can connect machines ... • HTTP can enable hypertext links between documents... • ...BUT, what use is it making documents accessible, if people can't actually read their contents? • Requirement: a device-independent document writing/reading capability (equivalent to TCP/IP as a standard for computer connecting technology)

difficulties in knowing and understanding the web

• The web as a (fairly) new technology - many aspects of web technologies and their applications have existed for only a few years • The web as an evolving technology - web technology is in a constant state of change • The web as a complex set of technologies - the web involves not just one technology, but many • The web as a 'commodity' technology - in order to make it easier to use, the web has been designed to try to conceal how it works, and therefore to minimise the amount the user needs to know about how it works