- View Solutions
- Find Mentors
- Contribute Projects
Learn programming with curated Web development projects
Bridge the gap between theory and real-world code by working on curated web development projects. Use DevProjects as practice or enhance your portfolio with these fun web development project ideas. From beginner web development projects to more advanced ones, find your next coding project now.
Web development project ideas
Alpaca image generator website.
At DevProjects, we love alpacas! It's our mascot, and we'd love for you to have your own alpaca profile photo. With that said, this project is not just about alpacas. Allowing users to generate and download avatars are common in many interactive websites. In this project, you'll learn how to create an image generator website that allows users to generate, combine, and download images. This project should take you approximately 8 hours to complete.
Build a screenshot pipeline
Set up a CI/CD workflow which will produce a screenshot of your homepage and keep it updated as you keep changing the code. This kind of always-up-to-date screenshot can be useful for your README or as the basis of marketing materials that include screenshots of your website. You can even use these images to perform [visual regression testing](https://medium.com/loftbr/visual-regression-testing-eb74050f3366)!
Random number generator web app
There are various use cases for a random number generator. You could do a random dice roll or get a random quote. Most of the time, the implementation is relatively straightforward and similar to this project’s approach. In this project, we will create a dice roll simulation.
Link shortener website
In this project, you'll learn how to build a website that shortens URLs. Optimizing the length of your website's URLs is useful on space-sensitive forums, helps websites rank better in search results, and are also easier for users to type out.
Build a custom google maps theme
In this project, you’ll be creating and styling a Google Map with a theme and custom marker images. You’ll use Google Cloud Platform to create the map, and also use the Google Maps JavaScript API to load the map on a website. I’ve created a Super Mario themed map here but you are welcome to use any style you’d like!
Mortgage calculator web app
Taking out loans and calculating monthly EMI can be confusing and stressful. However, with the help of a mortgage calculator, anyone can easily plan their mortgages out. You will build a mortgage calculator in this project!
Appointment management system
An appointment management system is a software used by companies and service providers to streamline their service appointments. By using the system, potential customers can know and choose their preferred appointment times according to the companies and service providers' available time slots. This project does not include a B2C marketplace-like interface for customers to browse different service providers.
Joke telling bot web app
Whether it's smartphones, cars, or speakers, voice assistants are becoming more and more integral to our everyday lives. Not only so, voice assistants are gaining traction in companies to help streamline operations like Customer Service. In this project, you'll build a full-fledged Joke telling robot web app using Web Speech APIs, which can be applied to both web apps and mobile apps.
Road trip planner
As travelling restrictions are beginning to be lifted globally, maybe it’s finally time for you to plan that roadtrip! In this project, you’ll give users the opportunity to list out the destinations they want to visit, let users order them, and display the best route between destinations. There are many ways you can enhance this project and share it with friends and family. Depending on how much extra challenge you take on, this project should take around 20 hours.
Random color palette generator web app
In today's world, design is everything. Choosing the right color palette for a product or website will help evoke different emotions you'd like your audience to experience. You'll build a full-fledged random color palette generator web app using Colormind API, which can be used for both web apps and mobile apps.
Create a fast and secure blog using JAMStack
With performance being at the forefront of developers minds, you’ll be creating a site using JAMStack, which means your website will be super fast and will have better security, among other benefits. You’ll be using a Static Site Generator (SSG) to create a personal blog, including featured articles on the homepage, an articles page with pagination to older content, and individual blog posts, all without a database.
Speed typing game
Speed typing test websites are useful for people who want to learn to type faster, type without looking at their keyboards, practice typing specific sets of entries (think numeric tests, address test, emoji test?), or get used to a new keyboard. This project will take 20 to 40 hours, depending on your coding experience and how much searching you need to do.
Daily sleep tracker web app
Irregular sleeping patterns are a common problem. This web app will fulfill the user's needs in tracking their sleeping patterns, including duration and timings. You will create a web app to track three parameters: sleep time, wake up time, and sleep duration. Users can add, edit, or remove any sleep entries.
Medicine dose tracker web app
You’ll build a web app with a simple UI where a user can sign up for an account. Once logged in, the user is presented with a simple form to add medicine name, dosages, and frequency. After adding those details, the user can view, edit, or delete this information. The rough estimate for this project is 20 hours.
Looking for more Web development projects?
Subscribe to get notified when new Web development projects are published.
Browse more projects
More coming soon...
How can DevProjects help me practice web development ?
Real-world web development projects
Bridge the gap between learning and applying new skills through projects designed by senior developers.
Community discussion
Learn and grow together by asking questions and discussing projects, reviewing code, and giving feedback.
Feedback on your web development code
Share your project code to get feedback on code structure, technical decisions, tradeoffs you've made, and more.
Get one-on-one Web development help
Codementor is a community of 12,000+ developers who help each other grow through one-on-one mentorship.
What is web development and why should I learn it?
Web development involves building a website on the Internet. While developing a website often involves creating designs, information architecture, and content, web development only focuses on the programming side. Many products are web-based and some mobile apps are built with web technologies as well. As such, learning web development is crucial. There are three types of web developers: front end, backend, and fullstack. A front end web developer is responsible for the behavior and visuals on the user-facing browser, while a backend web developer deals with the servers. Some of the commonly used languages for front end web development includes JavaScript, HTML, and CSS and backend includes JavaScript, Java, Python, PHP, and Ruby. A fullstack web developer covers both front end and backend. There’s a lot of debate on front end vs back end. The debate mostly centers on the earning potential of web programmers. On average, a backend web programmer earns more than a frontend web programmer. While salary is a realistic factor to consider, your background and interest should also be considered. They will play important roles in kick starting and sustaining your web development career. As to the question “how long does it take to learn web development?”, to get the basics down, it only takes a couple of months! But to master web development is a life-long journey.
Why should I practice web development by building projects?
Project-based learning is a method of learning where you learn a skill through working on a project. This type of learning allows you to learn not only the theory, but also how to apply those skills. By building a web development project, you'll practice the high-level logic of your code and project, and see how each individual line can impact your application. You will also gain problem-solving skills and how to fix it. With so many web development projects available, finding an idea that interests you will make the learning process more fun and sustainable. When you finish building a project, you will have learned and practiced web development techniques, gained problem solving skills, learned how to ask questions, and have a finished project to show off.
How do I know which web development projects are best for learning web development?
The best way to learn web development is to practice web development by building as many projects as possible. There are three factors you should consider when picking the right web development project: your skill level, goals, and interest. You want to have a good idea of your skill level and choose web development practice projects that are not too easy or too hard for you. If you work on web development projects that are too easy, you won’t progress in your coding abilities. However, if you choose projects that are too difficult, you may get stuck, never finish the project, and feel discouraged. Therefore, you want to choose web development projects that are just a little bit above your current skill level. Now, you also want to build web development projects that not only allows you to practice web development, but also lets you show off your skills on your portfolio. So think about the types of web development projects you want to put on your portfolio and jobs you’re interested in as a developer. Think about what your long-term goals are and pick web development projects that align with them. Lastly, you definitely want to choose web development projects that you’re actually interested in and feel connected to. Learning by building web development projects you’re interested in will help you stay motivated. You’ll also be more likely to want to go above and beyond to make your web development project stand out in the crowd.
Can web development beginners learn by building web development projects?
web development projects are a great way for beginners to learn. Two major obstacles beginners face when learning web development are not knowing why you’re learning web development and losing motivation. By learning web development through building projects, you will be able to overcome both hurdles. When you’re learning web development, you may not know how to apply web development theories in the real world. But when working on beginner web development projects, you immediately learn how each line of code impacts your project. By giving theory context, you’ll understand how to apply theories and find more resources to complete your web development project. These web development projects for beginners can also help you build up your portfolio early on. Each web development project you finish can be incorporated into your portfolio to demonstrate your new skills. Another issue that often comes up for beginners is losing motivation. However, when it comes to projects, you can pick a beginner web development project that you’re interested in. Not only will you be more motivated when you work on something interesting, you’ll also want to continue to improve the project. As your web development project comes together, the sense of accomplishment will give you the momentum to keep going, even when things get hard. Additionally, you’ll learn how to approach problems from multiple angles and teach yourself how to search for answers. The ability to problem-solve is arguably one of the most important skills a developer should have.
12 intriguing web development projects (beginner + intermediate)
Becoming an in-demand web developer takes more than book knowledge. While it’s great that you made it through your first courses, experience is what it will take to succeed in the field. When you go in for an interview, you're almost guaranteed to be asked about what you’ve built outside the classroom.
Luckily, there’s no shortage of web development projects you can dive into and expand your current skill set. The more you practice what you’ve learned, the easier it will be to translate that to real-world requests from employers and clients. Below is a list of excellent web development project ideas for beginning and intermediate developers.
Why is it important for beginners to work with multiple web development projects?
Learning to build a variety of web projects helps prepare you to handle anything. It’s impossible to master every language or back-end framework. But exposing yourself to different project types and languages enables you to refine the most important skill a developer can have, problem-solving.
It pays to put in the work to grow your development muscles. According to the Bureau of Labor and Statistics (BLS), the demand for web developers is expected to grow by 23% through 2031. The great thing about web development is that you don’t need a fancy degree to get into the field — only a commitment to improving and the drive to push through challenges.
Everything on our list below teaches you skills to apply to various other projects. You’ll better understand web design workflow and when to apply certain concepts. Use what’s here to sharpen your skills, then move on to more challenging development to continue testing your skills!
What skills are needed to become a web developer?
Web developers who excel have a good grasp of front-end and back-end languages. You’ll also need to have a good understanding of the following:
Developing web content
Working with client- and server-side scripting
Securing websites
Web developers are responsible for building web page layouts. Today’s websites need user-friendly designs that adapt to different screen sizes. You’ll need to understand how to troubleshoot your websites using your problem-solving skills.
Below is the fundamental knowledge you'll need to have as a web developer:
JavaScript
Using version control software like GitHub
Working with databases and servers
Back-end programming consists of two types of programming languages. Popular object-oriented languages include C#, Java, and Python. Functional languages widely in use by web developers include F# and Clojure.
Many web developers also know how to build mobile applications using languages like React Native, which is handy if you want to add Android development to your wheelhouse.
12 beginner web development projects to fine-tune your skills
The following project ideas will help enhance your software development skills. You can build these projects from scratch, seek tutorials that walk you through the intricacies of each application, or look for open-source projects to modify. It helps to find ways to work in other coding paradigms, like working with algorithms, data structures, and different database types like MongoDB.
Keep in mind that there are many plugins available to help enhance your web development projects. You should also try to work in popular front-endJavaScript frameworks like ReactJS and Angular. Full-stack web development is an essential skill sought by organizations in various industries. Make sure you invest in a quality integrated development environment (IDE). There are also many online code editors you can practice with, like JSFiddle .
Keep your web development projects organized with project planning software. See how Teamwork’s world-class solution is ideal for your team !
1) Build a one-page layout
Single-page layout pages contain only one HTML page. You won’t find an About page or anything other than a Home page. Many developers go with single-page layouts to make the user experience more fluid and continuous for users. They move from one spot on the page to another using navigation links or scrolling down to look at different content sections.
Clients might hire you to design a single-page layout for a portfolio or event website. Businesses may call upon you to add a new page to their site. New coders can do this easily using vanilla JavaScript, PHP, HTML, or CSS.
Building single-page layouts lets you practice basic web layout skills like setting up columns, dividing pages into sections, and working with headers and footers. You also get the chance to use some creativity using images and color pallets. How you pad and align various elements makes a big difference in the look of your page.
2) Create mock landing pages
Landing pages are where you land whenever you click on a hyperlink. These standalone pages are designed to provoke a response from a visitor. For example, an e-commerce site might have a landing page for a project with visual prompts designed to encourage you to make a purchase. Other actions you might want from visitors include:
Downloading documents
Signing up for free product trials
Registering for webinars
Home pages are not the same as landing pages. The former typically contains navigation menus to help visitors get around the site. Landing pages usually have no menus at all. Visitors are encouraged to remain longer and click on a call-to-action button. HTML, JavaScript, and CSS are essential skills for designing landing pages.
The main goal of landing pages is to convert site visitors based on a company’s goals. Some think of a conversion as getting someone to provide their email address, while others strictly look at purchases. Designing mock landing pages gives you a better sense of how to help companies achieve their stated conversion goals.
3) Make a background generator
The nice thing about designing a background generator project is that it is fun and not labor-intensive. Creating something like this helps you understand the basics of manipulating the DOM and making websites look more dynamic.
Every development project you tackle doesn’t need to be complicated. A background generator project is something you can use more than once. As a full-time developer, you might be called upon to build similar applications multiple times for different clients. Once you get the logic down through practice, it becomes a core skill you can set up quickly.
4) Create a Netflix clone using React
The best way to get used to a new JavaScript framework is by building something familiar. Netflix is one of the most well-known brands in the world. You can use your new React skills by building a clone of their site. Tackling this project helps you become more familiar with concepts like:
React elements
React components
React Router
Event handling
Form handling
Synthetic events
Make the project more challenging by deploying your React Netflix clone using Firebase, a Backend-as-a-Service tool that helps developers build quality applications. Learning to work with tools like Firebase is a bonus when making the React app.
5) Build a multiplayer game of Connect Four
One language beginners should practice as much as JavaScript is Python. You can do that by using the language to build a Connect Four multiplayer game. It helps to think about what you want to achieve, then work out the steps you’ll need before typing out your first line of code. That’s a good motto for any development project.
You get the chance to practice Python concepts like using Lists and the input() function. The challenge also comes from learning to apply your computational and creative skills to a web project. You’ll have to figure out how to structure data to make it easier to determine a winner. Other considerations include deciding which bits of logic need an individual function.
The versatility of the Python language makes it optimal to learn as a first language alongside JavaScript. The language is concise, reads easily, and looks great when you include it as part of your programmer stack. Python is also great for building data science and software applications.
6) Create a URL-shortening tool
Building a URL-shortening tool is an excellent way to learn to work with third-party application programming interfaces (APIs). Essentially, a user enters a valid URL, then clicks a button or link requesting to shorten it. The final shortened URL should display back to the user.
The basic presentation elements of the project include the following:
A text input for the user to add their URL
A button or link that triggers the action to “shorten” the link
A display area for the shortened link for the user to copy and use as needed
Choose a web development language or framework you wish to become more adept at using. You can use stacks like Angular, React, and Vue to call your choice of API to shorten the URL. To make it harder, you can develop unique logic to shorten the URL within your web application. You can also build your URL-shortening tool using JavaScript or Python.
7) Make a quiz/study app
Building quizzes or study apps are good ways to master a new language. You can use PHP, HTML, and CSS to develop your project. Use PHP to design the page template with a question-and-answer form for your questions and answers. You’ll need a second form to present solutions back to a user and a score.
Again, PHP is only a recommendation. You could do the same in another language like Python, Java (NOT JavaScript), or Rust. It’s about expanding your skillset and becoming comfortable with building different types of projects.
8) Build and launch a login authenticator
Login authenticators are essential to helping businesses protect their servers and keep out unauthorized users. It’s probably one of the critical skills you’ll need if you plan to focus on business website development. Authenticators make users complete an authentication process to prove their identity. They are only allowed access once they provide the correct information.
It’s up to you which language you choose for the project. JavaScript is always a great choice if you’re looking to expand your skills in that area. However, you can use any back-end language to build your login authenticator, including C# and PHP. Your goal should be to keep anyone out of a site if they can’t prove their identity.
9) Make a JavaScript quiz game
Try building a quiz game using only JavaScript. Building the basic game framework from scratch can be a challenge for beginners. Creating a quiz game is one of the worthiest projects you can tackle. You’ll have to build a web page containing multiple-choice options for answers. Users must make their selections, submit answers, and see them displayed back.
You can use HTML for structure and CSS to make it interactive and appealing. Use JavaScript to build your detection engine. It should be able to determine if users picked the correct answer and show them the results. A JavaScript quiz game is also an excellent opportunity for beginning developers to get more familiar with using arrays, DOM manipulation, and setting up event listeners.
Notice a theme here? As you can see, JavaScript is an awesome and flexible language. We consider it a core skill for any developer to learn. It’s hard to think of anything you can’t build using JavaScript.
10) Build an SEO-friendly website
Search engine optimized (SEO) websites get more visibility in organic search results. The goal is to have a website pop up when a user enters specific phrases into a search engine like Google or Bing. Getting to the top of search results draws more traffic, representing an opportunity for businesses to achieve more conversions through their websites.
Developers typically focus on the look of a site and its functionality. While you don’t have to become a full-blown marketing guru, it pays to have a basic grasp of SEO and how to apply it to websites . Use this project to practice setting up user-friendly URLs, integrate responsive design, and include technical SEO elements to help strengthen a brand’s online presence.
Need some additional website planning support? Check out Teamwork’s website project plan to streamline your process.
11) Create a “two-truth and a lie” game with Slackbot
Building a Slackbot project offers a nice change of pace from standard website development. You can program Slackbots, or Slack chatbots, to handle queries from people, including the two truths and a lie game you will be building.
You’ll also need to know JavaScript and NodeJS to build your application. The goal is to initiate a game whenever someone new joins a Slack channel. Your new Slackbot will need to support the following functions to encourage everyone in the channel to get to know each other better.
Send notifications when a new user joins a channel.
Prompt the new user to tell everyone two truths and a lie.
Ask other users to identify the lie in the new user’s statement.
Send notifications to all members about whether they had the correct guess.
12) Build a weather forecasting app using APIs
Get more practice with APIs by building a weather forecasting app using JavaScript. Building this project will also give you more familiarity with using AJAX components. You’ll also get another chance to practice your JavaScript, JQuery, and HTML layout skills.
Below are the basics of what the user should be able to accomplish with your weather app:
Enter the name of a city.
Provide a specific location.
Click a button or link to generate the action.
Call a weather API and bring back results for the user.
Organize your web development projects with Teamwork
A critical aspect of web development is the ability to organize your tasks. Teamwork lets you see everything your development team is working on — all in a centralized location. You can communicate with each other and ensure that projects remain on track. See the benefits of Teamwork in action: Sign up for free today !
Resources to stay productive and profitable
Related resources.
How to create a project management plan
Guide to website project management
Project management software for Mac users
How to create a project charter
Guide to Agile project management
Stay in the know
Subscribe to get the latest and greatest posts sent straight to your inbox.
Subscribe today and get a weekly digest delivered straight to your inbox.
Only great content. Cancel anytime.
Get started with Teamwork
Start working together beautifully. See how Teamwork can help your team with our 30-day free trial.
We've updated our privacy policy. Click here to review the details. Tap here to review the details.
Activate your 30 day free trial to unlock unlimited reading.
Web Development on Web Project Report
You are reading a preview.
Activate your 30 day free trial to continue reading.
Check these out next
Download to read offline
Web development on web was part of a project in the final year of Engineering to demonstrate the implementation and application of SaaS using Microsoft Silverlight. The application facilitated creation of web pages without having a need to install any HTML editor based software.
Recommended
More Related Content
Slideshows for you (20).
Viewers also liked (19)
Similar to Web Development on Web Project Report (20)
More from Milind Gokhale (20)
Recently uploaded (20)
- 1. A PROJECT REPORT ON “Web Development On Web” Version: 1.0 FOR “ Persistent Systems Limited ” BY MILIND H GOKHALE AMIT S GOSAVI AARTI S MAVLINGKAR MANASI A SAHASRABUDHE DEPARTMENT OF COMPUTER ENGINEERING P.E.S MODERN COLLEGE OF ENGINEERING PUNE- 411005 * [2008 – 2009] *
- 2. Guide: Internal Guide Name: Ms Deipali Gore External Guide Name: Mr. Pravin Kalel Presented By: Date Version Title Authors 10-04-2009 1.0 Web Development On Web Milind Gokhale Amit Gosavi Aarti Mavlingkar Manasi Sahasrabudhe
- 3. Progressive Education Society’s Modern College of Engineering Shivajinagar, Pune – 411005. CERTIFICATE This is to certify that the following students of Final Year Computer Engineering have successfully completed the project entitled “ WEB DEVELOPMENT ON WEB ” for the organization “ Persistent Systems Limited ”. The Group Members names are: Milind Hemant Gokhale Amit Shrinivas Gosavi Aarti Satish Mavlingkar Manasi Aniruddha Sahasrabudhe This is in partial fulfillment of Bachelor of Computer Engineering under University of Pune. Date: 10-04-2009 Internal Guide (Name of Guide) Head of Dept (Computer Engineering) (Prof. Mrs. S. A. Itkar) External Examiner
- 4. April 28, 2009 To Whomsoever it May Concern This is to certify that following students have completed their final year B.E. project at Persistent Systems Ltd. for academic year 2008-09. The project details are as below: Project Title Project Guide College Name Branch : Web Development On Web : Pravin Kalel : P.E.S Modern College of Engineering, Pune : B.E. (Computer Science) Name of Students: i. ii. iii. iv. Milind H Gokhale Amit S Gosavi Aarti S Mavlingkar Manasi A Sahasrabudhe For Persistent Systems Ltd. Baliram Mutagekar Assistant Manager - Human Resource
- 5. Acknowledgements We would like to express our heartfelt gratitude to Persistent Systems Ltd and Mr. Pravin Kalel (industrial mentor) for giving us the opportunity to work under their guidance and help us gain immensely enriching professional experience. Our sincere thanks to Project In charge and our internal project guide, Ms. D. V. Gore for giving us valuable inputs and ideas right from the selection of topic for project till its successful completion. We thank Prof. Mrs. S. A. Itkar (HOD computer department) for her ongoing support and encouragement in every aspect. Last but not the least, entire staff of Department of Computer Engineering for guiding our thoughts and vision. The successful completion of our project would not have been possible without the dedicated support from all our mentors, family and friends. Milind Gokhale Amit Gosavi Aarti Mavlingkar Manasi Sahasrabudhe
- 6. ABSTRACT Problem statement Develop an application which facilitates creation of web pages without having a need to install any html editor based software and also which can be used by any novice user. That is developing web pages on the fly (online). Problem Solution Software as a service is a model of software deployment where an application is hosted as a service provided to customers across the Internet. By eliminating the need to install and run the application on the customer's own computer, SaaS alleviates the customer's burden of software maintenance, ongoing operation, and support. Using WebyWeb application, user can develop their own web pages very easily and with minimum technical knowledge. It eliminates the need of writing lengthy lines of codes, getting entangled in error fixing process. Cloud computing
- 7. Functional Description 1. Registration is offered. Then a registered user logs into our site. 2. The WYSIWYG editor dashboard is displayed to user on which pages are developed. 3. Automatic code generation of designed page and HTML page is saved on the server. The user may preview the page on a range of browsers. Work Area – 1. Microsoft Silverlight - Microsoft Silverlight is a programmable web browser plug-in that enables features such as animation, vector graphics and audio-video playback that characterizes rich Internet applications. Aim of the project Create web pages online. Aesthetic user interface, making it an enriching experience for creation of web pages. Key Features and scope of the project 1. WYSIWYG Presto-based editor. 2. Preview websites in multiple browsers. 3. Implementation of basic HTML tags and – a. Tables b. Style formatting Images, buttons etc
- 8. Table of Contents 1 Introduction ....................................................................... 1 1.1 Problem Statement ..................................................................................1 1.2 Project Objectives ...................................................................................1 1.3 Project Scope ..........................................................................................2 1.4 Goals ......................................................................................................2 1.5 Assumptions ...........................................................................................3 1.6 Constraints ..............................................................................................4 2 Project Plan ........................................................................ 5 2.1 Project Plan ............................................................................................5 2.2 Task Sheet ..............................................................................................6 2.3 Project Management Approach ...............................................................7 2.3.1 Project Roles and responsibilities ........................................................................... 7 3 Requirement Analysis ....................................................... 8 3.1 Introduction ............................................................................................8 3.1.1 Purpose .................................................................................................................. 8 3.1.2 Intended Audience and reading suggestions ........................................................... 8 3.1.3 Project Scope ......................................................................................................... 9 3.2 Overall Description.................................................................................9 3.2.1 Product Perspective ................................................................................................ 9 3.2.2 Product Features .................................................................................................... 9 3.2.3 User Classes and Characteristics .......................................................................... 10 3.2.4 Operating Environment ........................................................................................ 10 3.2.5 Design and Implementation Constraints ............................................................... 10 3.2.6 User Documentation ............................................................................................ 11 3.2.7 Assumptions and Dependencies ........................................................................... 11 3.3 System Features .................................................................................... 11 3.3.1 WYSIWYG Presto-based editor (High Priority) ................................................... 11 3.3.2 The Design View for webpage creation ................................................................ 11
- 9. 3.4 External Interface Requirements ........................................................... 11 3.4.1 User Interfaces ..................................................................................................... 11 3.4.2 Hardware Interfaces ............................................................................................. 12 3.4.3 Communications Interfaces .................................................................................. 12 3.5 Other Nonfunctional Requirements ...................................................... 13 3.5.1 Performance Requirements .................................................................................. 13 3.5.2 Safety Requirements ............................................................................................ 13 3.5.3 Software Quality Attributes.................................................................................. 14 3.6 Project Architecture .............................................................................. 15 3.7 Technology Used .................................................................................. 16 3.7.1 Microsoft Silverlight ............................................................................................ 16 3.8 Libraries Used ...................................................................................... 17 4 Design Document ............................................................. 18 4.1 Introduction .......................................................................................... 18 4.1.1 Background ......................................................................................................... 18 4.2 Architecture .......................................................................................... 19 4.2.1 Introduction ......................................................................................................... 19 4.2.2 Data ..................................................................................................................... 20 4.2.2.1 File and Data Formats ..................................................................................... 20 4.3 Code ..................................................................................................... 20 4.3.1 Introduction ......................................................................................................... 20 4.3.2 Modules ............................................................................................................... 20 4.3.2.1 Module A: The Database ................................................................................ 20 4.3.2.1.1 Internal Functions ...................................................................................... 20 4.3.2.2 Module B: The Main Editor ............................................................................ 21 4.3.2.2.1 Internal Functions ...................................................................................... 21 4.3.3 Interfaces ............................................................................................................. 22 4.4 Operation .............................................................................................. 23 4.4.1 User Types ........................................................................................................... 23 4.4.2 Scenarios ............................................................................................................. 23 4.4.3 Installation ........................................................................................................... 23
- 10. 4.4.4 Licensing ............................................................................................................. 23 4.4.5 Upgrades ............................................................................................................. 24 4.4.6 Uninstall .............................................................................................................. 24 4.5 Development ........................................................................................ 24 4.6 Miscellaneous / Appendices ................................................................. 26 4.6.1 Conformance with standards ................................................................................ 26 4.6.2 Interoperability with other systems....................................................................... 26 4.6.3 Security ............................................................................................................... 27 4.6.4 Open Issues.......................................................................................................... 27 4.7 Analysis Models ................................................................................... 28 5 Testing .............................................................................. 34 5.1 Test Plan ............................................................................................... 34 5.1.1 Test Plan Identifier............................................................................................... 34 5.1.2 Introduction ......................................................................................................... 34 5.1.3 Test Items ............................................................................................................ 34 5.1.4 Features to be tested ............................................................................................. 35 5.1.5 Features not to be tested ....................................................................................... 35 5.1.6 Approach/Strategy ............................................................................................... 35 5.1.7 Item Pass/Fail Criteria .......................................................................................... 36 5.1.8 Suspension Criteria and Resumption Requirements .............................................. 36 5.1.9 Test Deliverables ................................................................................................. 36 5.1.10 Test Environments ............................................................................................. 37 5.1.11 Staffing and Training Needs ............................................................................... 37 5.1.12 Schedule ............................................................................................................ 37 5.1.13 Risks and Contingencies .................................................................................... 37 5.1.14 Approvals .......................................................................................................... 38 5.1.15 Test Plan Identifier ............................................................................................. 38 5.1.16 Introduction ....................................................................................................... 38 5.1.17 Features and Functions to Test ........................................................................... 38 5.1.18 Features and Functions not to Test ..................................................................... 41 5.2 Test Procedure ...................................................................................... 42 5.2.1 Black Box Testing ............................................................................................... 42
- 11. 5.2.2 Regression Testing ............................................................................................... 42 5.2.3 Integration Testing ............................................................................................... 42 5.3 Test Cases............................................................................................. 43 5.3.1 “Sign In Module” Test Cases ............................................................................... 43 5.3.2 Test case for Sign Up module with specific test data ............................................ 45 5.3.3 Black Box Testing ............................................................................................... 49 5.3.4 GUI Testing ......................................................................................................... 50 5.4 Test Oracle ........................................................................................... 51 5.4.1 Test Design .......................................................................................................... 51 Future Enhancement ....................................................... 55 Conclusion..........................................................................57 Appendix A: Glossary ..................................................... 58 Bibliography......................................................................59
- 12. Table of Contents (Tables and figures) List of Figures Sr. No. Page Number 3.1 WebyWeb UI 12 3.2 WebyWeb Architecture 15 4.1 Silverlight Architecture 17 4.2 Interpretability with other systems 26 4.3 Use Case Diagram 28 4.4 Class Diagram 29 4.5 Class diagram for interfaces and classes 30 4.6 Sequence diagram 31 4.7 State Chart diagram 32 4.8 Component diagram 33 5.1 Dreamweaver installation 52 5.2 WebyWeb Homepage 52 5.3 Insert in Dreamweaver 53 5.4 Insert in WebyWeb 53 5.5 Insert in Google 54 5.6 Insert in WebyWeb 54 6.1 Syntax highlighting 55 7.1 . Name of Figure Sample Webpage development in WebyWeb 57
- 13. List of Tables Sr. No. Name of Table Page Number 2.1 Project Plan 5 2.2 Task Sheet 6 2.3 Project Roles and Responsibilities 7 3.1 Libraries used 17 4.1 Silverlight across various browsers 27 5.1 Test case for sign–in module 44 5.2 Test case for sign-up module 46 5.3 Black box testing 49 5.4 GUI testing 50
- 14. 1. Introduction
- 15. Web Development On Web Introduction 1. Introduction 1.1 Problem Statement Develop an application which facilitates creation of web pages without having a need to install any HTML (Hypertext Markup Language) [1].editor based software and also which can be used by any novice user (No HTML knowledge needed). That is developing web pages on the fly (online). 1.2 Project Objectives The purpose of WebyWeb is to allow the user to design web pages on the fly. Existing guidelines for Web usability hinder web-based application usability since they are primarily based on interactions within a browsing metaphor. The main difference is that with traditional in-house software the user only focuses on the application itself. The application is stand-alone, installed on the users system and the IT department or network administrator takes care of the management, monitoring, updates and all other tasks related to using software in a business environment. A SaaS (Software as a Service) [2] application also focuses on this primary application part, but incorporates tasks that all together make up the SaaS application and business model. These tasks include registering, paying for the software, using support and customizing the application. A SaaS application is much more specifically directed to the customer instead of a traditional desktop application directed at the mass. This results in a higher value of design and interaction. This achieves following - Centralized Updation No installations Portable Cross Browser No piracy 1
- 16. Web Development On Web Introduction 1.3 Project Scope The software WebyWeb will revolutionize the way web pages are designed. With this software, websites can be designed in cloud without the requirement of costly website designing softwares and installations. It will provide a user friendly dashboard which will serve for all user needs. All the HTML tags may be implemented. WebyWeb is a What You See Is What You Get (WYSIWYG) editor, and will also give a code view of the page being designed. WYSIWYG means that the finished page will be display exactly the way it was designed. WebyWeb generates HTML tags while user points and clicks on the desired features. Thus, user can create web page without learning HTML. Scope WYSIWYG editor Dashboard interface Style formatting Hyperlinks Inserting images Design and code views User Sign In and Sign Up Inserting HTML form elements (radio button, checkbox) Inserting tables and editing it Zoom in and Zoom out 1.4 Goals SaaS is defined by not only delivery via the Internet, but by subscription and periodic payment. Especially these properties differ SaaS from standard web-based software. SaaS is a model of software deployment where an application is hosted as a service provided to customers across the Internet. By eliminating the need to install and run the application on the customer's own computer, SaaS alleviates the customer's burden of software maintenance, ongoing operation, and support. Using SaaS also can reduce the up-front expense of software purchases, through less costly, on-demand pricing [3]. 2
- 17. Web Development On Web Introduction By implementation of the WebyWeb project, we aim to take the above concept further and provide the user with the ability to develop web pages on internet without having the need of installations of the softwares that facilitate this process. It is a self contained product which provides improvement in the current web development scenarios. User control and freedom When a user makes a mistake, he will be able to go back and forth within an application to correct. Therefore, WebyWeb will support undo and redo. Aesthetic design WebyWeb aims the user work environment and experience to be aesthetically rich. Hence WebyWeb is designed as RIA (Rich Internet Application) [4]. Help and documentation WebyWeb will provide simple and concise instructions, prompts, embedded in the application itself. User manual will be provided for easy work environment. 1.5 Assumptions 1.5.1 About SaaSSaaS is based upon the assumption that the services provided are commonplace and well defined, hence economies of scale and balancing of supply and demand becomes possible. This assumption holds true for those areas of IT that are ubiquitous, a cost of doing business and commodity-like. SaaS is therefore not suitable for innovative or highly specialized niche systems, though SaaS may be used to provide one or more components in such systems. 1.5.2 About WebyWeb 1. Silverlight 2 plug-in installed. 2. The PC is connected to internet/ connected in intranet. 3. 512 GB RAM. 4. 1024 X 768 monitors resolution with 24 bit color. 3
- 18. Web Development On Web 1.6 Introduction Constraints Minimum number of computers is at least 2 which will limit the development process if they are not available. Since Silverlight provides rich web based interactions, resolution of screen and graphics aspects of hardware are extremely important. Installations of Microsoft expression blend, visual studio 2008, Silverlight are essentials which enable the developer to develop their application. 4
- 19. 2. Project Plan
- 20. Web Development On Web Project Plan 2.1 Project Plan Table 2.1 Project Plan 5
- 21. Web Development On Web Project Plan 2.2 Task Sheet Sr. No. Task Sub – Task Start 001 Research on Project related technologies Microsoft Silverlight, Visual Studio 08, Expression Blend 002 Acquisition of software Review of software versions, Downloads from internet, Distribution of software among project members. 003 Detail Design of project 004 Design of interface 005 Coding 006 Rich interactive elements added 007 Testing 008 Deployment of application on IIS server 009 Date Documentation 25-8-2008 27-8-2008 Study of Web editor software, Object oriented analysis, 1-10-2008 Study of modules Main Editor GUI, Dashboard, WYSIWYG editor Menus Coding for user interface events, Toolbars, Code conversion module, Study of CRUD operations in Silverlight, Implementation of database and login and sign up page Designing interactive navigation page, Falling star background, Image carousel Development of test cases Validation and verification Publishing project on server SRS, High level design, Test plan and test cases, Final Report Table 2.2 Task Sheet 6 16-1-2009 End 27-8-2009 26-9-2008 14-102008 4-2-2009 Person(s) Allotted Milind Amit Aarti Manasi Milind Amit Milind Amit Aarti Manasi Milind Amit 17-3-2009 Milind Amit Aarti Manasi 17-3-2009 22-3-2009 Milind Amit Aarti Manasi 18-3-2009 24-3-2009 Aarti Manasi 31-3-2009 Milind Amit Aarti Manasi 31-3-2009 Milind Amit Aarti Manasi 4-2-2009 31-3-2009 24-3-2009
- 22. Web Development On Web Project Plan 2.3 Project Management Approach 2.3.1 Project Roles and Responsibilities Role Responsibilities Project Guides Project Members Steering Committee External Guide coordinator Participant Ultimate decision-maker and tiebreaker. Provide project oversight and guidance. Review/approve project elements. Getting the Team Off on the Right Foot Internal Guide Ms. Deipali Gore External Guide Mr. Pravin Kalel Draft initial charter and project plan. Update plan regularly. Identify and resolve issues. Identify and mitigate risks. Milind Gokhale Amit Gosavi Aarti Mavlingkar Manasi Sahasrabudhe Approve scope changes Provides direction to the Project Help resolve issues and policy decisions Update plan regularly. Ms. Deipali Gore Mr. Pravin Kalel The first point of contact for the team members with external guide Milind Gokhale Amit Gosavi Aarti Mavlingkar Manasi Sahasrabudhe Milind Gokhale Table 2.3 Project Roles and Responsibilities 7
- 23. 3. Requirement Analysis
- 24. Web Development On Web Requirement Analysis 3. Requirement Analysis 3.1 Introduction 3.1.1 Purpose The purpose of WebyWeb is to allow the user to design web pages on internet on the fly. Current techniques for web page development include software’s like Dreamweaver [5], and Microsoft Expression Web [6] etc. But disadvantage with them is that they need installations on the respective machines. To overcome this drawback, we with our project “WebyWeb” using SAAS as a domain, aim at centralizing the process of web page creation. With this, the WebyWeb editor is centralized on server thereby eliminating the need to install the application. The user doesn’t need to install patches whenever any new feature is added into the software. All the updations are centralized for maintaining consistency and thus reducing the overhead for client to update the software individually. Payment will be done on the basis of package that will be subscribed for. The user won’t have to pay expensively for the high end functionality which he/she might never use. WebyWeb can be used by any novice user who has minimum technical knowledge about web page development. With highly user friendly and rich graphical environment, the experience of web page development will be enriching and easy. WebyWeb provides implementation of all the basic html tags. Insertion of form elements like buttons, checkbox, images, tables etc is provided. Easy navigation from design to code view check the code generated for the corresponding web design. The entire user’s work session will be stored on server thus providing portability. 3.1.2 Intended Audience and Reading Suggestions Intended audience of this document will be the developers of WebyWeb, project manager, marketing staff, user’s testers, and documentation writers. It is recommended that the SRS document is read sequentially. 8
- 25. Web Development On Web Requirement Analysis 3.1.3 Project Scope WebyWeb which is based on SaaS domain aims at providing the users to develop their own web page on the fly. It enhances the user work experience by providing aesthetic environment. The software WebyWeb will revolutionize the way web pages are designed. With this software, websites can be designed in cloud without the requirement of costly website designing softwares and installations. It will provide a user friendly dashboard which will serve for all user needs. All the HTML tags and scripts may be implemented. WebyWeb is a WYSIWYG editor, and will also give a code view of the page being designed. 3.2 Overall Description 3.2.1 Product Perspective Web sites have become means of information sharing and interactivity. For developing any web page, many softwares are available like Dreamweaver etc. But disadvantage with them is that they need installation, payment is expensive and a user that need not use high end functionality has to pay complete cost of the package. Moreover, coding knowledge may be required to use these softwares. By implementation of the WebyWeb project, we aim to change the scenario by allowing user to develop web pages on internet without having the need of installations of the softwares. 3.2.2 Product Features Application installation is not required; users access the application on the web (only plug-in installation may be required). Updates and upgrades to newer versions are automatic. Any computer with an Internet connection can become an access point to an application, no matter what operating system is installed. The risk of viral infection is greatly decreased when running an application on the web instead of an executable. 9
- 26. Web Development On Web Requirement Analysis Key features: 1. WYSIWYG Presto-based editor. 2. Implementation of basic HTML tags and insertion of – a. Tables b. Images c. HTML form elements (radio button, checkbox, button). d. Rich Text formatting. 3. Maintaining user’s work session along with the files created in the committed state. 3.2.3 User Classes and Characteristics Amateur user: These are the users who are completely new to webpage development and have no knowledge of coding, but wish to design their own web pages. WebyWeb has dual interface showing design view as well code view. Thus amateur users will not find it difficult to design their own web pages. Using design view they can make the website the way they want. On the other side expert users have an added advantage of knowledge about coding. 3.2.4 Operating Environment WebyWeb will operate on a web browser. All it requires for running at client end is the Silverlight [7] plug-in installed on the client’s web browser. It is cross browser (can be run on most web browsers including Internet explorer, Mozilla, etc.) and cross platform (windows vista/XP, Linux) 3.2.5 Design and Implementation Constraints Minimum number of computers is at least 2 which will limit the deployment process if they are not available. Since Silverlight provides rich web based interactions, resolution of screen and graphics aspects of hardware are extremely important. Installations of Microsoft expression blend [8], visual studio 2008 [9], Silverlight are essentials which enable the developer to develop their application. 10
- 27. Web Development On Web Requirement Analysis 3.2.6 User Documentation User manuals 3.2.7 Assumptions and Dependencies Assumptions: 1. Silverlight 1.1/2 plug-in installed. 2. The PC is connected to internet. 3. 512 GB RAM. 4. 1024 X 768 monitors resolution with 24 bit color. 5. Graphics processor that is DirectX® 9-capable. 3.3 System Features 3.3.1 WYSIWYG Presto-based editor (High Priority): WYSIWYG means What You See Is What You Get. This means that the web page designer software has a user friendly interface. The user just has to imagine the look of the page and may design it just as designing on a piece of paper. Using tools provided by the software. 3.3.2 The Design View for webpage creation: This feature displays web page being designed as it is. The coding details are hidden, making it possible for non-coders to create web pages and sites. 3.4 External Interface Requirements 3.4.1 User Interfaces A dashboard is provided to the user for development of web pages. It includes a menu bar, tool box, properties window, status bar. 11
- 28. Web Development On Web Requirement Analysis Figure 3.1: WebyWeb UI 3.4.2 Hardware Interfaces TCP/IP: It is a reliable connection oriented protocol that allows byte streaming originating on one machine to be delivered without any error on any other machine in the network. It fragments the incoming byte stream into discrete messages and parses each one on to the internet layer. At the destination, the receiving TCP process reassembles received messages into the output stream. TCP also handles the flow control to make sure a fast sender cannot swamp a slow receiver with more messages than it can handle. 3.4.3 Communications Interfaces HTTP: Hyper text transfer protocol (HTTP) is a method used to transfer or convey information on the World Wide Web. Its original purpose was to provide the way to publish and retrieve HTML pages. 12
- 29. Web Development On Web Requirement Analysis Development of HTTP was co-ordinated by the World Wide Web Consortium (W3C) and Internet Engineering Task Force (IETF) culminating in the publication of RFCs, most notably RFC 2616, which defines HTTP/1.1 the version of HTTP in common use today. HTTP is a request/response protocol between clients and servers. The originating client, such as web browser, spider or other end user tool, is referred to as a user agent. The destination server which stores or creates resources such as HTML files and images is called the origin server. In between the user agent and origin server, any is several intermediaries such as proxies, gateways, tunnels. An HTTP client initiates a request by establishing Transmission Control Protocol (TCP) connection to a particular port on a remote host. An HTTP server listening on that port waits for the client to send a request message. Upon receiving request, the server sends back a status line, such as “HTTP/1.1 200 OK” and a message of its own, the body of which is perhaps the request file, an error message, or some other information. Resources to be accessed by HTTP are identified using Uniform Resource Identifiers (URIs) (or, more specifically, URLs). Using the HTTP: or HTTPS URI schemes. 3.5 Other Nonfunctional Requirements 3.5.1 Performance Requirements The web server must be able to handle and support multiple instances of application. The time between request and reply should be less in case of online help. Minimum time should be taken by the application to display preview the web pages developed by the user. In case of power failure, the data should be stored in the state that was last saved by the user. 3.5.2 Safety Requirements 1. A firewall should be present for packet – filtering and other security issues. 2. A user can be able to view/update only his web pages. 13
- 30. Web Development On Web Requirement Analysis 3.5.3 Software Quality Attributes There are various software quality attributes that are taken into consideration – 1. Availability – As WebyWeb is a web based service provided to the users, it will be available as long as server is up. 2. Interoperability – WebyWeb is interoperable on various operating systems, thus increasing the applications usability and flexibility. 3. Maintainability – WebyWeb is a SaaS based service. Hence, all the updates are centralized making the maintenance convenient. 4. Usability - The main purpose of developing this WebyWeb is to enable the users who wish to develop their web pages online and who aren’t well versed with the technical aspects of coding on standalone applications like Dreamweaver, MS front page etc. 5. Creative – Users can apply their imagination in full extent thus enhancing their creative power without actually worrying much about the technical details. 14
- 31. Web Development On Web Requirement Analysis 3.6 Project Architecture Figure 3.2 : WebyWeb architecture WebyWeb has client server architecture. It is based on cloud computing. Architecture is divided into two parts namely the database and the main editor. The project resides on WebyWeb server. In our system, there's a significant workload shift. Local computers no longer have to do all the heavy lifting when it comes to running applications. The network of computers that make up the cloud handles them instead. Hardware and software demands on the user's side decrease. The only thing the user's computer needs to be able to run is the WebyWeb's interface software that is in a xap [9] file which is loaded on client PC on fly as the user accesses the WebyWeb website. 15
- 32. Web Development On Web Requirement Analysis WebyWeb is divided into two sections: the Main Editor and the Database as every cloud computing system is. They connect to each other through a network. The Main Editor is the side the client operates on. This includes the code conversion engine, Dashboard interface, User Workspace area. The database is the section which maintains the user information, files and log. Storage devices are required to keep all clients' information. Our system will make a copy of all clients' information and we will store it on other back up devices on daily basis. 3.7 Technology Used 3.7.1 Microsoft Silverlight Silverlight is Microsoft’s cross-browser, cross-platform browser plug-in that allows the creation of interactive web applications that employ high quality streaming media, vector graphics, images, and animation. Deployed as a plug-in for the major browsers on the Windows, Mac and Linux (supported by Novell) operating systems, web developers can craft interactive applications that have an identical user experience on the vast majority of web browsers deployed today. Silverlight addresses a disconnect that exists today in web development workflow where the design intent of graphics designers and interaction designers cannot be faithfully communicated to and crafted by the web developers. In Silverlight, this intent is created in design tools like Expression Design and Expression Blend and passed off to web developers in XMLbased XAML data files. The fidelity of the designers’ ideas is kept as there is a clear separation between the design in XAML and the code in JavaScript. Silverlight is a browser plug-in that renders XAML and exposes a JavaScript programming model in 1.0, extending this with a .NET programming model and runtime in Silverlight 2. Since the Silverlight 2 runtime has full access to the HTML Document Object Model (DOM) and cross-domain data access abilities, it is possible for future Silverlight applications to implement analytics entirely in managed code or in JavaScript code that is invoked from the managed code. 16
- 33. Web Development On Web Requirement Analysis 3.8 Libraries Used SR NO NAME OF DLL SUMMARY FontWeights Provides a set of predefined font weights as static property values. TextAlignment Specifies whether the text in the object is left-aligned, right-aligned, centered, or justified HtmlEventArgs : System.EventArgs Provides event details to event handlers. OpenFileDialog Represents an open file dialog box that enables a user to select one or more files. This class cannot be inherited. StackPanel : System.Windows.Controls. Panel 1 CLASS NAME Arranges child elements into a single line that can be oriented horizontally or vertically. Specifies the type of node. System.Windows 2 3 System.Windows.Browser 4 System.Windows.Controls 5 6 System.Xml XmlNodeType 7 System.Configuration DateTime Represents an instant in time, typically expressed as a date and time of day. System.Data XmlReadMode Specifies how to read XML data and a relational schema into a System.Data.DataSet. 8 Table 3.1: Libraries used 17
- 34. 4. Design
- 35. Web Development On Web Design Document 4. Design Document 4.1 Introduction 4.1.1 Background Software as a service is a model of software deployment where an application is hosted as a service provided to customers across the Internet. By eliminating the need to install and run the application on the customer's own computer, SaaS alleviates the customer's burden of software maintenance, ongoing operation, and support. It reduces upfront expense of software purchases through on-demand pricing for the required services. Usually softwares such as Macromedia Dreamweaver or Adobe GoLive are used for making web pages and websites. 1. But it requires installation of these softwares. 2. Thus space and resources of the host are not required. Only an internet connection can do the work. Advantages over older systems: 1. We can create a web development tool in cloud which helps in creating web pages online on fly. 2. Centralized updates for software. 3. Portability of website development. 4. Global users who have basic knowledge of using computers and internet. 18
- 36. Web Development On Web Design Document 4.2 Architecture 4.2.1 Introduction Figure 4.1: Silverlight Architecture Silverlight is the next step in evolving the potential user-experience richness in which application developers and designers can present to their clients. It does this by allowing designers to express their creativity and save their work in a format that will work directly on the Web. In the past, a designer would design a Web site and a user experience using tools that provide a rich output, but the developer would have to meet the constraints of the Web platform in being able to deliver them. In the Silverlight model, designers can build their desired user experience and express this as XAML. The XAML can then be incorporated directly by a developer into a Web page using the Silverlight runtime. Thus, the two can work more closely than ever before to provide a rich client user experience. It will have Web based GUI. It will have multiple numbers of instances on web server. 19
- 37. Web Development On Web Design Document 4.2.2 Data 4.2.2.1 File and Data Formats Data at server side: XAML files, HTML files, Markup files, Source files, Project files, ASP.NET Server page. When user selects to store pages designed on client side (i.e. on local HD) then the file is saved in XML format. This XML file may be opened in WebyWeb and the HTML code can be obtained and saved on server side. 4.3 Code 4.3.1 Introduction WebyWeb has client server architecture. The GUI is made with Microsoft Blend 2 and the event handlers and codes are done in Microsoft Visual Studio 2008. This facilitates easy interface design along with coding which is reflected as any changes are made in design. 4.3.2 Modules 4.3.2.1 Module A: The Database This module consists of user login and registration. It maintains the user’s information and also user’s files. It consists of two tables, one to include user’s personal information and other to maintain user’s files and projects. The input to database for personal information is given by the user in registration page. The files saved in editor are stored in the files table in database. The output is in the form of list of files made by the user so that he may choose to edit or delete files. 4.3.2.1.1 Internal Functions Navigation o It is used to navigate to the next page on user’s login or on choosing to make a new project or edit current project. o Name of the function: Navigate o Return type: void 20
- 38. Web Development On Web Design Document o Parameters: 1 Usercontrol newpage – It accepts the page to navigate to on call. Subscribe o This function is used to validate user’s input in registration form and to accept the input and update it in the database. o Name of the function: o Return type: sup_btn_subscribe_Click o Parameters: 2 Object sender – It indicates the button clicked by the user. RoutedEventArgs – It indicates the way call was made. I.e. on mouse over or mouse click etc. 4.3.2.2 Module B: The Main Editor This module consists of the main editor IDE displayed to the user to make web pages. The input is in the form of various html elements inserted and text inserted by the user along with the formatting applied to the text. The output is in the form of HTML code generated by code generator. Finally user may save his work which is updated in the database. 4.3.2.2.1 Internal Functions Code Generator o This method converts the xml code made from the design view rich text box of the user’s document into the html code that may be viewed across any browser. o Name of the function: ConvertRichTextToHTML o Return type: string[] o Parameters: 1 String RichTextXML – It accepts the xml format text from the design view and returns the converted html code in the form of string. 21
- 39. Web Development On Web Design Document Update formatting text o This function continuously updates the formatting applied to the text in rich text box. Thus as the cursor is moved, this function is called to indicate the formatting applied. Thus the toolbar buttons act as both – formatting applier as well as indicator. o Name of the function: UpdateFormattingControls o Return type: void o Parameters: No parameters Adding styles dynamically o This function is used to insert new styles into the style list as the user applies new formatting to the text. It dynamically adds customs styles which may be later used for new text inserted in rich text box. o Name of the function: AddStyle o Return type: void o Parameters: 1 String styleID: This indicates the styleID in the list of styles to indicate the custom style that may be applied. 4.3.3 Interfaces Every module must expose one or more interfaces. If these interfaces are not trivial and clear from the module descriptions, they should be listed and described in an orderly fashion at this point. This description should detail the purpose of each interface and in what context it can be used. It should also mention what kind of modules or objects expose it and which ones will be using it. If using the interface requires obtaining a reference to it, there should be an explanation of how such a reference is to be obtained and what information will be needed in order to do so. Following the description of the interface, there should come a list of the interface functions, referring to the very same items mentioned above (see section 2.4.1.n Internal Functions). It is advisable to add here a description of the scheme that will determine how the interfaces will evolve in future versions of the system in order to answer new requirements and modifications. If backward and forward compatibility is one of the requirements, explain how this scheme supports it. 22
- 40. Web Development On Web Design Document 4.4 Operation 4.4.1 User types In broad perspective we can have 2 types of users for Weby Web: 1. Expert user: These are the users who are well acquainted with the web development and have worked with development softwares as well as have knowledge of coding. 2. Amateur user: These are the users who are completely new to webpage development and have no knowledge of coding, but wish to design their own web pages. 4.4.2 Scenarios 1. Development Phase and design phase - When a user logs on to the Weby Web, user will have an environment consisting of controls, menus, and tools for developing a basic HTML webpage. 2. Preview Phase - After the design phase, user previews his developed web page. 4.4.3 Installation No installation required at client side. Deployment of system on server. Resources needed for a successful installation: 1. high speed connectivity 2. Silverlight Plug in 3. Web space (future scope). Centralized installation on the server. 4.4.4 Licensing Weby Web is protected by a licensing scheme. This application is priced on a per-user basis or depends on the scheme user selects. License is validated on the basis of online query to a central server. Purchasing/Sign-up- The purchase experience of a SaaS application is completed online. There is no third party or store between the client and the company. 23
- 41. Web Development On Web Design Document 4.4.5 Upgrades Upgradation is done at server side. No Upgradation is required at client side. Software will be installed on the server. All the data files are stored on the server. Unless the server crashes all the data will be secured. Because the application runs on a central server a SaaS application can be constantly updated, ensuring the user they always dispose of the latest version. This way software can be easily innovated and users can see their feedback quickly incorporated in the software. When the user’s feedback and developing the software go hand in hand, a developer can ensure the software will continue to improve. Therefore, SaaS development cycles should be periodic and “managed to no more than 90-180 days to enable incorporation of feedback and refinements” 4.4.6 Uninstall Uninstallation of the software is performed on the server side. The owners of the WebyWeb are authorized for uninstallation. Customer’s files will be left behind at server side so that the customer will have an opportunity to save it on their client machine. 4.5 Development 1. necessary resources – 3 PCs, Server, Web space 2. number of developers - 4, 3. Required skills Knowledge about HTML Networking protocols Microsoft Visual studio 2008 Microsoft Expression Blend Silverlight development 4. hardware requirements : Intel® Pentium® or AMD processor, 1 GHz with MMX or equivalent 512 MB of RAM 350 MB available hard disk space 24
- 42. Web Development On Web Design Document Graphics processor that is DirectX® 9-capable 1024 x 768 monitor resolution with 24-bit color 5. Environment and development tools required for the development process. Silverlight 1.0 SDK MS visual studio 2008 MS Expression blend .NET Framework 3.0 or higher Microsoft windows XP with service pack 2 or Vista 25
- 43. Web Development On Web Design Document 4.6 Miscellaneous 4.6.1 Conformance with standards WebyWeb which is developed is in accordance with the standards prescribed in MS visual studio 2008, Expression Blend and Silverlight. The system would conform to the W3C guidelines for HTML pages. Link – http://www.w3.org/MarkUp/ 4.6.2 Interoperability with other systems Figure 4.2: Interoperability with other systems 26
- 44. Web Development On Web OS/browser Chrome Design Document IE 6 SP1 Firefox/Mozilla Safari Opera 1.0, 2.0; via N/A N/A 1.0, 2.0 2.0 N/A 1.0, 2.0 Windows 2000 N/A 2.0 N/A Windows Mobile 6 N/A 1.0 N/A N/A N/A N/A N/A 1.0 1.0 Planned Mac OS 10.4/10.5 Intel N/A N/A 1.0, 2.0 1.0, 2.0 Planned Linux x86 (Moonlight) N/A N/A Planned N/A Planned Windows Vista/2008 Windows XP/2003/Home Server Mac OS 10.4/10.5 PowerPC NPAPI 1.0, 2.0; via NPAPI 2.0; NPAPI via Unofficially Unofficially Planned Table 4.1 : Silverlight across various browsers 4.6.3 Security Security is provided at the server side which will secure all the user’s sessions. 4.6.4 Open Issues Debugging, scalability, security are the open issues. 27
- 45. Web Development On Web Design Document 4.7 Analysis Models Figure 4.3: Use Case Diagram 28
- 46. Web Development On Web Design Document Figure 4.4: Class Diagram 29
- 47. Web Development On Web Design Document Figure 4.5: Class diagram for interfaces and classes 30
- 48. Web Development On Web Design Document Figure 4.6: Sequence Diagram 31
- 49. Web Development On Web Design Document Figure 4.7: State Chart Diagram 32
- 50. Web Development On Web Design Document Figure 4.8: Component Diagram 33
- 51. 5. Testing
- 52. Web Development On Web Testing 5. Testing 5.1 Test Plan 5.1.1 Test Plan Identifier: WebyWeb release 1.0 MTP 1.0 5.1.2 Introduction In order to overcome the drawbacks of existing html based editors (installations, no centralized updations, unnecessary payment for features that are not going to be utilized etc), developers of WebyWeb felt the need to be able to offer its clients the opportunity to develop web pages online. This project's goal is provide a basic online web page development (which can be enhanced in the future) ASAP. The initial release of the WebyWeb site and application will be known as WebyWeb release 1.0. The target audience will initially be for any novice user. Once the system is working successful, WebyWeb intends to start an aggressive marketing campaign to attract new clients for the online development of web pages through this application. Specifically, testing will now consist of the following phases (listed chronologically): Unit and integration level – adherence to coding standards and successful communication between units. 5.1.3 Test Items Test items – Image, tables, radio button, check box, horizontal line, text field, label, hyperlink The scope of this Testing activity will include: WebyWeb release 1.0 Web page development application and supporting infrastructure 34
- 53. Web Development On Web Testing The scope of this testing activity will not include: WebyWeb documentation e.g.: Requirements & Design Specifications or User, Operations & Installation Guides 5.1.4 Features to be tested Accessibility Coding standards Compatibility Functional Navigation Login Validation, Registration form validation, database connectivity, Scalability Security Usability 5.1.5 Features Not to Be Tested It is the intent that all of the individual test cases contained in each test plan will be performed. However, if time does not permit, some of the low priority test cases may be dropped. 5.1.6 Approach/Strategy The philosophy of the testing is risk-based testing, i.e. each test case will be prioritized as, High, Medium, or Low priority and then scheduled accordingly (Highest first). Exceptions to this general rule might include instances where: 35
- 54. Web Development On Web Testing A large number of low priority test cases can be executed using a small amount of resources A lower priority test is a pre-requisite of another higher priority test e.g. an expensive and high priority usability test might necessitate many of the inexpensive low priority navigational tests to have passed The testing will use manual testing. The WebyWeb’s source code will be frozen while being tested. Except for critical fixes that are blocking the testing efforts, changes will not be scheduled while a unit of code is being tested. 5.1.7 Item Pass/Fail Criteria The entrance criteria's for each phase of testing must be met before the next phase can commence. Formal approval will be granted by the internal and external project guide. The guides will retain the decision as to whether the total and/or criticality of any or all detected incidents/defects warrant the delay (or rework) of the WebyWeb release 1.0. 5.1.8 Suspension Criteria and Resumption Requirements In general, testing will only stop if the Web site Under Test (WUT) becomes unavailable. If testing is suspended due to the Web site becoming unavailable, testing will be resumed once access to the Web site is reestablished. Certain individual test cases may be suspended, skipped or reduced if prerequisite tests have previously failed e.g. usability testing may be skipped if a significant number of Web page navigational tests fail. 5.1.9 Test Deliverables The following documents will be generated as a result of these testing activities: Master test plan (MTP - this document) Deliverable documents: test plan Test input and output data (Test cases). 36
- 55. Web Development On Web Testing 5.1.10 Test Environments Software Requirement1. Silverlight 1.1/2 plug-in installed. 2. The PC is connected to internet/ intranet. Hardware Requirements1. 512 GB RAM. 2. 1024 X 768 monitors resolution with 24 bit color. 3. Graphics processor that is DirectX® 9-capable. 5.1.11 Staffing and Training Needs General development & testing techniques WebyWeb application development lifecycle methodology 5.1.12 Schedule The following tentative schedule will hopefully be met: Test design (this document) is expected to be completed by the end of March. Test execution is expected to last no more than two weeks and to start immediately after the test plans have been approved and the Web application has been hosted 5.1.13 Risks and Contingencies The following seeks to identify some of the more likely project risks and propose possible contingencies: Web site becomes unavailable – Testing will be delayed until this situation is rectified A large number of defects/incidents makes it functionally impossible to run all of the test cases – As many test cases as possible will be executed, The guides conjunction with developers will ultimately make the decision as to whether the number of defects/incidents warrants delaying the implementation of the production version. 37
- 56. Web Development On Web Testing Not enough time to complete all test cases. If time cannot be extended, individual test cases will be skipped, starting with the lowest priority. 5.1.14 Approvals The Internal and External guide must approve this plan. WebyWeb release 1.0 MTP 1.0 UNIT & INTEGRATION TEST PLAN 5.1.15 Test Plan Identifier WebyWeb release 1.0 UNTP 1.0 5.1.16 Introduction This testing phase will use a number of testing techniques. The decision as to which technique(s) to use for any given unit of code will reside with the team leader responsible for signing-off on the Module. 5.1.17 Features and Functions to Test Accessibility UIAC1 - Low The colours used on this Web page are friendly to colour blind viewers Compatibility UICO1 - Medium Size of WebyWeb application resized automatically according to screen. Cross Browser support. UICO2 – Medium The content of the WebyWeb is clearly readable 38
- 57. Web Development On Web Testing Coding standards Each of the units of code that make up the module being tested (typically a single fully functional Web page) must be coded to all of the following coding standards, any deviations from the standard must be documented and approved UICS1 – High The code must pass the following syntax and design requirements: Each unit of code has been inherited or copied from the most appropriate object class or Template. HTML code must be coded to the W3C HTML 4.0 standard and validated via the W3C validation service. Error messages do not describe the internal workings of the program UICS2 - Medium Any Form used on the Web page meets the following requirements: If radio controls are used, a default is always selected The browser places the cursor on the most appropriate field/control when the Form is first viewed Using the browsers Tab key allows the client to tab through the input fields on the Form in a top to bottom, left to right order All data entry fields are checked for invalid data and an appropriate error message is displayed if the data is found to be invalid All validations are performed (and error messages displayed) in a top-down, left-to-right Fashion Using equivalence partitioning techniques, all data entry fields will be checked to ensure that they are able to accept valid values and that their error checking routines can handle invalid data appropriately 39
- 58. Web Development On Web Testing UICS3 - Low Any Pop-up used on the Web page meets the following requirements: The pop-up follows WebyWeb GUI standard The pop-up is not too large for the parent window The pop-up’s initial screen positioning is appropriate Functional 1. Cut, Copy, Paste, and Zoom. 2. Menu bar options, 3. Toolbar options Insert -table, images, buttons, hyperlinks, Format – Applying Bold, Italics, left, right, center alignment, indent, out dent, ordered and unordered list, subscript, superscript, strikethrough, font size, font style, font color. Edit Table – Add rows & columns, delete row and column are the features in WebyWeb are to be tested. Navigation UINA1 - High All the links on the Web page will be checked to ensure that they meet the following specifications: The link should not be broken (unless the target has not yet been developed) and goes to the most appropriate location The link will not alter the browser’s default link colours The link must have an associated “Title” link tag specified Internal links must use lowercase characters for the address 40
- 59. Web Development On Web Testing Security UISE1 - High Input data received from the client must be parsed to make sure that it does not contain "out of bounds" or “buffer overflow” input data UISE2 - High Input data received from the client must be parsed to make sure that it does not contain inappropriate meta-character sequences e.g. && Usability UIUS1 - Low Mandatory data entry fields may be flagged with a visual cue e.g. highlight in red UIUS2 - Low Related information is grouped together on the Web page to minimized eye movement UIUS3 - Low When viewed via the clients anticipated hardware/software the page fits without the need for a horizontal scroll bar 5.1.18 Features and Functions not to Test Notable features and functions that will not be tested include: None WebyWeb release 1.0 Test Plan Version 1.0 41
- 60. Web Development On Web Testing 5.2 Test Procedure All the tests are conducted using manual testing. Testing includes 5.2.1 Black Box Testing Black box testing takes an external perspective of the test object to derive test cases. These tests can be functional or non-functional. Here, the valid and invalid input is selected and the correct output is determined. The testing is carried out for:a. Authentication of user b. Generation of Web page using WebyWeb 5.2.2 Regression Testing Regression testing seeks to uncover regression bugs. Regression testing is used not only for testing the correctness of a program, but it is also often used to track the quality of its output. The testing is carried out for: Database Rich text box formatting (Bullets and numbering, Alignment) Code conversion Engine Menu and event handlers 5.2.3 Integration Testing Integration testing, also known as integration and testing (I&T), is a software development process which program units are combined and tested as groups in multiple ways. The testing is carried out for: Database integration into Main Editor Inclusion of tested and approved HTML editor into Main Editor Integration of Ultra Rich web elements with WebyWeb editor 42
- 61. Web Development On Web Testing 5.3 Test Cases 5.3.1. “Sign In Module” Test Cases Test case for Sign In module with specific test data. PROJECT : WEBYWEB MODULE : Sign In module Document References : WEBYWEBSRS- V1 TEST CASE NO :1 TEST DATE : 20-03-2009 FUNCTIONAL SPECIFICATION : User Authentication TEST OBJECTIVE : To check if the entered username and password are valid or invalid TEST DATA : USER NAME=” Admin“ and PASSWORD =”WebyWeb “ 43
- 62. Web Development On Web Test ID Test Cases & User Action Test Data Blank Username & Valid Password Username = ”” & Password ”WebyWeb” Testing 1 Expected Result Actual Result Comment Display message “Username cannot be kept blank” Valid message displayed Working properly = Username = ”Admin” & Password = ”” Display message “Password cannot be kept blank” Valid message displayed Working properly Username = ”” & Password = ”” Display message “Both fields are mandatory” Valid message displayed Working properly Username = ”mcoe” & Password = ” WebyWeb” Display message “Invalid Username” Valid message displayed Working properly Username = ”Admin” & Password = ”webweby” Display message “Invalid Password” Valid message displayed Working properly Username = ”mcoe” & Password = ”passwd” Display message “Both fields are invalid” Valid message displayed Working properly Username = ”Admin” & Password = ”WebyWeb” Go to the next page having users created project and details. Proper displayed Working properly Clicks On ‘Sign In’ Button Valid Username & Blank Password 2 Clicks On ‘ Sign In’ Button Blank Username & Blank Password 3 Clicks On ‘ Sign In’ Button Invalid Username & Valid Password 4 Clicks On ‘ Sign In’ Button Valid Username & Invalid Password 5 Clicks On ‘ Sign In’ Button Invalid Username & Invalid Password 6 Clicks On ‘ Sign In’ Button Valid Username & Valid Password 7 Clicks On ‘Sign In’ Button Table 5.1: Test case for Sign In module 44 form
- 63. Web Development On Web Testing 5.3.2 Test case for Sign Up module with specific test data. PROJECT : WEBYWEB MODULE : Sign Up module Document References : WEBYWEB - SRSV1 TEST CASE NO :2 TEST DATE : 20-03-2009 FUNCTIONAL SPECIFICATION : User Registration TEST OBJECTIVE : To register user and check if the entered information is valid or not Precondition : Not a registered User, click on Sign Up button and registration form must be displayed 45
- 64. Web Development On Web Testing Test steps Test Case ID Test case name Test case description Test status (P/F) Test Priority Actual Result Enter First Name and Last Name less than 2 characters An Error Message “First Name and Last Name can not be less than 2 characters ” & error icon Must be displayed. Error Message & icon Displayed P Medium Enter First Name and Last Name of 3 characters Login01 Validate First Name and Last Name To verify that First Name and Last Name must be of minimum 2 characters Steps Expected result No Error Icon No Error Message Displayed P Medium Error Message & icon Displayed P High No Error Icon Displayed P High Error Message & icon displayed P High Enter password greater than 12 characters Pwd01 Validate Password To verify that password should be between 4 to 12 characters Enter password of 10 characters Enter password less than 4 characters 46 An Error Message “password cannot be greater than 12 characters ” & error icon Must be displayed. No Error Icon displayed (Valid password) An Error Message “password cannot be less than 4 characters ” & error icon Must be displayed.
- 65. Web Development On Web Pwd02 DateOfB irth01 EmailId 01 Verify Password Validate entered Date of Birth Validate primary email ID Testing An Error Message “password does not To verify that Enter different password match” & password error icon should be Must be exactly same displayed. as entered in “ Choose a No Error Password” Icon Enter same displayed password (Valid password) An Error Message “Invalid Select invalid date of birth date of birth “ & error To verify date icon of birth Must be (DOB<=curre displayed. nt date) No Error Icon Select Valid displayed date of birth (Valid DOB) An Error Message Enter primary “Primary email ID email ID starting with cannot start @. E.g.with this “ (@yahoo.com & error icon ) To verify Must be primary email displayed. ID does not An Error start with Enter primary Message “ special chars email ID 1st Char of (@) starting with Primary numbers. email ID E.g.cannot start ([email protected] with this “ m) & error icon Must be displayed 47 Error Message & icon Displayed P High No Error Icon Displayed P High Error Message & icon Displayed P High No Error Icon Displayed P Error Message & icon Displayed P High Error Message & icon Displayed P High High
- 66. Web Development On Web Testing Enter valid primary email ID E.g.([email protected] com) Subscrip tion01 Validate Registration Form To verify that all mandatory fields are filled properly Mandatory fields are Incomplete Mandatory fields are completely filled No Error Icon displayed (Valid primary email Id) Error Message “Incomplete information ” & error icons on correspondi ng fields must be displayed. No Error Icon displayed (registration form filled completely) Table 5.2: Test case for Sign In module 48 No Error Icon Displayed P High Error Message & icon Displayed P High No Error Icon Displayed P High
- 67. Web Development On Web Testing 5.3.3 Black Box Testing Test Case Description Code Generation Login Sign Up Test Test Case Test Description Expected Results Actual Results Status Id Pass/Fail Element Insertion of Selected element in rich inserted in rich PASS HTML elements text box with entered value text box with entered value Rich text to Converted HTML code in HTML code B001 HTML PASS code view generated conversion Custom style appears in style Style Generation Selected style applied PASS tag of HTML code Updated Project Access to user’s project Registered User list displayed to PASS list user B002 Access denied Unregistered and appropriate Deny access PASS user message displayed User’s account Open a new Creation of user’s account created & BOO3 PASS account of user and entry into the database database update. Table 5.3: Black Box testing 49 Severity High High High Medium High High
- 68. Web Development On Web Testing 5.3.4 GUI Testing Test case Description Test case Id Test Expected Description Result Actual Result Test Status [Pass/Fail] Severity GT01.1 All the input text field to be observed High Proper display of toolbar panes Input fields are blank with focus and tab index set On click, proper pane displayed PASS GT01.2 All the input fields should be blank, with proper focus & tab indices On click, proper pane should be displayed PASS High GT01.3 Tool tips should be observer Appropriate tool tips for corresponding buttons. Proper tool PASS tips displayed on mouse over of buttons Medium GT01.4 Table tools No edit tools active in absence of focused table PASS Medium GT02.1 Loading projects All the table editing tools should be disabled when table is not in focus Populating corresponding projects of the signed in user Projects populated for the user PASS High GT02.2 Assignment of entered caption to HTML elements Correct assignment of values to HTML form elements PASS Medium Gt02.3 Full screen with scaling In full screen mode, IDE should be scaled and editable Correct assignment of values to HTML form elements done IDE is scaled but text editing is disabled PARTIAL High Aesthetic Validation Table 5.4: GUI testing 50
- 69. Web Development On Web Testing 5.4 Test Oracle An oracle is a mechanism for determining whether the program has passed or failed a test. Oracle acts as a reference guide for evaluating a product. A complete oracle would have three capabilities and would carry them out perfectly: 1. A Generator – To provide predicted or expected result for each test. 2. A Comparator – To compare predicted and obtained results 3. An Evaluator – To determine whether the comparison results are sufficiently close to be a pass. 5.4.1 Test Design In oracle based testing we compare the behavior of the program under test to the behavior of the source we consider accurate. I. WebyWeb is web editor software that was designed to compete with Macromedia Dreamweaver 1. Getting Started with Webpage development In Dreamweaver, we need to install the software if it is not installed on the client computer which includes several steps. 51
- 70. Web Development On Web Testing Figure 5.1 Dreamweaver Installation With WebyWeb the user just needs to log on to the WebyWeb website and sign in. Figure 5.2 WebyWeb Homepage 52
- 71. Web Development On Web Testing 2. Complexity of use Figure 5.4: Insert in WebyWeb Figure 5.3: Insert in Dreamweaver In Dreamweaver it is quite complex to insert available elements in web page. A novice user may find it difficult to insert elements. WebyWeb has an easy to use dashboard interface which includes toolbars which make it easier for the user to insert html elements into the webpage. 53
- 72. Web Development On Web II. Testing WebyWeb is web editor software that was designed to compete with Google Sites 1. Insertion of HTML Form elements like – Buttons, Radio buttons, checkboxes etc Figure 5.6: Insert in WebyWeb Figure 5.5: Insert in Google These elements insertion is not provided in Google sites. So designing simple forms is not possible in Google sites Whereas these elements are provided in WebyWeb 54
- 73. Web Development On Web Future Enhancement Future Enhancements Debugger When a coder who has HTML knowledge designs a webpage, then sometimes it’s easier for him to make changes in the code view and apply them rather than in design view. But in such cases it’s difficult to detect errors and debug them. So a debugger will be helpful to easily design error free webpage even from the code view. Syntax highlighting Syntax highlighting is a feature that displays text in code view in different colors and fonts according to the category of terms. This feature eases writing in a structured language such as a markup language like HTML as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it's made only for human readers/editors. Syntax highlighting is one strategy to improve the readability and context of the text. Figure 6.1: Syntax Highlighting Memory and traffic management Giving facilities to the user to manage webspace as per the built website. Managing the visitors of the website and traffic log. Real-time visitor analytics, pagerank tracking, and more - all in one place. 55
- 74. Web Development On Web Future Enhancement Spell check Spell checking flags words in the document that may not be spelled correctly. This feature can help user avoid spelling mistakes in the content written and thus make a webpage containing correct content. A comprehensive spell checker enables website owners to spell check their website content during webpage creation much before they decide to publish it to their live website. User ‘s site management This includes allowing user to view complete website from single editor. Thus user has better control over the website and addition, deletion and interlinking of pages. Moreover it gives user a better view in perspective of space required for the website. Facility to design dynamic web pages Sometimes some dynamism in the webpage makes it more interactive. It includes support for ASP and Java Scripting which may be integrated in the webpage, making it dynamic. Some features like Custom URL, Dynamic style sheets, Widgets, conditional visibility may also be added. 56
- 75. Web Development On Web Conclusion ConclusionThe purpose and objective of WebyWeb project is achieved. By providing extremely rich graphical user interface, web page designing is easy and in an aesthetic form. Flexibility in designing makes user explore their imagination and thus, even a novice user can dream and accomplish their wish of web page designing. Figure 7.1 : Sample web page developed in WebyWeb 57
- 76. Web Development On Web Appendix Appendix A: Glossary SR.NO ABBREVIATION MEANING 1 SaaS Software as a service 2 RIA Rich internet application 3 WYSIWYG What you see is what you get 4 W3C World wide web consortium 5 IETF Internet engineering task force 6 HTTP Hyper text transfer protocol 7 HTTPS HTTP Over Secured Socket layer 8 TCP 9 Firewall Transmission control protocol A logical barrier designed to prevent unauthorized or undesired communication between sections of a computer network 10 UDP User datagram protocol 11 RFC Request For Comments 12 POX Plain Old XML 58
- 77. Web Development On Web Bibliography References [1] From Wikipedia, “HTML”, http://en.wikipedia.org/wiki/html. [2] M.T. Hoogvliet, “SaaS Interface Design”, presented at Rotterdam University, 2008. [3] From Wikipedia, “On-demand Pricing”, http://en.wikipedia.org/wiki/On-demand. [4] Christian Wenz, Essential Silverlight 2 Up-to-Date, O'Reilly, 2008. [5] http://www.Adobe.com/Dreamweaver [6] From Wikipedia, “Microsoft Expression Web”, http://en.wikipedia.org/wiki/Microsoft_Expression_Web. [7] Jeff Scanlon, Accelerated Silverlight 2, Apress, 2008. [8] Brennon Williams, Microsoft Expression Blend UNLEASHED, SAMS, 2008. [9] Matthew MacDonald, Pro Silverlight 2 in C# 2008, Apress, 2008. 59
Share Clipboard
Public clipboards featuring this slide, select another clipboard.
Looks like you’ve clipped this slide to already.
You just clipped your first slide!
Create a clipboard
Get slideshare without ads, special offer to slideshare readers, just for you: free 60-day trial to the world’s largest digital library..
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
You have now unlocked unlimited access to 20M+ documents!
Unlimited Reading
Learn faster and smarter from top experts
Unlimited Downloading
Download to take your learnings offline and on the go
Instant access to millions of ebooks, audiobooks, magazines, podcasts and more.
Read and listen offline with any device.
Free access to premium services like Tuneln, Mubi and more.
Help us keep SlideShare free
It appears that you have an ad-blocker running. By whitelisting SlideShare on your ad-blocker, you are supporting our community of content creators.
We've updated our privacy policy.
We’ve updated our privacy policy so that we are compliant with changing global privacy regulations and to provide you with insight into the limited ways in which we use your data.
You can read the details below. By accepting, you agree to the updated privacy policy.
Academia.edu no longer supports Internet Explorer.
To browse Academia.edu and the wider internet faster and more securely, please take a few seconds to upgrade your browser .
Enter the email address you signed up with and we'll email you a reset link.
- We're Hiring!
- Help Center
Project Report of Website Development Project management
The project report has been prepared based on available data, forecasts provided by experts and other project management tools. The real life situation can be little different depending on the circumstances. The project is considered as not for profit. The members working in the team will get fixed amount at the end of the project. Any inclusion or deduction is possible as we have enough buffer time. Risks has been estimated based on common issues faced by this type of project. CPM method has been used to estimate time and creating Gantt chart. Spreadsheet (EXCEL) analysis has been used to do CPM. A detailed network diagram has been drawn to describe every step clearly. A register form is included in the appendix section to monitor the project through its lifespan. Risk register should be updated at every meeting. Full effort has been given to complete each and every pros and cons, so that they are taken into account. However, the report isn’t full proof. There is always room for improvement.
Related Papers
International Journal of Business Information Systems
Andreas Andronikidis
Loading Preview
Sorry, preview is currently unavailable. You can download the paper by clicking the button above.
RELATED TOPICS
- We're Hiring!
- Help Center
- Find new research papers in:
- Health Sciences
- Earth Sciences
- Cognitive Science
- Mathematics
- Computer Science
- Academia ©2023
IMAGES
VIDEO
COMMENTS
Learn programmingwith curated Web development projects. Bridge the gap between theory and real-world code by working on curated web development projects. Use DevProjects as practice or enhance your portfolio with these fun web development project ideas. From beginner web development projects to more advanced ones, find your next coding project now.
Web Development Project Report AbdulMajeed M Alshehri The goal was to create a website for Galway Art Festival which is a hypothetical client .This was done in order to get better understanding of the skills that are needed in the area of website design and development.
Project Report Of Website Development PDF Free Download E-Business Website Development Project INTRODUCTION Technological achievements always had a great impact on every aspect of human society and affected our everyday life in a variety of ways.
Web development on web was part of a project in the final year of Engineering to demonstrate the implementation and application of SaaS using Microsoft Silverlight. The application facilitated creation of web pages without having a need to install any HTML editor based software. Milind Gokhale Follow
The requirement of web design will be defined by the graphics designer, project analyst, web programmers, program manager & project supervisor. 3.8.1.4 Website Features 3.8.1.4.1 Enhance user experience Search function to: Help visitors find information they need on the website. Give visitors more control in how they interact with A&IS website. …