View Thesis Paper | Brian’s NYU Student Projects
This piece is a reflection on the rapid change which Stacey’s neighborhood in Beijing has undergone during the past two decades. Stacey has gone on to a successful career as an animator and special effects artist.
This is a charming animation Pei-Wen Lo produced under my supervision.
Analysis of Male Sexual Assault Data
Dr. Kristina Jones, a psychiatrist and researcher, is working on a project that analyzes legal, political and clinical data related to male sexual assault. Students will work with me, and her, on innovative ways to present and analyze this research.
Visualization and Analysis of War Trauma Research Dr. Adeyinka Smith, a psychologist and researcher, is working on several projects related to war trauma and female genital mutilation. Students will work with me, and her, on innovative ways to present and analyze this research.
Creation of a Visual Interface for Narratives Associated with Survivors of Torture
A large number of discrete stories of victims of human rights abuses have been recorded. This project seeks to create an interface to these stories. Example interface designs include Humans of New York (http://www.humansofnewyork.com/) or an interface based on Google Maps. Although students may seek out their own subjects to record, I have found two video artists who have an award winning body of work who have expressed in interest in working with students on their own “bearing witness” project.
Creation and Assessment of a Questionnaire App for Standard Intake Questionnaires (PHQ, HTQ, etc)
Many human rights organizations working with trauma patients use manual intake procedures. This project involves the design and implementation of an Android application that directly writes to a database back-end, thereby reducing redundant work, and reducing the need to keep paper records.
This project has a design and software development component.
Extension of an Intake Interview Application to Include Geo-location Data Tied to Torture and Other War Crimes Narratives
Every year approximately 70,000 refugees are assessed by human rights workers. A simple, web-based touch screen interface to Google Maps could simply collect information of direct relevance to the quantification, assessment and prosecution of war crimes. Such a tool could also be used to provide external verification of refugee claims, and thereby assist refugees during the asylum process.
This project has a design, software development and advocacy component.
Creation of a Crowd-sourced Data Collection Tool
One of the most important recent developments in human rights work has been the wide-spread use of crowd-sourcing tools that are used to bear witness to crimes, and to collect forensic evidence that can be used both in clinical practice and in the prosecution of criminals. The following link to a sexual assault data collection tool provides an excellent template for a possible term project:
Voice Recording and the Clinical Intake Process
Researchers frequently emphasize the importance of engagement, empathy and attention of therapists when engaging with clients. The manual recording of intake interviews interferes with this process. This project would assess the utility of using a voice recognition system, for example Dragon by Nuance or Cortana by Microsoft, to transcribing an intake narrative.
Voice Analysis in the Clinical Intake Process
Considerable research has been done on the semantic analysis of the speech of Alzheimers and autistic patients, with a view to increasing the accuracy of diagnoses. Surprisingly little research has been done with trauma patients. This project involves summarizing research done on voice analysis in the area of clinical diagnosis, and creating a prototype application that could be used for further research in this area.
Creation of a Real-Time Tool for Providing Variance Analysis of Assessment Test Takers
Currently there is a separation between the data collection and analysis tasks at trauma clinics. This project involves designing and implementing a tool that takes clinical intake questionnaire data and integrates it with data relating to an existing population of torture survivors in order to provide real-time T-Tests (and other variance analyses) to show how a particular patient’s responses relate to the overall population of patients at the clinic.
This project involves the cooperation between software developers, statisticians and designers.
Assessment of the Relative Value of D3 and Google Maps as Mapping Tools for Human Rights Advocacy Work
One of the goals of the Lab is to teach students who have an interest in human rights work about data visualization tools. This project involves a critical assessment of existing data visualization libraries.
Critical Assessment and Integration of Existing Advocacy Tools
Organizations such as Human Rights Watch and the American Civil Liberties Union have created tools designed to monitor police brutality and state terror, as well as collect forensic information for litigation, war crimes prosecution and asylum applications. Students participating in this project would assess these tools and suggest ways in which they way be integrated and / or enhanced.
Creation of a Standardized Structure for the Collection, Aggregation and Analysis of Torture Data for Centers for Survivors of Torture
The association that handles the aggregation of torture data in the United States currently uses excel spreadsheets for information interchange. This project involves creating a JSON/SQL based web interface that handles the reading and writing of this data, in order to dramatically improve the efficiency of this process. This project has a design, computer science and advocacy component.
Course Outline | Innovation Lab Home
The Innovation Lab being taught this fall will be an exercise in inter-disciplinary teaching that will bring together students interested in data visualization, mapping, software development, clinical psychology and human rights advocacy work.
The pre-interview video gives visual examples of the content and goals of the class.
The class is open to all students, but will be particularly beneficial to those interested in human rights advocacy work, data visualization, design, mapping, mobile app development, web app development, and the clinical treatment of victims of human rights violations.
No prior knowledge of psychology, design or computer programming is required.
Each week students will be assigned approximately 10 hours of work divided between eadings and/or research on one technical issue relating to interface design, data visualization, mobile and /or web application development, readings on issues in clinical psychology and work on your final project.
Your grade will have 4 components:
The main focus of the class is the final project, which will be a multi-media inter-disciplinary group project that solves an actual problem related to the clinical, advocacy and/or research work of a human rights organization.
There will be 4 workshops related to technology, design and psychology issues of relevance to the students’ group projects. As well, I will be available for up to six hours each week to assist students with their projects.
Classes are divided into two streams. On Tuesdays we will discuss human rights problems and on Thursdays we will discuss technological solutions to these problems. The “problems” section of the class will begin with an overview of the treatment of victims of human rights violations, and then discuss major areas of human rights violations including political oppression, LGBT rights, and sexual violence. To lend coherence to this approach, class discussions and course work will be placed within the context of the bio-psycho-social theory of patient care, discussed by Dr. Kristina Jones in the first workshop. The “solutions” section will begin with an overview of current technological developments, and then will feature case studies on the use of data-visualization, mapping, social media, video, and mobile applications in advocacy and clinical work. The term project is intended to bring these two streams together.
A 15 minute presentation on a human rights issue. Students will be asked to provide a background to the issue, discuss specific problems related to the issue, summarize academic or political debates related to the issue. The presentation should use multiple media, for example words, pictures, audio and / or video, to illustrate the issue. After the presentation students will provide me with their materials, and work with my to attach them to the class “Human Rights” global map.
A 15 minute presentation on an inspirational (either negatively or positively) website, technology or campaign. This multi-media presentation will have 4 components:
1. A critical evaluation of the interface of the website, technology or campaign. This discussion will develop the work done in the design workshop, including an assessment of whether the manner in which the information is presented appropriately illustrates what is being presented? Does the interface enhance or obfuscate the material? Is the interface intuitive or difficult to use?
2. A critical evaluation of the content of the website. If the site presents evidence, is that evidence creditable? Is the evidence opaquely or transparently presented (can users assess its quality)?
3. Exogenous (external) assessment. What is the context within which the site/technology operates? Could it benefit from being integrated with other tools or campaigns?
4. Endogenous (internal) assessment. Are there ways in which the content could be enhanced to make it more impactful? Are there additional materials or tasks that could be added to the site or campaign to make it more effective?
The term project is a multi-media, multi-disciplinary group project that solves an actual problem faced by a human rights organization. I have prepared templates for projects that students are encouraged to work on. HOWEVER if you have a particular problem that you would like to solve, that is relevant to the goals of this course, then please let me know and perhaps your group can work on it.
What follows is a list of project templates that I have already created for this course. No student needs to have a complete mastery of the material required for the completion of these projects. That is why groups must be multi-disciplinary. My job will be to fill in the gaps.
Although students may choose to work in groups, marks will be assigned on an individual basis.
Projects are expected to be multi-disciplinary, combining a technological, psychological, design, data-visualization and / or research component. The are also expected to be multi-media, and therefore will have a written and a visual component.
By the end of September each student, or group of students, will present me with a project plan with four main components:
1. A statement of the goal of the project, specifically what problem the project seeks to solve, and the means by which this will be done.
2. A list of major tasks associated with this project and an estimated timeline In group projects, all tasks will have a project owner.
3. A statement of the main disciplinary focus for each student, for example psychology, design, application development and data-visualization.
4. A statement of secondary disciplinary foci for each students.
75% of the students’ grade will be based on the work done in the main discipline and 25% will be based on the ancillary disciplines. The idea is that each student will have a main strength, for example clinical psychology or software application development, that will be the main thrust of their work on the final project. Work done in this discipline will be graded according to the level of the student (junior sophomore etc). As well, students will be asked to “take a risk” and learn something about additional disciplines, for example psychology for computer science students and design for psychologists. A professional level of output will be expected of this additional work, but less quantity will be expected. For example, psychologists may do a detailed design critique of a web site, but will not be expected to design and implement a complete data management system. The goal is to broaden the students’ horizons, not to overwhelm them with unfamiliar material.
My role will be to act as a type of utility infielder who will work with students to assist them with material that they find challenging. For example, if students with a psychology focus choose to design an interactive web page, I will assist them with the more difficult parts of the web page and ensure that it works, allowing the students to focus on design and content. However, students be will expected to have a general understanding of all parts of the project.
Please see the Sample Projects document for examples of suitable topics for your final project.
The class outline is a separate series of documents
A number of guest speakers have been tentatively scheduled, including clinical psychologists, videographers and survivors of torture.
Students are allowed to miss one class per term without penalty or explanation. Students will be penalized by half a letter grade (A to A-) for every two additional unexplained absences.
Student participation is critical to the success of this class. Credit is given for:
Flippant, rude, racist and sexist comments are discouraged and will lead to academic penalty. Light-hearted and tangential comments are encouraged, provided they enrich the class discussion and make the learning process more enjoyable. Comments that provoke discussion will improve the participation grade.
Marks will be deducted for the use of email, texting and social media tools in class. Web searches related to topics of discussion are allowed, but should not disrupt the class.
Written work, and multi-media presentations associated with presentations, must be submitted to me at brianmacmillanteacher@gmail.com prior to the commencement of the class, on the day the work is due. Accepted document formats are Microsoft Word (doc or docx), Open Office, PDF, and/or PowerPoint formats, as appropriate. Other file formats may be used with the permission of the Instructor.
I will be available two hours before class on Tuesdays and Thursdays in room 118A Heimbod, or by appointment.
If you have questions please feel free to contact me at bmacmillan@sarahlawrence.edu or at brianmacmillanteacher@gmail.com.
A Excellent
The work clearly differentiates itself from other work. The work has memorable impact, and pursues concepts and techniques above and beyond original goals. The ideas behind the work are original, thoughtful and/or imaginative. Spelling, punctuation or grammatical errors are non-existent. The work demonstrates the student’s ability to think critically and work independently. The work also demonstrates the student’s use of strong methods and process.
B Very Good / Good
The work is better than average and shows extra effort. The impact of the work is good, and demonstrates the use of an iterative production process. The work employs above average craft and attention to detail.
C Satisfactory
Average and competent, the work has acceptable levels of impact and conceptual development. The content of the work is sufficiently developed, but it lacks thoughtful, original, and imaginative resolution and/or attention to detail and craft. The work employs process, but does not demonstrate notable solutions.
D Poor / Below Average
The work is lacking in many or most areas that show any understanding of the research, design, and/or prototyping phase(s). The impact of the work is weak with unsound, unoriginal, or unimaginative thinking. Problems may include lack of interest, procrastination, poor planning and/or poor craft.
F Unacceptable
The work shows no overall understanding of the research, design, and/or prototyping phase(s) on many levels or either a severe lack of interest.
Written work is graded according to the following criteria:
| Criterion | Weight | Guidelines |
| Structure | 25% | A – Topic was clearly introduced, subsequent ideas were well developed; the development of ideas occurred in a coherent manner; the conclusion succinctly summarized the content. B – Submission met most but not all of the criteria outlined for an A. C – Submission did not have an introduction and conclusion; ideas were not developed in a logical fashion; points were made in a disconnected way. D – Submission was disorganized and somewhat illogical. F – Submission was incoherent; topic was never introduced; ideas, if presented at all, were not developed. |
| Content | 75% | A – Content was topical and/or interesting; arguments were supported by properly documented evidence; evidence was creatively/critically evaluated; language was clear, concise and grammatical. B – Content met most but not all of the criteria outlined for an A. C – Content met some of the criteria for an A, with significant issues like undocumented sources, unsubstantiated claims, etc. D – Content was unoriginal or trivial, some factual claims were not substantiated, language was ungrammatical. F – Content was incoherent, factual claims were never substantiated, language was ungrammatical. |
Although I am not a stickler about typos, passive sentences, oxford commas and split infinitives, I will deduct marks for egregiously incorrect grammar, redundancy and the inexact use of language. Marks are also deducted for informal (idiomatic) writing, and for rude, flippant, racist, sexist or homophobic content. Marks are awarded for succinct, clear, evidence-based arguments.
Presentations are graded according to the following criteria:
| Criterion | Weight | Guidelines |
| Poise | 25% | Did you address the audience? Did you speak clearly? Did you use intonation to emphasize your points? Did you present yourself well, or did you slouch, wander or dissemble? Did you speak at a volume level appropriate for the venue? A – Presenter had good posture, spoke clearly, used correct, non-idiomatic English, and did not distract the audience with her/his body language. B – Presenter met most but not all of the criteria outlined for an A. C – Presenter met some of the criteria for an A, but for the most part did not. D – Presenter wandered, dissembled, slouched, was difficult to hear, or too loud. F – Presenter was obnoxious, incomprehensible, spoke extremely loudly or was inaudible. |
| Multi-media presentation materials (e.g. slideshows, handouts) | 25% | A – Presentation materials enhanced the presentation and/or provided a solid foundation for it. Note that students can receive an A for visually stunning presentation materials that captivate the audience OR for presentation materials that are simple, professionally executed, and provide a solid foundation for the presentation. B – Presentation materials met most of the criteria for an A but were somewhat facile or distracting, or not professionally executed. C – Presentation materials somewhat distracted from or otherwise undermined the presentation. Presentation materials were sloppily executed, but comprehensible. D – Presentation materials distracted from or otherwise undermined the presentation. Presentation materials were sloppily executed and somewhat incomprehensible. F – Presentation materials were non-existent or poorly executed to the point of being incomprehensible. |
| Criterion | Weight | Guidelines |
| Structure | 25% | A – Presentation topic was clearly introduced, ideas were well developed, the development of ideas occurred in a coherent manner, the conclusion succinctly summarized the content. B – Presentation met most but not all of the criteria outlined for an A. C – Presentation did not have an introduction and conclusion, ideas though presented, were not developed in a logical fashion. Points were made in a disconnected way. D – Presentation was disorganized and somewhat illogical. F – Presentation was incoherent, topic was never introduced, ideas, if presented at all, were not developed. |
| Content | 25% | A – Content was topical and/or interesting; arguments were supported by properly documented evidence; evidence was creatively/critically evaluated; language was clear, concise and grammatical. B – Content met most but not all of the criteria outlined for an A. C – Content met some of the criteria for an A, with significant issues like undocumented sources, unsubstantiated claims, etc. D – Content was unoriginal or trivial, some factual claims were not substantiated, language was ungrammatical. F – Content was incoherent, factual claims were never substantiated, language was ungrammatical. |
Academic work is a shared enterprise that depends on a commitment to truthfulness. SLC students are expected to abide by the standards of intellectual integrity that govern the broader academic community to which the College belongs. These standards entail acknowledging the origin of the ideas, data, and forms of expression that one employs in one’s own work; giving due credit to the sources from which one has borrowed; and affording one’s reader a means of consulting those sources directly. Different academic disciplines may have varying conventions of citation and acknowledgment, and electronic media have increased the availability of oral and printed sources. Students are expected to consult faculty members, library staff, and academic style manuals for specific, up-to-date guidelines on citation.
In addition to the true representation of an individual’s work, academic integrity requires that students not abet others in any misrepresentation of their work. It also requires that students not interfere with the access of other students to shared material such as library books, course packets, etc.
Offenses against academic integrity include (but are not limited to) the following:
Sarah Lawrence will make reasonable academic accommodations and provide auxiliary aids and services to assist otherwise qualified persons in achieving access to its programs, services, and facilities in accordance with Section 504 of the Federal Rehabilitation Act of 1973 and Title III of the Americans with Disabilities Act of 1990. Students who need accommodations due to a disability are encouraged to contact the associate dean of studies and disability services in the Office of the Dean of Studies and Student Life.
CONFIDENTIALITY
Discussions are often an integral part of any class session. Students should only self- disclose material they feel comfortable sharing within the context of the class. In this class all information we are given is respected. Please maintain the integrity of classmate communications by keeping these communications confidential.
Due to the nature of this class, students might have strong emotional/psychological reactions to the course material and /or discussions. Please let the instructor know if you are having negative reactions to the material. If you find that any of the readings cause distress, you have the right to not read the article. Additionally, you have the right to leave class at anytime if the material or discussion is causing distress. If you do so, you will not be penalized in any way, nor will you be expected to discuss the exact nature of your discomfort. The amount you wish to share is entirely up to you. If you find that the material causes significant distress or emotional disturbance, I will be happy to refer you to on campus resources. Please keep in mind, given the type of content we will be reviewing this semester, it would be entirely natural to react emotionally to the material.
Importantly, what might be upsetting to one person may not be upsetting to someone else in the class. Therefore, given the content of the course, it is imperative that we think carefully and thoughtfully about what and how we comment and respond to each other.
Of course, there may be other topics mentioned that unexpectedly cause you to feel upset. If there is something of particular concern, however, please feel free to let me know, and we can discuss how to approach those assignments.
In addition, for counseling services on campus call Health Services: (914) 395-2350 and for general information on PTSD visit: http://www.ptsd.va.gov/
Please remember that this is an academic class. Therefore, we will not be discussing our own mental health histories (or those of our family members and friends)
ACADEMIC INTEGRITY: ALL text within your project should be your own words/analysis unless directly quoting or citing an agency member, website, or informational material. Citations and a reference page must be included for any quotes or paraphrased material in your project.
Statement on Plagiarism Plagiarism is the unacknowledged use of someone else’s work as one’s own in all forms of academic endeavor (such as essays, theses, examinations, research data, creative projects, etc.) which may be derived from a variety of sources (such as books, journals, Internet postings, student or faculty papers, etc.). Students should refer to the Policy on Academic Honesty in the Sarah Lawrence College catalog for full information on the consequences of plagiarism.
I look forward to meeting you!
– Brian MacMillan
Each question is worth one mark. You can refer to your notes but you cannot communicate with fellow classmates. If you cheat or provide answers to a classmate you will get zero on the quiz. If your grade on this sample quiz is higher than on a subsequent quiz you may substitute the grade on this quiz for that one.
1. What is the color of the text “What color am I”?
2. In the following example, is the text of the #grandchild element black or blue?
3. What color is the text of the #grandchild element, blue, red or black?
4. How do you apply styling only to the first character of the first paragraph of #child-container?
I have considerable experience creating visual art with Max, and modest experience composing music with MSP.
I display html elements in the text as follows: <div> <span> etc. Note that when talking in the plural I will write something like, the three <divs> have all turned green. HTML elements are never plural. I use this convention because <div>s looks ugly.
Over the next 45 minutes please work through the following exercises. Within the exercises are 12 questions followed by the phrase Your Answer. Please fill in your best guess as to what you think the correct answer is. If you cannot figure out an answer to a question please use an internet resource like W3CSchools to figure it out. Feel free to discuss answers with other students or with the instructor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Cascading Example</title>
<link href="style_cascading.css" rel="stylesheet">
</head>
<body>
<div id="main">
<header class="header">Header</header>
<section>
<p class="body-text">Paragraph One</p>
<p class="">Paragraph Two</p>
<p class="">Paragraph Three</p>
<p id="last-paragraph" class=“”>Paragraph Four</p>
<div id="child-container" class="child-text">
<p class="">Child paragraph</p>
<div>
<p id="grandchild">Grandchild paragraph</p>
</div>
</div>
</div>
</section>
<footer>Footer</footer>
</div>
</body>
</html>4. Create a file called style_cascading.css with the following content:
html{margin:10px;}
body {color:red;margin:0;padding:0;font-size:32pt;font-family:sans-serif;}
.child-text{color:black;}Your document should display as follows:
Q1: Why is some text black and some text red?
5. Add the following to your style sheet.
p{font-family:serif;}Notice that all of the p elements are now in a serif font.
6. Make the font family for .child-text sans-serif
.child-text{color:black;font-family:sans-serif;}
Q2: Why did the child and grandchild paragraphs not become sans-serif?
7. Now add the child-text class to the Child paragraph and the Grandchild paragraph and refresh your page.
Q3: Why did the child and grandchild paragraphs become sans-serif?
8. Now add the following to the bottom of your css file:
#grandchild{font-family:serif;}The file should look like the following:
There are now two conflicting styles applied to the grandchild element, one applied via the classname .child-text, the other applied via the style for element id #grandchild
Q4: Why did the grandchild element become serif?
9. Now add a second class called quote to the #grandchild element in the html document. The result should look like the following. The word quote is in red for emphasis. In your html document it will not change color.
<div>
<p id="grandchild" class="child-text quote">Grandchild</p>
</div>… and add a class definition for quote to the style sheet:
.quote{margin:20px} Note how two different classes can be applied to the same element. But what happens when there is a conflict?
10. Modify the .quote class as follows:
.quote{margin:20px;font-style:italic;color:purple;}There is now a clash between the two classes. The .child-text class specifies a color of red and the .quote class specifies a color of purple. Which one wins? That depends on the position of the two classes in the file.
11. Change the position of the two classes in your css file, first with .child-text before .quote
.child-text{color:black;font-family:sans-serif;}
.quote{margin:20px;font-style:italic;color:purple;}… and then with .quote before .child-text
.quote{margin:20px;font-style:italic;color:purple;}
.child-text{color:black;font-family:sans-serif;}Q5: What happens to an element when it has two styles that are equally specific?
12. Make Grandchild sans-serif.
This is trickier than it sounds because there are now three different stylings applied to the grandchild paragraph font-family, with body, .child-text and #grandchild styles. Deciding which solution to use has consequences.
Previous Exercise | Top | Next Exercise
CSS has many useful techniques that to allow you to apply styles to objects, based on their position in the DOM object hierarchy. This exercise looks at four techniques.
Pseudo Classes
1. Create a document called style_selection.html with the following content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Cascading Example</title>
<link href="style_selection.css" rel="stylesheet">
</head>
<body>
<div id="main">
<header class="header">Header</header>
<section>
<p class="body-text">Paragraph One</p>
<p class="">Paragraph Two</p>
<p class="">Paragraph Three</p>
<p id="last-paragraph" class="">Paragraph Four</p>
<div id="child-container" class="child-text">
<p class="child-text">Child paragraph</p>
<div>
<p id="grandchild" class="child-text quote">Grandchild paragraph</p>
</div>
</div>
</section>
<footer>Footer</footer>
</div>
</body>
</html>2. Create a style sheet called style_selection.css in the same folder as your html document and add the following styles:
body {color:red;margin:0;padding:0;font-size:12pt;font-family:sans-serif !important;}
#main{margin:10px;}Save and view the file. It should look like the following:
3. Add the following to your css file
section p {color: blue;}Q6: What happened?
4. Change the styling as follows:
section > p {color: blue;}Q7: What has happened?
5. Add the following to the bottom of your file:
section p:first-child{color: green;}:first-child is known as a psuedo class. There are a number of pseudo classes including :hover, :before, :after, :first-letter and :first-line
Q8: Why did 3 paragraphs turn green?
6. Change what you just typed by adding a > to the style
section > p:first-child{color: green;}Q9: Why did only the first paragraph turn green?
7. Add the following to your css file:
section > p:first-child:first-letter{font-weight:bold}Notice that pseudo classes can be added together.
Previous Exercise | Top | Next Exercise
1. Create a document called positioning_exercise.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Positioning Example</title>
<link href="style_positioning.css" rel="stylesheet">
</head>
<body>
<header class="myheader">This is a header.</header>
<h2>Position Static and Position Relative</h2>
<section id="s1">
<div>These divs</divs>
<div>have no positioning information</div>
<div>so default to position static. This means they render based on their position in the document flow.</div>
</section>
<section id="s2">
<div class="pr">When these divs</div>
<div class="pr">are
<span class="red">position relative</span>, they align relative to their parent container, in this case section.s2.
</div>
</section>
<footer class="myfooter">This is a footer.</footer>
</body>
</html>2. Create a style sheet called style_positioning.css and save it to the same location as positioning_demo.html
body{height:1100px;border: 1px solid red;}View the results in a browser. They should look like the following. At this point, make your browser window smaller so that it has a vertical scrollbar.
3. Make the header fixed by adding the following class to your style sheet
.myheader{position:fixed;}Scroll up and down to see the results of your change.
4. Position the footer at the bottom of the screen by adding the following to the css:
.myfooter{position:fixed;bottom:10px;} 5. Now give the footer an absolute position:
.myfooter{position:absolute;bottom:10px;} Q10: The footer, when given an absolute position behaves differently when you scroll than when it has a fixed position. Describe this difference
6. Position static and relative
Add the following class to the style sheet:
.pr{position:relative;}This styling with be will be applied to the first and second divs of the section#s2:
<section id=”s2”>
<div class="pr">These divs</div>
<div class="pr">are
<span class="red">position relative</span>, so are aligned relative to the parent container
</div>
</section>Refresh your screen. Nothing should happen. Making the above two divs position:relative renders the document no differently than before when they defaulted to position:static.
8. Now add the following to the .pr class
.pr{position:relative;left:100px}When you refresh notice how the two <divs> with the .pr class are now offset by 100 pixels.
Q11: What are the div.pr elements moving relative to when their left property is set?
8. Now change the .pr class style as follows:
Q12: Why did the two div.pr elements stop indenting?
9. Block, Inline and Inline-Block
Look at the rendered version of the document and then its source, focusing on the two sections. Notice how the document has line breaks where-ever there are <divs> but does not when there are <spans>. That is because <divs> are block elements and <spans> are inline elements. That means that divs have breaks before and after themselves; while spans can be placed within a line of text.
10. The display:inline-block styling merges these two elements. Add the following to your style sheet:
section div {display:inline-block}Q12: What happens when you refresh your page?
11. Setting height and line height to show the difference between inline-block and inline.
Spans are inline elements. Add the following styling so we can easily see the spans:
.red{color:red}When you refresh, you will see that span.red has become red. It is an inline element so it flows within the line.
12. Set the line-height of the spans
span {line-height: 68px;}13. Try to set the height property
Q13: Height is ignored. Why?
14. Make the spans block elements:
span {display:block;height: 68px;}When the span is made into a block element it gets a height property.
15. What is the difference between height and inline height?
Give your spans a border and then view them first with line-height set and then with height property set (not both at the same time)
span {display:block;line-height: 68px;border:1px solid purple;}
span {display:block;height: 68px;border:1px solid purple;}Q14: How does the text position change based on height and line-height properties?
16. Bonus
Make the div.pr elements inline-block and play with both their line-height and height properties simultaneously to see what happens.
To demonstrate the difference between margins and padding
1. Create a document called margins_and_padding.html and add the following code to it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Padding and Margins Example</title>
<link href="style_margins_and_padding.css" rel="stylesheet">
</head>
<body>
<section>
<h2>Padding and Margin Example</h2>
<div id="outer" class="border">Outer
<div id="middle" class="border">Middle
<div id="inner" class="border">Inner</div>
</div>
</div>
</section>
</body>
</html>2. In the same folder create a file called margins_and_padding.css and add the following styles:
#outer{border:2px solid blue;}
#middle{border:2px solid red;}
#inner{border:2px solid green;}The results should look like the following:
3. Add the following style to the #inner element
#inner{border:2px solid green;margin:10px 10px 10px 10px}
4. Add the following style to the #middle element
#middle{border:2px solid red;margin:10px 5px;}Q14: What happened?
5. Add the following style to the #outer element
#outer{border:2px solid blue;margin:10px;}Q15: What happened?
6. Change the styling associated the #inner element to the following:
#inner{border:2px solid green;margin:10px 20px 30px 40px;}Q16: What happened?
7. Change the styling associated the #inner element to the following:
#inner{border:2px solid green;margin:20px;padding:10px}Q17: What happened?
8. Change the style for #outer as follows:
#outer{border:2px solid blue;margin:-50px 10px 10px 10px;}Q18: What happened?
9. Make #outer position fixed, relative and absolute
Q19: What happened?
10. Make all three elements position:fixed.
#outer{position:fixed;border:2px solid blue;margin:10px;}
#middle{position:fixed;border:2px solid red;margin:10px;}
#inner{position:fixed;border:2px solid green;margin:10px;}When you refresh you should see the following:
Q20: What happened?
Q1. The default color for the text is red, as set in the body tag. This is overridden by the more specific class .child-text., which is applied to the child paragraph and inherited by the grandchild paragraph.
Q2. The styling on the paragraph element is considered more specific than the class styling, so it takes precedence.
Q3. When the child-text class is directly attached to the child and grandchild elements, it becomes the most specific styling and therefore takes precedence.
Q4. The grandchild element became serif because styling assigned to an id (#grandchild) is more specific than class and element styling and therefore takes precedence.
Q5. Two two styles are equally specific, the last style to render will be the one which displays. This is determined by its position within the style sheet itself.
Q6. The paragraphs that are children and grandchildren of <section> become blue.
Q7. Only the immediate children of <section> become blue.
Q8. Paragraph One, Child Paragraph and Grandchild Paragraph are all first children.
Q9. The > operator selects the immediate children of the element or class in the style, in this case the section element.
Q10. Their position is set relative to their parent container.
Q10. The footer, when given an absolute position behaves differently when you scroll than when it has a fixed position. Describe this difference.
Q11. Their position is set relative to their parent container.
Q12. When the elements are styled as position:static then left can no longer be set. Use margins and padding instead.
Q13. The divs with the inline-block setting are displayed inline, instead of having breaks between each element.
Q14. Inline elements do not have a height property, use line-height and font-size instead.
Q15. The inline-block elements now have a height property.
Q16. Space added outside of element
Q17. Padding was added to all elements. 10px 10px format
Q18. Your answer: 10px added to top, right, bottom and left sides of element
Q19. The top of the element got 10 pixels of space added outside, the right of the element got 20px of space added outside the element, the bottom of the element got 30px of space added below it, and 40px of space was added to the left of the element.
Q20. 20px of space was added around the outside of the element (margin), 10px of space added within the element (padding).
Q21. The outer element moved up.
Q22. With position: fixed the width of the element shrunk based on text size, instead of defaulting to screen width. With position: relative the width expanded to the width of the screen. With position: absolute the with of the outer element shrunk based on text size.
Q23. All three elements are no longer in the document flow because they are position:fixed, as a result they are no longer nested. The point of this example is that properties like position and margin interact with each other.
I have taught hundreds of technical classes for a variety of NGOs and corporations, including:
RESEARCH
file:///Users/newuser/Downloads/Muldoon_et_al-2012-Political_Psychology.pdf
https://www.readcube.com/downloading
Muldoon, Orla Social Identity, Groups and PTSD
http://ezproxy.library.nyu.edu:2134/doi/10.1111/j.1467-9221.2012.00874.x/epdf
Technology and clinical practice
http://ezproxy.library.nyu.edu:2060/science/journal/13865056
Interference control training for PTSD: A randomized controlled trial of a novel computer-based intervention
A
A confirmatory factor analysis of combined models of the Harvard Trauma Questionnaire and the Inventory of Complicated Grief-Revised: Are we measuring complicated grief or posttraumatic stress?
https://ezproxy.library.nyu.edu:22256/#!/content/playContent/1-s2.0-S0887618510000903
Journal of Immigrant and Minority Health
December 2014, Volume 16, Issue 6, pp 1055-1061
Date: 19 Feb 2014
Specific Trauma Subtypes Improve the Predictive Validity of the Harvard Trauma Questionnaire in Iraqi Refugees
http://ezproxy.library.nyu.edu:2178/article/10.1007/s10903-014-9995-9
Journal of Nervous & Mental Disease:
February 1992
Article: PDF Only
The Harvard Trauma Questionnaire: Validating a Cross-Cultural Instrument for Measuring Torture, Trauma, and Posttraumatic Stress Disorder in Indochinese Refugees.
MOLLICA, RICHARD F. M.D., M.A.R; CASPI-YAVIN, YAEL M.A., M.P.H.; BOLLINI, PAOLA M.D.; TRUONG, TOAN; TOR, SVANG; LAVELLE, JAMES L.I.C.S.W.
http://journals.lww.com/jonmd/Abstract/1992/02000/The_Harvard_Trauma_Questionnaire__Validating_a.8.aspx
Rasmussen: invariance
http://psycnet.apa.org/?&fa=main.doiLanding&doi=10.1037/pas0000115
http://ezproxy.library.nyu.edu:2259/psycarticles/2015-16476-001.pdf
Psychological Assessment
Editor: Cecil Reynolds, PhD, ABPN
A Contemporary Taxometric Analysis of the Latent Structure of Self-Monitoring
Michael P. Wilmot
University of Minnesota
Psychological Assessment © 2015 American Psychological Association
2015, Vol. 27, No. 2, 353–364
http://ezproxy.library.nyu.edu:2259/journals/pas/27/2/353.pdf&productCode=pa
When language breaks down: analysing discourse in clinical contexts
Asp, Elissa D • 2010
Publisher:
Cambridge University Press
ISBN:
9780521889780
http://ezproxy.library.nyu.edu:2054/lib/nyulibrary/reader.action?docID=10385805