How to Make A Social Network
-
Upload
onur-dayibasi -
Category
Education
-
view
1.040 -
download
1
Transcript of How to Make A Social Network
![Page 2: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/2.jpg)
We have an Idea
![Page 3: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/3.jpg)
We build Ocean Dev Team
![Page 4: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/4.jpg)
We work online
![Page 5: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/5.jpg)
Draw Sketch, Design And Brainstorm
![Page 6: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/6.jpg)
We select technology
Client Side Server Side DB
● JavaFX PHP Sql● Adobe Air ASP Cassandra ● Silverlight Scala● GWT J2EE● HTML5
![Page 7: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/7.jpg)
We design architecture
![Page 8: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/8.jpg)
First Make Client -Server Communication
● Design Sample Page● Create JSON data from Page ● Send with AJAX (XMLHttpRequest)● Write A Web Service Handle Request● Design DB and Create Column Family● Write JSON to DB● Return Succeed Msg
![Page 9: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/9.jpg)
Make First Page - Register User
![Page 10: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/10.jpg)
Add Validation Checks
● empty checks● format checks● username and ● email exist checks● captcha ● terms
![Page 11: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/11.jpg)
Make - Login Page
● http <-> https forwarding ● select authentication ● (basic, form,open auth)● save user info to Cookie
![Page 12: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/12.jpg)
Atomic Item Trend
● Tweet -> Twitter, Wall Entry -> Facebook ● Trend -> Trendocean ● What is Trend ? ● Trend value shows how much you think as same as other
oceaners● How can we get people think same ? How we calculate
trend ? ● With Multiple Choice Question
![Page 13: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/13.jpg)
How Calculate Trends
![Page 14: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/14.jpg)
Trend Calculation is very complex
● trend calculation is very complex● many questions● many answers● changes your Trend● we use Glassfish J2EE (Multi-Thread)● and Rackspace (For Cloud Computing)
![Page 15: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/15.jpg)
We Design Ask Question Page
![Page 16: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/16.jpg)
Simple Question Display
![Page 17: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/17.jpg)
We Extends Question Structure
● Integrated with YouTube● Integrated with Vimeo● Integrated with Soundcloud● Support mp3 player● Support @username #search● Support http and image links,
● Find pattern with regular expression● Replace with media embed code
![Page 18: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/18.jpg)
Video Integration (Youtube, Vimeo)
![Page 19: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/19.jpg)
Music Integration (SoundCloud, Mp3Player),
![Page 20: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/20.jpg)
We added @username and #search support
![Page 21: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/21.jpg)
Image and Http Link Support
![Page 22: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/22.jpg)
Media Preview When Ask Question
![Page 23: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/23.jpg)
Avatar Upload to Amazon S3
● User Define Own Avatar● Upload with Form Based File in HTML ● Server check and resize avatar● And server upload to Amazon S3
![Page 24: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/24.jpg)
You have own Page
● http://trendocean.com/username is your page
■ Info (username, email, big picture, business)■Trend Value■Statistics Value■Asked Questions ■ Loved Questions■Answered Questions■ Coffee (Private Messages)■Drops (Notifications)■ Following/Followers
![Page 25: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/25.jpg)
Define Privacy
● Profile Privacy (Everyone, Only Friends)● Email Privacy ● Answer Privacy
![Page 26: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/26.jpg)
Personalize Your Background
● Jquery.css(background-image, url)
![Page 27: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/27.jpg)
Are you Trendy or Eccentric
● you can define your trend calculation type
![Page 28: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/28.jpg)
Questions List
● My Ocean ■ Friend Latest Questions■Today Specials■Most Populars■ Latest In All
● Profile
■Asked Questions■Answered Questions■ Loved Questions
![Page 29: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/29.jpg)
Question List Template Rendering PURE JS
![Page 30: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/30.jpg)
Question in Question List
![Page 31: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/31.jpg)
Question Details
![Page 32: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/32.jpg)
Question Redirections
● username, avatar, @username links directs to ■ http://trendocean.com/username
● stat,comment and media links directs to■ question details
● coffee opens coffee dialog● share opens share dilalog● love and answer count opens loved and answers dialog● open stats displays details of question
![Page 33: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/33.jpg)
Questions Answered and Loved List
● Displays who is answered and loved questions
![Page 34: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/34.jpg)
Question Comments
● Displays question comments● Add new one..
![Page 35: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/35.jpg)
Question Statistics● Trendocean integrated with Google Visiualization API
![Page 36: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/36.jpg)
Question Share
● Shorten with bitly or tinyurl● Share on Facebook, Twitter or Email
![Page 37: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/37.jpg)
Send Private Msg (Coffee)
● You can send private message with coffee● And display own message
![Page 38: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/38.jpg)
Asynchronous/Synchronous AJAX
● JQuery ajax default is Asynchronous● GET are Asynchronous● POST are Synchronous
● Love and Spam is action and status button● You should use Synchronous AJAX to prevent conflict
![Page 39: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/39.jpg)
Follow Friends
● Following/Follower Table ● Following/Follower List● New Following Request List
![Page 40: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/40.jpg)
Following /Followers
![Page 41: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/41.jpg)
How To Find New Friends
● Random Member● Trendradar (Recommended Member)
![Page 42: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/42.jpg)
Notification Mechanism
● When a related action exist, trendocean send email or notify you, when
■ a coffee send■ follow■ comment your question■ love/spam your question■mention■ new following request
![Page 43: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/43.jpg)
Email Notification
![Page 44: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/44.jpg)
Email Notification Settings
![Page 45: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/45.jpg)
Notifications in Ocean (Drops)
![Page 46: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/46.jpg)
RadyoOdTÜ 103.1
● Trendocean have a radio program ÇarpisanNotalar● RadyoODTÜ Live on Trendocean● RadyoODTÜ Podcast on Trendocean
![Page 47: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/47.jpg)
Ocean Dev Team extends with Mobile Team
![Page 48: How to Make A Social Network](https://reader034.fdocuments.us/reader034/viewer/2022042818/55aaaff21a28ab283e8b4585/html5/thumbnails/48.jpg)
Mobile Screens