Web development concepts

• The presentation provides an introduction to web technologies, specifically HTML, CSS, and Javascript.

Introduction

• Programming languages lack built-in libraries for creating User Interfaces.
• Frameworks are necessary to access the operating system layer.
• When developing an application, choosing the right framework is key.

Framework and OS

• Frameworks provide the capability to show information, get user input, request data from the internet, play audio, store data, and retrieve system information.
• Every programming language has task fulfillment libraries, but they might be difficult to set up.

The Web Framework

• The web offers a rich, user-friendly framework for app creation, which includes features and access to peripherals.
• Its API operates universally across all browsers on every platform.
• The code is written in Javascript.
• Browsers provide display, input, network, audio, storage, and system info.

Goals

• HTML is for creating the document structure and content.
• CSS is to control visual aspects.
• Javascript is for interactivity.

Tools

• Use a web browser like Chrome or Firefox.
• It is necessary to have a good text editor like VSCode, Notepad++, TextWrangler, Sublime Text, or ecode.
• There are provided example HTML code to start.

Testing

• Test the code by opening index.html from the template in a text editor and the browser.
• Press F5 to refresh the site in the browser.
• Open the developer tools with Control + Shift + I on Windows or Command + Opt + I on OSX, or use online editors like scratchpad or htmledit.

Inside a Browser

• Browsers consist of distinct components.
• Two key components are the Rendering Engine, for HTML+CSS transformation into a visual, and the Javascript Interpreter to execute Javascript code.

Technologies

• HTML
• CSS
• Javascript

Browsers as a renderer

• Browsers act as a renderer turning documents into visual representations.
• HTML was created to give text some format readable to the user.

Markup language

• Markup languages use special tags within the text, which renderers use to determine how to display the text.

HTML

• HTML (Hyper Text Markup Language) defines a document or website's structure.
• It is a markup language that specifies structure, not algorithms.
• HTML is a subset of XML, it comprises nested tags, encompassing texts, images, and videos.
• HTML defines page structure, multiple HTML files can make up a website.

HTML: Basic Rules

• HTML uses XML syntax with tags and attributes to show information to the user.
• HTML includes various elements for data types and actions.
• The DOM (Document Object Model) is a tree-like structure where nodes contain other nodes.
• It gives websites semantic context that computers can understand.
• HTML should not contain display-related information; that falls under CSS.

HTML: Syntax example

• HTML syntax includes tags, attributes, comments, and text.

DOM is a tree

• HTML's document object model creates a tree-like structure where nodes can only ever have one parent but any number of child nodes.

HTML: Main Tags

• Most websites use fewer than 10 essential HTML tags.
• <div> is a container representing a rectangular area.
• <img/> displays an image.
• <a> is a link to another URL.
• <p> is a text paragraph.
• <h1> is a main title tag, with <h2>, <h3>, and <h4> for titles of decreasing importance.
• <input> allows users to enter information.
• <style> and <link> insert CSS rules.
• <script> executes JavaScript.
• <span> is a null tag that is useful for tagging information.

HTML: Other interesting tags

• Useful HTML tags include <button> for creating buttons, <audio> for playing audio, <video> for playing video, <canvas> for drawing graphics with JavaScript and <iframe> for embedding other websites.

HTML: Wrapping the info

• HTML tags wrap and better structure the data.
• Improved structure ensures easier access and presentation.

HTML: Tagging correctly

• Structure documents well with HTML following guidelines.

HTML good use

• Wrapping information in a good way inside tags with proper semantics is very important.
• id attribute defines a unique tag identifier.
• class attribute defines a generic tag identifier.

HTML references

• HTML Reference describes all HTML tags.
• The 25 Most Used Tags lists the information of the most common tags.
• HTML5 Good Practices provides introductory tips.

CSS

• CSS styles the document info stored in the HTML.
• CSS offers control over visual elements like colors, margins, position, sizes, and changes for different behaviours (like mouse over).

CSS example

• CSS example code showing how the tags can be styled overall to show in blue with Tahoma font, a 14px fontsize, and a 10px margin around.

CSS fields

• Common CSS fields inclue colors, background-color, background-image, font, border, border-top, border-radius, margin, padding, width, height, text-align, box-shadow, cursor, display, and overflow.

CSS how to add it

• CSS rules can be added in four ways
• By inserting code inside style tags
• By referencing an external CSS file
• With the attribute style on a tag
• Through Javascript

