Lesson1.pptx

Application Development & Emerging Technologies R OX AN S O B R E DI LLO -T RI L LE S , MI T IN S T R U C T O R Course Description The course Application Development and Emerging Technologies covers the advanced syntax of PHP; such as, object orientation, dynamic functi...

Application Development & Emerging Technologies R OX AN S O B R E DI LLO -T RI L LE S , MI T IN S T R U C T O R Course Description The course Application Development and Emerging Technologies covers the advanced syntax of PHP; such as, object orientation, dynamic functions and variables, and self-modifying code. It also gives the students an overview of project planning principles, coding styles, and application design. This course provides the necessary base for fast, productive development of industry-quality Web applications. Learning Objectives LO1: Explain the fundamental concept of the web LO2: Use code versioning LO3: Apply the concept of PHP LO4: Use and apply JavaScript Basics and Dev Tools in the program Learning Objectives LO5: Apply the JavaScript Loops, Objects, and Arrays in the program LO6: Apply the fundamental concept of Document Object Model LO7: Apply the jQuery basic in the web program LO8: Write a program using AJAX LO9: Develop a working web application system Introduction to the Internet and Web LEARNING OUTCOME 1: EXPLAIN THE FUNDAMENTAL CONCEPT OF THE WEB What is the Web?  The web is a whole bunch of interconnected computers talking to one another. The computers (on the web) are typically connected by phone lines, digital satellite signals, cables, and other types of data-transfer mechanisms. A ‘data-transfer mechanism’ is a nerd’s way of saying: a way to move information from point A to point B to point C and so on. What is the Web?  The computers that make up the web can be connected all the time (24/7), or they can be connected only periodically. The computers that are connected all the time are typically called a ‘server’. Servers are computers, with one major difference, they have a special software installed called ‘server’ software. What is the Web?  The Web (World Wide Web) consists of information organized into Web pages containing text and graphic images.  It contains hypertext links, or highlighted keywords and images that lead to related information.  A collection of linked Web pages that has a common theme or focus is called a Web site.  The main page that all of the pages on a particular Web site are organized around and link back to is called the site’s home page. What is the function of server software / programs?  Server software is created to ‘serve’ web pages and web sites. Basically, the server computer has a bunch of web sites loaded on it and it just waits for people (via web browsers) to request or ask for a particular page. When the browser requests a page the server sends it out. How does the web surfer find a web site?  By typing in the URL, or in other words, the web site address. So for example, if you wanted to find the web site www.facebook.com, you would type in the address into your web browser’s address bar or maybe use your ‘favorites’ or ‘bookmarks’ link to Facebook.  There are other ways to find web sites (like search engines,) but behind the scenes web sites are all being found by going to the web site’s official address. How does a website get an official address so that the rest of the web can find it? Registering your domain name - registering a domain name gets you an official address for your web site on the World Wide Web. With this ‘official’ address, the rest of the web can find you. What Is Domain Name Hosting?  When you buy a domain name, you are purchasing the right to use that name exclusively for a certain predetermined length of time. On the back end, your domain name host will register that domain name using the Domain Name System (DNS), so that you can use it for websites, email, or other domain services. ex. GoDaddy, Bluehost, Domain.com, Namecheap How to Choose the Right Domain Name Hosting for Your Needs  Support Options - Consider the hours of availability for customer support and what channels are available —live chat, telephone, email, etc.  Privacy/Security - Website security is important to keep in mind when shopping for a domain name hosting provider. At the very least, your website should have an SSL certificate. In time, you should also consider getting a firewall and malware scanning capabilities for your server. How to Choose the Right Domain Name Hosting for Your Needs  Speed/Storage Space - A small website, with just a couple of images and no videos or built-in web applications, will probably get by on less than 5GB of storage, while a large online store could easily use 100GB or more.  Cost - Consider carefully which services you actually need, then compare what each host charges for them to help you narrow down your final choice. Different Types of Websites Personal Websites These types of websites are designed to exhibit an individual’s profile. Personal website can contain range of information about a particular individual such as personal information, interests, educational information, professional experience, portfolio, testimonials, links to social media and contact information. These kinds of websites are very useful for freelance workers to showcase their work and also professionals to have an online presence. Different Types of Websites Brochure Type Websites These are usually a static websites and are built to provide information about a business. The main purpose of a brochure type website is to have information about the business, its nature, products, services, location, opening hours and contact details. A basic brochure style website can have about 4-5 pages like, home, about us, our products, location and contact us. Different Types of Websites Information Websites The name itself reflects its kind. The purpose of an information website is simply to serve information about any particular subject. These types of websites can be built focusing on specific keywords such as ‘Nokia Lumia 520’ or an entire subject such as ‘Nokia mobiles’ or even can focus generally as ‘mobile phones’. An information website will contain lots of articles; a good example for this type of website is Blogs. Different Types of Websites Social Media Websites Nowadays we are very familiar with these types of websites. Social media is a popular way of social communication. These sites are made in a way of accepting user registrations and letting them to have their own profile in the website. Users are allowed to upload and share contents with others. Users can also engage with those contents and with other users. Facebook, Myspace, Twitter are great examples of social media websites. Different Types of Websites E-Commerce Websites The purpose of an e-Commerce website is to reach the online market and do business over the internet. An e-Commerce website can be used to sell and buy products or services online. These types of websites will have one or more payment gateways to process online transactions. Popular examples for these kinds of websites are ebay.com and amazon.com. Different Types of Websites Educational Websites These types of websites are built by academic institutes or related organizations to provide information about education and courses they offer. It also can have features like user registration etc. to make users to engage with the website contents and other registered users. Users of these sites are usually students or the teachers of the institute. Different Types of Websites Content Management Systems (CMS) Content Management System is a web based system used to manage contents of a website. It will have a user friendly interface to add, modify or remove contents displayed in a website, users with little or no technical knowledge can perform these tasks easily. CMS can be built for all types of websites discussed above but will add some additional cost for its development. However it helps to keep the website up-to- date and dynamic. Phases of Web Development Life Cycle The software and web development life cycle adheres to a specific standard that has to be followed to move in the right direction. There are frameworks, methodologies, modeling tools, and languages involved. Stage 1: Gathering Relevant Information The first stage is the most important as it involves understanding the client’s requirements. Identify their needs and help them in providing the perfect solution. Have a clear idea about the target audience. What the business goals are and how the website will be utilized to accomplish those objectives. Stage 1: Gathering Relevant Information Purpose: What is the purpose of the website that the developer will be building? What is the actual plan: to provide information solely, sell a product or service? Objectives: What is the main goal of building the website? Whether it is informational or promotional? Stage 1: Gathering Relevant Information Target Audience: Is there is a specific group of people that will help in accomplishing your objectives? During the website design and development process, it is important to visualize what type of people would you like to visit the website. Consider their age, gender, likes, and dislikes. This will certainly help in designing the best website according to their interest. Stage 1: Gathering Relevant Information Content: 1. What type of content do you post on the site? 2. Is the audience looking for a specific type of information? 3. Are they looking for promotions, deals, or offers to avail? The news portal is different from an entertainment site, and online sites for teenagers are different from adults. Every website is different from the other, so gathering relevant information regarding the project is very important. So, it is vital to get insights so that an aesthetically appealing website is created. Stage 2: Planning – Sitemap and Wireframe ◦With all the information that has been gathered from stage one, the design and implementation strategies are planned according to the type of website and target audience. A site map is created in this phase. ◦For building a full-fledged website having impeccable features and functionalities, it is important to plan wisely. There has to be a detailed list of all the areas of the website and the sub-topics. This is a guide that describes what content will be there on the site, and there is an easy to understand navigational system. Stage 2: Planning – Sitemap and Wireframe ◦Think of the best user interface that is created for easy navigation. The wireframes give an outline of the pages of the website. ◦Take the help of tools for creating the wireframe. All the planning process should have the involvement of the client. So, the client has an idea about the blueprint of the project. Stage 2: Planning – Sitemap and Wireframe What is a Sitemap? What is a Wireframe? ◦ A sitemap is a categorization of pages, a o A wireframe and sitemap can be kind of table of contents outlining what sometimes confused as they pages relate to which content on a website. A sitemap allows users to see the both relate to the layout of a layout of your pages and the order of their website. However they have one hierarchy. major difference; a wireframe ◦ If you open a book, it will begin with a relates to the visual design of a title, chapter and title names of each of website whereas a sitemap the chapters, showing the reader where to shows the process of which locate what information. A wireframe, instead, is a visual design blueprint of pages relate to each content. what your site will look like and is used by designers before the website is created. Sitemap Wireframe Stage 3: Design & Layout Next is to determine the look and feel of the website. In the design phase, it is essential to embed elements like the logo of the company and the colors that help to enhance to identify the company on the website. The designer gives life to the graphics, typography, colors, animations, buttons, drop-down and pop-up menus, and more as per the project requirement. Stage 3: Design & Layout It is the responsibility of the web designer to create one or more than one prototype for the website. This is basically a jpeg image of the final design. Designers give companies access to the workflow so that they can view the progress of the development. Meeting the demand of the audience with the help of web design is also crucial. If the design is mundane, the website will not be able to capture the user’s attention, and this will increase the bounce rate. The elements should reflect the brand image as well as the business vision. Stage 4: Development The development is a stage where the website is built while maintaining the essence of the website’s purpose. All the graphic elements are taken into consideration and are used to generate a functional website. The process begins with first developing the home page followed by the interior pages. The main focus is given to the navigational structure of the site. Content Management System, interactive contact us forms, shopping carts are made functional in this development step. The web design & development company suggest changes that are done after consideration. Stage 5: Testing, Review, and Launch After the completion of web development, it is tested. The functionality is tested along with the device compatibility. The web designer should be well-versed with the current trends and standards so that the design and development are done accordingly. The technologies used are HTML and CSS. The tester validates the codes written for the website. When the designer is given the final approval, the website is ready for delivery. The quality assurance team tests for functionality, compatibility, and performance to ensure that the website is ready for the launch. Other testing includes integration testing, stress testing, scalability, load testing, resolution testing, and cross-browser compatibility. Once the green flag is shown, it is deployed to the server using FTP. Stage 6: Maintenance and Updates The web development stages don’t end after deployment. There are many post-deployment tasks that take place. Some elements are changed as per the user’s feedback, support, and maintenance. One good way to grab potential visitors and repeat their visits is to keep updating the content and adding new products on a regular basis. The website drives by CMS allows the customer to edit the content. Create a system proposal that fits your interests. Provide the following: Background: Provide context for the project, including any relevant history, existing systems, and reasons for proposing a new system. Problem Statement: Clearly define the problem that the proposed system is intended to solve. Purpose of the System: Explain the main goals and purpose of the system. Functional Requirements: a detailed description of the features and functionalities the system must have. User Interface Design: Propose the layout and design of the user interface, including wireframes and a sitemap.