This website will show off HTML and CSS used together to create a stunning website. It will also show a few features of multimedia and the process I used to create the examples shown throughout the pages. This website will also comment on the social and ethical issues of website creation and management, mentioning intellectual property, accessibility / equity, and privacy.
Intellectual property Copyright protects the expression of an idea by giving exclusive rights on the owner, by doing so it encourages people to create more media. Using images, video, and audio that have copyright and intellectual property without the correct citation or application can be illegal and in some cases can warrant a fine. Program code is also included in copyright. The video below is an example of music that falls under copyright law. Using this music by The Living End called “Tainted Love” without the proper credit is against copyright law.
The use of different optimisations for this website allows for less advantaged people to still be able to access the same information this website provides. For example:
Blind people will rely on my
Although on this website I do not collect information from users through a PHP form or any kind. But on other websites it's very common for people to log into an account held with the website that can hold personal information on a database. A website that has access to a database of private information has the responsibility to keep the information private from other users, even keeping it safe from hackers and other people with malicious intent. A website that collects information passively without requiring the user to make an account requires the website to tell the user that they are doing so, this normally looks like “allow cookies”.
Images, videos and animations are very useful for multimedia projects and are visually stimulating, though one problem with the implementation of them on websites is the high page load times if they have a large file size. Because some users accessing the website might have slow download speeds, media optimisations are required to allow them to use the website smoothly. An example of good media implementation is below in this edited video at a high resolution. This however does not impact the page load time of the website as it only needs to load the 560 x 315 resolution thumbnail image. The video only begins to download when you click play, meaning if the user doesn't want to watch the video, they are not subject to long load times. On top of that, it is an embedded Youtube Video which optimises the resolution of the video played based on the internet speed of the user, meaning if their connection is slow they only have to buffer a small file size at a time, but users with high internet speed will be able to enjoy the video at high resolution and fps.
There are two different types of digital graphic file types, Raster and Vector. Vector graphics are made up of paths and lines based on the mathematical equations. Raster is made up of pixels arranged in a grid pattern put together to create an image. Vector The advantages of vector is that it can be scaled up or down without generalisation, making it useful for accurate geographical information to be scaled and and down. Although the disadvantages are that each point needs to be detailed explicitly, meaning it can take up large amounts of storage depending on how complicated the image is, it can also require a large amount of processing power to compile the mathematical formulas. Raster The advantages of raster are that its file size is predictable and can be calculated based on the bit depth and resolution, it can also be easily manipulated by exterior software programs, and the grid layout makes it very compatible with limited raster based displays. The disadvantages are the inability to accurately represent lines when scaled down, and conversion from raster to vector can take up large processing power and time.
Different files types are used to compress media, for raster media you have the selection of a .jpg, .gif, .png, .tiff and .bmp. And for vector media there is .svg, .pdf, .cdr and .eps. For these different file types, they all compress in different ways. For example, .png compresses in a lossless format of RGBA, allowing for full RGB colours and transparency. While .jpg is just RGB and compressed to a lossy format and uses an algorithm that discards some of the image information in order to reduce the file size. A .bmp file is fully uncompressed raster information as it codes each pixel one by one, amounting to very large file sizes as the resolution increases.
Animation is a method in which pictures are manipulated to appear as moving images. Today, most animations are made with computer-generated imagery (CGI). Computer animation can be very detailed 3D animation, while 2D computer animation can be used for stylistic reasons, low bandwidth or faster real-time renderings. Other common animation methods apply a stop motion technique to two and three-dimensional objects like paper cutouts, puppets or clay figures. While creating my own animation in Adobe Animate I recorded all my progress in this log here.
Vector animation is a term used to refer to animation in which the art or motion is controlled by vectors rather than pixels. Vector animation often allows cleaner, smoother animation because images are displayed and resized using mathematical values instead of stored pixel values.
Cel animations are created by placing similar frames in sequential order. Generally cell animations create movement by showing 24 frames per second. It's common to draw a frame by placing a blank sheet (cell) over the previous frame; this is done to create a smoother movement in between frames. The more frames you include per second, the smoother the movement of the animation becomes. This is also where the acronym FPS comes from (frames per second), the higher the better.
Rotoscoping is a technique patented by Max Fleischer in 1917 where animators trace live-action movement, frame by frame. The source film can be directly copied from actors' outlines into animated drawings. Originally, animators projected photographed live-action movie images onto a glass panel and traced over the image.
Live-action/animation is a technique combining hand-drawn characters into live action shots or live action actors into animated shots. One of the earlier uses was in Koko the Clown when Koko was drawn over live action footage. Another example is the 1996 movie Space Jam, where it included both Warner Brothers' animated characters and real actors interacting.
Stop-motion animation is used to describe animation created by physically manipulating real-world objects and photographing them one frame of film at a time to create the illusion of movement. There are many different types of stop-motion animation, usually named after the medium used to create the animation. Computer software is widely available to create this type of animation; traditional stop motion animation is usually less expensive but more time-consuming to produce than current computer animation.
3D animation is digitally modeled and manipulated by an animator. The animator usually starts by creating a 3D polygon mesh to manipulate. A mesh typically includes many vertices that are connected by edges and faces, which give the visual appearance of form to a 3D object or 3D environment. Sometimes, the mesh is given an internal digital skeletal structure called an armature that can be used to control the mesh by weighting the vertices. This process is called rigging and can be used in conjunction with keyframes to create movement.
Image manipulation includes changing or adjusting a photo utilizing different methods to create different images. Some image manipulations are viewed as art while others are disliked especially when used to deceive. Some forms of image manipulation are used for political publicity, or to make a person look better, or just for entertainment. Below is an example of image manipulation.
Audio mixing is the process of combining multiple audio tracks, when doing so you can edit or enhance the clip’s volume, dynamics, frequency and panoramic position. To do this I used a software called Audacity, this allowed by to completely manipulate audio clips into a full clip like I did in this example below: This clip above combines multiple clips together as just an example of the different features of Audacity has to manipulate audio features. Shown below is the different clips stack on top of each other.
Computer-aided design is the use of computers to help in the creation, modification or analysis of a design. CAD software is used to increase the productivity of the designer, improve the quality of design, improve communications in documentation, and to create a database of parts/materials required for manufacturing. There are many different CAD softwares, for example Onshape, SketchUp, SOLIDWORKS, TinkerCAD, and hundreds more. I’ve used CAD in the past to help me design mechanisms for my robotics team that I'm part of. I use the software Onshape and it's very useful for the design of parts that we commonly use. It mainly does straight lines, but can do more complex shapes, but its main focus is its ability to be used online, where multiple users can edit the same document at once. This makes group project work on the team much easier, below is an example of a design I worked on with a friend that got turned into reality, it's a mechanical winch.
A database is an organized collection of data, generally stored and accessed electronically from a computer system. Where databases are more complex they are often developed using formal design and modeling techniques. For my year 12 term two assignment in 2020 I was tasked to create a database in Microsoft Access that would show off referential integrity within a system, this could be in any fashion as long as it used that key feature. I created a movie rental box system that kept a log of users who rented movies, and made sure that when a movie was rented, it couldn't be rented by another user again using referential integrity. It was fully formatted with a colour palette and had a user interface that would allow them to create an account on the database and rent a movie out.
A Gantt chart is a type of bar chart that illustrates a project schedule, named after its creator, Henry Gantt, who designed the chart style around 1910 to 1915. Modern Gantt charts also show the dependency relationships between activities and current schedule status. They are incredibly useful for time management on a project and can help visualize deadlines and prerequisites of subtasks within a project. On my project, I spent a lot of time working near the end of the due date, rather than pacing myself through the allowed time for the assignment. This I feel may have affected the overall aesthetics and content that is within the website poorly. If I had paid more attention to the gantt chart during the development phase I would most likely save myself from staying up and working late nights. https://schoolsnsw-my.sharepoint.com/:x:/g/personal/neville_goodyer_det_nsw_edu_au/EQ78Cbcdyt1MrizliDzIUNIBXZsbnCH0Ts4jw1TdnRgRjg?e=yeGmnW
Through the design of this website, I have kept a strict log of the changes and developments in the creation of it. Visit Here to see it.