Ideal Reality 1 Reg Office: Cmd Line Reg Office: Cmd Line 2 Reg Office .

1y ago
40 Views
2 Downloads
924.98 KB
50 Pages
Last View : 9d ago
Last Download : 2m ago
Upload by : Olive Grimm
Transcription

Course Structure Ideal Reality 1 Reg Office: Cmd Line Reg Office: Cmd Line 2 Reg Office: Desktop v1 Reg Office: Desktop v1 3 Reg Office: Desktop v2 Reg Office: Web v1 4 Reg Office: Web v1 Reg Office: Web v2 5 Reg Office: Web v2 Reg Office: Desktop v2

Client-Side Web Programming: CSS Copyright 2022 by Robert M. Dondero, Ph.D. Princeton University 2

Objectives We will cover: – How to make good looking responsive web apps 3

Objectives We will cover: – – – – The smartphone viewport Cascading style sheets (CSS) Responsive web apps CSS libraries 4

Agenda The smartphone viewport CSS Responsive web apps CSS libraries 5

Smartphone Viewport Recall PennyJQuery app – Laptop computer (large browser window) OK 6

Smartphone Viewport Recall PennyJQuery app (cont.) – Laptop computer (small browser window) OK 7

Smartphone Viewport Recall PennyJQuery app (cont.) – Smartphone (very small browser window) Chrome: More tools - Developer Tools Unacceptable 8

Smartphone Viewport Original problem: Truncation Laptop Browser Smartphone Browser 1 2 3 4 1 2 3 4 5 6 7 8 5 6 7 8 In the early days of smartphones There were no responsive web apps Web apps were not responsive to (very small) window sizes Truncation was common 9

Smartphone Viewport Original solution: Smartphone viewport Laptop Browser Smartphone Viewport Smartphone Browser 1 2 3 4 1 2 3 4 5 6 7 8 5 6 7 8 scale Viewport: Virtual window used by iPhone browser And later by all smartphone browsers Smartphone browser Renders HTML doc to viewport Scales viewport to physical window No truncation, but too small! 10

Smartphone Viewport Current problem: Viewport inappropriate for responsive apps Smartphone Viewport 2 3 4 5 6 7 8 have 1 Smartphone Browser 1 2 3 4 5 6 7 8 want Laptop Browser 1 2 scale Smartphone Browser Responsive app Doesn’t want browser to render to (large) viewport and then scale Wants browser to render to smartphone browser window 11

Smartphone Viewport Current solution: Bypass viewport concept Smartphone Viewport Laptop Browser 1 2 3 4 1 5 6 7 8 2 Smartphone Browser scale 1-1 1 2 Set size of viewport to size of smartphone browser window Scale 1-to-1 12

Smartphone Viewport See PennyViewport app – – – – – runserver.py penny.sql, penny.sqlite book.py, database.py penny.py index.html 13

Smartphone Viewport See PennyViewport app (cont.) – Laptop computer (large browser window) OK 14

Smartphone Viewport See PennyViewport app (cont.) – Laptop computer (small browser window) OK 15

Smartphone Viewport See PennyViewport app (cont.) – Smartphone (very small browser window) Maybe OK? 16

Agenda The smartphone viewport CSS Responsive web apps CSS libraries 17

CSS Problem: (Prior to CSS) – Specification of style info was repetitive & difficult to maintain somefile.html html body font color "red" h1 First Heading /h1 /font font color "red" h1 Second Heading /h1 /font /body /html 18

CSS Solution: Cascading Style Sheets (CSS) – – W3C standard Defines rules that browser uses to render HTML elements 19

CSS External rules: rules in an external style sheet mystyle.css h1 {color:red;} somefile.html html head link rel "stylesheet" href "mystyle.css" /head body h1 First Heading /h1 h1 Second Heading /h1 /body /html 20

CSS Embedded rules: rules in an embedded style sheet somefile.html html head style h1 {color:red;} /style /head body h1 First Heading /h1 h1 Second Heading /h1 /body /html 21

