3. Introduction to Front End Technology
Front End (Client Side) Design refers to:
- The visual part/User Interface layer (what we see) of websites/applications
- Front End Design is typically the UI, Layout, typography/fonts, images and 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)
- CSS (Cascading Style Sheet)
- JavaScript (JS)
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
| 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 is very easy to learn
- HTML page consists of DTD & TAGS for 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>Document</title>
</head>
<body>
</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 ( |
| XHTML | Document Type Definition (.DTD file) |
| HTML4 | Document Type Definition (.DTD file) |
- 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 ,,
- ,
-
<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;">
-
external style:
- Created and introduced by Brendan Eich (Netscape) in 1995 to 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 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
- 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
- BMP
- GIF
- JPEG / JPG
- PNG
- SVG
- 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
- 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
- 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
- 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
p {
color: red;
font-size: 18px;
}
There are many formats of photos/pictures/images/Web Graphics used on the web
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.
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"
Created in 1995 to improve over JPEG and replace the GIF by open source community over copyright disputes/license issues with GIF
An exposed set of functions that allow other applications to access features and functionality without giving direct access to source code.