3. Introduction to Front End Technology
- The
visual part/User Interface layer (what we see)of websites/applications - Front End Design is typically the
UI, Layout, typography/fonts, imagesand many other visual elements/aspects shown on the web page and their styling. - One can also refer it as usability and user experience design as well
- HTML (HyperText Markup Language) - Essential Structure / Content, Redable and convey structure to user
- CSS (Cascading Style Sheet) - Page Design / Layouts / Styling / Formattings, look and feel
- JavaScript (JS) - Page Behavior, Logic, Conditions and Validations
Web Design is creating and designing web pages, designing for all user interfaces/experiences like browsers, screen readers, mobiles, printers
- The visual part of web design
- Planning
- Structuring content/data/pages
- User Interface designing / Client Side designing
- Interactivity
- Includes visual part of web designing
- Creating mockups and developing visual standards
- UI designing, typography, page layout
- Structuring semantic content/data/pages
- Mainly works with HTML, CSS, Photoshop
- Can act and do the part of Front End Designer
- Planning for Dynamic Content
- Logical/Conditional Interactivity
- Fetch Data from Servers with APIs
- Mainly works with JavaScript and other JS frameworks, HTML, CSS
- Determine web site/clients/Audience goals
- Clearly Define contest - navigation / content organization
- WireFraming / Architecting the site - proper navigation / content organization
- Generate Mockups - post-it, illustrator / Photoshop / Fireworks
- Build it - HTML CSS JS Flash
- Test it - Multiple Browsers / Devices, consistent output
- The creation and integration of feature-rich interfaces
- Organize content and flow properly
- Plan navigation
- Use Video and blended media
Script executed in the browser environment (JavaScript)
- HyperText Markup Language
- The Standard/foundation/gateway language used for creating/structuring content on the web
- We can create a static website by HTML only
- NO HTML = NO WEB PAGE :)
| Year | History |
|---|---|
| 1990 | Specification Drafted in Mid 90s by Tim Berners Lee |
| 1991 | Tim Berners Lee published document called "HTML Tags" |
| 1995 | HTML 2.0 ('standard' HTML) |
| 1997 | HTML 3.2 (proprietary browser companies developed many features) |
| 1999 | HTML 4.0 W3C Web standards support |
| 2000 | XHTML 1.0 (HTML move towards XML)-Extensible Markup Language |
| 2001 | 2009 - XHTML 2.0 |
| 2004 | WHATWG formed (Web HyperText Application Technology Working Group, they continued with development of HTML 5.0) |
| 2007 | 2008 - W3C adopts WHATWG's HTML5 Web Application 1.0 specification and drafts |
| 2009 | XHTML 2.0 drops/stops |
| 2014 | W3C Recommendation: HTML5 |
- HTML Syntax is very simple easy to learn
- HTML page consists of
DTD & TAGSfor different visual aspects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML</title>
</head>
<body>
<p>This is Basic HTML page </p>
</body>
</html>
- Usually the first line of an HTML page, its an instruction to the web browser about what version of HTML the page is written and rules to parse/render.
| HTML Version | DTD |
|---|---|
| HTML5 | Document Type Declaration (<!DOCTYPE html> |
| XHTML | Document Type Definition (.DTD file) <!DOC TYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| HTML4 | Document Type Definition (.DTD file) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
- Tags are html commands/set of instructions to create web page with specific UI element
- Tags are used to identify content like
<h1> = heading 1,<p> = paragraphetc. - HTML contains tags which are used to identify elements and structure pages example
<header>,<table>,<li>,<img> -
<head>tag consists of non visual elements, meta tags, links to external .css, .js files and libraries -
<body>tag contents all visual elements which appears on web page
- Text Editor/HTML Editor like
NotePad, NotePad++, SublimeText, Atom, Brackets, Coda, Visual Studio Code, DreamWeaveretc. - To view output of .html pages we need Browsers like -
Google Chrome, Mozilla Firefox, Internet Explorer, Safarietc.
- CSS is presentational, styling, formatting language developed to control look and feel of HTML files
- Presentational markup tags like
<font> <b> <i> <u>etc discouraged or deprecated as style-sheet language like CSS developed to control the presentation of HTML documents - Styles can be written in different ways:
-
external style:
style.css(separation of concern) -
embedded/internal styles:
<style> </style> -
inline styles:
<p styles="color:red; font-size: 18px;">This is an inline style
-
external style:
p {
color: red;
font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>external style</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This is an external style </p>
</body>
</html>
p {
color: red;
font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>embedded/internal styles</title>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is an embedded/internal styles </p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>inline style</title>
</head>
<body>
<p styles="color:red; font-size: 18px;">This is an inline style </p>
</body>
</html>
- Created and introduced by
Brendan Eich (Netscape) in 1995to increase and expand the capabilities of the native browser. - A client-side scripting language used to add interactivity and functionality to websites
- JavaScript it has nothing to do with Java ...!!! NOT AT ALL RELATED to JAVA)
- Build interactive elements, Rollover, Button clicks, Menus
- Create Dynamic Menus-Logics
- Open new browser windows
- Update data within the page/browser
- Client-side form validation
- Manipulate page elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML JavaScript</title>
<script>
// write javascript code here
</script>
</head>
<body>
<p>This is Basic HTML JavaScript page </p>
</body>
</html>
- Scripts can be written at different places:
-
external script:
script.js(separation of concern) -
embedded/internal script (under HEAD or BODY tag):
<script> </script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML JavaScript</title>
<script src="script.js"></script>
</head>
<body>
<p>This is Basic HTML JavaScript page </p>
</body>
</html>
// write javascript code here
alert('external javascript code executed.');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML JavaScript</title>
<script>
// write javascript code here
alert('embedded/internal javascript code executed.');
</script>
</head>
<body>
<p>This is Basic HTML JavaScript page </p>
<script>
// write javascript code here
alert('embedded/internal javascript code executed.');
</script>
</body>
</html>
- already have the various codes and common utilities ready
- collection of javascript methods and functions that make it easier to perform targeted tasks
- jQuery
- Angular
- React
- Vue
- Prototype
- Ember
- D3
There are many formats of photos/pictures/images/Web Graphics used on the web
- BMP
- GIF
- JPEG / JPG
- PNG
- SVG
Creating images for the web often requires the designer to find a balance between keeping the file sizes small while maintaining acceptable image quality with resolution.
JPEG / JPG, GIF and PNG files type are the standard image formats for the web graphics.
- Introduced in 1987 by CompuServe
- It is the most popular image format type on the web
- Limited to 256 colors support only
- Typically used for logos or icons
- GIFs support transparency and limited animation
Image compression standard established in 1992 and widely used for areas such as the web and digital photography, often shortened to the file extension "JPG"
- Supports millions of colors
- Used in all types of image High Resolutions Scenery
- Uses "lossy" compression to reduce file size
- JPGs are compressed each time they saved
Created in 1995 to improve over JPEG and replace the GIF by open source community over copyright disputes/license issues with GIF
- Like GIFs Support transparency
- Uses lossless compression
- Like JPEG supports millions of colors
- Older browser support is lacking
- SVG is a vector graphics format
- Can be scaled independently of resolution
- Graphics are written in SVG markup which makes them editable through the code
- Since they are markup they can be further styled through CSS
- SVG is now widely supported among latest devices and browsers
- Adobe Photoshop
- Adobe illustrator
- Adobe Fireworks
- CorelDraw
- GIMP
An exposed set of functions that allow other applications to access features and functionality without giving direct access to source code.
- Using Google Maps
- Weather reports
- Youtube videos
- Facebook feeds
- Amazons latest offers
- Latest sports scores
- Latest Newsfeeds
- HTML is used to create web pages/websites with simple standard elements
- HTML5 introduced following advanced APIs to avoid third-party plug-in support/dependency
- Media API - Audio/Video control
- Geo-Location API - Access current location of users
- Drag and Drop API - Drag and Drop functionality
- App Cache API - Storing data offline/caching for future use
- Canvas API - Draw directly in the browser
- Earlier we use to use fonts available and installed on user machine like Arial, Verdana, Times, Sherif etc.
- Web Fonts technology allows the downloading and temporary installation of fonts within the browser
- @font-face CSS technique is used to request any engaging and latest fonts/typography from the web server
-
New font formats developed
- EOT - Embedded OpenType
- WOFF - Web Open Font Format
-
Famous third-party font hosting server
- Google Fonts
- Adobe Typekit