Upload
nikkihidalgo
View
35
Download
0
Tags:
Embed Size (px)
Citation preview
(c) JomarHilario.com ---> Join to know more.
Deep Internet SecretsSeminar
by Jomar HilarioWELCOME!
(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 subheadlineThis 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 doesn’t 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 Supup’s
Facebook if when you click on this, it goes to
her facebook
(c) JomarHilario.com ---> Join to know more.
The anchor text to Shamcey Supsup’s 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 Supsup’s FB
(c) JomarHilario.com ---> Join to know more.
PRACTICE!!
Say “ahhhhh”
(c) JomarHilario.com ---> Join to know more.
Backlinkis 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 FoldBelow 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, she’ll 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.flickr.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 HREFFood, Drink
(c) JomarHilario.com ---> Join to know more.
The Passion of a DESIGNER is GREAT
DESIGN.
(c) JomarHilario.com ---> Join to know more.
Most don’t care about Marketing.
(c) JomarHilario.com ---> Join to know more.
If a design is pretty, uso, they’ll go for it!
(c) JomarHilario.com ---> Join to know more.
TheValue of the Keyboard
(c) JomarHilario.com ---> Join to know more.
“How the mouse steals quality time”
(c) JomarHilario.com ---> Join to know more.
Gmail ShortcutsFacebook Shortcuts
Mouse GesturesKeyboard 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 feedAlt+2:Your profileAlt+3:Friend requests(popup)Alt+4:Messages(popup)Alt+5:Notifications(popup)Alt+6:Account SettingsAlt+7:Privacy SettingsAlt+8:Facebook’s Facebook profileAlt+9:To SecurityAlt+0:Help center
(c) JomarHilario.com ---> Join to know more.
Firefox 3 for PC:Shift + Alt + # 1:News feed2:Your profile3:Friend requests(popup)4:Messages(popup)5:Notifications(popup)6:Account Settings7:Privacy Settings8:Facebook’s Facebook profile9:To Security0:Help center
(c) JomarHilario.com ---> Join to know more.
Safari 3 for Mac:Ctrl + # 1:News feed2:Your profile3:Friend requests(popup)4:Messages(popup)5:Notifications(popup)6:Account Settings7:Privacy Settings8:Facebook’s Facebook profile9:To Security0:Help center
(c) JomarHilario.com ---> Join to know more.
Firefox 3 for Mac:Ctrl + # 1:News feed2:Your profile3:Friend requests(popup)4:Messages(popup)5:Notifications(popup)6:Account Settings7:Privacy Settings8:Facebook’s Facebook profile9:To Security0: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
Mostof 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 non-
programmer 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 it’s 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!
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
You now have your own Facebook Fan Page
85
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
You want to create a Tab wherein your fans click,
86
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
And display all your videos
87
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
http://jhilario.com/fbjomarTRY IT FIRST!
88
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
How you can put a webpage inside
Facebook....89
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
How to add a Custom Tab in Facebook
(Easier than you think!)
90
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
To do that,go to http://
www.shortstack.com91
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Try it for Free
92
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Enter your Full Name
93
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Enter your Email Address
94
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Create a Username
95
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Create a Password
96
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Confirm your Password
97
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 98
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Agree to the Terms of Service
99
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Enter the two words
100
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Create Account
101
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Tabs page will appear
102
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Verify your email address
103
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Switch to your email Inbox& click email from ShortStack
104
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click the link
105
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Switch back to ShortStack& browse through the Tags
106
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Until you see Video Cascade
107
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Make Tab
108
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Make Tab
109
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Designer page will appear
110
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Edit the Video widget
111
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Edit the Video widget
112
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on the pencil icon
113
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Edit Widget box will display
114
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Open another browser tab (Control-T or Command-T) and
go to YouTube.com
115
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 116
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Find the video you want to put in FB...
117
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on the Video you want to upload
118
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 119
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Share
120
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click the code
121
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Press Ctrl + C
122
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Switch back to shortstack.com
123
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
We’re now back to Shortstack’s EDIT WIDGET
124
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on the blank box before Get Videos
125
Text
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Press Ctrl + V
126
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Get Video(s)
127
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 128
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Save
129
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Your video will be displayed
130
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Add another video widget
131
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click the widget
132
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
And drag it to the Edit Widgets
133
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Repeat the same process
134
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on the pencil icon
135
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Edit Widget box will display
136
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Switch back to YouTube.com
137
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on another Video you
138
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 139
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Share & copy the code
140
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Paste & click Get Video(s)
141
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 142
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Save
143
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Scroll down to view the other video
144
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 145
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Let’s change the Title of your tab
146
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Hover on Header Text
147
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Hover on Header Text
148
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
click the pencil icon
149
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
The Edit Widget box appears
150
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Type your new Header
151
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
You may also TYPE ANY TEXT!
152
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Save
153
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Your Header now updated
154
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Now we are ready to publish your tab
155
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Install Tab
156
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Install Tab
157
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Login with Facebook
158
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Log In with Facebook
159
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Allow
160
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Choose Quick Publish
161
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Install on your chosen FB page
162
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
If your Facebook Fan Page has more than 2,000 Likes,
you will have to upgrade your account.
163
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Your tab is now Quick Published
164
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on the Smart URL
165
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
To take you to your new tab
166
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now 167
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Let’s edit the Tab Name
168
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on the pencil icon
169
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
And type a new tab name
170
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Open a new tab & go to your Facebook
171
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Where’s the new tab we created?
172
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on the down arrow
173
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on the down arrow
174
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
To display ALL the tabs
175
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Here is the tab we renamed “WATCH & Learn”
176
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
It does not look enticing so let’s change the image
177
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Image dimensions should be
111 x 74178
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Hover and click on pencil icon
179
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Edit Settings
180
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Custom Tab Image: click Change
181
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click Change
182
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Upload an image, click Choose file
183
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Locate file and click Open
184
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Your image is now uploaded
185
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Click on your Fan Page again
186
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
The image is already updated
187
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
If you want the tab to be seen in the first row so it’s not
hidden
188
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Hover and click on pencil icon
189
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Hover and click on pencil icon
190
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
Choose Swap position with: Likes
191
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
So when a visitor clicks on your Fan Page
192
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
The Video tab is already visible
193
© 2012 JomarHilario.com You Can Learn Even More Online Marke;ng Now
The few who do are the envy of the many
who only watch.- Jim Rohn
194
(c) JomarHilario.com ---> Join to know more.
Be not afraid of growing slowly, be
afraid only of standing still.
Chinese Proverb