Style Sheet CSS3 special effect on the text link

Look at the demo for text links by using CSS3 instead of image links.

http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/

Educational app market for IOS.

http://blog.lescapadou.com/2011/10/how-ive-made-200000-in-ios-education.html?spref=tw

Statistic of client side Browser Resolutions

1280x1024	14.8 %
1280x800	14.4 %
1366x768	10.1 %
1440x900	9.9 %
1680x1050	9.2 %
1920x1080	6.2 %
1920x1200	4.5 %
1600x900	2.5 %
1152x864	1.5 %
1360x768	1.3 %
Other high resolutions	10.7 %
Sum	85.1 %

User's OS Statistic

2011	Win7	Vista	Win2003	WinXP	Linux	Mac	Mobile
May	36.5%	7.1%	0.9%	40.7%	5.1%	8.3%	0.8%
April	35.9%	7.6%	0.9%	40.9%	5.1%	8.3%	0.8%
March	34.1%	7.9%	0.9%	42.9%	5.1%	8.0%	0.7%
February	32.2%	8.3%	1.0%	44.2%	5.1%	8.1%	0.7%
January	31.1%	8.6%	1.0%	45.3%	5.0%	7.8%	0.7%

Web Marketing 2: How to Sell on Ebay and Advertise Your Products/Services

Before you start to create an account, try to search similar product on Ebay first and study the market and selling channel.

Create an ebay selling and paypal acount:
Register an account with Ebay which will continue with Paypal account (linking with bank or credit/debit card), then, login to create a seller account. You will need to pay for the listing fee (can be credit back if doesn't sell or didn't get pay) and the final fee.

Top 10 tips for new seller study the keyword carefully.

Top ten growth strategies:http://pages.ebay.com/sellerinformation/increaseyoursales/top10growth.html

Ebay business seller guide: http://pics.ebaystatic.com/aw/pics/pdf/us/AdvancedSellingGuide/AdvancedSellingGuide.pdf

Have a website done then exposed your product on media and searching engine

web design guidline

http://www.youtube.com/watch?v=a0qMe7Z3EYg

searching engine guidline

http://www.youtube.com/watch?v=HTn91hKJ5xI&NR=1
Domain name guidline

http://www.youtube.com/watch?v=TL7oV5EY59U&feature=user

Creating Google and SEO friendly Page titles

http://www.youtube.com/watch?v=MjIEPT3tEtk&feature=user

Google for Advertisers A "Worst Case" study http://services.google.com/advertisers/us/promos/petstick

1. Web 2.0: “changes in the ways software developers and end-users utilize the Web.” And now the businesses’ approaches using internet/ web technology.
“Web 2.0 concepts have led to the development and evolution of web-based communities and its hosted services, such as social-networking sites, video sharing sites, wikis, blogs, and folksonomies.”
“Business model” is still the key to success in this web 2.0 trend.
2. Searching engine marketing (SEM) 2006 is advertiser spend 9.4 billion on it. Increase 750% from previous years
Methods:
Searching engine optimization (SEO)
Paid placement (SEM)
Paid inclusion (SEM)
SEM: You control the landing page the view see.
SEO: the traffic is free, no control of which page the viewer might see in your site (spiders decide)

Web marketing-what you need for online business

What you need to start a online business:
A domain name www.GoDaddy.com
A website with web pages
An email broadcst/ autoresponder service www.aweberSystem.com
A shopping cart service www.1shopingCartSystem.com
a product to sell
a Google adwords account http://adwords.google.com/select/TrafficEstimatorSandbox

Check on www.perrymarshall.com/bookbonus

SEO knowledge in video:

5 winning SEO strategies 1-3

http://www.youtube.com/yahoosmallbusiness#p/u/40/_AtlhI4dQy0

http://www.youtube.com/yahoosmallbusiness#p/u/39/9vr5ysF4iBc

http://www.youtube.com/yahoosmallbusiness#p/u/38/x5aI8jOQkIk

Signing up a web host account and self learn xhtml

Self learn xhtml
http://www.w3schools.com/xhtml/xhtml_syntax.asp
Video Tutorial http://www.adobe.com/designcenter/video_workshop/ Web design http://www.webdeveloper.com/design/

Separate presentation from contents by using CSS Style Sheet
CSS Style Sheet in Dreamweaver
http://www.adobe.com/go/vid0152

