WebDev0

Information

Session 5: Follow these steps

  1. Sometimes you might want to apply a style to a single word in a sentence, for example the work Page in the heading on the personal page. To do the you first use the html command span to markup up just that word (<span>Page</span>). Then inside the span tag create a class (called red). A class is better for this feature since it is reusable. In the CSS create a selector for this class (this is a dot followed by the class name eg .red). Then inside the block change the colour to red. Since this is a specific style you should place this at the bottom of your style sheet after you have created the general styles. Throughout your site there is often a need to create these small styles that apply to just a small part of the page, this is the way to do this.
  2. We now want to apply styles to the images on our play page. We could use as a selector just the img tag, however that would apply styles to every image across the site, regardless of where they were. If we want a style to apply just to these particular images we need our selector to zero in on them. The cascading nature of CSS also applies to selectors. If you look at the HTML of the play page the images all sit within the div marked with an id, you did this in part 15 on Session 3. The parent of this div is the body tag so the body CSS and the div CSS cascade into the image CSS. We can use this effect to create a selector. We can ignore the body and start with the div or better still the div idname. This selector needs a # in front of the name. This selects the whole div, however we want to zero in on just the image tags inside the div. To zero in like this we simple add the img tag to the selector. This is done by putting a space between the two tag eg #idname img This whole selector now zeros in only on the image tags inside the tag with that idname.
  3. Now that you have zeroed into the three images we can apply to CSS to each of the images. Let's make them spin. This uses two CSS command transition and transform. The link uses the pseudo selector :hover which can be applied directly after any valid selector. Transition sets up the time the effect will take while transform sets up the exact change which will occur. If you go to caniuse you will note that this feature only works in the latest browsers. It is still in BETA which means you need to use special commands to get it to work in Safari and Chrome. The effect of this is that you need to write the whole command for each browser. The browser will use the commands that it knows and will ignore the others. There is another way to do animations is CSS using @keyframe but this is more complex.
  4. The next feature is to fade the picture slightly when the mouse hovers over the image. Create another selector zeroing in on one of the images which includes the pseudo hover selector. Fading the image is done with the CSS command opacity which is just out of BETA so only one command is needed. However good web developers don't expect that users will be working with the latest browsers so often add in the old commands as well just to be sure.
  5. It might be interesting to add a twisting to the image as well as fading it. This is done with the CSS command transform. This command is now out of BETA however a number of commands are needed for it to work in every browser. There are a huge number of ways to transform including rotating in any direction, skewing, scaling and 3D translations. Your lecturer has the code for a basic effect. One effect that is alway nice with images is a border which appears to place the image into a frame. It is possible in CSS to change this border so that the corners are rounded. See if you can find the command which will do that.
  6. The last advanced CSS effect that will be discussed is the way to make the page change when it is resized. This is one way that a page can be made to be viewed properly on a number of devices. There are dynamic ways to do this that are under development, but at present the best way uses a feature called media queries. The concept is to set up various queries that the CSS will respond to if the screen changes. Once this happens the CSS inside the media query is activated and since it is last in the cascade queue it will change the way the page looks. Media queries are a special type of selector and should be placed at the end of your CSS file. The syntax for this is firstly the selector name (@media) followed by the device type that the query will change (all for all types, or screen for just the screen, printer for just the printer etc) and finally any special conditions such as width, orientation etc. The command has a great number of option to handle all the different types of devices and their attributes. Your lecturer has sample code which will turn the background blue when you resize the screen.
  7. This is only giving you a taste of what CSS can do. There are some very clever people coming up with new CSS effects all the time and the internet is full of ideas. To really understand CSS you need to study:
    • How to create a single selector, zeroed in selectors, multiple selectors and the wide variety of pseudo selectors.
    • There are only a small number of CSS commands but each has a wide variety of attributes and uses.
    • There are many effects which require a combination of commands, such as centring a block. It takes time to learn these.
    • Dynamic CSS is changing rapidly, so new features and exciting ideas are constantly being released.
  8. Navigation One of the features on every good web site is a standard navigation scheme that runs throughout the site. This an very important feature in making your site easy to use for the users. Steve Krug wrote a book about how to make web sites easy to use called Don't Make Me Think. It lists many common sense features that all sites should have and the users expect to be easy for them to use. High on this list is consistent navigation. So far we have created the start of the navigation in HTML using an unordered list in a nav tag. This is the start, but CSS will take us the next step. There are a huge of navigation effect tutorials on the internet. Your lecturer will work through a very basic example which uses just four blocks of CSS.
    One of the new CSS features which is now part of all modern browsers is Flexbox. This is created by putting display: flex in a block level element. Everything inside this is now controlled by Flexbox, which by default creates a row block. All the elements inside the Flexbox will now adjust their size to each other. There are also lots of controls on this, see CSS Tricks for an excellent guide. Flexbox is particularly good for displaying navigation since there is no need to float elements to get them inline.
  9. Now apply some of the skills you have learned to the practise page.

