Web Design and Digital Content Production
Topic outline
- General
General
Terminology and aims of the course:
Web Design refers to the HTML (structure), CSS (style), and JavaScript (interaction) technologies used in browser-Web Server communication, resulting in web pages being displayed to the end user.
With the term Digital Content Production, we describe the production - editing of images, audio documents and video.
In this course, it is necessary to familiarize students with the "remote" computer, the Web Server, and the structure of a website. To achieve that, students will create a Wordpress blog in which they will upload some of the material they have created.
Module 1: HTML I
Internet, WEB, HTML coding
Introduction to WEB. It's the introductory lesson, we'll learn what is the Internet and WWW and we'll state their difference.
HTML - CSS - JavaScript They are the key technologies for creating a webpage. We will see their function, HTML for the structure, CSS for the appearance, and JavaScript for the user interaction. We will also look at the Browser and how a Code Editor helps us write the necessary code.
Simple HTML file. Finally, we will create a Simple HTML file and see how it is structured. We will also format its text.
Page: 1Books: 3Module 2: HTML II
Comments, Lists, Media and Links
Comments. We'll see how we write comments in an HTML file. Comments are important. They help us organize our code by describing its function or our thoughts about it. They also help any other developer who may need to work on this code.
Lists.They are very important HTML elements. We use them to structure the text, as we would do in any text editor. Later in the course, we will see that the lists accept many styles and we use them for many reasons, one of which is the creation of a Navigation bar.
Media. By this general term, we refer to the elements images, audio and video files. We'll learn how to import these files into the editor that will result in the enrichment of our page. Imagine websites without these and think how boring they would be!
Links. We use the simple link word instead of the hyperlink. Is a reference to data that the reader can directly follow either by clicking, tapping, or hovering. Links are one of the first and key components of the WEB as designed by Tim Berners-Lee from the beginning in the early 1990s.
Page: 1Books: 3Forum: 1Module 3: CSS I
Introduction to CSS. Inserting and Applying CSS
What is CSS? The language of style is CSS which stands for Cascading Style Sheets. In general, the visual output of the web page is the combination of HTML (structure) and the CSS (style-appearance). In this submodule and we will learn the basic syntax rule, "Selector {Property: Value;}
Inserting CSS. In this submodule, we'll discuss the different ways to insert CSS: inline CSS, internal CSS, and external CSS. We will also understand and apply the priority rule, "the closest to the element the highest priority it has". Finally, we will learn how to style text and fonts.
Applying CSS. In this submodule, we will see how the "Box model" works and how we can format a web page using colors, Google fonts and font - Awesome icons.
Page: 1Books: 2Forum: 1Module 4: CSS II
Selectors. Pseudo-classes. Display properties. Navigation bar
Selectors. In this submodule, we will learn how to use CSS selectors to "find" and select HTML elements based on their name, id and class. We also learn to apply CSS rules to multiple classes and to specific content in a list.
Pseudo-classes. Pseudo-classes are classes with some kind of “intelligence”. They change the appearance of the elements based on the different mouse events (onmouse over). In this submodule and we will learn how to use Pseudo-classes to apply different style at active, visited and unvisited states of links.
Display properties. The display property is used to define how elements would appear on the page. The most common values for display are inline and block. In this submodule and we will learn how the display properties can be used to style a navigation bar.
Navigation bar. We have already created a Navigation bar and we have applied icons to it. In this submodule, we will transform this HTML menu into a good-looking navigation bar.
Page: 1Books: 2Forum: 1Module 5: Tables, more elements
Table-HTML. Table-CSS. Div - Span elements
Table-HTML. Tables are used very often. We use them to display visually data organized in rows and columns. In this submodule and we will learn how to use HTML markup to construct a table.
Table-CSS. In this submodule, we will learn how to use CSS rules, and classes to apply different style to various elements of a table.
Div - Span elements. In this submodule, we will learn how to use the block element DIV and the inline element Span. Also, we will learn how to align elements next to each other using the properties float and clear.
Page: 1Books: 2Module 6: JavaScript I
Introduction to JavaScript. Simple file. Data types
Introduction to JavaScript. JavaScript is a programming language; this means that is able to make decisions based on data or to do things repetitively. Moreover, it adds interactivity to the browser and enables enriched browser-server communication. JavaScript is the most popular language among web developers.
Simple JavaScript file. In this submodule, we will learn how to use variables and simple interactions (alert, prompt) to create simple files. We will learn about developer tools and how to check our code for errors. We will also learn how to add JavaScript comments.
Data types. In this submodule we will learn about types of data, how to find the type of a variable and how to change its type or its value (arithmetic and assignment operators). We will also learn some of the string and number methods.
Page: 1Books: 3Module 7: JavaScript II
JavaScript with HTML and CSS. Making Decisions. Applying the “if” statements
JavaScript with HTML and CSS. In this submodule , we will use JavaScript variables, a simple function and a simple event (onclick) to combine HTML and CSS with JavaScript. This model of event-driven programming—in which your code listens for some action on the page and then performs some function in response—is a common paradigm in JavaScript development.
Making Decisions. Very often, when we write code, we need to have different options for the results of different conditions. In this submodule , we will learn to use the “if statements” to make decisions. We will also see the functionality of comparison and logical operators.
Applying the “if” statements. In this submodule and we will learn to make decisions using the “confirm()” interactions. We also learn to make more complicated decision using nested conditionals.
Page: 1Books: 2Module 8: JavaScript III
JavaScript arrays. Simple loops. Word counter.
JavaScript arrays. JavaScript arrays are used to store multiple values in a single variable. In this submodule , we will learn to create arrays and methods to access and modify the arrays.
Simple loops. Loops offer a quick and easy way to do something repeatedly. In this submodule, we will learn how to use the “for’ and “while” loops. We will also learn to iterate over an array.
Word counter. The HTML objects are often accessed using arrays. In this submodule we will use the string.split() method to divide a string into an array of words and we will learn how to create a simple word counter.
Page: 1Books: 2Module 9: Forms
The HTML of forms. The CSS of forms. Form validation.
The HTML of forms. Forms are commonly used to collect user input and send them to the WEB Server. In this submodule, we will learn to create well-structured and accessible forms using HTML markup.
The CSS of forms. In this submodule, we will learn how to style a form and enhance its usability using CSS rules. We will also learn to style a submit-button.
Form validation. Form validation with immediate validation messages creates a better user experience rather in the case where you receive messages only after submitting the form. In this submodule we will enrich the HTML validation and we will add JavaScript features to make the form more user- friendly.
Page: 1Books: 2Module 10: Images- The Canvas HTML element
Canvas HTML element. The RGBAs of images. Image manipulation.
Canvas HTML element.The HTML5 canvas element is a workspace upon which you draw (and manipulate) images and text. In this submodule , we will learn how to create canvas elements . We will also learn methods to create, access and modify text, shapes and images on the fly, via JavaScript.
The RGBAs of images.One of the most common ways to represent color on the web is via RGBA. An RGBA color value is specified with rgba (red, green, blue, alpha), the alpha parameter represents the transparency-opacity of a pixel. In this submodule , we will learn how to create the bitmap of an image which is an array that maps these four numbers to each pixel.
Image manipulation. In this submodule we will learn to combine the canvas element with JavaScript methods to manipulate the bitmap of an image and change its colors.
Page: 1Books: 2Module 11: Image editing- GIMP I
The Gimp. Gimp file- Selection tools. The Color in Gimp. Layers and export of image.
The Gimp.GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.
Gimp file- Selection tools. The Gimp
.xcffile stores layers, transparency settings, paths, and other information. In this submodule, we will create the first Gimp file. We will also learn methods to select specific areas of an image in order to make the image transparent.The Color in Gimp. We have already learned the RGB and RGBA models. Here we will study the HSV model (Hue, Saturation, Value-lightness). In this submodule, we will learn how to improve or change the color of an image using the appropriate tools. We will also learn to pick and select a color using the appropriate tools.
Layers and export of image. A good way to visualize a GIMP image is as a stack of layers. In this submodule we will learn to combine layers and to apply several of the available tools on them. We will also learn to export an image to the commonly used in WEB formats:
.jpg, .png and .gif.Page: 1Books: 3Module 12: Image editing- GIMP II
Gimp for the WEB. Blending modes. Text in Gimp
Gimp for the WEB.In this submodule, we will create an image map (is a process by which we can create clickable areas in an image and link them to different destinations).
We will also learn to create an animated gif (is a set of images that have the same dimensions and appear in a specific order).Blending modes.Gimp has the “Layer modes” also called “Blending modes”. Depending on the mode chosen, the image layer is displayed differently.
In this submodule, we will see just two of the available Blending modes, the "Screen" and the "Darken only".Text in Gimp. Gimp supports a powerful tool for text. In this submodule we will learn how to add and “shape” a text. We will also learn to create a simple e-book cover.
Page: 1Books: 3Module 13: Audio editing- Audacity
The Audacity. The Physics of Sound. Record and modify voice. Background music- The mp3 file
The Audacity. Audacity® is free, open source, cross-platform audio software for multi-track recording and editing.
The Physics of Sound.In this submodule, we will recall the physics of sound: production transmission, reflection, refraction and interference of sound waves.
Record and modify voice. The Audacity
.aupfile stores tracks, clips and other information.
In this submodule, we will create the first Audacity file.
We will also record our voices and we will improve the recordings using Audacity’s tools.Background music- The mp3 file.Audacity supports powerful tools for sound modification. In this submodule we will learn how to add and “fade” a background sound.
We will also learn to export the.aupfile as.mp3or.oggfile.Pages: 2Books: 3SCORM packages: 2Module 14: Video editing- OpenShot
The OpenShot. What is a video?OpenShot functions. Creating video
The OpenShot. OpenShot Video Editor is an open-source video editor, available on Linux, Mac, and Windows. OpenShot can create stunning videos, films, and animations with an easy-to-use interface and rich feature-set.
What is a video? Video is an electronic medium for the recording, copying, playback, broadcasting, and display of moving visual media.
OpenShot functions. In this submodule, we will see the
.ospfile that stores images, clips and other information. We will also see the toolbars of OpenShot and their functionality.Creating video. OpenShot supports powerful tools for video modification. In this submodule we will learn how to combine images and sound and put these on a timeline.
We will use OpenShot options and effects to make a stunning video! We will also learn to export the.ospfile as.mp4file.Page: 1Books: 3Files: 2Module 15: Upload to Web - Wordpress I
The WordPress. Creation and Modes. Theme – New page. Subpages
The WordPress.WordPress started as just a blogging system, but has evolved to be used as full content management system and so much more through the thousands of plugins and widgets and themes. WordPress is completely customizable and can be used for almost anything.
Creation and Modes. In this submodule, we will create a blog-site on WordPress. We will also learn the different available modes of the site: Edit – View – Visit.
Theme – New page. A theme is a collection of files that work together to produce a graphical interface of a site. In this submodule, we will see how to select and setup a WordPress theme.
We will also create a typical HTML page using the HTML editor of WordPress and we will make it visible in the Navigation bar.Subpages.WordPress supports submenus and subpages. In this submodule we will create subpages and we will add these in the Navigation bar below its main page.
We will also create a photo gallery.Page: 1Books: 3Module 16: Upload to Web - Wordpress II
Posts and Pages. Comments and Widgets. Google map and Contact form
Posts and Pages.In WordPress the posts are content entries listed in reverse chronological order, while the Pages are better suited for more timeless content.
In this submodule, we will categorize posts and we will create a custom Homepage. We will also learn to manage and enrich our content.Comments and Widgets. Commenting on posts also exists in WordPress as in every social media.
In this submodule, we will see how to manage comments in our blog-site.
A WordPress Widget is a small block that performs a specific function. In this submodule, we will see how to manage Widgets in our blog-site.Google map and Contact form. In this submodule we will add a Google map in our site.
We will also add form elements in the contact Widget of WordPress.URL: 1Page: 1Books: 3
Social networks