CSS selectors

• CSS is able to change the background color of a tag, with specific rules in the source.

CSS selectors part 2

• Selectors that narrow rules to specific tags include tag name for tag type, . for class, # for id, : for behaviour, and [] for the attribute.

CSS Selectors cont.

• Tags are able to be styled by their context with the use of spaces to separate tags.

More CSS Selectors

• CSS can use combined selectors for narrower targeting with:
• div#main.intro:hover { ... } to style a div with id main, class intro when hovered.
• #main { ... } to affect any node with id main.

More on CSS Selectors

• The character > can select any direct child elements that don't have an ancestor with a specific rule.
• The comma character can apply the same CSS actions on multiple selectors.

HTML arrange

• It is important to understand how the browser arranges the elements on the screen, and know there are different ways on how an element can be arranged on the screen.
• It is possible to change the way elements use the display property.

Box Model

• By default, the width and height will not take the margin into account, and it is possible to change the behaviour.

Layout

• A very hard aspect of CSS is structuring the layout of websites.
• HTML puts everything in one long column, which is not the normal desire.

Flexbox

• Provides an easy way to arrange items in one direction, vertically or horizontally, and choose to arrange from right to left in reverse.
• It is able to be used to arrange a series of elements in different rows.

Grid system

• It is recommended to use the CSS Grid system as most sites are structured in a grid.

Fullscreen DIVs

• To make a web app and instead of scrolling, remember to use percentages on setting the size of elements with the size set to the <body> and <html> to be 100%.

Trick to center

• Use the horizontal-and-vertical-centering class to make great CSS styles for centering.

CSS Further Reading

• The slide mentions resources for learning CSS:
• One line layouts tutorials
• Understanding the Box Model, for positioning
• All CSS Selectors for specificational details.
• CSS Transition to make animations with CSS.
• TailwindCSS for a CSS Framework.

Javascript

• Javascript is a programming languages simple to start but difficult to master and add interactivity to web elements.

Interactivity

• Brendan Eich developed an Interpreter in just one week, and that has become one of the most important languages.

Javascript, syntax, code embedding

• Javascript can be embedded in HTML using the <script> tag.
• JS syntax is a lot like Java, with interactivity given to web elements.
• Javascript programs can change HTML and CSS content and retrieve web info to update pages without reloading.

Javascript: Insert code

• There are 3 ways to execute Javascript code: embed, import, and inject.
• Embed code in HTML using the <script> tag.
• Import a Javascript file using the <script> tag.
• Inject the code on an event inside a tag.

Javascript: Syntax

• It is similar to C++ or Java.

Javascript example

• Javascript example code to show the text of the first h1 element being changed to "This is another title".

Javascript API

• Javascript contains a rich API for DOM access, HTTP requests, playing media, to detect user actions, and launch threads.

Javascript retrieving element

• You can get elements from the DOM using different approaches like crawling the HTML tree, using a selector like in CSS, and attaching events listeners.

Javascript crawling the DOM

• Javascript gives access to document which contains DOM information, and window which is the browser window.
• Crawing the DOM, for instance, it can return the first node inside the body tag.

Javascript using selectors

• Elements are able to be retrieved with selectors from the DOM.

Javascript modifiy nodes

• Changes to content are possible, and style modifications in addition to the node behaviors through javascript.

Javascript creating nodes

• The document.createElement function can create elements from different parts.

Javascript show and hide elements

• A style will either hide elements from being rendered, or display it again .

Using inputs

• If user input is required, use the tag <input type = "text"/> for the user content to be read or modified. Value can be cleared by setting to "". Events can be like "onclick" or "keydown".

Website example

• A brief description of the construction of a website with a JavaScript implementation and a CSS and HTML implementation.

Execution flow

• It is important to have a clear understanding of the execution flow of Javascript code, and know that scripts are executed after the html is being parsed.
• The DOM won't be complete until the HTML is parsed to start Javascript with an init function when an HTML element is being implemented.

JQuery

• JQuery is a Javascript library that makes DOM manipulation easier with unified syntax that takes advantage of CSS selectors.

Using the Dev Tools

• Press Control + Shift + I or F12 to use the Dev Tools.

Exercise

• The presentation ends with an exercise to create a messaging application layout.

Further info

• DevDocs.io contains API References.
• Selectors: MDN Tutorial
• Codeacademy and docs.jquery provide info for Javascript and JQuery.