creative technology / new media
[] readme new(s) workshop(s) project(s) CA1 CA2 CA3 CA4 CA5 course(s) - creative exploration(s) / serious games / ethic(s) - resource(s) _ / .

talk show tell print

present / print / tag(s) / form

NM1: web technology

6700010 / project-based course, semester 1, 3 ects

Æliens


schedule-nm1.pdf / goal(s) / hint(s) / link(s) / tutorial(s)

schedule(s) -- see common(s) / register! / request for grading

participant(s) / lab(s) / assignment(s) / NM1

  1. orientation(s) -- now does not exist
  2. client/server -- dynamic/enhanced document(s)
  3. web standard(s) -- 1.0, 2.0. 3.0 and beyond
  4. student presentation(s) -- concept(s) & idea(s)
  5. future(s) -- programming the web / science
  6. de(v/s)eloper(s) -- coding practice & hygiene
  7. student presentation(s) -- work / (s)election(s)
  8. student presentation(s) -- final application(s)

submit your clip(s) / blog(s)

content(s)
NM1

course description -- nm1: web technology

 The course description(s) are taken from the accreditation report Creative Technology (version 2.0)

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

course outline(s) -- nm1: web technology

outline(s) / schedule(s)


content(s)

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).
NM1

course topic(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.

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
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.
NM1

learning terget(s)

 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.

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
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.
NM1

lesson material(s)

 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.
NM1

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.

course structure


  1. introduction of language(s), tool(s) & technology
  2. scripting -- basic assignment(s)
  3. web standard(s) -- client-side
  4. styling -- basic assignment(s)
  5. web standard(s) -- server-side
  6. interaction -- basic assignemnt(s)
  7. advanced topic(s) -- ajax, dhtml, plugin(s), addon(s)
  8. 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 and developments.
NM1

assignment(s)


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


  1. style -- adapt three basic example(s) in style and functionality
  2. form -- construct a simple calculator or converter in a domain of choice
  3. chaos -- create the worst, that is visually confusing, web page possible, in an aesthetic way though
  4. portal -- make a small information site about some topic of choice
  5. 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 (maximally) students. Work done in groups must be proportionally more challenging and complex. 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.
NM1

reference(s)

 There are many books dealing in one way or another with web technology.
  1. JavaScript: The Definitive Guide by David Flanagan -- (amazon)
  2. CSS: The Definitive Guide by Eric Meyer -- (amazon)
  3. Professional Web 2.0 Programming (Wrox Professional Guides) by Eric van der Vlist, Danny Ayers, Erik Bruchez, Joe Fawcett, Alessandro Vernet -- (amazon)
  4. business model(s) -- www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  5. Webbots, Spiders, and Screen Scrapers: A Guide to Developing Internet Agents with PHP/CURL by Michael Schrenk -- amazon)
  6. The Web Application Hacker's Handbook: Discovering and Exploiting Security Flaws, by Dafydd Stuttard amd Marcus Pinto -- amazon)
  7. 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.

online resource(s)
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.

resource(s) / NM1


For your basic as well as final assignment(s), the following resources might be useful:

example(s)


For the final assignment, look for example at the following health site(s)

health


For additional information look at create/resource-web.html.
NM1

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!

NM1

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.

NM1

afterthought(s) -- 09 / 10

NM1: (12/4/10) -- participant(s)

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.

NM1/10: (11/11/10) -- participant(s) / grade(s)

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.

[] readme new(s) workshop(s) project(s) CA1 CA2 CA3 CA4 CA5 course(s) - creative exploration(s) / serious games / ethic(s) - resource(s) _ / .

(C) Æliens 2013