PAMPANGA STATE AGRICULTURAL UNIVERSITY

Magalang, Pampanga

College of Resource and Engineering Automation and Mechanization

Department of Computer Studies and Automation

Final Requirement in
WS 102 (Web Systems and Technologies 2)

Tech4kids

Submitted by:

(WeSpeakUX) - BSIT II-F

Demapanag, Allen Mark B. Guilas, Efren Jr C.

Guevarra, Norcis D. Jamosmos, Sacchin O.
Gozun, Reggie I. Libao, Joshua M.

Submitted to:
Ms. Mary Ann S. Baricante

Date Submitted:
November 13, 2019
I. TABLE OF CONTENTS

II. INTRODUCTION

III. WEB DEVELOPMENT TEAM

IV. THE WEBSITE DEVELOPMENT LIFE CYCLE

V. SITEMAP

VI. Selected Technologies to Use

VII. Sketch/Wireframe/Mockup

VIII. THE FINAL OUTPUT

IX. THE WEBSITE INFORMATION

I. THE WEB DEVELOPMENT TEAM

Allen Mark B. Demapanag Efren C. Guilas Jr.

Project Manager UI/UX Designer

Norcis D. Guevarra Reggie I. Gozun

Web Developer (Back End) Web Developer (Front End)

Sacchin O. Jamosmos Joshua M. Libao

QA Engineer & Requirement Analyst
Content Specialist
II. THE WEBSITE DEVELOPMENT LIFE CYCLE
STEP 1: INFORMATION GATHERING

Purpose

To help kids from grade 1 to grade 6, this site offers tons of educational content on different
subjects. WeSpeakUX is great for little learners especially elementary students. Full access to
the site requires a subscription, but there’s plenty of free content to explore. This kid-friendly
site is the perfect place for curious minds to catch up on current events and open up their
minds about technology and to have a knowledge about Information Technology, with articles
written specifically for a younger audience.

Goals

-Become more active participants in the learning process.

-Become independent learners.
-Identify what is important to their own learning.
-Achieve their full potential.

Target Audience

Elementary Students of San Agustin Elementary School Magalang, Pampanga.

Website Content

1. WeSpeakUX (clickable logo and name of the website)

 Click this button every page to go back to the homepage.

2. About Us
-this consist of
 Why Us - Reasons to register and patronize our webpage.
 Benefits - Advantage and Proposed idea when it comes to BSIT.
 Legal Documents - Terms, Conditions and Policies.
 Contact Us - Facebook page and contact numbers.

3. Sign-in
 Username and Password.

4. Education
 E-books - They can access this content to download different topics and have advanced
reading.

