Web technology and web design tutorials: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{under construction}}
{{incomplete}}
{{stub}}
{{web technology tutorial|Menu}}
{{interaction-design|Menu}}


I'll have a first version by the end of Aug. 2009. '''Most entries below are ''not'' tutorials so far ...''' - [[User:Daniel K. Schneider|Daniel K. Schneider]] 15:14, 30 July 2009 (UTC)
'''Most tutorials are drafts''' that may never be completed since the web is already rich with tutorials - [[User:Daniel K. Schneider|Daniel K. Schneider]] october 2009. That was still true as of Feb 2011. Some technical information has been added. As of 2020, major additions have been made in the area of [[:category:Fab lab|Fab lab]] technology and practice.


== Introduction ==
== Introduction ==


Level 1 - Learning goals
This entry indexes various web technology and web design tutorials. Roughly, the learning goals are the following
 
Web technology level 1 - Learning goals
# Use simple Web 2.0 services like [[Webtop]]s
# Use simple Web 2.0 services like [[Webtop]]s
# Configure a web 2.0 application, e.g. a Ning social network
# Configure a web 2.0 application, e.g. a a blog or a social network
# Import widgets and understand how content syndication works
# Import widgets and understand how content syndication works
# Learn how the Internet works and about some major Web protocols
# Learn how the Internet works and about some major Web protocols
Line 17: Line 20:
# Create and validate an XML file (learn how to read and use DTDs and XML Schemas)
# Create and validate an XML file (learn how to read and use DTDs and XML Schemas)


Level 2 - Learning goals:
web technology level 2 - learning goals:
# Learn web design and usability principles
# Design XML grammars
# Design XML grammars
# Write XSLT stylesheets for text or database centered XML applications
# Write XSLT stylesheets for text or database centered XML applications
Line 24: Line 28:
# Be able to use some PHP/MySQL generators
# Be able to use some PHP/MySQL generators
# Install and configure [[LAMP]]-based web applications
# Install and configure [[LAMP]]-based web applications
web design - learning goals:
# Implement a user-centered agile design practice
# Use prototyping tools like pencil and paper and wireframing tools
# Identify major usability issues
# Conduct simple usability tests
# Understand requirements for accessibility


== List of (future) tutorials ==
== List of (future) tutorials ==


Note: The list below is really provisional, got some renaming and (of course) work to do.
Note: The list below is really provisional, got some renaming and (of course) work to do. Also, some entries are ''less'' than incomplete ...


=== Getting started ===
=== Getting started ===
I suggest to start creating web sites with online services. This way you will be aware of what you can do without learning to code or install anything. In addition, you will implicitely learn some concepts that will be introduced later.
I suggest to start creating web sites with online services. This way you will be aware of what you can do without learning to code or install anything. In addition, you will implicitly become aware some issues and concepts that will be introduced later.


* [[Creating websites with online services]]
* [[Creating websites with online services]]
Line 43: Line 54:
* [[URL]]s, [[URN]]s and [[URI]]s (short definition of these standards)
* [[URL]]s, [[URN]]s and [[URI]]s (short definition of these standards)


=== Managing identities on the Internet ===
=== Managing identities on the Internet and Authentication ===


* [[single sign-on]]
* [[single sign-on]]
* [[OpenID]]
* [[OpenID]]
* [[LDAP]]


=== HTML ===
=== HTML ===


* [[Basic tools for web developement]] (not done, see [[Web authoring system]] for a list of tools.
* [[Basic tools for web developement]] (not done, see [[Web authoring system]] for a list of tools.
* [[HTML]] and [[XHTML]] for some background information
* [[HTML]], [[XHTML]] and [[HTML5]] for some background information
* [[HTML and XHTML elements and attributes]], an introductory (X)HTML elements tutorial. Explains some markup principles and introduces the most important elements.
* [[HTML and XHTML elements and attributes]], an introductory (X)HTML elements tutorial. Explains some markup principles and introduces the most important elements.
* [[HTML and XHTML validation and repair]]
* [[HTML5]] (see also SVG)
* [[HTML5 audio and video]]
* [[WebVTT]]
=== HTML forms ===
* [[HTML forms tutorial]]
* [[HTML forms tutorial]]
* [[HTML and XHTML validation and repair]]
 
=== SVG ===
 
* [[Static SVG tutorial]]
* [[Using SVG with HTML5 tutorial]]
* [[SVG/SMIL animation tutorial]]


=== CSS ===
=== CSS ===
Line 60: Line 84:
* [[CSS]] and [[CSS links]] (for some background infos)
* [[CSS]] and [[CSS links]] (for some background infos)
* [[CSS tutorial]]
* [[CSS tutorial]]
* [[CSS text styling tutorial]]
* [[CSS color and background tutorial]]
* [[CSS media and alternative style sheets tutorial]]
* [[CSS box model tutorial]]
* [[CSS float tutorial]]
* [[CSS positioning tutorial]]
* [[CSS positioning tutorial]]
* [[CSS for XML tutorial]]
* [[CSS for XML tutorial]]
* [[Analyzing CSS tutorial]]
* [[CSS compatibility]]
* [[CSS transforms tutorial]]
* [[CSS animations tutorial]]


=== JavaScript ===
=== JavaScript and DHTML ===


* [[Javascript tutorial - basics]]
* [[Javascript tutorial - basics]]
* [[JavaScript libraries]]
* [[DHTML]]
* [[DHTML]]
* [[HTML forms tutorial]] (using JS a lot)
* [[ECMAScript data types]]
* [[ECMAScript data types]]
* [[AJAX]]
* [[AJAX]]
* [[HTML5 video and JavaScript]]
* [[Animate CC 2018 - Interactive animated web sites‎]]


=== XML tutorials ===
=== XML tutorials ===


* [[XML]]
* [[XML principles]]
* [[Tour de XML]]
* [[Editing XML tutorial]]
* [[DTD tutorial]]
* [[DTD tutorial]]
* [[XSLT Tutorial - Basics]]
* [[XSLT Tutorial - Basics]]
* [[XSLT to generate SVG tutorial]]
* [[XPath tutorial - basics]]
* [[XPath tutorial - basics]]
* [[XSLT for compound documents tutorial]]
* [[XQuery tutorial - basics]]
* [[XQuery tutorial - basics]]
* [[PHP - MySQL - XML tutorial - basics]]
=== PhP tutorials ===
* [[PHP tutorial - basics]]
* [[PHP-MySQL tutorial -basics]]


=== Web applications ===
=== Web applications ===
Line 81: Line 130:
* [[WAMP]]
* [[WAMP]]
* [[SQL and MySQL tutorial]]
* [[SQL and MySQL tutorial]]
* [[PHP-MySQL tutorial -basics]]
* [[BPMN 1.2 tutorial]]
=== Design and usability ===
* [[Usability]], [[cognitive ergonomics]] and [[Human-computer interaction]]
* [[Web usability]]
* [[web accessibility]]
* [[Font readability]]
* [[User interaction and user interface design]]
* [[Web prototyping software]]
* [[web wireframe]]


== Other EduTech Wiki entries of interest ==
== Other EduTech Wiki entries of interest ==

Latest revision as of 15:20, 13 February 2020

Most tutorials are drafts that may never be completed since the web is already rich with tutorials - Daniel K. Schneider october 2009. That was still true as of Feb 2011. Some technical information has been added. As of 2020, major additions have been made in the area of Fab lab technology and practice.

Introduction

This entry indexes various web technology and web design tutorials. Roughly, the learning goals are the following

Web technology level 1 - Learning goals

  1. Use simple Web 2.0 services like Webtops
  2. Configure a web 2.0 application, e.g. a a blog or a social network
  3. Import widgets and understand how content syndication works
  4. Learn how the Internet works and about some major Web protocols
  5. Design a web page with (X)HTML and CSS and upload it to a server
  6. Evaluate and use web page styles
  7. Edit and code simple JavaScript programs
  8. Know how to make use of JavaScript libraries
  9. Create and validate an XML file (learn how to read and use DTDs and XML Schemas)

web technology level 2 - learning goals:

  1. Learn web design and usability principles
  2. Design XML grammars
  3. Write XSLT stylesheets for text or database centered XML applications
  4. Access a web server, code, test and run a very simple server-side program
  5. Design a simple SQL database
  6. Be able to use some PHP/MySQL generators
  7. Install and configure LAMP-based web applications

web design - learning goals:

  1. Implement a user-centered agile design practice
  2. Use prototyping tools like pencil and paper and wireframing tools
  3. Identify major usability issues
  4. Conduct simple usability tests
  5. Understand requirements for accessibility

List of (future) tutorials

Note: The list below is really provisional, got some renaming and (of course) work to do. Also, some entries are less than incomplete ...

Getting started

I suggest to start creating web sites with online services. This way you will be aware of what you can do without learning to code or install anything. In addition, you will implicitly become aware some issues and concepts that will be introduced later.

Internet principles

Managing identities on the Internet and Authentication

HTML

HTML forms

SVG

CSS

JavaScript and DHTML

XML tutorials

PhP tutorials

Web applications

Design and usability

Other EduTech Wiki entries of interest

Overviews
Links pages

... to help you find good web sites

Other tutorials
Installation tips

See the category installation tips

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Web_technology_and_web_design_tutorials&oldid=73962"