ITP 140 Midterm

web and html

web servers store and serve web pages. web browsers retrieve pages and render their content based on the html and css. html is the main language for web pages

GUI (graphical user interface)

what the users sees and interacts with type of user interface allows users to interact with electronic devices with images rather than text commands. Components: icons, pointer, window, menus, dialog boxes, toolbars.

User Experience Design

"User experience design deals with all aspects of the user's interaction with the product: how it's perceived, learned, and used" - Donald Norman - For mobile devices, these aspects can include everything from the interaction and visual design to the app's performance

Interaction Design

"using your technical knowledge in order to make it useful for people, to delight someone, to make someone get excited about the new technology they're using" exploring how a user might interact with it

gTLDs

.com and .net : operated by veriSign Global Registry Services .org : noncommercial organizations including nonprofit and nongovernmental organizations, charities, religious organizations, etc. Managed by the public interest registry (PIR). created by the internet society (ISOC) .edu: postsecondary accredited institutions & registered only through EDUcause via verisign .gov: us governement & operated by us general services .int: registering orgaizations & operated by IANA .mil :US military & operated by us department of defense

Most market share for smartphone plarform

1. Android (86.8%), 2 is Ios (12.7%)

8 golden rules of interface design

1. Strive for consistency 2. Cater to universal usability 3. Offer informative feedback 4. Design dialogs to yield closure 5. Prevent errors 6. Permit easy reversal 7. Support internal locus of control 8. Reduce short-term memory load

4 steps to designing an app

1. app idea 2. user profile - target audience. most important consideration 3. app definition statement - include 3-5 key features -mission statement. essential elements. minimum viable product 4. UI Design - paper prototype, wireframing, prototypes

Apple app store

1.2 million iOs apps for download. Hit the 85 billion download mark in 2014

1980s continues

1986: NSFNET (The National Science Foundation Network )backbone is creates with a speed of 56 Kbps & NSF established 5 super-computing centers to provide high-computing power for all. JVNC@Princeton 1988: Robert Morris jr. releases a worm affecting about 6,000 of the 60,000 hosts on the Internet. The computer emergency response team (CERT) is created by the DARPA (Defense Advanced Research Projects Agency) 1989: more than 100, 00 hosts connected to NSFNET (The National Science Foundation Network). NSFNET became major part of what is know as the "internet backbone"

History of the internet

1957: USSR launches Sputnik and is the first artificial satellite to be put into Earth's orbit 1958: US forms ARPA: Advanced Research projects Agency 1960: J.C.R Licklider publishes his landmark paper "Man-Computer Symbiosis" 1961: Leonard Kleinrock writes paper on packet-switching theory ("information flow in large communication networks") 1962: Licklider becomes the first head of computer research program at ARPA 1966: Larry Roberts writes first ARPANET (net for network) plan "towards a cooperative network of time shared computers" 1969**: October 29, first communication attempt Professor Leonard Kleinrock guided the UCLA team that sent the first "host-to-host" message. His student assistant Charley Kline attempted to logon to host at SRI. Tried to send the message "log" but the system crashed before the "g" arrives. Second attempt at logging on worked

history 1970s

1971: 15 nodes established, including UCLA, SRI, UCSB, university of utah, mit, rand, harvard, lincoln lab, stanford, cmu, nasa/ames, and bbn 1971: email program by larry roberts, mit, and ray tomlinson, bbn (bolt, beranek, and newman) First email was something like "QWERTYUIOP" 1971: ARPA renamed the DARPA (defense) 1973: first overseas connection at University college of london 1973: bob metcalfe designs ethernet for his harvard phD thesis 1974: The "Fathers of the Internet" Vint cerf and bob kahn publish paper titles "A protocol for packet network interconnection" TCP Transmission Control protocol. 1976 : queen Elizabeth sends an email 1979: emoticons were born

History 1980s