Sign up a web host account: Yahoo small business http://smallbusiness.yahoo.com/webhosting/?p=PASSPORTPLUS
Network solution ecommerce
http://www.Networksolution.com

Free website app built with Flash
http://www.wix.com

Get to know Ajax
Ajax Tutorial http://www.w3schools.com/ajax/ajax_browsers.asp

Web Design IV -2 a Free Host Upload to, Online Web Tools

Bravenet site instruction:
Sign up: click under log in box, join Bravenet, you must use real email. After successfully signing up, if there’s box pop up ask for cell phone number, click on proceed to member’s area button at the end of page and validate your email by clicking on the link and re-login.
How to get free subdomain from Bravenet.com: ( * find “log out” from member tab area or website tab on the right top corner)
Go to bravenet.com join Bravenet, and login.
After login in the membership area
1.Click on free web hosting panel, “get free hosting” button and you’ll be in the “website” tab area;
2.Click get bravehost( It may require you to relog in again)
3.Choose free “signup now” button. You will be in Website Manger area under website tab.
4.Click on the link “Build a new website”
5.Click on “Use a subdomain” and enter a proper name for your subdomain such as yinawu1.bravehost.com.
6. If the subdomain hasn’t be taken, then click on “create a subdomain button” which is a web address use a “.” branch out from bravenet.com for example: http://yinawu.branet.com * note: there’s no www.
Upload to bravenet:
1. Create SFTP account with bravenet try to use the same user name and password and accept their term.
2. On the right panel which represents the remote sever, click on folder icon on the right top corner to get to your subdomain
3. On your left panel is your local site, click on the folder icon to choose where your dreamweaver local site folder at.
4. High light the item, click the >> button to upload to correspondent folder, relatively same structure as your local site. * Whatever folders you have on local site; remote site need to have the same name folders, and same files in that right location as local.
5. If you need to edit a html file with their online editor, choose your subdomain that you want to edit first (you may have more than one subdomain)
6. Click on text/visual editor link
7. Right click on the file you would like to editàchoose visual editor
8. Click on the block of text, while it high lighted, click inside to edit the text.
9. Don’t forget to save (the icon look like a floppy disk on the top left tool panel) and you may view it from the link on the top right corner.

*note: Bravenet .com is the URL where you login, your_subdomain.bravehost is the front side to show your pages.

How to create a template based website on bravenet using their online tool:
1. Click your subdamain
2. Under Website tab choose website wizards
3. Start building your website
4. Quick build from theme (see the color matching boxes, and choose the layout too)
Pick a theme and click on use this theme and fallow the step on first page and other page.
5. If you need to edit the text, click on the file; click inside the box and type your texts.
6. Don’t forget to save and publish
7. Tell your friend and family your website: your_subdomain.bravehost.com

Web Design IV, Apply Style Sheet to html with Dream Weaver

How to apply style to your html
If need detail steps, please follow tutorial: create a new stylesheet
Format your text, link style sheet, edit your style sheet.
CSS style sheet: http://www.adobe.com/go/vid0152.
Or tutorial for Adobe CS5
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt4.html

For CSS3 stylesheet to have special effect on the text while roll over

http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/

Web Design Class III- Using Photoshop to Start with Creating a Page

Why do we use Photoshop to start with for creating a site?
Because designers use Photoshop to show their clients the looks and feels of design.
Transfer from printed material to webpage.
Why do we slice the whole piece of image to smaller ones?
Smaller image’s download time is faster
Since image file is bigger then text/html code, we can delete unnecessary blank image piece, and use background color to replace it. And use real text to replace image text, so we can apply style to it, and make the file smaller for quicker download time.

Create a new site name Quick_Site from your last week’s sliced image:
Create a folder name it “quick” and drag (1) index.html (or if you forgot to name it index, it should be “photoshop” or “design1”) and (2) images folder into your “quick” folder. Define a site by click site menu from Dreamweaver siteànew site and select advance tab from the top, select local info on the left panel. Give a name of the site and click on the folder icon of local root folder: select your quick folder, and then select image folder inside your quick folder as default image folder. Click link relative to document, and leave URL blank (unless you have a site out there running).

Open your site first page: index.html and delete the “text image”, replace it with real text.

3.Create hyper link


Continue with Café Townsend tutorial add text apply CSS style sheet and create a new style sheet

Cascading Style Sheets Video
http://www.adobe.com/go/vid0152.
Open index.html do page space layout using “div” tag or under Layout tab
Insert text, and image by drag from file panel

