WebDev Lesson 1 PDF

Overview This lesson will provide the learners understanding of basic concepts of Internet and web technologies. Make use of the application of standard user – centric website design. Learning Objectives At the end of the lesson you should be able to: 1. Define the following terms:...

Overview This lesson will provide the learners understanding of basic concepts of Internet and web technologies. Make use of the application of standard user – centric website design. Learning Objectives At the end of the lesson you should be able to: 1. Define the following terms: a. Internet b. Intranet c. World Wide Web 2. Understand how the Internet works and the technology behind it. 3. Recognize the difference between Intranet and Internet. 4. Familiarize with the World Wide Web. 5. Familiarize with technologies, features to learn web development. 6. Familiarize with the industry standard and user-centric website design. 7. Understand the importance of website. 1. INTERNET A worldwide system of computer networks-- a network of networks in which users at anyone computer can - if they have permission - get information from any other computers. Internet is defined as an Information super highway, to access information over the web. The Internet is a vast network that connects computers all over the world. Through the Internet, people can share information and communicate from anywhere with an Internet connection. 2. INTRANET Intranet is defined as private network of computers within an organization with its own server and firewall. It is used to securely share company information and computing resources among employees. An intranet can also be used for working in groups and teleconferences. Intranets encourage communication within an organization. They let employees easily access important information, links, applications, forms and databases of company records. A database that includes all the usernames of employees who have access rights to the network is often used to maintain intranet security. 3. WORLD WIDE WEB The World Wide Web (WWW), often called the Web, is a system of interconnected webpages and information that you can access using the Internet. It was created to help people share and find information easily, using links that connect different pages together. The Web allows us to browse websites, watch videos, shop online, and connect with others around the world through our computers and phones. 3. WORLD WIDE WEB All public websites or web pages that people may access on their local computers and other devices through the internet are collectively known as the World Wide Web or W3. Users can get further information by navigating to links interconnecting these pages and documents. This data may be presented in text, picture, audio, or video formats on the internet. HOW THE INTERNET WORKS? There are two main concepts that are fundamental to the way the Internet functions: packets and protocols. The Internet works through a packet routing network in accordance with the Internet Protocol (IP), the Transport Control Protocol (TCP) and other protocols. HOW THE INTERNET WORKS? PACKETS In networking, a packet is a small segment of a larger message. Each packet contains both data and information about that data. The information about the packet's contents is known as the "header," and it goes at the front of the packet so that the receiving machine knows what to do with the packet. HOW THE INTERNET WORKS? PROTOCOLS In networking, a protocol is a standardized way of doing certain actions and formatting data so that two or more devices are able to communicate with and understand each other. There are protocols for sending packets between devices on the same network (Ethernet), for sending packets from network to network (IP), for ensuring those packets successfully arrive in order (TCP), and for formatting data for websites and applications (HTTP). HOW THE INTERNET WORKS? PROTOCOLS Because all Internet-connected computers and other devices can interpret and understand these protocols, the Internet works no matter who or what connects to it. HOW THE INTERNET WORKS? To further understand how does the internet works, lets watch a short video. https://www.youtube.com/watch?v=Sfzo4xm5eX8&ab_channel=B LASTERTECHNOLOGY INTERNET PROTOCOL (IP) The Internet Protocol (IP) is the method for sending data from one device to another across the internet. Every device has an IP address that uniquely identifies it and enables it to communicate with and exchange data with other devices connected to the internet. Today, it’s considered the standard for fast and secure communication directly between mobile devices. Transmission Control Protocol (TCP) Transmission Control Protocol (TCP) is a communications standard that enables application programs and computing devices to exchange messages over a network. It is designed to send packets across the internet and ensure the successful delivery of data and messages over networks.  TCP and IP are separate protocols that work together to ensure data is delivered to its intended destination within a network. IP obtains and defines the address—the IP address—of the application or device the data must be sent to. TCP is then responsible for transporting and routing data through the network architecture and ensuring it gets delivered to the destination application or device that IP has defined. Both technologies working together allow communication between devices over long distances, making it possible to transfer data where it needs to go in the most efficient way possible.  The Internet is a network build by the interconnection of a large number of computer networks that is not owned by any entity. It is not admin by any administration and any person in the world can join it. TCP/IP protocol is the main impelling agent for the internet used by the connected networks apart from other protocols like FTP, HTTP, and SMTP. Key Differences The Internet is a wide network of computers that is available to all whereas Intranet is a network of computers designed for a certain group of users. Internet is a public network and Intranet is a private network. Internet contains various source of information while Intranet only contains group-specific information  Web development technologies refer to the multitude of programming languages and tools that are used to produce dynamic and fully-featured websites and applications. Front-end technologies are for the “client side” of your website or application. They’re used to develop the interactive components of your website, and produce the elements that users see and interact with. This includes text colours and styles, images, buttons, and navigation menus. Back-end technologies are for the “server side” of your website or application. They’re for developing the technical foundation. They store and arrange data and make sure everything on the front-end works. For example, when a user provides login credentials to a social media application, back-end technologies are used to check if those credentials are accurate. Once the credentials are verified, the server will send back the profile name, picture, and other associated information. 1. HTML - stands for Hyper Text Markup Language. It’s one of the fundamental technologies required for web development. It provides the base structure for a web page. HTML code ensures that all the content on a website is properly formatted. This is so your Internet browser can display the content as intended. Without HTML, a browser couldn’t display text or load images and other elements. 2. CSS - Cascading Style Sheets, abbreviated as CSS, define the style and aesthetics of a web page. While HTML is used to structure a web page, CSS specifies the appearance of that structure. This includes page layouts, colours, fonts and element positioning. If HTML is the bones of the web page, CSS is the skin. It makes the Internet, and your website, look good. 3. Programming languages - are ways to communicate with computers and tell them what to do. They provide a vocabulary and set of grammatical rules to instruct a computer to perform specific functions. JavaScript PHP Python Java 4. Web Development Frameworks Are tools and libraries that developers use to make developing in a particular language easier and more efficient. They provide interfaces to access commonly-used functionalities as well as abstractions that make complicated things easier to understand and handle. Essentially, they make the development process more efficient because developers have a pool of code resources to draw from when developing. Example: Angular (Front-end), Node.js (Back-end) 5. Libraries Libraries are collections of files, programs, routines, scripts or functions that can be integrated when writing code. Libraries work by grouping snippets of code together to enable functionality so you don’t have to write the code yourself. Like frameworks, they mitigate the risk of improper coding, make the development process more efficient, and save you money. 5. Libraries However, libraries are different than frameworks. A framework defines and structures your build. Libraries are resources you can freely integrate into a build of your own structure and design. They’re often used for more specific functions or features while a framework is a more complete development tool. Examples are: React.js, Vue.js, FacebookSDK 6. Databases Databases are where all your data is stored. However, they aren’t just random digital filing cabinets. They provide a consistent, organized structure for storing and retrieving large amounts of data. There are two main types of databases: SQL and NoSQL. SQL Databases SQL databases use structured query language (SQL) to define and manipulate data. SQL is the language with which a coder communicates with a database in order to manipulate the data held within. Because SQL databases all use the same language you must use predefined schemas to determine the structure of your data. Your data must also follow the same structure which can require some upfront preparation. Example: MySQL NoSQL Databases NoSQL databases don’t use structured query language (hence the name) so data can be stored in many ways. This means that you can store data without first defining it’s structure. Also, a NoSQL database enables all your stored data to have its own unique structure without being defined by the database’s structure itself. Example: MongoDB  User-centered web design is defined as the objective of designing to increase the usefulness as well as usability of websites. There are many factors that apply to both usefulness and usability; navigability and efficient information retrieval are just two examples.  The User-centered design (UCD) process outlines the phases throughout a design and development life-cycle all while focusing on gaining a deep understanding of who will be using the product. The international standard 13407 is the basis for many UCD methodologies. It’s important to note that the UCD process does not specify exact methods for each phase.  According to Userfocus , there are multiple principles that underlie user centered design. Design is based upon an explicit understanding of users, tasks, and environments; is driven and refined by user-centered evaluation; and addresses the whole user experience. The process involves users throughout the design and development process, and it is iterative. And finally, the team includes multidisciplinary skills and perspectives. The following are the general phases of the UCD process: Specify the context of use: Identify the people who will use the product, what they will use it for, and under what conditions they will use it. Specify requirements: Identify any business requirements or user goals that must be met for the product to be successful. The following are the general phases of the UCD process: Create design solutions: This part of the process may be done in stages, building from a rough concept to a complete design. Evaluate designs: Evaluation - ideally through usability testing with actual users - is as integral as quality testing is to good software development. Remember… There are many variations of the UCD process. It can be incorporated into waterfall, agile, and other approaches. Depending on your needs, the user-centered design process is composed of several methods and tasks. What you are developing, your requirements, team, timeline, and the environment in which you are developing will all help determine the tasks you perform and the order in which you perform them. Reasons why website is important First impressions count Window shopping is not what is used to be No website means losing business The importance of website for business Visibility ▪ Utilizing a website builder to establish your online presence as an e-commerce store Share your history and vision for the future Your biggest competitors are already online Strictly operating in a social media platform is unwise Attract top talent to your company Content marketing becomes much easier.