session(s): web standard(s) -- 1.0, 2.0. 3.0 and beyond
- observation(s) -- programming is at the heart of development(s)
- question(s) -- how fundamental is deep understanding?
- method(s) -- copy/paste & understand
- direction(s) -- structure(s) / function(s) / dynamic(s) / style(s)
- graphic(s) -- sample(s) / canvas / javascript
- standard(s) --
digital
/ XML,
/ math(s)
/ mix
session(s): student presentation(s) -- concept(s) & idea(s)
- state -- your name(s)
- pitch -- short presentation
- present -- (preferably) in HTML/S5 + (appropriate) style(s)
- ask -- for feedback & questions
session(s): future(s) -- programming the web / science / war(s)
session(s): de(v/s)eloper(s) -- coding practice & hygiene
session(s): student presentation(s) -- work in progress / (s)election(s)
- mention -- your name(s)
- explain -- concept(s) of your production
- present -- fragment(s) of your application
- discuss -- problems, issues & technology
- ask -- feedback & advice!
- (s)election(s) -- worst pages (basic 3)
- for kid(s) -- installation(s)
session(s): student presentation(s) -- final application(s)
basic exercise(s) / NM1
- (optional) html + style(s) -- one page with three style(s)
[e.g. christmas carol from tutorial (3)]
- (optional/recommended) element(s) in motion -- using DHTML or processingjs
[e.g. dot(s) from JK,
or mix
from tutorial (6)]
- (obligatory) mashup(s) -- the worst possible page (*)
[c.f. jodi from tutorial (1)]
- (optional) presentation(s) -- with S5 [ download: meyerweb.com/eric/tools/s5 ]
- (obligatory) -- portfolio, portfolio, portfolio!
(*) with election of worst page
final application(s) / NM1
- technology -- detailed discussion of examples of web programming
- style -- problems and solutions in interactive applications
- frameworks -- explorative discussion and comparison of tools, APIs, SDKs
- application(s) -- description of (existing) social network sites, mashups, or corporate sites
content(s)
The course presents elementary web technology, primarily focussed on the
use of HTML, XML, CSS, and Javascript, needed for authoring dynamic web pages..
Recommended literature: JavaScript: The Definitive Guide by David Flanagan
Online reference(s):
prerequisite(s):
CS1 -- computer & network architecture(s)
goal(s) & attainment target(s)
The course aims at providing
- awareness of web 2.0 business model(s)
- familiarity the complex computational infrastructure provided by the web platform
- fluency with (X)HTML, CSS styling, javascript and forms
- full literacy with authoring dynamic web pages
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.
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
applications..
teaching method(s)
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.
special facilities:
computer lab & presentation facilities
topic(s)
- 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
NM1 target(s)
- skill(s) -- scripting, styling, configuration
- knowledge -- html, javascript, css, xml, php
- theory -- basic(s) of web 2.0
- experience(s) -- small scale multi-language web application development
- attitude -- understanding, craftmanship, discovery
course structure
- 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)
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
final(s) -- web technology
reference(s)
There are many books dealing in one way or another with
web technology.
- JavaScript: The Definitive Guide by David Flanagan -- (amazon)
- 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 --
amazon)
- A. Eliëns, topical media & game development -- media.eliens.net
example(s)
health
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.
Both
javascript and
php are, in effect extremely powerful,
programming languages.
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,
even romance.
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!
PDF
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
dropout(s),
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)
web.
PDF
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,
see
creativetechnology.eu/wordpress/?p=615
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
course.
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:
creativetechnology.eu/wordpress/?p=622
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.
