Tatap Muka 04 TM04 Analisis, Perancangan dan Pengembangan Web Sisi Klien
• Capaian Pembelajaran Lulusan (CPL) yang
Dibebankan pada Mata Kuliah • Level KKNI: 6 • CPK-11 Mampu membuat dan mengevaluasi sistem aplikasi dalam membantu dalam penyelesaian masalah dan pengambilan keputusan berbasis project. TM04 Analisis, Perancangan dan Pengembangan Web Sisi Klien
• CPMK03-1 : Mahasiswa mampu mengalisis, merancang dan
mengembangkan aplikasi pada sisi klien (C5) • Pokok Bahasan: – Analisis, Perancangan dan Pengembangan Web Sisi Klien • Sub-Pokok Bahasan: – layout halaman web, – animasi – halaman web dengan CSS Topik • Layout halaman web • Halaman Web dengan CSS • Animasi dengan CSS Layout Halaman Web • Adding Links • Adding Images • Adding Tables • Forms • Layout dengan CSS Adding Links Adding Links Two ways to specify the URL • Absolute URLs • Relative URLs Absolute URLs Relative URLs Linking to Pages on the Web Targeting a New Browser Window Targeting a New Browser Window Mail & Telephone Links a few best practices for using telephone links • It is recommended that you include the full international dialing number, including the country code, for the tel: value because there is no way of knowing where the user will be accessing your site. • Also include the telephone number in the content of the link so that if the link doesn’t work, the telephone number is still available. • Android and iPhone have a feature that detects phone numbers and automatically turns them into links. Unfortunately, some 10-digit numbers that are not telephone numbers might get turned into links, too. If your document has strings of numbers that might get confused as phone numbers, you can turn auto-detection off by including the following meta element in the head of your document. Adding Images Adding Images Adding Images Adding Images Table Table Table Table Table Table Table Table Table Table Table Forms • There are two parts to a working form. The first part is the form that you see on the page itself that is created using HTML markup. • Forms are made up of buttons, input fields, and drop-down menus (collectively known as form controls) used to collect information from the user. • Forms may also contain text and other elements. Floating and Positioning • Both are CSS methods for breaking out of the normal flow and arranging elements on the page • Floating an element moves it to the left or right, and allows the following text to wrap around it. • Positioning is a way to specify the location of an element anywhere on the page with pixel precision Normal Flow • In the CSS layout model, text elements are laid out from top to bottom in the order in which they appear in the source, and from left to right (in left-to-right reading languages*). • Block elements stack up on top of one another and fill the available width of the browser window or other containing element. • Inline elements and text characters line up next to one another to fill the block elements. Normal Flow Floating • the float property moves an element as far as possible to the left or right, allowing the following content to wrap around it. • Floats are one of the primary tools of modern CSSbased • web design, used to create multicolumn layouts, navigation toolbars from lists, and table-like alignment without tables. Floating Floating Floating Floating inline and block elements Floating block elements Floating multiple elements • When you float multiple elements, there is a complex system of behind- thescenes rendering rules that ensures floated elements do not overlap. Floating multiple elements Floating multiple elements Page Layout With CSS • Fixed layouts stay put at a specific pixel width regardless of the size of the browser window or text size. • Fluid (or liquid) layouts resize proportionally when the browser window resizes. • Elastic layouts resize proportionally based on the size of the text. • Hybrid layouts combine fixed and scalable areas Fixed Layout Fluid Layout Fluid Layout Fluid Layout Elastic Layout Elastic Layout Hybrid Layout Future CSS Layout Animasi dengan CSS • The CSS Animations module allows authors to create real, honest-to goodness keyframe animation. • Unlike transitions that go from one state to another, keyframe animation allows you to explicitly specify other states at points along the way, allowing for more granular control of the action. • Those “points along the way” are established by keyframes that define the beginning or end of a segment of animation. • CSS transitions are animations with two keyframes: a start state and an end state. • More complex animations require many keyframes to control property changes in the sequence. Animasi dengan CSS • Keyframe animation is known as explicit animation because you program its behavior. • By contrast, transitions are an example of implicit animation because they are triggered only when a property changes. Animasi dengan CSS • The animation process has two parts: • first, establish the keyframes with a @keyframes rule, and then • Second, add animation properties to the elements that will be animated. Animasi dengan CSS • The animation process has two parts: • first, establish the keyframes with a @keyframes rule, and then • Second, add animation properties to the elements that will be animated. @keyframes rule Add animation properties • Which animation to use (animation-name) • How long it should take (animation-duration) • The manner in which it should accelerate (animation-timing-function) • Whether to pause before it starts (animation-delay) • How many times it should repeat (animation-iteration-count). • Whether it plays forward, in reverse, or alternates back and forth (animation-direction ) • Whether it should be running or paused. The play-state can be toggled on and off with JavaScript or on hover (animation-play-state). • Whether to override defaults that prevent properties from applying outside runtime ( animation-fill-mode) Animasi dengan CSS Terima kasih Atas Perhatian Anda