1980: ARPANET is completely shut down due to an "accidental propagates virus" 1982: DCA and ARPA establish TCP/IP as the protocol suite for ARPANET (transmission control protocol:tcp and Internet protocol:ip) DoD (department of defense) declares TCP/Ip standards for DoD networks. First definitions of "internet" as a connected set of networks using TCP/IP Defines "internet" as a networks of "internets" 1983: ARPANET split into ARPANET and MILNET 1984: Domain name system (DNS) was invented by Paul Mockapetris of USC/ISI to resolve host names into IP addresses, number of hosts exceeds 1,000

USC in history

1984: Domain name system (DNS) was invented by Paul Mockapetris of USC/ISI to resolve host names into IP addresses 1985: Information Sciences Institute (IS) at USC is given responsibility for DNS root management. Jon Postel. First registered domain - symbolics.com. others registered that year ucla.edu, rice.edu, bekeley.edu, mit.edu, css.gov

History: early 1990s

1990: ARPANET disconnected :( **1990: world wide web (WWW) is developed by tim berners-lee at Swiss-based CERN (European Organization for Nuclear Research) 1991: NSFNET backbone upgraded to T# (44.736Mbps) & NSFNET traffic passes 1 trillion bytes/month and 10 billion packets/months 1992: Internet society is chartered # of hosts breaks 1,000,000 & the term "surfing the internet" is coined by jean armour polly 1993: interNIC created by NSF to provide services: directory &database service by AT&T, registration services by network solutions inc, information services by general atomics/CERFnet 1993: Mosaic was the first popular WWW browser (developed by the national center for supercomputing applications: NCSA). US white house comes online

1990s and 2000s

1995: NSF establishes the very high speed backbone network service (vBNS) linking super computer centers. NSFNET reverts back to research network. Internet solely exists as a network between ISPs, universities, and their connections 1995: sun microsystems launches JAVA and REALAudio, an audion streaming technology is creates 2000: the high speed internet2 backbone deploys *IPv6, the nest generation of IP standards * 2002: A distributed denail of service (DDoS) attack struck the 13 DNS root servers knocking 8 of them 2003: the SQL Slammer worm causes DDoS attack taking roughly 10 minutes to spread worldwide. 2004: veriSigh naming directory service (VNDS) begins updating all 13 .com/.net authoritative name servers in near real-time vs. twice each day

Common mobile OS

Android: from google inc. Free and open source (denoting software for which the original source code is made freely available and may be redistributed and modified) Blackberry OS: from blackberry ltd, closed source and proprietary iOS: from apple inc. Closed and proprietary. Windows Phone from Microsoft, closed source and proprietary

binary

Computers use magnetic memory (or transistors) for storing information - Smallest capacity for storage is a single magnetic charge, either positive or negative - Positive charge means a 1 - Negative charge means a 0 • The 2 digits that we use for binary are 0s & 1s • The digits in a binary number are called bits (short for binary digit) • Binary is base 2

Mobile Operating System 4

Controls a smartphone, tablet, PDA (personal digital assistant), or other mobile device Combines the features of a personal computer OS with touchscreen, cellular, Bluetooth/Wifi, GPS, camera/video camera, speech recognition, voice recorder, music player, etc

gTLD

Generic top-level domains Domains that are three or more letters. before 1998 there were only 8 including .net .com and .gov seven more were made available in 2000 including .info,.musuem,.biz 2004: 8 more including .xxx The internet corporation for assigned names and numbers (ICANN) announces a staggered fTLD release over the nest three years

User-centered design

Gives extensive attention to the needs, wants, and limitations of users at each stage of the design process

What is the Internet

Global interconnected series of smaller networks. (networked networks or network of networks) Communication infrastructure for exchanging information Networks communicate based on certain PROTOCOLS (transmission control protocol/internet protocol TCP/IP) No single person, group, or organization runs it

html

HyperTextMarkupLanguage consists on 2 components: Text (content of the page) and Tags(instructions for how to format and display web pages. surrounded by <>. tags have attributes. insert media, images, sound, etc. create divisions and containers in the page. Administrative details of the page including scripting) we mark up content and tags to provide structure

IPv6

IP version 6 was developed by the Internet Engineering Task force. total ip addresses = 2^126 (v4 was 2^32)

IPv4

Internet Protocol version 4. allows 32 bits for an IP address. Identifies both the network and the host(computer). Consists of 4-8 bit fields. total IP addresses =4.3 billion

Accessing the Internet

Internet service providers ( ISPs). services connected to the internet. you connect to the isp network and the isp is connected to any network you want to reach Examples: AOL, TWC, Verizon, At&t

What defines a smartphone?

Mobile operating system, connection to the Internet, Has apps like email and web browser, ability to install third- party apps

Productivity apps

More full-featured than Utility apps and encompass everything from social networking to mobile banking - Time spent varies based on the context and task - Although they may be used for long durations, the setup process should still be kept to a minimum • Characteristics - Hierarchical structure • Composed of list and detail views - Accelerators and shortcuts • Groupings - Stay connected - Navigate the world - Find Information - Transact and track

Native vs web

Native is full device access, very fast speed, expensive development cost, available on app store, mandatory approval process. Web: partial device access. fast speed. reasonable development cost. not available on app store. no approval process

4.Design Dialogs to yield closure

Sequences of actions should be organized into groups with a beginning, middle, and end. Informative feedback at the completion of a group of actions gives operators the satisfaction of accomplishment, a sense of relief, a signal to drop contingency plans from their minds, and an indicator to prepare for the next group of actions for example: e-commerce websited move users from selecting products to the checkout, ending with a clear conformation page that completes the transaction

Network Operating System (type of operating system) 2

Single operating system to control multiple CPUs (Central Processing Unit) and/or computers together. Software that allows multiple computers to communicate, share files and hardware devices with one another.

History overview

Started as research project funded by Advances Research projects Agency (ARPA) Created ARPANET WWW is the "killer app" of the Internet ARPA(62)-DARPA (71)-ARPA(93)-DARPA(96) (defense advanced research project agency)

Google play store

Surpasses Apple's in number of apps. Reported to have 70% more app downloads than Apple's app store in first quarter of 2015

Difference between the internet and www

The Internet is a massive network of networks, a networking infrastructure. It connects millions of computers together globally, forming a network in which any computer can communicate with any other computer as long as they are both connected to the Internet. Information that travels over the Internet does so via a variety of languages known as protocols. The World Wide Web, or simply Web, is a way of accessing information over the medium of the Internet. It is an information-sharing model that is built on top of the Internet. The Web uses the HTTP protocol, only one of the languages spoken over the Internet, to transmit data. Web services, which use HTTP to allow applications to communicate in order to exchange business logic, use the the Web to share information. The Web also utilizes browsers, such as Internet Explorer or Firefox, to access Web documents called Web pages that are linked to each other via hyperlinks. Web documents also contain graphics, sounds, text and video. The Web is just one of the ways that information can be disseminated over the Internet. The Internet, not the Web, is also used for email, which relies on SMTP, Usenet news groups, instant messaging and FTP. So the Web is just a portion of the Internet, albeit a large portion, but the two terms are not synonymous and should not be confused

User Interface Design

The design of the interface between users and the underlying software - Most UI designers create designs that meet user's needs

Cross compiles apps (hybrid)

Use a tool to create native apps and/or web apps " A cross compiler is a compiler capable of creating executable code for a platform other than the one on which the compiler is running. For example, a compiler that runs on a Windows 7 PC but generates code that runs on Android smartphone is a cross compiler." Pros: cross platforms, tools. Creates web app and native (iOS, Android) Cons: additional cost of integrating 3rd party SDK (software development kit). Larger download size. Performance

Desktop operating system 3

Used on desktop and laptop computers. Manages computer hardware and software

utility apps

Utility apps enable users to quickly access a specific type of information or perform a narrowly defined task - Usually accessed for short periods of time Characteristics - Minimal setup - Simple flows and layouts - Rule of thumb - legible from about five feet away - Standard user interface elements from HIG (Human Interface Guidelines) example: weather app, timer, market

bits and bytes

With 8 bits (binary digits), we get the decimal values of 0 - 255 • 8 bits = 1 byte • Remember the RGB color mode - Each color has a value from 0 to 255 - We use 8 bits (or 1 byte) for each color - 8 x 3 (3 colors) = 24 bits to store color

GUI development

Xerox Palo Alto Research Center (PARC) The parc user interface consisted of graphical elements such as windows, menus, radio buttons, check boxes, and icons xerox alto reseased in 1973 (as early personal computer) first computer to use the desktop metaphor and mouse driven graphical user interface (gui) xerox 8010 star information system released in 1982 as first gui centric computer operating model apple : apple lisa released in 1983 macintosh 128k released in 1984

HSB color model

a color model not a color mode. hue, saturation, and brightness (provides an intuitive way to mix and adjust colors) a hue is a shade of color such as orange, blue, purple. saturation determines the strength of the hue brightness is the lightness/darkess of a color

interlacing

a process where the graphic is displayed at multiple levels of clarity from blurry to clear non-interlaced images must be fully loaded before the browser displays them interlaced graphics appear more quickly, first fuzzy and ultimately clear

Transparency

able to see through parts of an image

web apps

accessed on the web via the the device's browser. a website that offers app-like functionality. Use HTML 5, CSS3, & javascript. Do not need to use an app store. put on a web server & everyone can access Cons: Performance. Have to have an internet connection Can be downloaded on phone and have an icon similar to a native app

Application Software

apps

6. Permit easy reversal of actions

as much as possible, actions should be reversible. example : cancel button or undo typing

5. Prevent errors

as much as possible, design the system such that users cannot make serious errors. for example do not allow alphabetic characters in numeric entry fields or having icons for facebook and twitter for sharing If the user makes an error, the interface should detect the error and offer simple, constructive, and specific instructions for recovery For example, users should not have to retype an entire name-address form if they enter an invalid zip code, but rather should be guided to repair only the faulty part.

iOs icons and images

avoid using iOS interface elements in your artwork. don't use replicas of apple hardware products in your artwork. dont reuse iOS app icons in your interface. square images (90 corners) do not round the edges no transparency

l*a*b mode

based on the human perception of color. designed to be device independent 3 color components: L (lightness component) is the brightness value and ranges from 0-100 a component(green-red axis) is the brightness value and ranges from 0-100 b(blue-yellow axis) and ranges from +127 to =-128

native apps

built specifically for a given platform. Is installed on the device much like a desktop application available via a platform-specific app marketplace (google play, apple app store)

android app icons

can use transparency. no inner transparency.

CSS

cascading style sheets. Controls presentation of html. Inline-styles are embedded right within the html code they affect internal-out the <style> element inside the <head> element external: contained in its own text file(.css)

how the www works

client/server model. web browser on your machine is the client server software runs on a web host

operating system

collection of programs for interfacing with hardware

1. strive for consistency

consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; consistent color, layout, capitalization, fonts. color palette exceptions like required conformation of the delete command should be comprehensible and limited in number

ccTLD

country code top level domains: examples are .ca (canada), .eu (european union)m .uk (united kingdom),

domain names

created to provide east to remember monikers for ip addresses micosoft.com is really referring to ip207.46.232.182 translation between domain names and IP addresses id performed by the Domain Name services (DNS). Computers called name servers

CMYK mode

cyan, magenta, yellow, and black (k used to distinguish from blue) theoretically combined make black called a subtractive color model white is produces wen all values are set to 0% used in images that will be output to a print medium using ink

Adaptive design

detect functionalities. On touch devices, we enable swiping between columns

Web browser

displays information sent from the server so it can be seen and read by the user. allows the user to send data back to the server browsers can't display some types of files such as flash windows cursor turns into a spinning hourglass when your browser is trying to connect to a website

tips for icons and images

enlist professional graphic designer. use universal imagery that people will easily recognize. embrace simplicity. use color and shadow judiciously to help the icon tell its story. in general, avoid using "geek" text or wavy lines to suggest text. create an idealized version of the subject rather than using a photo. Use transparency only when it makes sense

History of mobile phones

first mobile phone made april 3, 1973 when martin cooper called rival telecommunications company and informed them he was speaking via a mobile phone.

Al gore

first political leader to recognize the importance of the internet and to support its development

3. offer informative feedback

for every user action, there should be system feedback for frequent and minor actions, the response can be modest, whereas for infrequent and major actions, the response should be more substantial visual presentation of the objects of interest provides a convenient environment for showing changes explicitly example: "your contacts are syncing.." At 1510 lexington?

www

globally connected network of websites. Collection of web pages, websites, web serves killer app of internet access through a protocol called hypertext transfer protocol (http) application used to access the www is a web browser(chrome, safari ,etc)

GIF

graphics interchange format: web format for graphics and illustrations. Bitmap image. Has a limit of 256 distinct colors. insufficient for color photographs. small files. transparency good for sharp lines and solid colors. transparent background

Reduce short-term memory load

humans' limited capacity for information processing in short-term memory requires designers avoid interfaces in which users must remember information from one screen and then use that information on another screen. It means that cell phones should not require re-entry of phone numbers, website locations should remain visible, multiple-page displays should be consolidates, and sufficient training time should be allotted for complex sequence of actions ex. contact information, timer app (recognition) Recognizing something is always easier than recall because recognition involves perceiving cues that help us reach into our vast memory and allowing relevant information to surface.

Internet protocol (IP)

implements the network layer. Provides mechanism for routing packets not only within a LAN but also anywhere across the globe.

JPG

joint photographic experts group. web format for images and photographs. Compression method is usually lossy compression, meaning that some visual quality is lost in the process. bitmap image. small files. no transparency. save photographs, no transparent backgrounds, not good at perserving exact colors.

important internet people

licklider: first head of the computer research program at arpa kleinrock: packet-switching theory roberts: arpanet plan roberts&thomlinson: email program cerf & Kahn: protocols for internet=> TCP/IP Mockapetris : invented domain name and system postel: dns management (DNS management software is computer software that controls Domain Name System (DNS) server clusters) bernes-lee: www

local

links that point to other pages within your domain. A relative path is a link that points to other files on your website relative to the web page you are linking from.

global

links to other domains outside you site. Absolute links are those that include the entire pathname (url)

native app pros and cons

pros: better performance. access to all device features immediately. usually the best user UI/UX cons: rewrite client for every platform, costly. Have to deal with operating system /platform fragmentation on your own

7. Support internal locus of control

locus of control refers to the extent to which individuals believe they can control events affecting them. experienced users strongly desire the sense that they are in charge of the interface and that the interface response to their actions. they don't want surprises or changes in familiar behavior, and they are annoyed by tedious data-entry sequences example: finger movements to zoom in and out. reloading money on starbucks app Design the system to make users the initiators of actions rather than the responders.

Tags

logical styles: define how the affected text is to be used on the page. browser decides how to display the text. examples: <h1><em> <strong> physical styles define how to display the affected text. these styles display the sam regardless of the browser type. like <b> <i> <sub>

Compression methos

make your image smaller for email, web, mobile, etc Lossy: requires data be removed from the image to compress the file and make it smaller by trying to remove the least important data first Lossless: opposite of lossy since no data is lost when the file is compressed

elements

matching tags and their enclosed content. Composed of three parts: an opening tag, content, and a closing tag. Few exceptions like <img> information about the web page goes into the head element. what you put in the body element is what you see in the browser

Early GUIq

modern day gui first conceived at Stanford research institute (SRI). Douglas Englebart. Published paper called "augmenting human intellect" in 1962. Computers tools for enhancing human intellect not replacing it. built a mainframe interface with a gui . utalized a keyboard, pseudo-keypad, and a mouse.

Types of apps

native mobile apps web mobile apps cross-compiled (hybrid) app

app icon

no text, no app name, no extra symbols, no drop shadow, no shine or gloss, contrasting background, fill entire area, main character head close up

attributes

opening tags ca have attributes. give you a way to provide additional information about an element.

png

portable network graphics. Open, extensible image format with lossless compression. Provides a patent-free replacement for GIF and can also replace many common uses of TIFF Indexed-color, grayscale, and truecolor images are supported. Transparency. Images with blended, transparent backgrounds. Mobile operating systems will optimize png

2. Cater to universal usability

recognize the needs of diverse users and design for plasticity, facilitating transformation of content. Novice to expert differences, age ranges, disabilities, and technological diversity each enrich the spectrum of requirements that guide design adding features for novices such as explanations and features for experts such as shotcuts examples: settings, do not disturb, being able to adjust calls like allow calls from. Turn on location services to allow app store to determine you location. autocorrect and autoword in texting

What is mobile

refers to the user and not the device or the application. people use mobile apps when they are mobile (anywhere and everywhere)

RGB mode

rgb color model. Called an additive color model because adding all the colors together produces white which reflects all light back to the eye. RGB colors are created by setting red, green, and blue to values between 0-255.

Killer App

short for killer application. Any computer program that is no necessary or desirable that it proves the core value of some larger technology, such as computer hardware, gaming console, software, or an operating system can substantially increase sales of the platform on which it runs visiCalc (speadsheet software) is the earliest generally agreed example of a killer app iphone 4 was facetome 4s was siri angry birds for iphone 3 and android

Mobile websites

smaller screens. Different input such as touch screens. Always with us and always on: updates can be sent as text messages instead of emails. Images and video (camers). GPS. PC Integration. Responsive web design

Embedded (type of operating system) 1

specialized Operating system for use in the computers built into larger systems. An embedded system is a computer that is part of a different kind of machine. Examples: Missile guidance systems, NASA mars rovers

web addresses

specific location is known as an address or url (uniform resource locator) read address from right to left(top-level domain, major domain,.... computer running the web server_

Resolution

standard for web/mobile graphics if 72 dots per inch (dpi) standard photograph is usually 300 dpi

bitmap images

the image file has to define the exact color of every pixel in the image -a pixel is generally thought of as the smallest single component of a digital image

Fitts's Law

the time to acquire a target is a function of the distance to and the size of the target. (the larger an item is and the closer it is to your cursor, the easier it is to click on)

#

the value after the # is a hexadecimal number. Our numbering system is decimal • Dec means 10 - Example - a decathlon has 10 events • The unique 10 digits that make up the decimal numbering system are: - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 • We say that decimal is base 10

** Mobile App market share

total revenue for app downloads from both google play and apple app store amounted to 2.23 billion in 2016. Apple app store= 61% and google play = 40% First quarter of 2015, Apple's app revenue was about 70% higher than on google play

how www works

type a URL in your web browser web browser sends a request using hypertext transfer protocol (HTTP). defines the way the web browser & web server communication with each other URL (first part http:// details the protocol to use. second part www indicates which type of resources. third part cnn.com identifies the web server. final part (/tech/) identifies a specific directory or page) the request is sent to the internet with routers figuring out the server. The web server receives the request using the http protocol. The server receives the request using the http protocol. the server finds the requested page and sends it back to the web browser client. http connection is closed.

For mobile

use png as much as possible. Avoid using interlaces PNGs. Can still use JPG for photographs

Responsive web design

uses "media queries" to figure out what resolution of device it's being served on. Flexible images and fluid grids that size correctly to fit the screen. Same source code: the code contains these "media queries" to change the display It's an increasingly popular option for companies that are looking to move into mobile, but that lack the budgets to su[port separate apps for each mobile platform and without the needs of something more complex such as a mobile web app

Josh Clark's rule of thumb

uses the thumb's radius of reach as a guideline for design

Vector

vector graphics is the use of geometrical primitives. Such as points lines, curves, and shaped or polygons. vector graphics are based on vectors (also called paths) which lead through locations called control points or nodes

client/server model

your computer wanting to access the internet is the client other computers are the servers (or hosts) waiting for requests for www, the client is the web browser on your computer and the server is a host computer located somewhere on the internet. Client server sends http (hypertext transfer protocol) requests to a host server. host computer runs the server software that reads the request and performs the asked for services (for example, web server software enables the host to locate requested page & return it)