Wordpress - Blogging - Seminar : 10 Ways to Optimize your Wordpress Blog

Seminar hosted by Silicon Valley Bloggers Meetup Group

Speaker: Linda
Linda started online in 1999
Started on eBay selling eBooks
Then started doing web design
Then learned Wordpress

Wordcamp - every year in May (can sign up), Wordpress is based in SF

askmepc-webdesign.com -> Linda's website

sign up on wordpress.com, and they will give you a code to activate Askimet (antispam for wordpress)


***Permalinks


***Ping List  (search engines don't crawl that fast, people say ping lists triple their site traffic)

email Linda and she will send you her ping list
also send her an email for her "blacklist words list" and her "blacklisted sites"


Gravatar.com
(gravatar is the same as avatar)


Dont start turning things off until you are fairly known, don;t start filtering things before you are even found


There are many wonderful plugins for Wordpress


WordpressCentral.org


In the "Edit Post" tab, you can even predate dates !! (or make it look newer)


Wordpress is a Content Management System (CMS), not just blog software


In browser:   view -> page source   ......... if you see "wp theme" etc, that would indicate that it is a Wordpress blog


A lot of people like the "Thesis" theme
(Linda uses "studio press" themes from Brian Gartener)

Web Development - Analytics

Google’s analytics (Google Analytics) grew out of a company called ………

Google bought the company

Bing Toolbox is something equivalent to google analytics on bing (also recommend submitting your site to bing)

Yahoo used to have quite good analytics

Omniture , a company owned by adobe, does analytics, for an (expensive) price

SEO Search Engine Optimization Seminar Notes

Web Development - Site Management / Optimization - Free and Useful Tools

Google Words

Google Analytics

Google Ad Words

Google Web Master Tools

SEO Search Engine Optimization Seminar Notes

Web Development - Bounce Rate

Bounce rate: the number of people who come to your site, but find that it is not what they are looking for, and just quickly leave

SEO Search Engine Optimization Seminar Notes

Web Development - Search Engines - "Poodle Predictor"

"Poodle Predictor"  site

SEO Search Engine Optimization Seminar Notes

The following is an intro from the site:

Poodle predictor is a tool that attempts to give you an idea of how your site will show up in the search-engine results, before it's too late, and they have already cached it.
This helps you avoid making mistakes that will either prevent your site from getting a decent listing, or will show a useless description of you site in the search-engine results.
To do this, we have attempted to replicate the rules used by the main search-engines, as they spider your site.
Naturally they are not all identical, and they don't make their search algorithms publicly available, so Poodle predictor's results will never be identical with the search-engines results.

(obtained from http://www.gritechnologies.com/tools/about_poodle.html)

Web Development - Fonts

The user's browser can display any font that the user has on their machine

if you want to be safe:

Look up(search): "web-safe fonts"  (comic sans is one of them)

SEO Search Engine Optimization Seminar Notes

Web Development - "Organic"

Organic listing: something that is not paid (artificially placed at the top), not local (also artificially placed in front), but is something that the search engine "organically" found and listed

SEO Search Engine Optimization Seminar Notes

Web Development - Sitemaps

Your sitemap (if you have one) should be placed in the root of your site , and is usually named  Sitemap.xml

SEO Search Engine Optimization Seminar Notes

Wordpress - Alternative : "Drupal"

Drupal.com  (Drupal is good alternative to Wordpress)

SEO Search Engine Optimization Seminar Notes

Web Development - Optimizing for Modern Search Engines

1. Congruence between title, keywords, and text  => to get higher ranking with google search engine

2. Google also brought the notion of page rank

3. Another thing you can and should do is to submit your site to google -> this is free and easy to do

4. Other things you can do:   xml-sitemaps.com   (get a sitemap) -> will generate a xml file, then you put that in the root of your site, then you tell google this is where your sitemap is , then google not only knows your site is here, it also knows you have a site map and it knows about the architecture of your site

5. Having links from other sites to your site improves your ranking in Google search

6. The number of clicks does not improve your search ranking
7. Have keywords, then have those same words appear in the following paragraphs, and also if the URL has the same word in it  => this would also help your ranking

8. The Google bot cannot see images or color etc. , it can only see text  (this is another reason why having "alternative text" (alt tag) with your images is very important)

9. The bot sees any text, regardless of font  (some people cliam that bots only recognize Ariel and Times Roman?)

10. Header text is more important than the body text (this is suspected by some people, and some experiments suggest this may be the case, but Google would not confirm this)

11. Anchor Text - don't just use "click here" as your anchor text, having descripttive anchor text improve your ranking (this, again, is suspected by some people, but not confirmed by Google)

12. Sprinkle words that match your keywords and words in your header into your introductory paragraphs


13. Phrases vs individual words might make a difference (a lot of discussion about this) (having phrases might be better)

14. "Free" is another "good" term
15. Some people beleive that about 70% of Google's search algorithm is still about links

16. Superpages.com -> Link to your site using things like "online yellow pages" (like the one above)

17. Yelp -> also allows you to fill in a page of information about your business (site) free of charge

18. "Yahoo Locals" also have information pages that you can fill out free of charge

19. There is also  citysearch.com

20. A living site that changes and updates content frequently fares better with Google search bots

21. Re-submit site map? -> only after big, architectural changes

22. Google considering pages to be "duplicate pages" can be a problem

23. Changing the name of pages is bad



SEO Search Engine Optimization Seminar Notes

Web Development - how search is performed

Alta Vista originally searched and found web pages by looking in the metadata



Search Engine Optimization Seminar Notes

Web Development - Interesting Site

waybackmachine.org


tis site stores cached versions of past websites

for exaple, you can find an old Alta Vista search page.....etc......



Search Engine Optimization Seminar Notes

Web Development - the .htaccess file

the  .htaccess   file is usually a hidden file  (you need to unhide system files to be able to see it )

.htaccess file can redirect, etc ........

SEO Search Engine Optimization Seminar Notes

Web Development - Upload PDF files and get CSS layouts automatically generated for you

Psd2cssonline.com

"Sitegrinder" application does the same thing, but as a desktop application



Search Engine Optimization Seminar Notes

Dreamweaver - where images are inserted

Foreground images are inserted directly onto the page.

Background images are placed using CSS.

The difference between the two senarios should be noted.

Dreamweaver - Change the background color for the "body" portion of the page

go to "window" -> "CSS styles"

click "All" to switch from "Current" mode
(All mode displays all the CSS Styles associated with the current page)

Expand the <Style> entry in the All Rules pane (click the + button)

select body and click Edit Rule (the "pencil icon" at the bottom of the CSS Styles panel)

when the CSS Rule defineition for "body" dialog box appears, select the Background category

then, click the BAckground color box to open the color pixer

then, use the eyedropper to select a color in the color pixer

***Note:  brackets ("<  >") indicate that a CSS style in internal to the document. If a style is external to a document it would show as someting like  "charliestyles.css" in the CSS styles panel.


Reference: "Adobe Dreamweaver Classroom in a Book"

Dreamweaver - CSS - change the page body background color

CSS can be used to alter the style properties of any HTML tag, such as the <body> tag.

Dreamweaver - CSS (Cascading Style Sheets)

Modern web pages use Cascading Style Sheets for layout and styling.

Web Pages - The "Three-legged Stool" Analogy

Modern web pages are often said to be three-legged stools, with the three legs being HTML, CSS, and Javascript. As the analogy suggests, the stool would not be able to stand properly without any one of its legs.

HTML can be roughly though of as the content of your page.

CSS covers the layout and appearance of the page, and includes aspects like where your elements are located, what colors there are and where, and what backgrounds to use.

Javascript adds interactive functionality to your page.


Reference: "Adobe Dreamweaver Classroom in a Book"

Dreamweaver - Properties Manipulation for Inserted Images - fltrt / fltlft

With the newly inserted image selected, choose "fltrt" from the Class menu in the Properties panel.

"fltrt" is an abreviation to "float right" -> this is a CSS style that will float the image to the right. Text will flow around the image.

"fltlft" is an abbreviation for "float left" -> this floats the image to the left with text wrapping around it on the right.

*All 32 CSS styles included in DW have .fltrt and .fltlft as style options.

**The float property moves an element to the right (or left) of its "container". In this example, the container is "mainContent". When an element floats , ofthe content flows or wraps around it. When an element floats to the right , for example, it moves to the right and other content wraps around it to the left.

Reference: "Adobe Dreamweaver Classroom in a Book"

Dreamweaver - "Alternate text"

After you insert an image, a window will pop up asking you if you want to enter "Alternate text." This alternate text is what will be displayed in the situation when the image is for some reason not visible.

*Users with certain mobile devices, screen readers, or other browsing devices may not see images.

It is a good practice to enter Alternate Text for your images.

Dreamweaver - Inserting Images

Inserting images or graphics is very straighforward.

First you place an image on a webpage. Then, the image's properties, such as alignment, can be adjusted in the Properties Panel or within CSS.


reference: "Adobe Classroom in a Book"

Dreamweaver - Efficient Text Entry / Insertion

You are free to just type in whatever text you want on your site, but if it is already available somewhere, it wouldnt make much sence to have to type it in maually again, especially if it is a large amount of text.

Dreamweaver provides an intelligent engine for inserting copied text from other sources, such as MS Office, while retaining as much of the formatting as you desire.

In my experience, I found that you have to paste into the "Design View" for Dreamweaver to be able to preserve format for you. If you paste into "code view", for example, something that was originally divided into three paragraphs in MS Wordpad would appear as on huge paragraph after being copied and pasted into Dreamweaver "Code (HTML) View."

Search Engine Results - (manipulate from Dreamweaver)

Page titles are one of the key elements used by search engines to index websites.

Therefore, it is very important to always remember to change Dreamweaver's defualt "Unittiled Document" page title to a phrase that describes your specific web page.

The title of a webpage is displayed in the browser's title bar.



Reference: "Adobe Dreamweaver Classroom in a Book"

Flash - animate off the sceen

if you want an animation to display and then go (jump) off the screen, you can do your animation, and in the end, just make it move "off of the white portion of your scene (canvas?)" (into the grey portion of your flash editing window)

Flash - motion tweens

for a motion tween, you only need one key frame, the rest are all just frames

Dreamweaver - Select a Document View

You will be doing most of your web authoring in the Design Window.

Nevertheless, the Document window still offers you 4 different views:
1. Design View - renders a page in a browser-like context.
2. Code View - displays the page's source code.
3. Code + Design View - displays both code and design views. (this view is activated by pressing the Split button)
4. Live View - renders a page in a live browser within Dreamweaver.

Any changes in one view will also be instantly reflected in other views.

.......notes and excerpts from "Adobe Classroom in a Book"

Dreamweaver - .html or .htm

it is only a matter of personal preference whether you want to use .html  or   .htm  for file extensions. But you should be consistent!

Most websites use the name   index.html   for their homepages.

Dreamweaver - Selecting a CSS Layout

Notes and excerpts from "Adobe Classroom in a Book"

Adobe Dreamweaver cs4 provides 32 CSS layout files, all with different designs. In an exercise, you will select one and then modify it.

These CSS layouts are carefully tested to comply with web standards and to work cross-platform on all major browsers with no additional changes to the layout.


The following types of CSS layouts are provided:
1. popular two- and three- column layouts
2. fixed-width layouts (shown with a lock symbol)
3. percentage- or em-based layouts (shown with a spring symbol to indicate elasticity)
4. layouts that are a mixure of pixels, percentages, and ems

Adobe Dreamweaver will set itself as the default editor for the following file types:

Active Server Pages (asp)
Java Server Pages (jsp) [not automatically selected, did not select manually]
ColdFusion (cfm,cfc)
ASP.NET (aspx, ascx) [not automatically selected, did not select manually]
PHP (php, php3, php4)
JavaScript (js)
Cascading Style Sheet (css)
Extensible Markup Language (xml)
XSL Style Sheets (xsl, xslt)

Dreamweaver - basics - local and uploaded remote sites

in dreamweaver, you initially work with a local site stored on your hard drive. After you are finished, you can publish your site, and then you would also be working with a remote version of your site, which is stored on your web host's servers.

AdobeConnect - Broadcast and Record Webcasts

Talks on Computing Systems

Each week, the Carnegie Mellon Silicon Valley campus features a different speaker giving a talk on computing and tech topics.

Talks are broadcast and recorded using AdobeConnect.

Remote attendance is available via http://cmysv.acrobat.com/tocs.

Recordings are available in the talk archive.

http://www.cmu.edu/silicon-valley/news-events/seminars/index.html

http://www.cmu.edu/silicon-valley/news-events/seminars/archive.html

Flash - ActionScript - Using Labels on Keyframes

Your actionScript code tells flash to go to a different frame number when the user clicks each of the buttons. However, if you decide to edit your Timeline and add or delete a few frames, you will need to go back into your ActionScript and change your code so the frame numbers match.

An easy way to avoid this problem is to use frame labels instead of fixed frame numbers. Frame labels are names that you give to keyframes. Instead of referring to keyframes by their frame number, you refer to them by their label. So, even if you move your destination keyframes as you edit, the labels remain with their keyframes.

To reference frame labels in ActionScript, you must enclode them in quotation marks.

The command gotoAndStop("label1") makes the playhead go to the keyframe with the label called label1.

(to label a frame: in the Proerties inspector, enter label1 in the Label Name field.)

** excerpted from "Adobe Flash cs5 Classroom in a Book" **

Flash - ActionScript - ActionScript Commands for Navigation

ActionScript codes for common navigation commands.

Use these codes when you create buttons to stop the playhead, start the playhead, or move the playhead to different frames.

(note: the gotoAndStop and gotoAndPlay commands require additional information, or parameters, within their parentheses, as indicated)

*stop();
*play();
*gotoAndStop(framenumber or "framelabel");
*gotoAndPlay(framenumber or "framelabel");
*nextframe();
*prevframe();


***reference: "adobe flash cs5 classroom in a book"

Flash - ActionScript - Mouse Events

ActionScript codes for common mouse events.
(use these codes when you create ou listener)

*MouseEvent.CLICK
*MouseEvent.MOUSE_MOVE
*MouseEvent.MOUSE_DOWN
*MouseEvent.MOUSE_UP
*MouseEvent.MOUSE_OVER
*MouseEvent.MOUSE_OUT

Flash - ActionScript - adding the event listener and function

Add ActionScript code to listen for a mouse click on each button.

The response will make Flash fo to a particular frame on the Timeline to show different content.

(the above is referring specifically to the hand-on follow-along example on chapter 6 of "classroom in a book)

Flash - ActionScript - Event Handling - Create a Listener - Create and Specify a Function

The first step in event handling is to create a listener that will detect the event.

A listener looks something like this:

wheretolisten.addEventListener(whatevent, responsetoevent);



The actual command is addEventListener().
wheretolisten is the object where the event occurs (usually a button). [e.g. "btn1" (a button that you named btn1)]
whatevent is the specific kind of event (such as a mouse click).  [e.g. "MouseEvent.CLICK" ]
respondtoevent is the name of a function that is triggered when the event happens. [e.g. "showimage1" (a function that you naemed showimage1)]




The next step is to create a function that will respond to the event.

A function is simple a group of actions that are bunched together. You can trigger a function be referencing its name.

A function looks something like this:

function showimage1 (myEvent: MouseEvent) {};

In the above example, the function receives one parameter (within the parentheses) called myEvent, which is an event that involes the mouse. The item following the colon indicates what type of object it is. If the function is triggered, all the actions between the curly brackets are executed.


**reference: "Adobe cs5 Flash Classroom in a Book"

Flash - ActionScript - Events / Event Listeners / Event Handlers

Some events are created by the user, for example a mouse click, a mouse movement, or a key press on the keyboard. Other events can happen inpedendent of the user, for example the successful loading of a piece of data, or the completion of a sound.

With Action Script you can write code that detects events and respond to them with an event handler.


*reference: "Adobe cs5 Flash Classroom in a Book"

Flash - ActionScript - Script Navigator

At the bottpm left of the Actions panel is the Script Navigator. The Script navigator can help you find a particular piece of code.

ActionScript is placed on keyframes on the Timeline, so the Script navigator can be particularly useful if you have lots of code scattered in different keyframes and on different Timelines.



**excerpted from "Flash CS5 Classroom in a Book"

Flash - ActionScript

ActionScript is placed on keyframes on the Timeline.

Flash - ActionScript - the Actions Panel

The Actions Panel is where you write all your code.

Ways to open the actions panel:
1. Windows -> Actions
2. select a keyframe on the timeline and click the "ActionScript icon" on the top right of the Properties inspector.
3. right-click/ctrl-click on any keyframe and select Actions.
4. select keyframe on the timeline and press "F9"

Flash - ActionScript - automatic help from flash tools

@ color codes:
+ words that have specific meanings in ActionScript, such as keywords and statements, appear in blue as you type them in the Actions panel.
+words that are not reserved in ActionScript, such as variable names, are in black.
+Strings appear in green.
+Comments (which are ignored by ActionScript), appear in gray.

@click the "check syntax icon" to make the tool check the syntax of your script

@click the "auto format icon" to format the script according to conventions, so that your script will be easier to read

**reference: "flash cs5 classroom in a book"

Flash - ActionScript - Syntax

scripting syntax

* the dot operator (.) provides a way to access the properties and methods of an object. Type the instance name, followed by a dot, and then the name of the property or method. Think of the dot as a way to separate objects, methods and properties.

* whenever you are entering a string or the name of a file, use quotation marks

--reference: "adobe cs5 flash classroom in a book"

Flash - ActionScript

Adobe Flash CS5 uses Action Script 3.0, which is a robust scripting language, that can be used to extend the functionality of Flash.

ActionScript, which is similar to JavaScript, allows you to add more interactivity to Flash animations.

You can use ActionScript to attach behaviors to buttons.

You can also use ActionScript to perform simple tasks like stopping an animation..


**reference: "Adobe Flash CS5 Classroom in a Book"

Flash - Naming Instances

Naming instances is a critical step in creating interactive Flash projects.

Naming Rules:
1. Do not use spaces or special punctuation. Underscores are OK.
2. Do not begin a name with a number.
3. Do not use any word that is reserved for a flash actionScript command.

reference: "Classroom in a Book".

Flash - four states of a button English/中文

  Up       Over      Down          Hit

一般      滑入       按下       感应区

Flash - Notes - Chap.6 Classroom in a book

In Flash, you use ActionScript to achieve most interactivity.

ActionScript provides the instructions that tell each button what to do when a user click on one of them.

In chapter6, you will learn to create a "non-linear navigation", where a movie does not neccessarily have to directly play from beginning to end.--> Action script can tell the Flash playhead to jump around and go to different frames of the Timeline based on which button the user clicks. Different frames on the timeline contain different content. The user doesnt actually know that the playhead is jumping around the tmeline: the user just sees (or hears) different content appear as the buttons are clicked on the Stage.

.....excerpted from "Classroom in a Book", Chapter6

Photoshop - 2010 Oct 23

1. Task #1 - Pasting a copied background behind a frontal picture

open a jpeg landscape picture (to be used for the background)

go to 'select' -> 'all'

then go to the file with the frontal picture

'Edit' -> 'paste special' -> 'paste into'

This way the background will be pasted behind the family. If you just did a regular 'paste', the family and everything else would be blocked.


2. Task #2 - Make text display according to an arbitrarily defined path

'file' -> 'new'

'Freeform Pen Tool' -> go the the canvas and draw the path you want

'Horizontal type (text) tool' -> click somewhere on the path -> type the text you want

*I ran into a problem doing the above initially, some people can click on the left end of the path and be able to type throughout the entire path; when I did that, photoshop would restrict my text to a certain length, I had to click at the center of my path to be allowed to enter text into the entire length of the path.

3. Task #3 - Reflections - Today's Handout Details Steps and Concepts on This

'Edit' -> 'Transform' -> 'Flip Vertical' -> then drag to the correct reflection location

for the reflections: 'Opacity = 50%'

first do the reflection for the clouds

then do the reflection for the woman

then do the reflection for the frame

*in the case of the frame, since it has a sense of depth, just doing a vertical flip will not be enough, you will need to do:  'Edit' -> 'Transform' -> 'Skew" on the frame reflection, and then drag one edge of the reflection closer to the edge of the original frame

4. Task #4 - Layer Mask - Make the Woman Look Like She is Walking Out from the Frame

Click on the Layer the Woman is on -> click the 'add layer mask' button at the bottom of the layer panel (looks exactly like the 'quick mask' tool button in the tool panel, except here it has a different functionality)

Then click on the extra mask icon thumbnail that appears in the original layer thumbnail in the layer panel -> then use black to mask out (white to remove mask) , and mask out the portion of the womans leg that should be blocked by the frame when she is walking through it.

Flash - notes from previous session

1. Drawing by Merging

2. bend lines

3. " 'object drawing' option button" - that can be used with drawing rectangles (and other things)

4. use line to cut rectangles (cannot cut if it is an object), (you can "go into" an object by double clicking on it => then you can change it, and even after modification, it will still be an object)

5. ctrl + 'G'  => group anything that is selected  => they will become one object afterwards

6. double click on an object -> object drawing mode (into the object)

*HW: complete everything from chap.2 in book

7. thicken the "stroke" for a rectangle

8. change the "style" of a rectangle

9. smoothen rectangle edges

10. ctrl + shift + 'v'  => place exactly where it was (from different layer) (instead of anywhere with  ctrl + 'v' )

Flash

ctrl + 'z'  => to "undo", go back   (can press multiple times in succession)

color -> 'bitmap fill'

Digital Design - Chap. 7 , Chap. 10

7.1 Latches

sequential circuit:

a digital circuit whose output depends not only on the present combination of inputs, but also on the history of the circuit.


latch:

a sequential circuit with two inputs called SET and RESET, which make the latch store a logic 0 (reset) or 1 (set) until actively changed.


Chap. 10 - Summary

1. a state machine is a synchronous sequential circuit with a memory section (flip-flops) to hold the present state of the machine and a control section (gates) to determine the machine's next state.