Computer Science 2033A/B Final: Nevan-Sewell-Compsci2033FullGuide

44 Pages
Unlock Document

Computer Science
Computer Science 2033A/B
Vivi Tryphonopolous

Nevan Sewell LECTURE #2 – IMAGE MANIPULATION “Photoshopped” is now part of the dictionary • Image is digitally manipulated OR literally been drawn or edited or touched up digitally manipulated • Airbrushing is what they call the “mag look” (magazine look) Bitmapped images (Raster Images) • All photo images (from camera, scanner) are bitmapped images (.jpg .gif .png) • Smallest unit of an image is the pixel (square) • Blocky when increase in size • Stretch the source image, causing distortion Vector images • Are scalable - scale the source image, preserving image fidelity and therefore will not be blocky if you increase/decrease size • Based on mathematical relationship • Resolution independent – takes on resolution of output device It is vector because it never gets pixelated! Vector--> Bitmapped--> Resizing images VS. Resampling *As yourself, would you like to change the image dimensions for the WEB or for PRINTING purposes? Resampling • For WEB • You are physically changing/altering the pixel dimensions of the image for the web/the # of pixels in your image (you are downsampling OR unsampling) • Based on interpolation or decimation techniques • When adjusting image size, adjust the pixel dimensions=width/height of the image in pixels (width x height = total # of pixels) • When going from smaller --> larger dimensions, you will get blurriness/pixilation! • You should try and start to get the highest image dimensions you can to get that flexibility • You are changing the pixel dimensions – HOW? =must check off resampling which affects the physical dimensions of the image AND then select image>size and then change width/height of image into pixels *notice: document size changes as well Downsampling =scaling it down • Eliminating pixels and therefore deleting information and detail from your image Technique called “decimation” • Eliminates by averaging the values of source pixels contributing to each output pixel • Casts off unnecessary information by averaging together pairs of pixels or groups of pixels Image still looks smooth Upsampling =scaling it up • Adding pixels through a technique called “interpolation” • Photoshop analyzes the colours of the original pixels and “manufactures” new pixels which are then added to the existing ones • Guesses the values of the unknown pixels Decimation (eliminating pixels/downsampling) and Interpolation (adding pixels/upsampling) • D and I are controlled through the box at the bottom of “Image Size” control panel • It gives you 6 Interpolation options that identify the algorithm used to either add or eliminate pixels • Decimation is using the bicubic sharper option 6 Interpolation Methods • How do you want photoshop to translate your pixels when you resize it? Larger or smaller? • Basically they analyze the colour of the pixels and then use that information to determine the new colour values of the new pixels 1.Nearest Neighbor • Most basic/least sophisticated but fastest method • Takes pixel colour and assigns it to the new pixels that are created (uses the same colour) Really poor quality, jagginess 2.Bilinear Averages the colour of the 4 pixels around it and preforms simple linear calculations Less jagginess but still not good quality 3.Bicubic (default) • Averages the colour of the 16 pixels - so larger sample size to draw from • Most sophisticated algorithm to give great results • Most commonly used and probably the best one • Best for smooth gradients 4.Bicubic Smoother • Great for upsampling • Averages from even more than 16 pixels • Adds a blurriness pass but is great for photos – smoother appearance/good blending by adding a blurriness pass 5.Bicubic Sharper • Good method for downsampling image • Decimation technique: Eliminates by averaging the values of source pixels contributing to each output pixel (need to average in order to downsample/eliminate pixels) • Makes file smaller and retains edge details by doing a sharpening pass 6.Bicubic Automatic (default) • Detects if upsampling (Bicubic Smoother) OR downsampling (Bicubic Sharper) Resizing • For PRINTING • You are changing HOW the image will be printed (dimensions) • You are not adjudging the # of pixels in the actual file --> pixel dimension of the image AND the actual physical size of the file/file size KB STAY THE SAME!!! • When adjusting image size, adjust the document size (ex. when it will be printing it will be 8 inches (width) by 5 inches (height) You must uncheck resample box – when you uncheck it, you are literally putting changing pixel size off limits, therefore not allowed to modify the physical size/restricted • Unchecking resample box keeps the # of pixels in your image the same – restricting you from changing the pixel dimension/size (grayed out) Image Resolution and Print Quality • Resolution plays a big part in printing! (ex. 72ppi or pixels/inch) --> affects how large your image will print based on the resolution value • Adjust the resolution value to get the right size printed • When you work with changing the Resolution value, it leaves the original pixel dimensions unaffected • Trend: for any given image, a lower resolution (72ppi) will print bigger than a higher resolution (300ppi or 600ppi) • Most books/magazines require 300ppi for photo quality • In order to get a large print size AND clear in quality = camera must be a higher megapixel camera, need a larger image size/higher pixel dimension…SO set camera to highest capture resolution – ex. increase to 300ppi • To print a “photo quality” 8.5 x 13 – need at least 300ppi resolution and a camera with at least 10 megapixels Working with Image Areas: *Use different tools to select parts of an image • Rectangular Marquee --> select an area of the photo by drawing a rectangular marquee (square, box, rectangle) and then move/drag marquee into another picture • Elliptical Marquee --> select an area of the photo by drawing a circular or elliptical marquee (circle, ellipse, oval) and then move marquee into another picture • Lasso --> make free form segments of selection border (ex. put head on diff body) • Polygonal Lasso --> Make straight-edged segments of a section border – best for selecting straight edged lines • Magnetic Lasso --> select portions of an image with complex edges that are set again high contrast background – “snapping effect” – can accurately select areas that contain many colours – “marching ants” • Quick Selection --> make accurate selection of complex shapes based on colour and texture – using an adjustable brush, drag the brush and the area expands • Magic Wand --> Used to select pixels of an image that are similar in colour or brightness with a single click Clipping Mask =an object of group of objects whose shape masks other artwork so that only areas that lie within the clipping mask are visible • Allows you to texturize the look using another photo • The clipping mask can be LETTERS or SHAPES (ex. the text itself = the mask) • Put a background on these masks and the artwork conforms to the shape of the mask • You are clipping the artwork to conform to the shape of the object (or mask) --> remember: the background must be above the mask • Clipping the artwork in order for it to conform to the shape • You know it’s a clipping mask because of little icon there is in the red circle • It is important to pick a font that is high impact in order for it to show through Paths • A line with anchor points at either end --> it can be a straight line or can be curved • You always start off with a straight line when creating a path • When you have an anchor (the back points/dots), you can then create curves • Parts of a path: anchor points --> mark the end points of the path segment – each anchor has 1 or 2 direction lines ending in direction points (parts can include curved line segment, direction point, direction line, selected anchor point and unselected anchor point) • Creating paths with the pen tool • Most underutilized tool • Create: straight paths, curved paths, shapes (triangles, circles, rectangles etc.=closed paths) • They are vector based not bitmapped (not pixelated) • Benefits: use path to make a selection instead of using selection tools, add text: to follow the bath, inside a closed shape or to follow a shape Photo Correction Techniques *Clone stamp • Fills in missing areas in photos • Removes unwanted objects • Clone a pattern onto a selection • You can clone a pattern to a different file • Uses pixels from one area of an image to replace the pixels in another part of the image (taking pixels from somewhere else) • You must specify the spot to clone (sample spot, point of reference=what/the place you want to clone) *Spot healing brush • Removes “small” unwanted objects (ex. blemishes, acne, bird in the sky) • It does not require a sample spot like clone tool does • It paints with sampled pixels around the spot you are removing • Fixes with a round brush • It matches the texture, light, transparency and shading of the sampled pixels to the pixels being healed • There is a difference between the healing brush and the spot healing brush – have to play around with them to see which works best for the specific situation *Healing brush • Removes unwanted objects (ex. tattoos, wrinkles, scratches) • It requires a sample spot like clone tool does • Sample spot tells it which part of the image to use to repair with • Then mouse over the bad spot to brush it away • Tip: select sample spot near the problem spot so that the texture and colour match better *Content aware patch tool (content aware tool) • Moves objects seamlessly into other spots in your photos • Patch selections create the selection and drag it slightly in the direction you want to extend it towards – patch selections can be used to eliminate things • New tool in CS6 • They call it the “magic tool” • Leave a bit of room around object you are moving so that Photoshop can properly blend edges of object with background • Set adaption ex. to loose, strict (to make more crisp) • You can do selections of a specific object (ex. stomach of lion) Extend a selection – create the selection and drag it slightly in the direction you want to extend it towards LECTURE #3 – MASKS & CHANNELS Masks • Creating a mask is one of the most accurate ways to make a selection and especially for tackling more difficult selections • It is a sophisticated way of selecting! • Masks are AKA the selection tool • Accuracy is hard to achieve once erased – hard to get back – masks is more advanced and not as amateur as the eraser/the photoshop guru’s alternative to the eraser tool! • Think about painting a window/wall and using tape to MASK the glass panel or the baseboard – masking is the “digital equivalent” – background is therefore masked/protected from change • Ex. you have: 1 layer containing the image (background + person) – you want to work with only the face/body and NOT the background - use selection tool to select the part you want to change (you do not need to be exact) – you can create a mask based on the selection – the selected portion of the mask can be altered/changed! • The selection portion is what is going to be changed BUT the area outside/around the selection is protected from change – the area that you didn’t select is masked of thought of as being protected from editing (the area that you didn’t select = masked/protected) • Decide to make a selection or not and then press on “Add Layer Mask” icon --> if you make a selection than layer mask is filled with black AND white BUT if you don’t select, than layer mask is just filled with white • Remember: BLACK CONCEALS AND WHITE REVEALS --> a black mask hides everything on that layer while a white mask reveals everything on that layer/makes it visible *Brush tool to paint pixels • Brush with black to remove areas you want to hide, white to bring back areas you want visible and gray controls opacity (paint w/white to make pixels visible and black to hide pixels) • White makes things appear/brings pixels back! Black helps hide areas • If we brush with gray colour, it doesn’t matter whether you are on a white or black mask – gray will reduce pixel opacity --> either partially hides pixels OR tries to make pixels partially appear Why use masks? • Instead of deleting a background, you swap it with another • Accommodates complexity better • Allows you to manipulate specific parts of an image (ex. colour hair, shirt, tilt head OR blur a part of the image, adjust hue, saturation, puppet warp etc.) • Tilt-shift photography --> placing the focus on a subject in the foreground while blurring out the background and vice versa – when choosing a photo for the tilt shift effect keep in mind that you want to give the impression of a miniature model – miniature models are usually viewed from above so try and choose a photo with elevated viewpoint (ex. buildings, roads, traffic are good choices BUT make sure there is a reasonable wide angle of view) – with T.S.P. the subject becomes focus and everything around is blurry • Use Gradient Tool --> to go from colour to gently black and white • Hide text to make it appear that it is behind something (magazines use this trick all the time on their covers to make text look like its behind ppl) Problem with masks • Still need accuracy on edges: solution = refine mask To fix edges… Smart Radius --> automates the selection for us to refine those edges Paint around the edges --> look in those areas for a better selection (great for fine details ex. hair) Smooth --> smooth out of the jagged edges Contrast --> making the edge firm (stronger) Shift edge --> pulling in or pulling out Decontaminate colours --> helps the edges blend in more with what is surrounding it Eraser VS. Mask • If you “mask” pixels you don’t eliminate them – you can replace them at any time during the SAME session of ANOTHER session! • With eraser, once pixels are removed, they are removed permanently *Left bracket key makes brush size smaller, right makes brush bigger Mask Types *In clip masks from text AND layer masks we are making selections – alternative to basic selection tools (ex. marquee, lasso etc.) – pixels are not removed permanently! *Layer mask is NOT only one time/can be reversed/modified BUT quick masks are temporary and can only be used once/once you turn off the selection, quick mask is finished *Layer masks are non-destructive and can be reversed, reduced or modified at any point *Quick masks are an alternative to basic selection tools • Temporary mask – disappear as soon as deselected BUT can save it as a alpha channel and the alpha channels • Allows you to make a selection • Is a way to make a selection with the paint brush • Similar to selection tools like marquee etc. BUT you are painting in an area to become your selection • They provide better accuracy • You are painting on top of the areas you want to select or exclude from selection • It is temporary unless you save it • Allows you to make a selection, you are not creating a mask you are entering a MODE • To create: enter quick mask mode, use your brush to paint over the selection you want then when you are done, exit quick mask (press Q) • Defaults when it quick mode including foreground as black (which paints), background as white (which unpaints), colour overlay as red (and transparent) and colour indicates masked areas – you are saying what you don’t want as part of your selection (backwards) • Tips: check off “selected areas” in colour indicates so that what you paint is the actual selection AND leave opacity setting as 50% so that you can see what is below when you are painting • In quick mask option>colour indicated --> If you check off masked areas then you are painting the masked area areas, therefore the background is what you will be adjusting later (colour of bg, saturation etc.) BUT if you check off selected areas then you are painting the actual selection areas, therefore the man is really what you will be adjusting later • Make a new mask layer!!!! Extract selection and put it on a layer of its own when you are done Summary of quick masks • The advantage to using Quick Mask Mode rather than one of the standard selection tools is that you can have more accuracy control (right down to the pixels) because you are painting the pixels • These are temporary masks which are used once (exactly like another selection tool) --> you use quick masks to make a selection and then apply some operating to the selection BUT once you turn off the selection, quick mask is finished • Although you do not have a mask layer created from it, layer masks can still be copied to other layers --> they can be temporarily disabled and re-enabled at any point Channels • Channel are NOT layers – they cannot be printed • Store colour information about image • Use them to make selections which help with manipulation • Offer greater control and sensitivity in preforming various functions like blending, filtering and retouching • A colour image is made of up 3 channels (RGB model) – all 3 channels (or bands) combined to create the RGB channel • Each band is called a channel • Individual bands of 8-bit grayscale images • If RGB – 3 bands (3x8 bit = 24 bit for each pixel) • If CMYK – 4 bands (4 x 8 bit = 32 bit for each pixel) • A colour image is the sum of several grayscale channels • Composite channel=always at the top of the panel – RGB or CMYK (shows all the channels together) • Colour channels=individual band but you can see it in graytones • Channels store image information • Default display: photoshop displays channels in grayscale but it is optional to display colour in channels (edit>preferences>interface>show channels in colour) • Photoshop shows you the grayscale versions of each of these channels because it is easier to evaluate the brightness values or luminance levels inside the channel (keep in mind: our eyes are more sensitive to brightness than colour) • Red+green=yellow green+blue=cyan and red+blue=magenta • Anytime you are blending, filtering and/or retouching – channels are being used! • Channels are automatically created when you open or create an image – always going to show you the gray scale tones by default *The colour models • Photoshop stores all the colour information that gets related to your monitor and printer via channels • Images for the WEB (onscreen viewing or inkjet printing) use 3 colours (RGB=display screen) • Images for PRINT (commercial) use 4 colours (CRYK=printer) *The bright spots in each channel Ex. The red channel (in grayscale) (also green and blue channels in RGB model) *the darker the picture in each channel = the lowest contrast/least amount of that specific colour contribution • White spots --> colour at its full strength – true colour (lots of white=lots of red) • Black --> colour at its weakest (lots of black= little or no red) • Gray tones (gray=a bit of red/contribution of it ex. yellow has red in it) – somewhere in the middle, a bit of red *reverse for CMRK model LECTURE #4 - WEBFORMS Web Forms • Allow us to communicate for a service or a product that we are interested in • On the internet there is always a web form involved online for something we want – something of value for us and the companies (ex. increased purchases/maximizing sales, growing communities/3 party ads, selling services) • Webform is ALWAYS involved with any online product/service and design is very important • After YouTube’s redesign --> audience grew so YouTube paid attention to detail on their forms – fine turned *Redesign for New Trends • Recognizing that application are accessed from desktop/laptops to mobile devices – increased use of devices to get things done • Commerce --> amazon and best buy’s users are increasing as they change design to fit mobile • Social --> recognizes new posts and therefore adapts to mobile • Productivity --> email activity is now very mobile – 70% of smartphone users have accessed Email on their mobile devices DESIGN MATTERS!!! Web form organization *Form length • Having form on multiple pages OR one long page OR using expandable and collapsing sections did NOT impact on completion of form • Review all questions you need to ask (needed or not?) • If a form naturally breaks down into a few short topics, use a single webpage • Multiple pages help with organization BUT removing fields has impact • When a form contains a large # of questions related to a single topic, use one long web page BUT when a form contains a large # of questions that are related by a few topics, try multiple pages Improving forms • Giving ppl speed and ease (shorter form) • Removed fields - Does it have to be there? *Form having an optional field under name titled “Company” led to lost sales (Expedia case study) --> customers who clicked Buy Now did not complete the transaction – they removed company field and profit increased *Changing button from saying “possible to purchase without an account “--> “you do not need an account to buy” increased purchasing customers and profit • Forms have to communicate with one voice --> keep (stick with fields you HAVE to have), cut (get rid of things not necessary) or postpone (defer asking questions until a later time) • Good to simplify/redesign onto 1 page • Ex. PayPal was redesigned so that the moment the card # is entered, the payment type is recognized (ex. Visa # begins with 42, Mastercard begins with 5, American Express begins with 3 and Discover begins with 6 SO PayPal knows which it is from the #) *Form Structure 1) Sequential • Groups of question that have to be asked to complete a task • Go through each question in turn modifying • Exs. Registration, checkout, anything that requires answers Form structure on mobile devices… 2) Non-linear • No need to go through each field – input can be separately modified • Each possible input can be selected and edited in separate screen or dialog • Get the person to the info they want to modify/remove quickly and easily • Focus: on finding exactly what you need to change directly 3) In-Context • Provide a way to quickly contribute or create without a lot of effort • Feature of incline (direct) expands • Applies to those who want to contribute fast! And directly! • Contributing directly with one simple touch (direct incline editing) *Layout of forms – path to completion • Clear path --> straight linear path – see send/submit button – alighting input fields to show start to finish – let them know where they are in the process! • Eye tracking facts --> RED areas are where ppl gaze the most and GREEN areas are where ppl gaze the least = called Eye Fixation *Tapping between input fields • Clear path to completion: “tapping feature” – 60% of ppl use tabs/through the keyboard to move through the form field instead of mouse • Design layout knowing that ppl will tab through them *Input Labels 1) Left-Label Alignment/left-aligned layout • Works well for when data required is unfamiliar therefore takes more time to understand what is being asked • Can easily scan labels • Less clear association between label and field because of distance • Requires less vertical space • NEGATIVES: changing label length may impair layout and distance between adjacency or label and corresponding input field – on mobile devices, cannot/hard to see the question 2) Right-Label Alignment/right-aligned layout • Clear association between label and field because of distance (tight) • Requires less vertical space • NEGATIVES: more difficult to scan labels because of jag and faster completion times (50% faster than left aligned labels because of eye fixation) 3) Top-Aligned Labels/top-aligned layout (Question than answer right below it/vertical to it) This is the format that is MOST PREFERED – this is the way to go! • Good for when data being collected is familiar • Even faster completion than right and left alignment – fasted completion out of the 3 methods Easier to code because there are no tables • Better format for mobile/handheld devices because it fits nicer – ALSO field zoom capability on mobile which zooms into field on a smaller screen which makes it easy to see/use • NEGATIVE: needs more vertical space *Eye tracking and filling out forms Eye tracking studios – Mateo Penzo studied why one technique is faster than others • Left-aligned labels --> a couple of eye movements to make the association with input field and label • Right-aligned labels --> eye fixation is cut in half – less eye movement therefore completion = half time • Top-aligned labels --> users can capture both labels and fields with a single eye movement, therefore fastest of all 3! *Web based forms are composed of • Text field • Text area • Radio button • Checkbox • List/menu • Hidden • Button *Primary and Secondary Actions • Not all actions are equal • Distinction between buttons is good (ex. colour contrast, link) • Align with path to completion – start at the top and linear all the way down • Primary action should be first, before secondary – lead them to success rather than destruction! • Ensure clear distinction between primary and secondary actions • Align primary actions with input fields --> plan to completion • Be careful to have ‘Previous and next’ ordered properly! (P before N) • SUBMIT BUTTON --> don’t hide it, make sure user know is happening/that it is being submitted to help avoid duplicate submissions – can do this by ex. animation of progress to show that their action has been registered, disabling (graying) it out so that they can not press it again etc. 1) Primary • Leads to success (save, continue, submit) • Should be contrasted and noticeable (ex. use blue vs. grey) 2) Secondary • Are destructive (cancel, reset, go back) • Should be less apparent (grey button or link, or text links) Legalities of a form • Agree and submit/agree to privacy policies and terms • Instead of having a separate check for agreeing and then submit button, move to SINGLE ACTION – where they already have agreed through a phrase and can therefore move on to primary action (ex. ‘by clicking on the button below, I agree with the terms of service’ and then primary button that says ‘agree & place order’) = clear and precise and wont give error because they didn’t/forgot to check off that they agree Error messaging • Something is preventing you from submitting the form • How to RESOLVE effectively… 1) Clearly communicate error occurred 2) Place at top to say there are errors on pg (strong prominence, bold, colour) --> “top placement” needed 3) Fix it: provide remedies to correct errors 4) Associate the field with the error msg (flag it with colour) 5) Enhance the visual of this error (colour, bold, contrast) *On longer forms, need: top placement (error has happened) and fields of error need to be flagged as well as saying how to fix it Incline Validation = real-time validation model – giving feedback instantly as they provided info – errors displayed instantly when typed not later – do not have to wait until hitting submit • Sample error messages --> username is taken, passwords don’t match, password strength (meter of strength), secret answer too short, birth date not valid (these sample error msgs are all situations where incline validation MUST occur) • Does not work for name, email, gender, location, selected user ID or password Dynamic Incline Forms = expand and collapses a section as filling out a form (ex. collapses a 5 pg form into a 1pg form) – each section is filled one at a time and then press continue – next section rolls up and previous closes – errors are incline validation • Ex. Apple Store – sections are separated by task (ex. shipping details info, payment details, account) --> results: faster to complete (online trading/auctions – time sensitive forms) BUT struggled w/headers, ppl thought they had to click on header to continue to therefore the continue button was added in each section Gradual Engagement Form • Alternative to signing up for services • No need for registration process • People are drawn into new services and products immediately • Get to try it out without signing up and test the product/service = successful! • Get people hooked it, easy to follow and leads ppl to believe they are getting something for free while leading into success messages Success Messages • Means there are no errors on form and proceeded for a successful submission – msg needed to let the customer know • Can either let them know they submitted it successfully at the top of the same page OR by providing a totally new page with a thank you and help info, what’s next etc. • ALWAYS email them results! LECTURE #5 – WEB FORM CREATION Online Forms (vs. paper forms) Offer… • Speed – quicker deployment; wider audience • Efficiency – collection of data • Anonymity (privacy) – leads to frankness/honesty • Automation – format diverseness of data • Cost-effective process – no paper or postage needed • E-commerce add ins *Form is made up of… 1) Form --> adding questions, layout, form elements 2) Email template --> submitter, form owner 3) Processing --> action (what should it do when submit is clicked) 4) Data collection --> store your results, what format Building Forms 1) On-line form builder =an application that builds your form based on your requirements Exs. WuFoo and Zoho Creator • Their server offers user many things but costs $ • Drag and drop features • Customizable form templates/themes • Sends replies to form submitter and owner • Captures information in a database (.txt, Excel, MS-Access) • Data is stores on their web host --> Cloud based service=store online and access from anywhere, anytime • 128 bit SSL encryption • Integrate payment collection with Paypal and other e-commerce sites • But costs $$$$$$ 2) Open source form builder =provide you with the application to install on your computer/web server Exs. FormTools and MachForm • They do NOT host any part of your forms or data • YOU have full control and privacy over your data • Technical background is needed for this! – you need to understand the server side and installation 3) Do it yourself • Need a web provider to host the webpages • Web provider provides instructions on how form will be processed *You are responsible for creating… • Form --> with web editing software (Dreamweaver, HTML code) • Email template --> what replies go to the submitter, form owner • Collections database • Thank you webpage • Access --> to servers cgi scripts to process the form (web host will provide this) • Reporting --> done with importing data results Questions to ask • Online / Open Source / DIY • Is this a one-time collection or ongoing • How many submissions do you expect • Complexity of form • Customization & flexibility • E-commerce & payment integration • Can the form be interfaced with our website or WordPress or Joomla seamlessly • Collections data easily handled? format? • Cost issue *7 steps to do it yourself 1.Create the form • Survey (extension.html), set it up and add questions and form elements (submit button (mandatory), text field, text area, checkbox, radio button (can only check 1 item), list/menu (drop down selection list), button name (used to submit or reset)) • A form element (when you add something into form) is identified by… ID --> assigns a name to the form element – name is the database field name and used in the email template – will NOT show up in document window but does in code and property panel Label --> appears beside the form element (ex. text box or radio button) – appears on the actual form Attributes --> box width, # characters accepted – changed through property panel 2.Create the e-mail template • Used to send you the results in the format that you laid out • Requires the ID names used in your form --> ID names need to match up in order to get the values Layout is totally flexible • Inclusion of sending, receiver, subject is dependent on web host provider • REMEMBER: every server deals with email templates differently so the email template could be a .html file OR a .txt file OR .php --> depending on the server, the template will be different (in lab: email template = .html) 3.Create file with sender/receiver/subject • In most cases this is included in email template • In lab: email. conf • Provide sender name, sender email, recipient email and subject 4.Make sure the ACTION statement in form is set • The browser tells the server to go to the designated area which contains the email template (template.html) and to run this cgi script email.cgi • Cgi script is called a form handler • Provides details about how to process form, write results to collection file etc. --> Action Statement (in properties) 5.Set up data collections file • It is just a .txt file --> empty at first • Each submission writes the values to the collections file • Writes in comma delimited format • The data collections file MUST reside on the server • The data file can be imported into Excel, Access etc. 6.Set up/create success page • File name .html webpage • Alternative to just a “Thank you” msg on the screen • Consistent with look banner and menu buttons • Success page should be consistent with rest of webpage (have same look/theme/banner) 7.Upload the e-mail template, email.conf, data collections and form to the server • Upload form, email template, email.conf, data collections and success page *Web form error validation • The goal of the web form validation is to ensure that the user is provided with necessary and properly formatted information needed to successfully complete an operation • Report errors: when try to press submit or instantly at time of text input *3 Validation types you can preform 1.Required fields • Information required before form can be completed successfully • Should be clearly marked in order to inform users about what information has to be provided up front • Use an aterisk (*) 2.Correct format • Email address, URL, dates, phone #’s and others • Others should be clearly marked • Users should be informed at the time of error • Correct format should be suggested 3.Confirmation fields • Email address, passwords • Let the users CONFIRM their input by using additional confirmation fields *Best way to show errors to submitter • Apart from the error messages or markers next to every invalid field --> clearly mark fields that are invalid HOW? • Use red incline msgs or markers next to every invalid field • Change the background colour or border colour of invalid fields (to red) • Change the colour of the field labels • Provide error tips (balloons) next to each field • Provide a list of all errors marked in red at the top of form *Real-time validation (or instant validation) • Alerts users WHILE they are filling in the form • Get immediate/instant feedback about their input Ex. username is unavailable, date is wrong format, password strength) *Validation: Was the form filled out by a human or by a bot? Captcha Technique • Bot=automated programs usually written to generate spam mail • Inserting a Captcha into the form (Captcha exs. “type the two words”, generated images with numbers – could be distorted, therefore hard to see/detect) allows you to validate that a human has actually written it --> it is a script • Avoids spam mail sent to owner because a bot can not determine a code, only a human can • PROBLEMS: today most spam bots are able to recognize the text embedded in a simple captchaimage – intelligent algorithms AND accessibility problems because of images • SOLUTION: pose some question that only humans can answer correctly (ex. what colour is the sun – both yellow and yellow-orange will be accepted) *Forms to Go = HTML form to email script generator *Mediata Survey = create web surveys in PHP and MySQL LECTURE #6 – WORKING WITH CSS STYLES: THE BOX MODEL Building a website with CSS • We used to build a website with tables BUT NOW we build a website the “Developer” way --> using CSS Styles = identifying box elements and attributes using Div IDs and classes Cascading style sheets (CSS) • CSS is not a markup language like HTML or a scripting language like Javascript --> CSS is a stylesheet language • Stylesheets = a collection of formatting rules that control the appearance of HTML webpages • HTML controls the structure (add text, image, links, ordered lists – you can see the structures in HTML) • CSS controls the presentation/appearance/style (text, heading sizes, images having border or padding, colours of links etc.) Controlling the look with CSS • 3 different style sheets will give 3 different looks! Using CSS • You can change the entire layout of the page without changing its content or structure --> the HTML code stays the same but the CSS affects the look • One or more styles can be used to control the style of the entire website or individual webpages Benefit: speed in production/maintenance You can store CSS styles in 2 ways 1. WITHIN each webpage (embedded) 2. In an EXTERNAL STYLE SHEET which can be attached to the webpage *Benefits • Useful for maintaining site --> appearance through 1 file, easier to implement design changes across entire website • Enhances site’s appearance --> consistent and uniform and promotes professional look • Reusability --> you can apply style sheet to any webpage, more control of elements/tags File size --> reduces file size if attached rather than embedded Benefits of CSS • Presents highly modularized web designs • A website can be controlled and constructed by 5 elements… 1. HTML --> controls document structure 2. CSS --> control document look and feel – style/presentation 3. Javascript --> controls the behaviour within the client/browser 4. PHP --> server side languages control processing and business logic 5. MySQL --> controls database content *A website can use ALL of these elements, none of them or a few of them Defining styles for different media • SEPERATING STYLES and structure allows for PORTABILITY --> so you can change the look on that device without changing the content (ex. print.css, screen.css and mobile.css) • Define different styles for different styles for different types of media Looks one way on desktop and more optimized for printing or mobile devices It is the style that is controlling the presentation! CSS Order of Precedence *Cascade refers to how files are applied to pages • Styles are applied to pages in the order they are found • Embedded styles take priority over external styles • The styles in the lowest stylesheet override those in the higher stylesheet (ex. order attached to a webpage: stylesheet1 – h1, h2, p, img, stylesheet1 – h2, ordered list, h3 – h2, img) The box model and your website • Browsers used to have to have a way to display HTML content visually but NOW authors can used control HTML pages through cascading style sheets • Manufacturers agreed early on how to display specific elements --> how to represent a link, heading, image etc. • With a style sheet you are overriding the default style with styles of what YOU want it to look like Each box element is created using a Div ID or a class --> IDs classes control the styling and layout Code using CSS Styles Div ID vs. Classes • You can accomplish the same thing with div IDs and Classes • Making 2 boxes using Div ID – Limitations: Div id first_box is controlled by same attributes #firstbox, so you can’t have one box different than the other unless you specific 2 different Div IDs • Making 2 boxes using classes is more flexible because class is controlled by style attributes (.first_box or .second_box) therefore, you have control *Different syntax between style tags • #first_box (if div ID) • .first_box (if class) *Different syntax between body tags • “first_box” (div ID) “first_box” (class) • CSS doesn’t care which you use --> there is nothing you can do with an ID that you cant do with a class and vice versa BUT javascript cares! • Javascript depends on there being only ONE page element ID per webpage with any particular because of certain calls --> 1 header ID, 1 nav ID, 1 aside ID etc. --> they are only used once in the entire webpage *Call to the element (Div ID, class) between tags *Attributes written between
More Less

Related notes for Computer Science 2033A/B

Log In


Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.