You are on page 1of 195

Deep Internet Secrets Seminar by Jomar Hilario

WELCOME!
(c) JomarHilario.com ---> Join to know more.

The Secrets of Web Designers


(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

F5 or Refresh
(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

CSS
(c) JomarHilario.com ---> Join to know more.

This is the headline


This is the subheadline
This is the paragraph. This is the paragraph. This is the paragraph.
(c) JomarHilario.com ---> Join to know more.

Main headline is 40 pixels high, Georgia Font, Bold, Red Subheadline is is 20 pixels high, Georgia Font, Bold and Italics, Black Paragraphs are just 10 pixels high
(c) JomarHilario.com ---> Join to know more.

Main headline is 40 pixels high, Georgia Font, Bold, Red

h1 { font: bold 40px Georgia; }

(c) JomarHilario.com ---> Join to know more.

Subheadline is is 20 pixels high, Georgia Font, Bold and Italics, Black

h2 { font:italic bold 20px Georgia; }

(c) JomarHilario.com ---> Join to know more.

Paragraphs are just 10 pixels high

p { font-size:10px; }

(c) JomarHilario.com ---> Join to know more.

h1 { font: bold 40px Georgia; } h2 { font:italic bold 20px Georgia; } p { font-size:10px; }

(c) JomarHilario.com ---> Join to know more.

AJAX
(c) JomarHilario.com ---> Join to know more.

Drag an image into image.google.com


(c) JomarHilario.com ---> Join to know more.

Most bank sites are non-AJAX


(c) JomarHilario.com ---> Join to know more.

Google is AJAX
(c) JomarHilario.com ---> Join to know more.

AJAX = Faster Website


(c) JomarHilario.com ---> Join to know more.

AJAX = Screen doesnt blank out when you do something like press a button or upload a file
(c) JomarHilario.com ---> Join to know more.

Anchor text
(c) JomarHilario.com ---> Join to know more.

Blue underlines are normally links.

(c) JomarHilario.com ---> Join to know more.

This is the anchor text to Shamcey Supups Facebook if when you click on this, it goes to her facebook
(c) JomarHilario.com ---> Join to know more.

The anchor text to Shamcey Supsups Facebook in this sentence is here, because you need to click here to go to her FB.
(c) JomarHilario.com ---> Join to know more.

Action Step: 1. Use meaningful anchor text and not here or click here.
(c) JomarHilario.com ---> Join to know more.

Action Step: 2. If you wish to be popular online for pinoy beauty queen then links should look like: pinoy beauty queen Shamcey Supsups FB
(c) JomarHilario.com ---> Join to know more.

PRACTICE!! Say ahhhhh


(c) JomarHilario.com ---> Join to know more.

Backlink is just a link that goes to your site.


(c) JomarHilario.com ---> Join to know more.

Back end = Server


(c) JomarHilario.com ---> Join to know more.

Bandwidth
(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

Kulang ka sa bandwidth kaya di mo gets yung joke.


(c) JomarHilario.com ---> Join to know more.

Bandwidth = Kbps, Mbps etc. The higher the better


(c) JomarHilario.com ---> Join to know more.

Above the Fold Below the Fold


(c) JomarHilario.com ---> Join to know more.

Action Step: 1. All important stuff (email catcher, fb link) must be abovethefold
(c) JomarHilario.com ---> Join to know more.

Bounce Rate

(c) JomarHilario.com ---> Join to know more.

Girls: Number of courting guys you brushed off.


(c) JomarHilario.com ---> Join to know more.

Guys: Number of pretty girls you saw and said Naah, shell never love a guy like me!
(c) JomarHilario.com ---> Join to know more.

Bounce Rate

(c) JomarHilario.com ---> Join to know more.

Helipad

http://www.ickr.com/photos/andrewbain/

(c) JomarHilario.com ---> Join to know more.

Landing Page

(c) JomarHilario.com ---> Join to know more.

Landing Page is the page you ___ on when you click a link!
(c) JomarHilario.com ---> Join to know more.

PRACTICE!! Say ahhhhh


(c) JomarHilario.com ---> Join to know more.

Permalink disney.com/ disney.com/blog/ intro.html


(c) JomarHilario.com ---> Join to know more.

TAGS H1, H2, P, B, BR IMG, A HREF Food, Drink


(c) JomarHilario.com ---> Join to know more.

The Passion of a DESIGNER is GREAT DESIGN.


(c) JomarHilario.com ---> Join to know more.

Most dont care about Marketing.


(c) JomarHilario.com ---> Join to know more.

If a design is pretty, uso, theyll go for it!


(c) JomarHilario.com ---> Join to know more.

The Value of the Keyboard


(c) JomarHilario.com ---> Join to know more.

How the mouse steals quality time


(c) JomarHilario.com ---> Join to know more.

Gmail Shortcuts Facebook Shortcuts Mouse Gestures Keyboard Shortcuts


(c) JomarHilario.com ---> Join to know more.

GMAIL

(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

Facebook Shortcuts

(c) JomarHilario.com ---> Join to know more.

Internet Explorer 7 for PC: Alt + #, then Enter Alt+1:News feed Alt+2:Your prole Alt+3:Friend requests(popup) Alt+4:Messages(popup) Alt+5:Notications(popup) Alt+6:Account Settings Alt+7:Privacy Settings Alt+8:FacebooksFacebookprole Alt+9:To Security Alt+0:Help center
(c) JomarHilario.com ---> Join to know more.

Firefox 3 for PC: Shift + Alt + # 1:News feed 2:Your prole 3:Friend requests(popup) 4:Messages(popup) 5:Notications(popup) 6:Account Settings 7:Privacy Settings 8:FacebooksFacebookprole 9:To Security 0:Help center
(c) JomarHilario.com ---> Join to know more.

Safari 3 for Mac: Ctrl + # 1:News feed 2:Your prole 3:Friend requests(popup) 4:Messages(popup) 5:Notications(popup) 6:Account Settings 7:Privacy Settings 8:FacebooksFacebookprole 9:To Security 0:Help center
(c) JomarHilario.com ---> Join to know more.

Firefox 3 for Mac: Ctrl + # 1:News feed 2:Your prole 3:Friend requests(popup) 4:Messages(popup) 5:Notications(popup) 6:Account Settings 7:Privacy Settings 8:FacebooksFacebookprole 9:To Security 0:Help center
(c) JomarHilario.com ---> Join to know more.

MS Office Shortcuts

(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

Mouse Gestures

(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

VLC Video and AudioBook Speed up

(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

Value of Time

(c) JomarHilario.com ---> Join to know more.

An Expert is one who knows more and more about less and less Nicholas M Butler
(c) JomarHilario.com ---> Join to know more.

Read the Manual/ Help to Make the Most of Technology


(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

(c) JomarHilario.com ---> Join to know more.

Print the HELP and read it while waiting outside.


(c) JomarHilario.com ---> Join to know more.

Load the HELP into your IPAD/Galaxy/ Cell Phone as TEXT or PDF
(c) JomarHilario.com ---> Join to know more.

Note down useful tips. on a notebook (papel)


(c) JomarHilario.com ---> Join to know more.

Comments

(c) JomarHilario.com ---> Join to know more.

Commenting HTML Code <!--This is a comment. Comments are not displayed in the browser--> <p>This is a paragraph.</p>

(c) JomarHilario.com ---> Join to know more.

Commenting CSS Code /* This is a comment. Comments are not displayed in the browser */ p { font: red; }

(c) JomarHilario.com ---> Join to know more.

Commenting Javascript Code // This is a comment.


document.write("<h1>This is a heading</h1>");

(c) JomarHilario.com ---> Join to know more.

So what is commenting for?

(c) JomarHilario.com ---> Join to know more.

It makes the script or code looks like english.

(c) JomarHilario.com ---> Join to know more.

It makes it readable for a nonprogrammer or designer.


(c) JomarHilario.com ---> Join to know more.

An easy way to think aloud w/o destroying the code.


(c) JomarHilario.com ---> Join to know more.

Commenting Javascript Code // This is a comment.


document.write("<h1>This is a heading</h1>");

(c) JomarHilario.com ---> Join to know more.

Commenting Javascript Code // Ok, this is javascript. OH MY DEAR! // what does it mean? // it says write, so its going to write something. // it says H1 so heading 1 - the headline. // So this part writes out the headline. // I knew that! document.write("<h1>This is a heading</h1>"); // commenting sure is helpful!
(c) JomarHilario.com ---> Join to know more.

You now have your own Facebook Fan Page

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

85

You want to create a Tab wherein your fans click,

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

86

And display all your videos

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

87

http://jhilario.com/fbjomar TRY IT FIRST!


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 88

How you can put a webpage inside Facebook....


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 89

How to add a Custom Tab in Facebook


(Easier than you think!)
2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 90

To do that, go to http:// www.shortstack.com


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 91

Click Try it for Free

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

92

Enter your Full Name

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

93

Enter your Email Address

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

94

Create a Username

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

95

Create a Password

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

96

Confirm your Password

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

97

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

98

Agree to the Terms of Service

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

99

Enter the two words

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

100

Click Create Account

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

101

Tabs page will appear

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

102

Verify your email address

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

103

Switch to your email Inbox & click email from ShortStack

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

104

Click the link

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

105

Switch back to ShortStack & browse through the Tags

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

106

Until you see Video Cascade

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

107

Click Make Tab

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

108

Click Make Tab

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

109

Designer page will appear

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

110

Edit the Video widget

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

111

Edit the Video widget

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

112

Click on the pencil icon

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

113

Edit Widget box will display

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

114

Open another browser tab (Control-T or Command-T) and go to YouTube.com

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

115

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

116

Find the video you want to put in FB...

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

117

Click on the Video you want to upload

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

118

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

119

Click Share

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

120

Click the code

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

121

Press Ctrl + C

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

122

Switch back to shortstack.com


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 123

Were now back to Shortstacks EDIT WIDGET

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

124

Click on the blank box before Get Videos


Text

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

125

Press Ctrl + V

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

126

Click Get Video(s)

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

127

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

128

Click Save

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

129

Your video will be displayed

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

130

Add another video widget

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

131

Click the widget

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

132

And drag it to the Edit Widgets

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

133

Repeat the same process

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

134

Click on the pencil icon

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

135

Edit Widget box will display

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

136

Switch back to YouTube.com


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 137

Click on another Video you

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

138

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

139

Click Share & copy the code

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

140

Paste & click Get Video(s)

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

141

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

142

Click Save

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

143

Scroll down to view the other video

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

144

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

145

Lets change the Title of your tab

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

146

Hover on Header Text

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

147

Hover on Header Text

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

148

click the pencil icon

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

149

The Edit Widget box appears

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

150

Type your new Header

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

151

You may also TYPE ANY TEXT!

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

152

Click Save

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

153

Your Header now updated

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

154

Now we are ready to publish your tab


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 155

Click Install Tab

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

156

Click Install Tab

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

157

Click Login with Facebook

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

158

Click Log In with Facebook

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

159

Click Allow

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

160

Click Choose Quick Publish

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

161

Click Install on your chosen FB page

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

162

If your Facebook Fan Page has more than 2,000 Likes, you will have to upgrade your account.
2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 163

Your tab is now Quick Published

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

164

Click on the Smart URL

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

165

To take you to your new tab

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

166

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

167

Lets edit the Tab Name

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

168

Click on the pencil icon

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

169

And type a new tab name

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

170

Open a new tab & go to your Facebook


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 171

Wheres the new tab we created?

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

172

Click on the down arrow

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

173

Click on the down arrow

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

174

To display ALL the tabs

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

175

Here is the tab we renamed WATCH & Learn

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

176

It does not look enticing so lets change the image


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 177

Image dimensions should be 111 x 74


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 178

Hover and click on pencil icon

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

179

Click Edit Settings

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

180

Custom Tab Image: click Change

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

181

Click Change

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

182

Upload an image, click Choose file

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

183

Locate file and click Open

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

184

Your image is now uploaded

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

185

Click on your Fan Page again

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

186

The image is already updated

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

187

If you want the tab to be seen in the first row so its not hidden
2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 188

Hover and click on pencil icon

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

189

Hover and click on pencil icon

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

190

Choose Swap position with: Likes

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

191

So when a visitor clicks on your Fan Page


2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 192

The Video tab is already visible

2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now

193

The few who do are the envy of the many who only watch. - Jim Rohn
2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 194

Be not afraid of growing slowly, be afraid only of standing still. Chinese Proverb
(c) JomarHilario.com ---> Join to know more.