5. Technology
 What is IT
 History of IT
 Internet of Things (IOT
STEP 2: PLANNING

Features and Functionalities

1. Online Admission
-shortly after students enroll in our webpage, they’ll be asked to log into learning
management system (LMS).
-LMS students can view their syllabus and learn how to contact and access most
preferred lesson and materials (including online readings).
-Historically, teaching online made it difficult to catch when a students was struggling.
However, by leveraging emerging technology and data generated by these tools, it has
made it easier for us to help student before it’s too late.

2. Assessment Management and Live Feedback

-Online quizzes and test can help students pinpoint areas of improvement, based on
subject or skill. It is constructive, and it models effective practices. Making time to use
assessment tools can help learners gain extra practice outside of their normal classwork
or ongoing projects.

3. Search Engine
-Since the inception of the internet, people have been storing and posting large amount
of valuable information. Search Engine are necessary for locating, storing, sorting and
ranking the value of that information on the web.
SITEMAP
Selected Technologies to Use

1. Acer Aspire ES1-432-POKC Pentium N4200

-Intel Pentium N4200 Processor
-Windows 10
-Intel HD Graphics 505
-500 GB 2.5-inch 5400RPM
-14” led HD (1366x768) Resolution Comfy View
-2GB DDR3L Onboard Memory
-Two speaker audio
-802.11 b/g/n wireless LAN Gigabit LAN
-HD Web Camera
-8x Super Multi DVD
-4 Cell 2800 maH Li-on 7.5 hours Battery

2. Notepad++
-Syntax Highlighting and folding
-PCRE (Perl Compatible Regular Expression) Search/Replace
-GUI entirely customizable
-Auto Completion: Word completion, Function completion and Function parameters
hint
-Multi View
-WYSIWYG (Printing)
-Zoom in and Zoom out
-Multi-Language environment supported
-Bookmark
-Macro recording and playback
-Launch with different arguments

3. Sublime
- “Goto Anything”, quick navigation to files, symbols, or lines
- “Command Palette” uses adaptive matching for quick keyboard invocation of arbitrary
commands
-Simultaneous editing: simultaneously make the same interactive changes to multiple
areas
-Phyton-based plugin API
-Project-specific preferences
-Extensive customizability via JSON settings files platform-specific settings
-Cross-platform (Windows, MacOS, and Linux) and supportive plugins and cross-
platform
-Compatible with many language grammars from TextMate
4. MySQL
-Relational Database Management System (RDBMS): MySQL is a relational database
management system
-Easy to
Mockup
STEP 3: DESIGN

Final Features and Functions

1. Online Admission
-shortly after students enroll in our webpage, they’ll be asked to log into learning
management system (LMS).
-LMS students can view their syllabus and learn how to contact and access most
preferred lesson and materials (including online readings).
-Historically, teaching online made it difficult to catch when a students was struggling.
However, by leveraging emerging technology and data generated by these tools, it has
made it easier for us to help student before it’s too late.

2. Google Verification
When you’re signing-up in our website, we'll send a verification code to the email
address you used to create the account. If you don't verify your address, you won't be
able to access in our website. This our client has a assurance for the security of their
account.

3. Search Engine

-Since the inception of the internet, people have been storing and posting large amount
of valuable information. Search Engine are necessary for locating, storing, sorting and
ranking the value of that information on the web.

4. Online Quiz
Our online quizzes are set up to actually test knowledge or identify a person's attributes.
We Engage our audience in a unique and fun way and connect them with our site or
learning material. By creating a online quize, you will improve your consumer loyalty.
Another plus of online quizzes is getting immediate results from your participants. Not
only does the creator get the results, the participant itself is also possible to get his or
her results. This makes it for the creator easy to identify the gaps in knowledge. The
participants are able to view on what kind of section they have to improve themselves.
Finalized Mockup (UX&UX)
Finalized technologies to use

1. Acer Aspire ES1-432-P0KC Pentium N4200 -Intel Pentium N4200 Processor -Windows 10 -we
uses 4 laptops but Acer Aspire is the one we use in coding and executing programs.

2. Notepad++ -Syntax Highlighting and folding -PCRE (Perl Compatible Regular Expression)
Search/Replace -GUI entirely customizable -we use notepad ++ for some reasons, to make our
webpage more convenient to code.

3. Sublime - “Go to Anything”, quick navigation to files, symbols, or lines - “Command palette”
uses adaptive matching for quick keyboard invocation of arbitrary commands -Simultaneous
editing: simultaneously male the same interactive changes to multiple areas -sublime is the one
we chose to use because it more convenient and more interactive to use.

4. MYSQL -Relational Database Management System (RDBMS): MySQL is a relational database

management system. -Easy to use: MySQL is easy to use. You have to get only the basic
knowledge of SQL. You can build and interact with MySQL with only a few simple SQL
statements. -It is secure: MySQL consist of a solid data security layer that protects sensitive
data from intruders. Passwords are encrypted in MySQL.

5. PHP -In order to program business logic or custom functionality on your website, web
developers use programming languages. There are many, but the most common we use are
“the top four”: PHP, HTML, and JAVASCRIPT. You may have heard of the less common or older
languages like Perl, ColdFusion, C/C++ or Python.

6. Bootstrap -We uses Bootstrap to make our web page more responsive CSS so it can adjusts
to phones, tablets, and desktops.
Content writing and assembly
As a content writer, I am the one who specializes in providing relevant content for websites.
Every website has a specific target audience and requires the most relevant content to attract
business. Content should contain keywords (specific business-related terms, which internet
users might use in order to search for services or products) aimed towards improving a
website's SEO. Generally, a website content writer who has got this knowledge of SEO is also
referred to as an SEO Content Writer.

Most story pieces are centered on marketing products or services, though this is not always the
case. Some websites are informational only and do not sell a product or service. These websites
are often news sites or blogs. Informational sites educate the reader with complex information
that is easy to understand and retain.

Our website is an e learning website wherein we provide information and educate our readers
with the things they needed to learn about computer and the IT industry. I make sure that all
the grammars and keywords I use are correct.

These are my 7 steps in Content Production

1. Identify topics: This mostly consists of brainstorming based on hunches.

2. Pick a single topic: One person has an editorial role and they pick a topic to start
on.
3. Research topic: Whoever picked the topic is the expert, and they do research to set
up the parameters of the content.
4. Create content: This step is often handed off to a specialist—writer, designer, etc.
5. Review and publish: Copy-editing, revising, and hitting the publish button.
6. Promote and distribute: Post to social channels, and sites like Hacker News
7. Track performance: Keep track of views, time spent reading, traffic sources, and
shares.

Most people approach content marketing like a black box. Ideas go in one end. Hours and days
are spent doing something creative. And content comes out the other end.
In a survey I ran of 2,203 companies, I was shocked to find that only 35% had a documented
content marketing strategy. People measure and analyze all other aspects of marketing, but
they don’t take that mindset and apply it to the actual practice of content creation. They think
that because it’s harder to produce high-quality content, it’s too difficult to reliably reproduce.
STEP 4: DEVELOPMENT

•Database Design/Creation
•Frontend
•Backend (Process)
•Database Design/Creation

•SEO

Images
•Image optimization is about reducing the file size of your images as much as possible without
sacrificing quality so that your page load times remain low. It's also about image SEO. That is,
getting your product images and decorative images to rank on Google and other image search
engines

We are currently working with reducing every file size of the images on our website without its
quality being reduced.
Tags
•Meta tags are invisible tags that provide data about your page to search engines and website
visitors.
•In short, they make it easier for search engines to determine what your content is about, and
thus are vital for SEO.

We have a few meta tags.

In our homepage our meta tags is only <meta name="viewport" content="width=device-
width, initial-scale=1">

On our admin page we have

<meta charset="UTF-8">
<meta name="author" content="WeSpeakUX">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

Content
•refers to creating content that helps your web pages to rank high in the search engines. It
includes everything to do with the writing and structuring of content on your website.
STEP 5: TESTING AND DELIVERY

•Website Testing (QA)

We regularly test our website for potential bugs. A complete testing before uploading our
website. By performing website testing. A company like us, needs to make sure that the web-
based system is functioning properly and can be accepted by real-time users

•Functionality Testing

All of the requirements/specifications. Functions (or features) of our website were tested by
feeding them input and examining the output. Functional testing ensures that the requirements
are properly satisfied by the application.

•Browser Compatibility

Our website is compatible to all web browsers (Google Chrome, Mozilla Firefox, Opera mini,
Apple Safari, Microsoft Edge, and Internet Explorer)
And it is also compatible to all Operating systems (Android, Windows, IOS, OS X, and Linux)

•Domain registration
STEP 6: MAINTENANCE

 Website checking (QA)

 Feedback System
 Website Updating
 Site Backup
III. THE FINAL OUTPUT

 FRONT-END

Screenshots with description

 BACK-END

IV. THE WEBSITE INFORMATION

Name: Tech4kids
Domain name: wespeakux
Hosting: wespeakux.tk
Active until when: December 2,2019
Developers Team: wespeakux
URL:wespeakux.000webhostapp.com