Activity

The Internet is the first thing that humanity has built that humanity doesn't understand, the largest experiment in anarchy that we have ever had. Eric Schmidt, executive chairman of Google, 1997

Session 5: Advanced CSS

HTML, CSS, Javascript - Separation of Concerns

A complete web page has content, form and user interaction. The HTML provides the content, CSS provides the form and Javascript provides the user interaction. It is best practise to place these in separate files, this makes it easier to maintain. Some large web sites (like Google) stick to this principle during development but add a deployment phase where the page is optimised.

Semantic HTML

All the content of the page needs to be marked up with Semantic HTML. Words carry meaning, not just the meaning of the words themselves but in the context that they are used. Think of how many ways you can say "Oh Yeah" and how those words can change meaning depending on how it is said. Most of the meaning comes from the context, the way it is said and any facial expressions that go with the words. The words themselves carry only a small part of the meaning.

On a web page the only way to provide that context is through the markup. When early web developers started working on Semantic markup the usual way was to wrap code in divs with specific ids. HTML5 introduced a number of elements which are specifically Semantic and this process will continue. HTML5 also allows developers to create their own markup elements. There is also research into making web page content searchable, sometimes called data mining. This is a huge area of interest for business (especially marketing firms). Another goal is developing an encyclopedia that gathers its information from web pages. Wolfram Alpha is an example of this concept.

Dynamic CSS

Early CSS was static, it could not support changing screen sizes. Many developers turned to Javascript to provide this. The problem with this approach is that Javascript is slow since it operates on the CPU. Browsers can push their screen rendering off to the graphics card so can produce very fast screen displays. The newer CSS is now becoming more dynamic and takes advantage of this hardware optimisation. This means that developers are now producing dynamic web pages using just CSS.

CSS is now developing rapidly and new features are appearing on a regular basis. Many of these new features introduce dynamic effects, such as animations and 3D transformations. At the same time web pages now need to work smoothly on small phones and large desktops using exactly the same code base. This is leading to simpler, less cluttered designs of web pages so that they work well across all platforms. There are a number of libraries which provide pre-coded CSS which is ready to be applied to your website. These include: Bootstrap (Twitter's CSS library) or Compass, and languages which extend CSS such as less and JQuery Mobile. Some developers love to use these since they save development time, others prefer to create their own pages since all library pages tend to look the same.

User interaction with Javascript

Javascript is a complete programming language. However its initial development was rushed so it contains many serious programming flaws. This lead to most serious programmer not using Javascript in it early development. In addition CSS was also poor and web developers had to use Javascript to produce pleasing display effects. All this has meant that much of the early Javascipt code that you find on the internet is poorly done and concentrates solely of screen effects.

The rise of dynamic CSS and Ajax has rekindled interest in Javascript from serious programmers. Many Javascript libraries now exist (like Jquery, Node.js and AngularJS) where Javascript can be used without using the bad features. The focus of Javascript has now moved away from a means of enhancing screen display to now a way to develop web applications that have the full functionality of native applications. Already many applications that you place on your mobile devices are simply web pages. In Session 7 we will show you how this can occur.

Usability

Usability is a measure of the total user experience for users of your site. The HTML, CSS and Javascript combine to form part of that experience. However the greatest factor is your design decisions. This is a huge and growing area, not just related to web site but includes the design decisions for everything that humans interact with. The Commonwealth government sets out guidelines for their technologies, as does the US government.

For Web sites the landmark work has been done by Steve Krug in his book Don't Make Me Think. There are plenty of resources on the net but here are a few simple principles: