REVIEWER
WEBSITECONCEPTS( bueneventura, adlao and soriano)
Website- every time we search we open a website or a link.
IP Address- data is sent from one computer to another on the
internet such as sending mail,
HTTP- transferring files/ translator
Coding- Coding, sometimes called computer programming, is how
we communicate with computers
Back-End- how did the front works
Front-End- nakikita yung layout and graphics
CMS- like canva
Cybersecurity- info that must protect from hackers
Browser- used to go to a website
Webpage- A web page is a simple document displayable by a
browser. Such documents are written in the HTML language
Hyperlink- attached from one link to another
TYPES OF WEB DEVELOPMENT
FRONT-END DEVELOPMENT -nakikita yung layout and
graphics/client side
BACK-END DEVELOPMENT- program and software/ server side
FULL STACK DEVELOPMENT- the entire depth of a computer
system application
WEBSITE DEVELOPMENT- the building and maintenance of
websites
DESKTOP DEVELOPMENT- the creation of software applications
that perform on computers
MOBILE DEVELOPMENT- he process of creating software
applications that run on a mobile device
GAME DEVELOPMENT- The act of creating a game
EMBEDDED DEVELOPMENT-When manufacturers add software to
everyday consumer products,
SECURITY DEVELOPMENT- It relates to person and state safety,
access to social services and political processes
THE WEB DEVELOPMENT PROCESS
. Form a plan (GOAL , AUDIENCE, TYPE OF WEBSITE, CONTENT,
PURPOSE, STRUCTURE, BUDGET)
.CREATE A WIREFRAME ( Slickpan, INVISION, Canva)
.DRAFT A SITEMAP (video, image, News)
.write your website code (HTML, CSS, JAVA SCRIPT)
.Build the back-end of your website( DATABASES, SERVERS)
.Build the front-end of your website (CLIENT SIDE)
.(Optional) Work with a CMS( WOrdPRESS, WIX)
.Acquire a domain name ( GoDADDY, HOVER)
.Launch your site
WEBSITE TRAFFIC STATISTICS AND PERFORMANCE ANALYSIS
( bueneventura, buarao, monticalvo)
WEBSITE TRAFFIC- web users who visit a website. Web traffic is
measured in visits, sometimes called "sessions," and is a common
way to measure an online business effectiveness at attracting an
audience.
QUALITY OF TRAFFIC -It plays an important role in website High or
Low?
High- stays longer like wattpad for reading ex: lazada, shopee and
google
Low- leaves fast due to slow or low performance.
To create a high quality website (know your target, know your
content is that for students/businessman etc.)
Popular website(world) ( google/
youtube/facebook/wikipedia/twitter/lectortmo/readmanganato/r
edpit/amazon/I.G)
Popular website(PH)
(GOOGLE/YOUTUBE/READMANGANATO/ASURASCANS/MANGANA
TO/FACEBOOK/SHOPEE/REDDIT/EXDYNSRV/FANDOM)
TYPES OF WEB TRAFFIC
ORGANIC TRAFFIC- visitors coming from a search engine, such as
Google or Bing
DIRECT TRAFFIC - visits to your website that don't have a defined
source or referring site
REFERRAL TRAFFIC -anonymous message na nag papa install or
refer app
EMAIL MARKETING - send email for marketing like shopee,
pinterest etc.
SOCIAL NETWORKS -considered and social media at mga post natin
PAID MEDIA - campaign videos like youtube ads
PAID SEARCH - paid website
OFFLINE TRAFFIC- free fb limited / cant see images
WEBSITE ANALYTICS (MEASUREMENT, COLLECTION, ANALYSIS,
REPORTING, UNDERSTANDING AND OPTIMIZING)
WEBSITE ANALYTICS( WIX FACEBOOK GOOGLE)
USEFUL METRICS IN WEB ANALYTICS
NUMBER OF VISITS OR SESSIONS- how long the visitor visit a
website
NUMBER OF VISITORS OR USERS - the number of unique visitors to
your site( one account lang even you watch it multiple times)
NUMBER OF VISITED PAGES - counted every time a visitor clicks to
view a page, and it helps website owners understand how popular
their site is
VISITS PER PAGE- alculated by dividing the total number of page
views by the total number of visitors.
BOUNCE RATE- if the visitor easily leave it means your web is not
okay
NUMBER OF PAGES PER VISIT -can track how many visited a web
AVERAGE TIME PER VISIT - can track how long a visitor stays in a
website
EVENTS - can see what is going to happen/ or what happened
CONVERSIONS- like feedback like sa shopee feedback sa ratings.
BENEFITS OF WEBSITE ANALYTICS & TRACKING
KNOW YOUR VISITORS / TRACK WHERE TRAFFIC IS COMING FROM
/USE AN IP LOOKUP DATABASE / USE A PERSONALISED URL/
GAUGE THE SUCCESS OF OTHER MARKETING ACTIVITIES AND SEE
YOUR MATCH RATE RISE. / KNOW EXACTLY WHAT YOUR
CUSTOMERS ARE LOOKING FOR. / SEE WHERE YOU ARE LOSING
CUSTOMERS. / FIND OUT HOW TO OPTIMISE YOUR WEBSITE
HOW TO ANALYZE YOUR WEBSITE PERFORMANCE
1. Website speed performance metrics( too slow ? mas ayaw ng
tao)
2. Content complexity ( increase every year, memory, performance)
3. Users behaviour ( valuable insight)
Performance usability ( optimization, performance and usability /
maximize your content/ lot of traffic/ good links/ user friendly)
PLANNING FOR WEB DESIGN (MARJORIE, ARJAY/ GARCIA)
WEB DESIGN- The most often favors than software development
that is focus on designing websites for desktops browsers is called
the WEB DESIGN- visual aesthetics and page layout of a website
PLANNING- website that would please them and satisfied their
needs when it comes to business connection or possible customers.
During the planning process 1. Keeping it simple and select a focus
on a particular topic and concentrate on it rather than dealing with
other topics. Planning in this case is very important. 2. Allow plenty WEB PAGE NAMING- A WEB PAGE IS A TEXT DOCUMENT
of time for planning and development. 3. Compare your websites
to know how they designed their websites.
SECURITY AND OTHERS
•Updated Software -The server software needs to be kept updated
so the site cannot be hacked.
. SITE STATISTICS Keeping track of site statistics is important to
help assure the success of the site.
Secure with HTTPS -A Hypertext Transfer Protocols secure, it is to
protect your users connection to your websites , regardless of the
content on the site.
Website Scanner- website scanner capable of detecting
vulnerabilities, malware, and several other security issues.
VISUAL DESIGN - according to B KOVARK the first rule of visual
design is legibility
Common color meanings ( red- love, romance, anger)(blue- trust,
loyalty,integrity, honesty)( green- freshness, health,
safety)( yellow- cheer, joy humor)( orange- energy/
warmth)( brown- nature, simplicity)( black- elegance, tradition,
formality)( white- purity, cleanliness)
Second rule- size font and style ( serif. Traditional, have feet)( sans What is an image file format- An image file format refers to a way
serif. Modern, feet free.)
Spatiality- is also related to creation of meaning in a website.
Harrison- “the important thing for professional communicators to
understand is users no longer rely on text for comprehension.
Semiotics- essentially the study of sign and how human assign
meaning to these sign
3 types of image in visual social semiotics ( icon- it has a
resemblance to a person or an object. Index- is an image that we
recognize because it stand for something. Symbol- is an image that
has no obvious visual connection to the concept for which it stand.
3 Philosophies for web design ( usability philosophy, multimedia
philosophy, mortised philosophy
LAYOUT PRINCIPLES
How to create an effective graphics? - In order to create effective
graphic | designs, you need to understand a few basic visual design
principles
Wendell Crow -that a good layout is like music from a fine
orchestra. “It is harmonious, balanced, rhythmic, emphatic.
(A. Balance B. Contrast C.direction D.emphasis E. Harmony F. Line
G. Perspective. H.print I. Proportion J. Rhythm K. Shape. L.
Sequence M. Tone N. Texture O.tone)
TECHNICAL CONSIDERATIONS (BEGATA, BORROMEO,C. VISTE)
WEB SERVER-can “host” any number of individual web sites. allows
people the ability to access and view the information
TYPES OF WEB SERVER- apche web server-most popular and
supported by linux, windows easily customize,,, IIS WEB SERVER-
same features, working on all system,,, NGINX WEBSERVER- open
source , high performance low resource usage,, LITESPEED WEB
SERVER- more beautiful than apache low operating cost.
BACKGROUND,TEXTURES, AND BUTTONS ANIMATION WITH PHOTOSHOP/CANVA TIMELINE ANIMATION
WEB folder-A folder, also called a directory, is a space used to
store files
F: drive is limited to a maximum of 100 Megabytes for all files and
folders that you have stored there.
URL? UNIFORM RESOURCE LOCATOR- A web address, also known
as a URL, is a reference to a web resource that specifies its location
on a computer network as well as a method for locating
EVERYTHING.
IDENTIFIED BY THE “HTML” (PREFERRED) OR “HTM” FILE NAME
EXTENSION FOR EXAMPLE “MYPAGE.HTML.”
The first page of your web site, sometimes referred to as a home
page
EXAMPLES OF ACCEPTABLE NAMES (index.html content.html/
photos.html family_vacation.html/ football_scores.html
baloon_flight.jpg)
EXAMPLES OF UNACCEPTABLE NAMES (too many periods) (spaces
and ‘ mark) (! mark) (space and *) (gif name repeated) (spaces)
Web Site Content-THE HTML DOCUMENTS YOU MAKE ARE ONLY A
PART OF THE COMPLETE WEB PAGE AS DISPLAYED IN A BROWSER
WINDOW.
ACCESSIBILITY- wHEN DESIGNING A WEB SITE, IT IS ALWAYS A
GOOD IDEA TO MAKE IT ACCESSIBLE TO PERSONS WITH SIGHT OR
EVEN HEARING DISABILITIES.
Limitations- Another limitation is the connection speed of the
computer.
BARACK OBAMA- The internet is not a luxury, it is a necessity.
IMAGE EDITING & PREPERATION
of storing and organizing a digital image.
File Types- Photos used in web pages have traditionally been in
either the “JPEG” or “GIF” format. More recently, the “PNG”
format.
JPG/.JPEG FORMAT- JPEG (pronounced JAY-peg) which stands for
Joint Photographic Experts Groups is a “lossy” format meaning that
the image is compressed to make a smaller file.
.GIF FORMAT-A “GIF” or Graphics Interchange Format image is a
bit-mapped image format that was introduced in 1987 by
CompuServe
PNG FORMAT- PNG or Portable Network Graphics files are a
lossless image format originally designed to improve upon and
replace the gif format. PNG files are able to handle up to 16 million
colors, unlike the 256 colors supported by GIF.
PSDs (Photoshop Document) refer to image file formats native to
the graphics editing software, Adobe Photoshop.
TIFF FORMAT- TIFF (Taggged Image File Format) TIFFS are raster
files that contain a large amount of data.
EPS FORMAT- EPS (Encapsulated PostScript) a standard graphics
file format that's designed to create high-resolution graphics for
print.
HIGH & LOW RESOLUTION MONITOR(generally have a higher density of pixels per inch than past standard TV screens, have fewer pixels,
higher compression, or both. They sacrifice quality of the image for a smaller file size)
COLOR PICKER- graphical user interface widget, usually found within graphics software or online, used to select colors.
BACKGROUND- area or scenery behind the main object of contemplation, especially when perceived as a framework for it.
Texture -effects you can layer on your graphic design project or photo using blending modes to create unique effects and opacity settings
to adjust how images layer on top of each other
NAVIGATION BAR- is a section of a graphical user interface intended to aid visitors in accessing information.
BUTTON- convey a specific call to action (CTA), like “Submit” or “Pay.” Buttons tell users, “if you click me, something will happen.”
ICONS the term “icon” is used generically to mean an icon, symbol or index.
ANIMATION WITH PHOTOSHOP
Animation- is the process of displaying a sequence of images of 2-D or 3-D artwork or pho- tographs in rapid succession to create an illusion
of movement (Figure 6.1). Animation in reality is the optical illusion of motion.
FRAME ANIMATION- The first step in creating a frame animation using the Photoshop application is to find or make a suitable image.
Open the Photoshop CS4 application., 2. Create a new image (File>New or Ctrl/Com- mand + N),,, 3. Select a web safe color using the
Foreground Color tool in the Tool pallet.,,, Make sure the animation pallet is open and set to the frames view (see step 1).,,, 5. Click the
arrow right below the frame window and change the time delay to 0.1 sec.,,, 6. Now you need to move the contents of the type layer out of
sight (Figure 6.7).,,, 7. Next you will make a new frame. Initially this frame will be an exact copy of the original. 8. With the new frame
selected in the animation pallet, make sure the type layer is still selected and use the move tool and right arrow on the keyboard to move
the text back into view.,,, . Just to verify that you have completed the task correctly, click the Play button in the Animation pallet.
TIMELINE ANIMATION- Open Photoshop. If you do not have the Animation pallet open, open it from the Window menu. Window>Show All
menu Items>Animation.,,, 2. If the animation pallet does not look like the example shown in Figure 6.18 locate the Con- verts to Timeline
Animation button at the lower left of the animation pallet and click it,,, 3. The first step is to make a new image. Select File>New or use the
keyboard shortcut. Make the image size 200 pixels by 100 pixels, 72 ppi resolution, RGB color. Name it “Float” Click OK,,, . Pick a color you
like from the Tools pallet. Select a font and size you like (we chose a deep red, Showcard Gothic font, 24 pt.).,,, 5. Now look at the
animation (time line) pallet (Figure 6.21). Along the bottom, you see the familiar play buttons but the rest of the pallet is different than the
frame animation pallet.,,, 6. On the left side of the layer, you see a small arrowhead-looking icon.,,, . Make sure the time ruler is at the
starting posi- tion (zero).,,, 8. Using the move tool from the tool pallet, move the text in the image down toward the bot- tom and to the
right so it resembles Figure 6. 27.,,, 10. Now drag the time ruler to the 5 second posi- tion. Then using the move tool, position the text in
the upper right corner of the image. A new key frame is generated.,,, 11. Next lets fade the text out. Make sure the time ruler is at the five
second position.,,, 12. Move the time ruler to the seven second mark.,,,