CSS2 and CSS1 Differences
Difference in CSS2 from CSS 1
- Positioning in CSS2 is more flexible, absolute and relative positioning.
- Special cursors available
- Dynamic outlining.
- Specify the size of a page
- media types allow you to specify the rules of how the document is to be displayed.
- More list styles
- Language-sensitive quotation marks.
- More fonts.
- Allows you to define any element as a table element
CSS 3
CSS 3
Here are a few exciting functions coming in CSS3. All pretty self explanatory.
Borders
- border-color
- border-image
- border-radius
- box-shadow
Backgrounds
- background-origin and background-clip
- background-size
- multiple backgrounds
Color
- opacity
- RGBA colors
Text effects
- text-shadow
- text-overflow
User-interface
- box-sizing
- resize
Selectors
- attribute selectors
Other modules
- multi-column layout
Great for preview.
XHTML2 & HTML 5
Thanks to Andrew for all his help and informative presentations!!
XHTML2 and HTML 5
§ one from the W3C that attempts to redefine HTML completely
§ one from the WHATWG that builds on the existing HTML spec
XHTML2
XHTML2 takes out all presentational tags and relies purely on CSS for all styling, and utilises a systems much like the “class” system to identify parts of the document.
The main difference with XHTML2 from HTML 5 is that all browsers will have to be updated to display it. It relies on the idea of all information on the page having meaning and relationships easily distinguished by both humans and machines.
Another point of difference is anything can be made into a link- assign an element with a “href” attribute and it becomes a link.
It is a much more accurate language than HTML, meaning the document must be well formed and all the elements must be explicitly closed, all elements, attributes and predefined values in lowercase, and all quotations much be enclosed.
HTML 5
HTML 5 theology, is to take HMTL 4 and improve it rather than completely overhauling the entire language/standard.
HTML 5 introduces new elements that divide content up into easily identified sections. Theses divides should assist search engines and other technologies process information in a more productive manner. The implication of these new elements should make markup more readable.
A list of some of these new elements are as follows:
Article A section of a page that consists of a composition that forms an independent part of a document, page, or site.
Aside A section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
Footer The footer for the section it applies to.
Header The header of a section.
Nav A section with navigation links.
Section A generic document or application section – a grouping of content.
contextmenu and menu Elements to for menu creation
canvas an area that allows drawing and compositing of images
Many new form controls including
Date & time (also a combined control)
Month, Week, Number
Range (between two numbers)
Email, Url, Datalist (a spreadsheet-like grid)
New attributes for existing and new controls
Type (specifies what kind of input to accept, eg. “email”, “url”)
Pattern (for regular expressions)
Required (indicates a value is required)
Min and max
Auto-validation for controls
Provide a “type=email” and the control will validate its contents without script
Uses new CSS Pseudo-classes so that controls that don’t validate can be styled with CSS
Pre-defined class names that denote areas of the document, eg.
Copyright, Error, Example, Note
This ties in with Microformats, the idea of giving elements on your page particular class names that search engines and other programs can read, and use the data
A non-fugly doctype
And a whole bunch of other stuff.
XML Stuff
Monday 23rd April
Xml- More on Markup Languages
This afternoon some of us will be getting our first taste of a mark-up language other than XHTML! It’s called Scalable Vector Graphics (SVG) – and the great thing is, you’ll find because you’ve been learning XHTML and Stylesheets, you’ll be able to pick up SVG really easily! In fact, there’s lots of different Markup languages – one for every purpose you could think of!
What is xml?
XML (Extensible Markup Language) is a standard for creating markup languages which describe the structure of data. It is not a fixed set of elements like HTML, but rather, it is like SGML (Standard Generalized Markup Language) in that it is a metalanguage, or a language for describing languages. XML enables authors to define their own tags. XML is a formal specification of the World Wide Web Consortium. To find XML editors, see `Whirlwind Guide to SGML to ols’ http://www.infotek.no/sgmltool/editetc.htm and also http://www.stud.ifi.uio.no/~larsga/linker/XMLtools.html.
Useful site for other markup languages:
http://www.acad.bg/beginner/gnrt/appendix/glossary.html
Information for xml challenges.
How to make yellow?
Eg. Stroke: rbg (255,255,0); Red, green, blue- To make yellow add full strength red and full strength blue.
Additive colors are easy to demonstrate on a color computer monitor equipped with a color-control program. Just so happens I have one right here. How do we make yellow? By adding full-strength red and full-strength green. Adding two-thirds strength blue gives us a lighter (not darker) yellow. Full-strength blue, red, and green produce bright white. This is a counterintuitive result if you learned your color-mixing skills in kindergarten. But we know that white light can be broken into all the colors of the rainbow. So we shouldn’t be surprised to learn the process also works in reverse–i.e, the colors of the rainbow can be combined to make white. Besides, it only stands to reason that the more light you shed on something, the brighter (that is, closer to white) it gets.
From: http://www.straightdope.com/classics/a3_344.html
What is Opacity? Opacity is the amount of light which is blocked by a medium, like smoke or a tinted window. Opacity is a measurement and is usually stated as a percentage. An opacity of 0% means that all light passes through, and an opacity of 100% means that no light can pass through. Opacity is important because it gives an indication of the concentration of pollutants leaving a smokestack. The more particles which are passed through a stack, the more light will be blocked, and, as a result, a higher opacity percentage is achieved. From http://www.geocities.com/gawhitlow/whatisopacity.htm
Opacity in challenge one, is the control of white coming through the fill in the rectangle.
XML Challenge 4- Roll your own RSS feed.
RSS Definitions-
RSS is a family of web feed formats, specified in XML and used for web syndication.[1]( [1] Web syndication is a form of syndication in which a section of a website is made available for other sites to use. This could be simply by licensing the content so that other people can use it; however, in general, web syndication refers to making Web feeds available from a site in order to provide other people with a summary of the website’s recently added content (for example, the latest news or forum posts).
RSS is a family of web feed formats used to publish frequently updated data, such as blogs, news feeds and podcasts.
Users of RSS content use software programs called “feed readers” or “feed aggregators”. The user subscribes to a feed by entering a link to the feed into the reader program. The reader can then check the user’s subscribed feeds to see if any of those feeds have new content since the last time it checked, and if so, retrieve that content and present it to the user.
Helpful page on RSS- http://www.xul.fr/en-xml-rss.html.
Interesting site Andrew sent me involving grid design of sites- http://tutorialblog.org/grid-systems-in-web-design/
Search Engine Optimisation
Tuesday 8th May 2007
Tuesday Morning- Search Engine Optimisation- Is achieving the highest rank in search engine results.
Companies are advertising all over the web stating they can achieve the highest ranking in a number of search engines including google. However the manner in which some of these companies go about their business could mean that sites get black listed and are not shown on google searches.
Simple ways to improve SEO are:
- Use relevant keywords
- SiteMap (for google SEO)
- Links to other pages that are visited
- Domain Name
- Descriptive internal Links
- Title Tag relevant
Sites worth a reference-
Build a successful site in 12 months-
http://divspace.com/seo/build-a-successful-site-in-12-months/
Basic Search Engine Optimisation-
http://www.456bereastreet.com/archive/200502/basics_of_search_engine_optimisation/
SEO Guide for Beginners-
http://divspace.com/seo/search-engine-optimization-seo-guide-for-beginners/
What search engines see-
http://www.dlperry.com/what_search_engine_spiders_see.html
Search Engine Watch-
Open-source & Social Software
What is open source software?
In general, open source refers to any program whose source code is made available for use or modification as users or other developers see fit. Open source software is usually developed as a public collaboration and made freely available.
What is free software?
There seem to be a number of different interpretations of what free-software actually is, however the most prominent of these is:
Free software is a term coined by Richard Stallman and the Free Software Foundation to refer to software that can be used, studied, and modified without restriction, and which can be copied and redistributed in modified or unmodified form either without restriction, or with certain requirements to ensure that further recipients also have these freedoms.
To make software available as free software, the software has to be accompanied by a software licence saying that the copyright holder allows these acts (a free software licence), or be in the public domain, and the human readable form of the program (the source code) must be made available.
The free software movement was launched in 1983 to make these freedoms available to every computer user.(taken frp, wikiversity http://en.wikipedia.org/wiki/Free_software .)
Open-source audio editors:
http://audacity.sourceforge.net/
http://audioedit.mystikmedia.com/
Open-source animations editors:
From the www.opensourcemac.org:
Gimp.app- photo editing application that rivals PhotoShop in features (requires X11)
Inkscape- Vector graphics applications (requires X11)
What is raster- pixels
A raster graphics image, digital image, or bitmap, is a data file or structure representing a generally rectangular grid of pixels, or points of colour, on a computer monitor, paper, or other display medium.
A bitmap or a raster image corresponds bit for bit with an image displayed on a screen, probably in the same format as it would be stored in the display’s video memory or maybe as a device independent bitmap. A bitmap is characterised by the width and height of the image in pixels and the number of bits per pixel, which determines the number of colours it can represent.
In the printing and prepress industries raster graphics are known as contones (from “continuous tones”) whereas vector graphics are known as line work.
What is vector- lines
Vector graphics (also called geometric modeling or object-oriented graphics) is the use of geometrical primitives such as points, lines, curves, and polygons, which are all based upon mathematical equations to represent images in computer graphics. It is used by contrast to the term raster graphics, which is the representation of images as a collection of pixels.
Office applications- an free word application is Google docs and spreadsheets
Blogger tools:
Filters for open-source applications:
teachandlearnonline.blogspots.com
What is social software? (Rich internet applications)
Social software enables people to rendezvous, connect or collaborate through computer-mediated communication. Many advocates of using these tools believe (and actively argue or assume) that these create actual community, and have adopted the term “online communities” to describe the social structures that they claim result. They are used inside organisations or by communities of practice/interest
The more specific term collaborative software applies to cooperative work systems and is usually narrowly applied to software that enables work functions. Distinctions between usage of the terms “social” and “collaborative” is in the applications not the tools, although there are some tools that are only rarely used for work collaboration.
Social software: free, online, network, gives people a voice, used by many, collaborative.
Examples of social software:
Wikipedia.com, Wikiversity.com, Flika.com, Youtube.com, Skype.com, msn.com.au, flicker.com, metacafe.com, match.com, topicexchange.com