CSS Inline rules somefile.html html body h1 style "color:red;" First Heading /h1 h1 style "color:red;" Second Heading /h1 /body /html 22

CSS To style a HTML document, browser applies: – – – Rules created by browser developer Rules created by browser user CSS rules created by HTML document author CSS external rules CSS embedded rules CSS inline rules Browser “cascades” through rules 23

CSS CSS rule syntax: selector { property:value; property:value; . } 24

CSS selector { property:value; property:value; . } 25

CSS From https://www.w3schools.com/cssref/css selectors.asp Selector Example Example Description .class .xxx Select all elements with a class attribute whose value is xxx #id #xxx Select the element with an id attribute whose value is xxx * * Select all elements element p Select all p elements element,element div, p Select all div elements and all p elements element element div p Select all p elements inside div elements element element div p Select all p elements where the parent is a div element 26

CSS From https://www.w3schools.com/cssref/css selectors.asp Selector Example Example Description [attribute] [type] Select all elements with a type attribute [attribute value] [type text] Select all elements with a type attribute whose value is text selector::after p::after Insert something after the content of each p element selector::before p::before Insert something before the content of each p element And many more (58 of them) 27

CSS selector { property:value; property:value; . } 28

CSS From https://www.w3schools.com/cssref/default.asp Property Example Example Description font-family font-family:Arial Set the font family of text within the selected element(s) to Arial font-size font-size:20px Set the font size of text within the selected element(s) to 20 pixels color color:white Set the color of text within the selected element(s) to white background-color background-color:#295078 Set the background color of the selected element(s) to r:29, g:50, b:78 text-align text-align:center Set the horizontal alignment of text within the selected element(s) to center border-style border-style:solid Set the style of the four borders of the selected element(s) to solid border-color border-color:gray Set the color of the four borders of the selected element(s) to gray border-width border-width:1px Set the width of the four borders of the selected element(s) to 1 pixel And many more (over 200 of them) 29

CSS See PennyCss app – – – – – – runserver.py penny.sql, penny.sqlite book.py, database.py penny.py static/penny.css index.html 30

CSS See PennyCss app (cont.) – Laptop computer (large browser window) Good 31

CSS See PennyCss app (cont.) – Laptop computer (small browser window) OK 32

CSS See PennyCss app (cont.) – Smartphone (very small browser window) Maybe OK 33

Agenda The smartphone viewport CSS Responsive web apps CSS libraries 34

Responsive Apps Problem: – Web apps should adjust themselves based upon browser characteristics Solution: – Responsive web apps 35

Responsive Apps Responsive web app – Rearranges tables – Collapses menus – Large window ordinary menu Small window drop-down menu Hides some content – Large window multiple columns Small window fewer columns Large window display all content Small window hide some content Etc. 36

Responsive Apps See PennyResponsive app (cont.) – – – – – – runserver.py penny.sql, penny.sqlite book.py, database.py penny.py static/penny.css index.html 37

Responsive Apps See PennyResponsive app (cont.) – Laptop computer (large browser window) Good 38

Responsive Apps See PennyResponsive app (cont.) – Laptop computer (small browser window) Good! 39

Responsive Apps See PennyResponsive app (cont.) – Smartphone (very small browser window) Good!!! 40

Agenda The smartphone viewport CSS Responsive web apps CSS libraries 41

CSS Libraries Problem: – – Composing CSS rules is tedious CSS patterns (e.g., grid system) are common Redundancy across apps 42

CSS Libraries Solution: CSS libraries – – Define CSS rules Examples: Bootstrap Foundation YAML Blueprint W3.CSS 43

CSS Libraries Bootstrap – – From Twitter The most popular CSS framework W3.CSS – – From W3Schools Not popular, but simple & pleasant 44

CSS Libraries: Example See PennyBootstrap app – – – – – – runserver.py penny.sql, penny.sqlite book.py, database.py penny.py static/penny.css index.html 45

CSS Libraries: Example See PennyBootstrap app (cont.) – Laptop computer (large browser window) Good 46

CSS Libraries: Example See PennyBootstrap app (cont.) – Laptop computer (small browser window) Good! 47