Flash Aniamtion CS3 Class outlines: Move with guild line and button symbol

1 Review: Use Key frame (F6) on where the object changes (location or shape)*note: don’t convert into symbol for Shape tween Frame (F5) nothing different except for time.

Motion Tween: click 1st frame drag the object to the stage. Click the 20th frame hit F6 to insert key frame, and drag the object to the new place. Click in between frame with right click mouse key to add motion tween. 2. Control g: group together, Control b, break apart, Control z, undo Control a, select all press > forward one frame, < backward one frame press enter to test press Ctrl +enter to play on the window CS3 Video Tutorial http://www.adobe.com/designcenter/video_workshop/

Motion tween with guideline.

1.On frame 1draw an object, converted object into symbol (button or movie clip symbol)

2.While the object layer is highlighted, click the add motion guide (next to insert new layer button). Note: the object must be under the guide layer.

3. Click on the guide layer, use pencil to draw a wavy line across stage on the guide layer.

4.On frame1, use pointer tool (the arrow) pick the object onto the line; make sure the center snap onto the guide line’s beginning,

5.on frame 50 insert new key frame on both object and guide layer,

6.drag the object to the end of the guide line. 7.Test it by control enter.


Make a Button Symbol :

1.Insert another new layer name it button, and on that layer draw an oval shape, right click mouse select convert to symbol àbutton.

2. Double click the button symbol into button edit mode;

insert keyframe on every section “up”,“over”, “down”, “hit” by click under the word “up” on the timeline and insert key frame by F6.

And repeat the same on “over”, “down” and “hit”.

And then change color or shape on “over” keyframe by double click again get into group mode, repeat the same on “down” keyframe for another color or shape.

“Hit” is only a place holder that will not show anything.

In case you want an invisible button, delete the images on Up, Over Down, but keep a space by draw anything on “Hit”, when using invisible button, make sure audience will know where to click.

Check user’s Version of flash player File -->Publish setting -->html tab select detect Flash version button

Trouble shooting and helphttp://www.adobe.com/support/flash/

Flash Animation II

Review:

Always go back to selection tool

Creating a new layer

Keyfram and frame

Creating a motion tween

Import an object

Shortcut keys:

Insert a new keyframe: F6

Insert a new frame: F5

Convert to symbol. Or right click convert to symbol, F8

Group together: Control + G. First use selection tool to select all the objects,

Objective:

Nest animation: Creating an animation within the animation

Preparing the background

1. Down load a background image: by right click mouse--> save picture. Save image to your new folder and name it “background” and then

2.Import background image to library: from Flash file-->import-->library

Create background layer, helicopter layers

3.Name or insert a new layer by click on the tiny icon on the lower left of timeline.

4.Drag images from library to the stage onto the background layer (if library is not open, check from window menu or on your right panel’s triangle tab to expand it) and name the layer to “bg” which is always the bottom layer.

5. Insert 3 new layers, by click icon or insert menu--> time line -->layer and double click layer2, 3,and 4 and rename to rotor, chopper , and tail.

6. Import 3 parts of helicopter to library.

7. Drag parts from library to stage and assemble them, then use transform tool to reduce size.

*make sure they have been converted to symbols already.

Nesting Animation

Double click on the rotor to enter rotor itself animating mode (if object hasn’t converted to symbol, it will be paint edit mode)

Note: this is only one level behind the since.

8 Insert keyfram on 5, 10 on the rotor animation mode and use the free transform tool to rotate the object on frame 5 and 10.

Click in between frame1, 5 on timeline right click--> motion tween

Click in between frame 5, 10 create motion tween

Hit enter to test

9. Back to scene 1 by click on the since icon locate under timeline

10 Repeat step 8-9 on tail

11 Group together all 3 parts by using selection tool select them, then, Control +G

12 Create motion tween for the helicopter from on place to another place by entering

keyfram on since 1(I expect you know how to do it now)

13. Add music layer, import music to library and drag onto stage on music layer

14 Control + Enter to test play.

Web Design Class II

A recommended book to read from Google's free book online

Web Class

Review:

1. Before jump into create a new page from Dreamweaver, better create new ___SITE______ first; and before create new site, better have __PLAN_______.

2. tag which contains information for searching engine is located within __HEAD______ tag; and your page contents should be within __BODY______ tag.

(1) …. (2) ….

Short cut for fast web page development.

