Web
This section is intended to present ideas, but above all their implementation, for modifying websites.
There are many easily programmable scripts that can help boost the attractiveness of your own website.
Typo3 introduction
The reference list of Typo3 is so gigantically long that any exemplary excerpt would be a farce. Typo3 is used wherever a lot of content is published quickly and automatically and you have to work in a team.
Typo3 is a great (online) application that is supported and developed further by many excellent forums. A visit to the website is certainly always promising. And even better: Typo3 is completely free. It was developed by Kasper Skårhøj as open source in 1997.
Open source is certainly not often associated with ease of use. But that is not the case, not least with Typo3. Two groups work with Typo3: the administrators and the users. Sometimes there are mixed forms. The administrator has to initiate the implementation and installation of Typo3 professionally. That is not exactly easy. The user, on the other hand, takes care of new content, writes texts and makes corrections. But that too, although easier, has to be learned.
In order to enable the quickest possible introduction to using Typo3 and as part of a training course, a Typo3 introduction for users was created.
Minor errors creep in all the time and everywhere. The writer of this and the author therefore asks you to report here if you notice any errors or deficiencies. Creative and constructive criticism is always welcome!
In the spirit of Typo3: Inspiring people to share.
SQL and databases
You know it, love it or hate it. Inventories, invoices and to-do lists are quickly created on the computer; the flexibility to conveniently carry out calculations and “what-if” analyses of how other calculation values change when a specific one is manipulated certainly contribute to popularity.
However, if the project becomes more complex, (relational) databases are recommended, whose task is the “management and manipulation of complex data structures”. Targeted queries and reports (outputs), specially grouped and sorted, can only be created efficiently here.
With relational databases, the data structure is initially presented abstractly. There is a certain analogy to “object-oriented programming.” In a small company, for example, there are customers with certain characteristics (first and last name, address, etc.), there are invoices (date, paid on, quantity, unit price, total price, discount, etc.) and inventory (quantity, unit price, location, etc.). These three tables are linked (it can be as complex as you like) via so-called primary keys, in this case the invoice number and the customer number. In concrete terms, it is possible, for example, to generate queries to find out which customer has ordered and paid for which materials: one of the basic requirements for successfully managing a company.
Selection fields reduce typos, content checks test whether a valid email address has been entered and consistency checks prevent duplicates: these are examples of functions.
Databases, especially when there are many data sets, must be well planned and documented in advance. Queries, for example, are given the prefix “qry”, reports “rpt” and forms “frm”.
Here, for example, a film archive was created that allows the management of all common media (including VHS cassettes, etc.). Each film is given a unique film ID, each actor a person ID, called a PID. Any number of actors can be added to each film using the PID.
For a quick overview, a welcome form was created with which all functions can be accessed at the click of a mouse.
How do you access a database centrally, preferably on a website? You can program interfaces in PHP or Java, which works very well. Typo3 users can, however, look forward to the extension “WFQBE”, which controls databases and can output them dynamically in the front end. With a little SQL knowledge, new queries can also be generated here.
The database is made available for download without any guarantee - how else?
Point-and-shoot game
60 seconds break, you have to have it.
Two trends can be observed in the “gamer scene”: On the one hand, the tendency towards action and role-playing games that seem more real than reality; on the other hand, the urge for simple, entertaining games for in-between times, the so-called “short break”.
(Action) games with brilliant graphics, high resolution and a sophisticated physics engine require a lot of storage space and a powerful, state-of-the-art image processor, i.e. a graphics card. Provided you have the necessary financial means and motivation, “playing” takes up a lot of time, which flies by.
Browser games, on the other hand, are often found on gaming platforms on the Internet. They only require a browser, no further installations are necessary. It is obvious that such games do not claim to be three-dimensional and have perfect graphics. For some, however, they are an ideal way to fill a break.
The browser game shown below was intended to help you switch from the outdated Action Script version 2 to the new version 3. Both versions differ in almost every respect, so that new training is required. The syntax has been standardized and the source code is therefore clearer. The aim of the game is to burst as many balloons as possible in one minute using the drawing pin. A destroyed balloon gives the player 5 points. The level of difficulty increases as time passes. At the end of this little game, the current record is displayed. It is not so easy to earn more than 400 points.
Ready, set, go!
Quick tip: You shouldn’t underestimate the game after 10 seconds of playing time…
Lectures on Flash
In our modern times, dynamics are very important. Television, computer and console games, all of this is unimaginable without movement. Movement is interesting, static is boring, that is often people’s subconscious attitude.
The Internet has also become more mobile in recent years. Animations like the one above are used to advertise, design buttons and much, much more.
Creating animations is not difficult if you have the right tools. In two school HTML and computer science courses with a focus on the Internet, Schreiber has already given two lectures on creating animations and the interest of the audience is growing.
We usually work our way from a simple motion tween of a ball rolling to the right to shape tweens and easy ActionScripts - the programming language for animations of this kind.
The animation above comes from such a lecture. It represents the first stage that was reached together with Mr. Jopski. In Mr. Neumann’s course, we rebuilt the animation during the lecture mentioned. New additions include a “Play again” button and simple script instructions such as “loadmovie” or “stop”.
But this still doesn’t even come close to what - and especially how - you can animate.
Flash comic
Please introduce: Mister Dude.
The reaction shown by Mister Dude results from the question:
Do you do your homework right after school? - this form of agreement is extremely rare, but on the other hand, it is logically justifiable in view of the inflationary distribution of work in German schools.
Animations do not always have to be dry. It is a single frame animation with a low frame rate, a kind of stop motion effect.
With Flash, you can create small cartoons by increasing the frame rate. A graphics tablet is very useful for the flasher.
Homepage in Flash
HTML flashed.
To indicate the spectrum of possibilities of Flash, take a look at the small demo homepage below. It is created entirely in swf format and thus enables greater dynamism, visuality and modernity.
Performance suffers for users with lower transfer rates. In addition, some browsers block active scripts.
Script games
Just relax.
Tired of everyday life? Want to relax? With Flash and knowledge of ActionScript, you can quickly develop small animations or games.
The animation on the left lets a boomerang fly on the beach. The background image is from the final trip to France in 2006. The buttons control the throwing arc. It can be moved and rotated. Pay attention to the change in the throwing path!
This is not the original sky. This was removed and recolored using a linear color gradient. If you don’t know that, you won’t even notice.
On the right, a blue ball falls onto the grass. The jumps are counted and shown at the top left. After 12 jumps, the ball stops. The idea is to show that processes can be evaluated by the program.
At the very bottom is an example of an image map. In this case, you could also call it a promenade. By clicking on the sides (right, left) or on the middle of the image, you can walk through the area in front of the Rüsselsheim Theater. Only virtually, of course. This principle is often used for city guides or to present objects.
Tweening
Try it with… movement. Movement is not the same as movement. Animations can be divided into form, mask and motion tweening.
The animation on the left shows the “squaring of the circle”. A circle becomes a square and then a polygon. Not only the shape of the objects changes, but also their color and background. The result is harmonious and reminiscent of a music visualization.
The StudioCD logo can be found in the middle. In the spirit of James Bond, the lettering is faded in using the mask technique. The animation is achieved through motion tweening with transformations.
At the bottom, someone is playing football on the beach. The background image also comes from the final trip to France. The ball rotates on a predetermined path using path tweening. After the animation has finished, a “goto and play” action takes place.
Matching game
Game Over! Fade-ins and outs are achieved by changing the alpha values in Flash. Boring! Now it’s the visitor’s turn to create some dynamism.
“Drag and drop” is the key word here. The aim of the short game is to give the two images the correct title. Both images are from France. If you know your way around, then it’s easy?
Dynamic text output and mobility are created using action scripts. As many images as necessary can be used, as the source code can be duplicated for each additional element. Only the variable definition needs to be changed.
The code elements required are basic knowledge.
A matching game with more than 10 images is definitely possible and easy to implement.
Forms can also be created in Flash in this way.
The game is primitive and is intended to illustrate the possibility that the visitor can change a page, also known as the interactive principle.