Web Technology Basics, Lecture notes of Computer Science

Download Web Technology Basics and more Lecture notes Computer Science in PDF only on Docsity! Introduction to Web Technology UNIT 2 WEB DESIGN Web Design  Web designing has direct link to visual aspect of a web site.  Effective web design is necessary to communicate ideas effectively.  Design Plan should include the following: • Details about information architecture. • Planned structure of site. • A site map of pages Web Design Issues  Website accessibility  Compatibility with browsers  Navigational structure  Positioning of content  Challenges in creating a responsive website Bandwidth  Bandwidth has generally referred to the volume of information per unit of time that a transmission medium (like an internet connection) can handle.  An internet connection with a larger bandwidth can move a set amount of data (say, a video file) much faster than an internet connection with a lower bandwidth.  Bandwidth is typically expressed in bits per second, like 60 Mbps or 60 Mb/s, to explain a data transfer rate of 60 million bits (megabits) every second. Cache  In most browsers, the options for clearing the cache and clearing cookies are in the same place—but they're not the same thing. • Your cache stores files downloaded directly from the websites you visit—fonts, images, that kind of thing. The files in your cache aren't that different from the files in the cache of someone else who visits the same websites as you. • Cookies are different—they store information about you and the things you've done online. If you browse an online store and add a bunch of things to a shopping list, that's saved using a cookie. Cookies also keep track of which site you're logged in to—which is why, if you clear your cookies, you'll need to log back in to all of your accounts. Clearing your cache doesn't affect any of this.  Related, but not exactly the same: you can visit the cached version of many websites through Google search. Instead of bringing you to the live website, it'll show you the page the last time Google's robots visited it.  Responsive Website  Responsive web design makes your web page look good on all devices.  Responsive web design uses only HTML and CSS.  Responsive web design is not a program or a JavaScript. Mx HOW DOES IT WORK/RESPONSIVE PROCESS Moble site iPad Apps Website Smart Phones Tablets Netbooks Desk tops Different devices have different screen resolutions, so these different widths should be considered in the responsive design process, Common resolutions can be sorted in 6 major breakpe process works with these, vts, design mire NATURES aCe TAY | Content {Mobile first } Wi ae UT Wea Bootstrap from twitter Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. it includes base CSS and HTML for typography, forms, buttons, tablets, grids, navigation and more, Minimal responsive framework includes wordpress theme Skeleton Is a WordPress theme aimed at helping you bulld simple, uncluttered, useable, and mobile-friendly WordPress sites. Skeleton is simole, lightweight and easy to work with for WordPress designers and developers. Flexible 6 & 12 grid framework Foundation, is an advanced, lightweight, responsive, front-end framework, Based on a flexible, 12-column grid that can scale to an arbitrary size [defined by the max width of the row) that's easily nested. This means you can build complicated layouts without creating a lot of custom elements, User Interface  User interface is a fundamental element for human-computer interactions.  It’s a space where interactions between humans and machines occurs.  The goal of the interaction is to allow effective operation and control of the machine from the human end.  There are many different types of user interface.  Three most common UIs – • command line interface • graphic user interfaces • voice-enabled user interface User Interface  Essential properties of well-designed UI • Clarity. All elements of UI such as visual metaphors are crystal clear for users. Users shouldn’t need to decode the meaning of a particular element. • Familiarity. Your UI allows users to use their previous experience when they interact with your product. • Consistency. Keeping your interface consistent across your product allows users to recognize usage patterns. • Forgiveness. Good UI forgives users of their mistakes. • Efficiency. Good UI allows users to provide minimal input to achieve the desired output. It also provides shortcuts for experienced users to make interaction for them more productive. User Experience  UX design starts with conducting user research.  UX designers have to understand their target audience and identifying exactly what they need from the product they’re designing  UX designers are responsible for analyzing the target audience’s needs and ensuring that the company creates products that meet those needs.  UX design is a multidisciplinary field where UX designers can be involved in different areas of product development such as product research, ideation, prototyping, testing.  Internal links are links that go from one page on a domain to a different page on the same domain. They are commonly used in main navigation.  These type of links are useful for three reasons: • They allow users to navigate a website. • They help establish information hierarchy for the given website. • They help spread link equity (ranking power) around websites. Page Layout and Linking User Centric Design  User-centered design (UCD) is an iterative design process in which designers focus on the users and their needs in each phase of the design process.  In UCD, design teams involve users throughout the design process via a variety of research and design techniques, to create highly usable and accessible products for them.  In user-centered design, designers use a mixture of investigative methods and tools (e.g., surveys and interviews) and generative ones (e.g., brainstorming) to develop an understanding of user needs. Sitemap  A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them.   Search engines like Google read this file to more intelligently crawl your site.  A sitemap tells Google which pages and files you think are important in your site, and also provides valuable information about these files Publishing Website  Website publishing is the process of uploading content on the internet. It includes: • uploading files • updating web pages • posting blogs  Website is published by uploading files on the remote server which is provided by the hosting company.  Prerequisites for Website Publishing  In order to publish your site, you need the following things: • Web development software • Internet Connection • Web Server Designing effective navigation  Navigation design is the discipline of creating, analyzing and implementing ways for users to navigate through a website or app.  Navigation plays an integral role in how users interact with and use your products. It is how your user can get from point A to point B and even point C in the least frustrating way possible.  To make these delightful interactions, designers employ a combination of design patterns including links, labels and other UI elements. These patterns provide relevant information and make interacting with products easier.  Good navigation design can: • Enhance a user’s understanding • Give them confidence using your product • Provide credibility to a product