3. From IE Browser click ___PAGE_____àview Source to see the source code, so you can learn/borrow code from other web site.

From IE Browser Click Fileà Save as from internet site to your local folder and open Dreamweaver.

4. What should you name your default first web page of your site ___INDEX____________.html

Other ways to do a simple web page

Online editing tool provided by the webhost. such as Drople, Bravenet...

Photoshop a image, then use slicing tool to cut and then FILEà save for web and device

Demo Page Design and Layout
Process for designing a web page: Plan, sketch, take photos, and put elements in image tool such as Photoshop or Illustrator, then finally use Dreamweaver to assemble a web page.
Copy Café Townsend folder inside: T driveàwebclass_wu to your H drive, then do the tutorial:

1. Create Dreamweaver site

2. Layout with

3. Add contents:

Adding image by dragging it from the right File panel or Insert image

Adding Flash from Insert---media ---flash

4. Format the content with CSS style sheet (will talk about this next time)

Cascading Style Sheets Video

http://www.adobe.com/go/vid0152.

Animation Class in FAS Continuing Education

Flash Animation Thursday: 7:00-9:00pm Instructor: Yina Wu

Animated images are almost magical in their ability to capture our imagination as well as people’s attention on the internet. Whether you are adding magic to your own website or purely for self-entertainment, this fun and enjoyable class is a must for web designers and creative individuals. Through this course, students will demonstrate visual graphic skills and reveal their talents in animation.

Required: An e-mail account, USB Flash Drive to save your work

Online Resource Download 30days trial version of Flash: You need to sign up an account with Adobe first. http://www.adobe.com/downloads/?ogn=EN_US-gntray_dl_trialdownloads

CS5 demo: http://tv.adobe.com/show/learn-flash-professional-cs5/

Keywords and Flash environments:

The Stage is where your graphics, videos, buttons appear during playback. Any object’s movement if not within the stage, it can’t be seen.

The Timeline is where you tell Flash when you want the graphics and other elements of your project to appear. Timeline is made of Frames and Keyframs; it presents the time, by default, 16 frames per second. You also use the Timeline to specify the layering order of graphics on the Stage. Graphics in higher layers appear on top of graphics in lower layers. If timeline bar is not shown, open it from Window---Timeline

A keyframe is a frame where some property of an object is explicitly changed, A keyframe has a small dot or circle within the frame. Black dot indicates that there’s an object on the stage, empty circle means there’s no object on the stage during that frame of time.

A regular frame indicates no change since last keyframe. Frames represent the time by tiny rectangular boxes. The Library panel is where Flash displays a list of the media elements in your Flash document. Usually located on the right panel. If it’s not there, open it from Window ----library

A symbol is a media asset that can be reused anywhere in your Flash document without the need to re-create it. Most animated objects need to convert into symbol first by right clicking on the object----convert to symbol

Demo: toolbars usage Practice: Using drawing tool to draw a charater or device.

Practice Tutorial:

1. Create a simple Flash document http://www.adobe.com/designcenter/flash/articles/flacs3_createfla_02.html

2. Animate the circle step 1-9 http://www.adobe.com/designcenter/flash/articles/flacs3_createfla_03.html draw an object and 1.select it with selection tool.

From 2.Modify -- convert the object to symbol(right click convert to symbol), select the layer and the appearing first frame;

3. put object symbol to the beginning place; select a fame on the timeline and where on the stage, insert--timeline--keyframe (F6)

4.and move the symbol object to the final place.

5.Click in between in the timeline and change in the tween box to Motion under the properties tab (or right mouse click, motion tween)

5.Hit enter to play and test.

Add motion guide by clicking the guide line button on the time tine bar, and on the first frame, drag the object center to the begging of the guide line; then on the last frame, drag the object to the end of guide line. Motion Tween http://www.adobe.com/designcenter/video_workshop/?id=vid0125 Shape Tween http://www.adobe.com/designcenter/video_workshop/?id=vid0124 Video demo overview: http://www.adobe.com/designcenter/video_workshop/ Basic Flash Tutorial cs5 animates objects differently, please watch this http://tv.adobe.com/show/learn-flash-professional-cs5/

Web Design Class-general links and outlines

This class is for those who are looking for more personal enrichment and willing to step outside of their comfort zones to try to become a web designer or online entrepreneur. Try to be front end developer, doing online business or just for life enrichment

Log on to FAS network computer: Use computer 1-4, 13-17,or 18-21 with username CE1-20

