SnapDev








@generonquillo

Menu for today...



Website Development Process

Facebook Application Development Process

Servers 101

IT Terminologies

Web Design Trends 2014


Website Development Process

Mockups




Sitemap
Content Plan
Brainstorming

System Design




System Architecture


Flow Chart

Database Design


Data Repositories

Ledgers

Where to put the data

PSD mockups to Templates


HTML are like cement and steel
CSS are the paints
Javascript makes the doors and windows move

Takes a lot of TIME
Longer if Responsive Web Design

Browser Compatibility

Templates to PHP Programming



How the door lock works
How the toilet flushes

How everything works!

Where integration takes place
Wordpress, Magento, Facebook, Hydra

Testing


Performed by a QA Engineer


Test every functionality, layout, user experience

Page Load Optimization

Browser Tests

A/B Testing if applicable


Beta Testing



Migration


Server to Server


Domain Propagation


Another round of tests



Launch!

*Another round of tests

Facebook Application Development Process


Mockups

Check if we did this already...


Templating


Copy existing codes


Test and test facebook functionalities


If not...



Do the same process



Servers



What is a server?

Hosting Providers



Cloud Server


Lower setup costs

Easy to scale up

Pay what you need

No server maintenance or patches

Bandwidth



Traffic consumed by visitors

Images, videos, files, web pages

SMPFC Server consumes 50-70 GB

Facebook App Server 20-30 GB

Memory


Every pageload consumes approx 2MB of memory

Many concurrent visitors = needs more memory

SMPFC server has 4 GB of memory

Replenishes instantly

Backups


Daily database backups

Daily and/or weekly server backups

1 month retention

Security


Security Updates

Limited Access

FTP

Administrator



Terminologies


FTP


File Transfer Protocol


SLA


Service Level Agreement

Server Uptime

Server Availability

99.9%

8 hours of downtime per year


API

Application Programming Interface

Web API ; Server Side API

Useful for mobile applications

Google Maps API, Facebook Open Graph API




Questions?


Web Design Trends*

 2014


*Predictions

Responsive Web Design


Design for mobile then scale up

Content for mobile

Lightweight

Cost effective

Single codebase

Flat


Simplicity

Color schemes

Simplified content

Reduce visual clutter

Jumbotron


Large Video Backgrounds

Large texts

Large Image Backgrounds

Blurred Imagery

Hero Areas

Parallax


Background stays behind

Texts / other elements move in different direction

Started 2012

One Page Design


One Page Scroll

Smooth scrolling



Thank You!

SnapDev

By Gene Ronquillo