creative technology / new media
/ ethic(s) -
present / print / tag(s) / form
6700010 / project-based course, semester 1, 3 ects
schedule-nm1.pdf / goal(s) / hint(s) / link(s)
- orientation(s) -- now does not exist
- client/server -- dynamic/enhanced document(s)
- web standard(s) -- 1.0, 2.0. 3.0 and beyond
- student presentation(s) -- concept(s) & idea(s)
- future(s) -- programming the web / science
- de(v/s)eloper(s) -- coding practice & hygiene
- student presentation(s) -- work / (s)election(s)
- student presentation(s) -- final application(s)
course description -- nm1: web technology
The course description(s) are taken from
the accreditation report Creative Technology (version 2.0)
The course presents elementary web technology, primarily focussed on the
CS1 -- computer & network architecture(s)
goal(s) & attainment target(s)
The course aims at providing
Students are expected to have a sufficient degree of curiosity, and will be stimulated to develop their skills in the actual
production of playful dynamic web pages.
- awareness of web 2.0 business model(s)
- familiarity the complex computational infrastructure provided by the web platform
- full literacy with authoring dynamic web pages
place in curriculum:
NM1 is an introductory course for all students. It is relevant to NM2 (interactive visualization), for publishing the results of
CA-projects, as well as for the creation of individual portfolio(s).. In relation to DE-courses, the focus of NM-courses
Is primarily on technical issues and programmatic authoring.
application area & motivating example(s)
Dynamic web technology is used in a variety of ways, for example in simple online games, advertisement, and online
shopping sites. Another interesting domain is web art, from which students may get inspiration for more advanced
The course will be organised around lectures, which will introduce basic examples and which will provide an in-depth
explanation of the technologies. The assignments will consist of a series of basic exercises and a final exercise
in which the students are required to develop a moderately complex dynamic web application.
Regular feedback will be given in classroom sessions where students present their work as well as via online comments or
email. Grading will be based on basic assignments, the final assignment project with documentation, as well as an essay
in which a topic of choice, either technical or in relation to the business model of the web or its societal impact, is
discussed in more depth.
computer lab & presentation facilities
course outline(s) -- nm1: web technology
In this part a more detailed discussion will be provided
of topics, learning goals, materials used, and the
actual structure of the course, as well as a sketch
of the assignments given. Also references to releveant
literature is provided, including online resources.
At the end, advice for students following the course
will be given, as well as hints for the instructor(s).
The NM1 course will cover a great variety of topics.
Although the main focus of the course is to bring
about the skills needed to effectively use the web
in later projects and applications, we will also deal
with the web as a societal phenomenon, as an
element of our daily life.
- web languages for markup, styling and interaction
- elementary web technology authoring tools
- client-side vs server side solutions
- basic scripting, styling and interaction design
- separating content, form, style, behavior and interaction
- elements of web 2.0 business model(s)
- analysis of (commercial) web-sites and portals
- privacy and security -- web applications as attack surfaces
Recently, issues of privacy, security and trust
gain increaing attention.
Also from a technical perspective, some knowledge
about hacking the web is worthwhile
for understanding the potential and dangers
in deploying the web as a computing platform.
The NM1 course is meant to bring competence(s) and skill(s)
at varioys levels.
In addition, references will be made to literature
for further theoretical study.
Small projects will further give the experience
needed for using web technology in an effective manner.
- skill(s) -- scripting, styling, configuration
- theory -- basic(s) of web 2.0
- experience(s) -- small scale multi-language web application development
- attitude -- understanding, craftmanship, discovery
Apart from practical skills, the course aims at
an intuitive understanding of the complexity of the web
as a platform for communication and services.
To prfit from the course, must have a sufficient degree of
curiosity and lust for discovery.
Although there are many good books available, the is
also a wealth of material online, which should suffice
for a first introductory course.
web technology -- content, form, style, dynamics
In the course, we will take an example-based approach
to learning, that is by showing a selection of examples
that demonstrate essential features of web-technology.
A dissection, or discussion of these examples will help the
students in understanding the most salient features.
course structure -- session(s)
Although the course is essentially project-based,
and to a great extent relies on the students' activity
in completing the assignments,
there will be a number of lectures, to assist the student
in the assignments, and in understanding both the technical
and societal context of web applications.
- introduction of language(s), tool(s) & technology
- scripting -- basic assignment(s)
- web standard(s) -- client-side
- styling -- basic assignment(s)
- web standard(s) -- server-side
- interaction -- basic assignemnt(s)
- advanced topic(s) -- ajax, dhtml, plugin(s), addon(s)
- presentation of final assignment(s)
The structure presented here is only indicative,
and may differs from the actual sequence of topics
treated in the lectures.
In particular topics such as privacy and security,
and societal issues, will be dealt with as items
in the lecture, also dependent on actual news items
There will a small number of assignemts, to be made by
the students individually.
The goal of these assignments is to provide a structure
that assists the students in exploring the technology.
Basic assignemnts (may) include:
basic(s) -- web technology
- style -- adapt three basic example(s) in style and functionality
- form -- construct a simple calculator or converter in a domain of choice
- chaos -- create the worst, that is visually confusing, web page possible, in an aesthetic way though
- portal -- make a small information site about some topic of choice
- mimic -- evaluate and mimic, e.g. from best of the web
For the final assignment(s) of the course, students are
allowed to work indidually, or in groups of two or three
Work done in groups must be proportionally more challenging
Students can make a choice out of (among possibly others):
final(s) -- web technology
In effect, students will be encouraged to follow their
own ideas, in for example implementing a game using
web technology, or a deep exploration in style,
corresponding with (parallel) course(s) in design.
There are many books dealing in one way or another with
- CSS: The Definitive Guide
by Eric Meyer -- (amazon)
- Professional Web 2.0 Programming (Wrox Professional Guides)
by Eric van der Vlist, Danny Ayers, Erik Bruchez, Joe Fawcett, Alessandro Vernet -- (amazon)
- business model(s) -- www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
- Webbots, Spiders, and Screen Scrapers: A Guide to Developing Internet Agents with PHP/CURL by Michael Schrenk -- amazon)
- The Web Application Hacker's Handbook: Discovering and Exploiting Security Flaws, by Dafydd Stuttard amd Marcus Pinto --
- A. Eliëns, topical media & game development -- media.eliens.net
A wealth of material and references can be found at my
topical media & game development site, including
tutorials and examples.
There is a great, tha is massive, number of online resources,
about web technology, including treatments about technology,
solutions to HCI issues, style and semantics.
For your basic as well as final assignment(s), the following resources might be useful:
For the final assignment, look for example at the following health site(s)
For additional information look at create/resource-web.html.
advice for the student(s)
many of you already have experience with tools
and even programming web applications.
Keep in mind though that html is not a programming language.
Although copy&paste is an acceptable way of creating
applications, make the effort to understand what is going on,
or at least be aware of what you do not know,
that is where you rely on the functionality of
a give library or tool.
In the course, you are encouraged to follow an
exploratory approach, meaning that you can go along by discovering
what the technology can do for you, step by step.
Try to keep focus though, by selecting
both for the basic and final assignment(s) a challenge
that suits you. This may be a game, or related to a topic
that interests you, for example music or health, or why not,
Remember, though, you have to take in a loth of math in your
curriculum. One way to cope with this is by applying
learning by teaching, that is developing simple math games,
not only as a means to challenge and teach others, but to improve your own understanding!
hint(s) for the instructor(s)
Although there is a wealth of examples online, as well as
many tutorials, it is important to have a small collection
of working examples, to show as what has been referred
to as canonical examples, that show some
of the complexity of web applications in a compact, easy
to understand way.
Some of the simple games are suitable for that,
but also the examples producing visual effects,
such as color changes or moving page elemnts.
More important than learning specific rules of style
and content layout, is to make students familiar with
the dynamics of web applications, and the programming model
underlying these dynamics.
Hands-on experience is crucial here.
Even for advanced programmers, the web as an application
platform is too complex to understand in its entirety.
Some probing with technology, pushing the limits of your skills
is essential in gaining a deeper understanding of the mechanics
of web-applications, an understanding which is needed
to ultimately create new web services, combining
the real and virtual world(s), as expected from
the student in later creative applications.
afterthought(s) -- 09 / 10
In retrospect, the course was rescued by
the excellent results of the
worst page contest,
that also made it to the blog(s).
All in all, as clearly indicated in the evaluation(s), the course was technically far too demanding
for the majority of students,
even though many made an effort to get their portfolio(s) online.
Also many students showed reluctance to submit an essay,
and, as can be read in the comment(s), by the end of the course
only a minority of the students were readt for
grading, some with excellent result though.
As a consequence, I will lower my requirements to the minimum
of having a portfolio online, showing a basic level of skill(s).
It is only in the course of the NM1
course, that I came to realize that another approach
must be taken to deal with the diversity of talents of our students,
an approach that somehow takes into account
the difference between creatives and technologists.
This, again, was made painfully clear by some of the
that indicated a preference for a more design-oriented
approach, and not an enhanced computer science curriculum.
For the NM2 and CA3,
as well as later, courses, these observations led to the motto
it's all in the game.
Luckily from a personal perspective, the contributions
of the students during the course helped
in getting some papers published,
around the (emerging) CTSG.
In the future NM1 course(s),
the focus should rather be (again) on storytelling, but then from the perspective of
non-linearity and interactivity, as supported by
the (increasingly expanding)
This year I decided to have a smooth transition from the
CA1 to the NM1 course, to allow students to complete
their interactive videos and develop an accompanying website,
which to my mind provides sufficient rationale
to regard the project as web technology,
also because XML, the authoring format for ximpel, is one of the web's key technologies.
Apart from the portfolio, which can be accessed via the partipants page
above, students were required to produce a worst page, for which an
election was held,
The election was itself was an extremely enjoyable event,
and as the assignment itself, highly appreciated by the students.
A course such as web technology is difficult, not in the least because
of the great diversity in skills and interests.
As I was absent for two weeks, some were happy with the freedom
and took the time to explore the technology, but others
had a problem to get themselves to work, and would have liked
more direct and guided tuition.
A somewhat disturbing factor is that suddenly the notion
of portfolio became somewhat obscure, because
of the introduction of the mevolution 'portfolio' as a progress monitoring
tool for tutoring. Fortunately, these issues have been clarified
and most students do sufficiently see the relevance of a personal
portfolio for their future career and there work done for
the creative technology study.
No doubt partly due to the work for the group project(s),
no student this year did any of the optional
assigments, ranging over the exploration of jquery,
processingjs, the HTML5 canvas or advanced CSS, despite
expressing a regret that such topics were not dealt with in the
Apart from a lack of time, this also indicates a problem
with the attitude of this years' students, which is overall
a bit passive. Students are, in general, not inclined to
follow up on additional references, and explore the material.
All in all, I am not dissatisfied with the results,
as expressed in the grade assessment(s),
and despite the possible confusion that may arise
when spreading the efforts for the interactive video
project over two courses, I strongly recommend to continue
this approach in the following years, not in the least because
of the impressive results:
Interestingly, whereas previous attempts to involve them
in (micro) social networks were met by students with, at best,
reluctance, after in a thoughtless moment
opening a creative technology
facebook group, within an hour more than half of the first year students
(over 20) and as well as a number of second year students were member and (ongoingly) active,
with activity concerning
past, ongoing and future courses.
/ ethic(s) -