CSS Libraries: Example See PennyBootstrap app (cont.) – Smartphone (very small browser window) Good!!! 48

More Information To learn more about CSS – – Learning PHP, MySQL, & JavaScript, 4th Edition (Robin Nixon), Chapters 18, 19 https://www.w3schools.com/css/ To learn more about Bootstrap – https://www.w3schools.com/bootstrap5/ 49

Summary We have covered: – – – – The smartphone viewport Cascading style sheets (CSS) Responsive web apps CSS libraries Bootstrap 50

1 Reg Office: Cmd Line Reg Office: Cmd Line 2 Reg Office: Desktop v1 Reg Office: Desktop v1 3 Reg Office: Desktop v2 Reg Office: Web v1 4 Reg Office: Web v1 Reg Office: Web v2 5 Reg Office: Web v2 Reg Office: Desktop v2. Client-Side Web Programming: CSS . - book.py, database.py

Related Documents:

cream reg. 12 99 anti-wrinkle day cream 1.6 oz reg. 2099 rapid repair dark spot corrector reg. 20 49 regenerist night treatment reg. 14 39 revitalift eye serum reg. 1999 rapid wrinkle repair daily moisturizer reg. 1439 revitalift face & neck cream reg. 1489 ultra lift 2-in-1 serum moisturizer reg. 7 99 dry skin cream 10 oz reg. 639 complete .

IDEAL 4810-95 IDEAL 4850-95/EP IDEAL 5221-95EP IDEAL 6550-95EP B C A 4 x Only IDEAL 4810-95, IDEAL 4850-95/EP, IDEAL 6550-95EP Remove the stand from the wooden pallet. Only IDEAL 4810-95, IDEAL 4850-95/EP, IDEAL 6550-95EP 4 strong people are required to lift the machine from the pallet and place it on the stand. Secure with 4 .

IDEAL 4810-95 IDEAL 4850-95/EP IDEAL 5221-95EP IDEAL 6550-95EP B C A 4 x Only IDEAL 4810-95, IDEAL 4850-95/EP, IDEAL 6550-95EP Remove the stand from the wooden pallet. Only IDEAL 4810-95, IDEAL 4850-95/EP, IDEAL 6550-95EP 4 strong people are required to lift the machine from the pallet and place it on the stand. Secure with 4 .

American Integrated Security Group 22-0288-REG 31DEC2026 American Interiors Inc. 21-0406-REG 31DEC2025 American National Skyline, Inc., dba ANSI 22-0060-REG 31DEC2026 American Residential Services, LLC 22-0155-REG 31DEC2026 American Roadway Logistics, Inc. 14-0019-REG 31DEC2022 American Structurepoint, Inc. 20-0004-REG 31DEC2024 American Timber .

alternative reality market. The Alternative Reality Landscape Virtual Reality Augmented Reality Mixed Reality What it Does Changes reality by placing the user in a 360-degree imaginary world. Visible world is overlaid with digital content. Like AR, but virtual objects are integrated into and respond to visible surroundings. Where it Stands

pembelajaran augmented reality dan kelompok siswa yang diajar dengan menggunakan media pembelajaran virtual reality sebesar 5.71. Penelitian ini menunjukkan bahwa ada peningkatan hasil belajar dengan menggunakan media virtual reality dan augmented reality, serta terdapat perbedaan efektivitas antara media virtual reality dan augmented reality.

IDEAL 4810-95/EP IDEAL 4850-95/EP IDEAL 5221-95EP IDEAL 6550-95EP C Only IDEAL 4810-95/EP Attach the enclosed hand-wheel for clamping. Parts and tools are in the tool set (C). Plug into socket. The machine must be connected directly to the socket. Installation

A02 transactions for nonpermanent employees, including: TAU Limited Term T&D assignments Retired Annuitants Emergency 3. 120 transactions for employees who may have been placed in a duplicate position number as a result of the mass update. Departments should run a MIRS report to identify affected employees. In order to limit the fallout and manual processing required, departments should not .