1 / 33

SEEM4570: Introduction to Eclipse and CSS3

SEEM4570: Introduction to Eclipse and CSS3. Simon WONG Room 501 Email: khwong@se.cuhk.edu.hk. Outline. Eclipse Introduction Setup Install Plug-in New and Run a Project on an Emulator CSS3 Transition Animation Gradient Mask. Introduction. An Integrated Development Environment (IDE)

gelsey
Télécharger la présentation

SEEM4570: Introduction to Eclipse and CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SEEM4570: Introduction to Eclipse and CSS3 Simon WONG Room 501 Email: khwong@se.cuhk.edu.hk

  2. Outline • Eclipse • Introduction • Setup • Install Plug-in • New and Run a Project on an Emulator • CSS3 • Transition • Animation • Gradient • Mask

  3. Introduction • An Integrated Development Environment (IDE) • A standalone software • Support multiple languages such as Java, C, HTML, CSS3, php, etc. • Android Development Tools (ADT) Bundle • http://developer.android.com/sdk/index.html • Eclipse + ADT plugin • Android SDK Tools • Android Platform-tools, etc • Java EE IDE • Eclipse Java EE IDE for Web Developers • http://www.eclipse.org/downloads/ • Unzip the file to any place as convenience • Remember to install Java SDK • http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

  4. Environment • Setup in tutorial • Windows platform • Eclipse • Android • You can use another setting for the course like • Mac, Linux • Netbeans

  5. Setup • Choose a workspace • A directory used by Eclipse to store your source codes • If you are first starting, Eclipse will ask you to specify the workspace to use

  6. Install Android Plug-in • Must install Android SDK before (no need if installed ADT bundle) • http://dl.google.com/android/installer_r22.3-windows.exe • Eclipse: Help  Install New Software • Add the repository • https://dl-ssl.google.com/android/eclipse

  7. Select ADT plugin • Select all items under developer tools • Next

  8. Accept the Agreement • Accept the license agreement • Restart Eclipse

  9. Setup the Android SDK • Click “OK” for security warning • Click “Open Preferences” to setup the Android SDK

  10. Setup the Android SDK • Click “Proceed” • Select the Android SDK if you separate install Eclipse and Android SDK

  11. Create an Android Project • New  Other…Android • Android Application Project

  12. Basic information • Input application name and others • Select target SDK: API19 • Install the corresponding SDK version on the Android SDK manager if an error in theme

  13. Continue to Create • Click “Next” for following steps • “Finish”

  14. Initial Codes • If the MainActivity shows error, please try: • Project  CleanClean all projects

  15. Android Virtual Device • If no Android Virtual Device (AVD), an AVD need to be created • Open the Android Virtual Device Manager (or Eclipse will open it automatically)  New • Select device, target API version and CPU • Remember that you have install those API version before • For memory, please ensure the computer has enough memory. Otherwise, the emulator cannot start

  16. Run the Project • Right click the project folder • Run As  Android Application • In the first time, you may need to setup the AVD • Run As  Run Configuration  Android Application  Target

  17. Debug message • Unlike console program, the log need to be re-direct out of the emulator • Choose “Yes” for auto monitor logcat

  18. Create a New HTML and CSS Project • Eclipse: File  New  Project  Web Dynamic Web project

  19. Create New HTML pages • Right click the project  New  HTML File • Create CSS file in similar way

  20. Deploy the Webpage • Use J2EE Preview at localhost • After running the server, we can view in other browsers

  21. More Effect: Transition • Add an effect when • Change from one style to another • The effect will start when • the specified CSS property changes value

  22. Transition: CSS Example #Transition_id1 { width:100px; height:100px; background:red; transition:width2s; transition-property: width; transition-duration: 2s; } #Transition_id1:hover { width:300px; }

  23. Transition: HTML Example • <div id=“Transition_id1">Hover over me to see the transition effect!</div> • <div id="Transition_id2">No transition when hover because the id is difference</div>

  24. Animations • An animated image • Keyframe concept • The new style of animation • The animation will gradually change from the current style to the new style

  25. Animations

  26. Animations CSS Example Div#Animation_id { width:100px; height:100px; background:red; position:relative; -webkit-animation:AnimationName5s linear 2s infinite alternate; -webkit-animation-name:AnimationName; -webkit-animation-duration: 5s; -webkit-animation-timing-function:linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction: alternate; } @-webkit-keyframesAnimationName { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }

  27. Animation: HTML Example • <div id=“Animation_id">The animation will start automatically</div>

  28. Gradients • Display smooth transitions between two or more specified colors • CSS Example #gradient_id { height:200px; background: -webkit-linear-gradient(black, grey); } • HTML Example <div id="gradient_id"></div>

  29. Mask • A mask image is used as some kind of "color mesh", to filter the visual portions of an element • This feature is non-standard and is not on a standards track • Only support Chrome 1.0 and Safari 4.0 • CSS Example img#MaskID { -webkit-mask-box-image: url("MaskCircle.png"); } • HTML Example <img id="MaskID" src="Bee.png">

  30. Mask • -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]

  31. Transparent Picture • Remind “white” not equals to “transparent” • Use Photoshop or other software (e.g. paint.Net, http://getpaint.net) to set transparent

  32. Compatible • Most browsers are support CSS3 • Different browsers may need to use different command • Example • IE 10, Firefox, Chrome and Opera • transition: width 2s; • Apple Safari • -webkit-transition: width 2s; • Safari • background: -webkit-linear-gradient(red, blue); • Opera 11.1 to 12.0 • background: -o-linear-gradient(red, blue); • Firefox 3.6 to 15 • background: -moz-linear-gradient(red, blue); • For cross-platform, you may need to add both commands

More Related