classOutline location: my computer->t drive (utilities on fashome)->webclass_wu

->classOutline->webclass1~

1: Intro to Dreamweaver-industry standard tool (2 class meets) and a website tool Bravenet combined with Dreamweave (2 classes)

Overview of the internet technology:

First class could be overwhelming; topic will be broke down to smaller chunk latter

Objective:

1.Create first page in the website: index.html

2.Create local site and reference it

3.Insert images and hyperlinks--investigate insertion and property panel Find the text contents and images- from .text

Terminology:

Blog: web log, journal like recording what’s happening in life.

WordPress: a popular blog site, and blog software that can be installed in your own site.

Domain Name: The name for your web site and email (2^nd part); DNS will point the domain name to the machine (web server’s IP address). It is easier than IP address to remember.

Social network: a site (facebook.com or myspace.com) on the internet or company’s network to post or exchange information, photo, video, etc. This is a very efficient and low cost on target audience to spread out the information as advertising.

Sub domain: a sub name site under a company’s domain, it can be comprehended as just a folder under someone’s name.

Wiki: A collaborative website whose content can be edited by anyone who has access to it.

Web Host Server: The computer that serves your pages to browser. It must have a static IP address and set it to public accessible through http protocol.

Root of website: Folder where you put your web page files index.html or default.html.

ISP is internet service provider who connects you to internet, ex Comcast, SBC, AOL….

FTP up load/down load: Using File Transfer Protocol to put file or get file, which is more reliable than using http protocol. DNS: the domain name server which point out which web server’s URL has that certain name’s site.

TCP/IP: Lower layer of protocol used in internet networking.

Router: Machine forward data packets to where it should go and also differ/ control internet traffic.

Directory: the path of the file located. Since we don’t have web server yet, when you are setting up your Dreamweaver site, use document as path, rather than site root for now.

Related info and setup for the class

http://sites.google.com/site/webandanimation/

Register a free web host and sub domain:

http://www.weebly.com/

http://jigsy.com/

Set up a website folder on your local computer

After logging on, create a folder in your H personal drive (right click your mouse button,ànewàfolder, click inside of the text box and name it: yourname, company_web or local_sites) This will be the website root on your local machine. Remote site, on the web server, should mirror to this site’s structure. Download tutorial sample files to your local_sites folder, and extract them inside local_site.

Also check out the file “newsite” in the same folder. http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html cafe_townsend_cs3.zip (ZIP, 2.1MB)

Play simulation to define a new site first. Defining a site is important, because most of the pages’ problem latter would be from this. http://www.adobe.com/devnet/dreamweaver/articles/getting_started_dreamweaver_cs3.html when setting up a new site select advanced tab, give a site name, select the site folder (local_site), and select image folder inside your site folder. Click document rather than site root this time. Steps to build a website

• Planning a Website :Search domain name available



• Determining the Site Mission :purpose of this site



• Determining the Audience



• Organizing Content



• Determining Technologies for a Site: Search web host that can provide the technology/services



• Creating a Mock-up: start to create the pages



• Appling Design Principles: keep the same look and feel through the site



• Developing Readable Content for the Web : text choice



• Improving Readability: accessibility issues



• Performing Usability Testing



• Increasing Search Engine Rankings

Resource on line Download 30 days Trial Dreamweaver http://www.adobe.com/downloads/?ogn=EN_US-gntray_dl_trialdownloads

Download tutorial http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html ore Tutorials: http://www.adobe.com/devnet/dreamweaver/?navID=gettingstarted More learning about coding http://www.webdeveloper.com/design/

Dreamweaver Web Design Introduction http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-01-introduction/

OVER VIEW -Server

-Client

-How they're linked together

HTML: hyper text mark up language html 5 now http://diveintohtml5.org/

Cascade style sheet

now is CCS3 some of the new features

CSS3 border-radius property

Media Queries: http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/

Design in Photoshop-images in 3 formats .gif(head edged graphic), .mpg,(gradient tones photo) .png(layer transparent)

Create first page: index.html Create local site and reference it

Insert images and hyperlinks--investigate insertion and property panel

Find the text contents-

If you have something in mind that requires many technical functionalities, you may need to use ready made building blocks.

Drupal http://drupal.org/getting-started/before/overview

another web tool

http://jigsy.com/

Social media to advertise:

http://www.facebook.com/advertising/?campaign_id=225919016727&placement=emu&creative=tfa&keyword=ret_oc