We looked at web safe font, and web fonts.
I asked students to use google fonts to use some strange font on a webpage.
resources:
http://en.wikipedia.org/wiki/Web-safe_fonts
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
http://www.google.com/webfonts
I talked a little bit about the assessment. I don't know if it makes sense to assess students so soon. I don't feel like we have done enough for that to be meaningful.
audio: soft7001-20111025.m4a
Showing posts with label SOFT7001. Show all posts
Showing posts with label SOFT7001. Show all posts
Tuesday, October 25, 2011
Monday, October 24, 2011
SOFT70001 Media Query Resources
- http://mediaqueri.es/
- http://www.w3.org/TR/css3-mediaqueries/
- http://www.alistapart.com/articles/responsive-web-design/
- http://reference.sitepoint.com/css/mediaqueries
- http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
- https://developer.mozilla.org/en/CSS/Media_queries
- http://webdesignerwall.com/tutorials/css3-media-queries
- http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design
SOFT7001 Class 16
We looked at using different stylesheets depending on the conditions under which the page is displayed. We used window.innerWidth as the determining factor. But JavaScript media queries are even better.
I asked students to write two stylesheets for a page: one three column layout for wide views and one single column version for narrow displays. To really push the boat out students could use the horizontal and vertical menus developed in earlier classes.
some code:
<html>
<head>
<link id="stylelink" rel="stylesheet" href="style1.css" type="text/css" />
<script type="text/javascript">
function resetcounter()
{
document.getElementById("counter").innerHTML = window.innerWidth;
if (window.innerWidth < 500)
{
document.getElementById('stylelink').setAttribute('href', "style2.css");
}
else
{
document.getElementById('stylelink').setAttribute('href', "style1.css");
}
}
</script>
</head>
<body onresize=resetcounter();>
<div id="counter">000</div>
</body>
</html>
I asked students to write two stylesheets for a page: one three column layout for wide views and one single column version for narrow displays. To really push the boat out students could use the horizontal and vertical menus developed in earlier classes.
some code:
<html>
<head>
<link id="stylelink" rel="stylesheet" href="style1.css" type="text/css" />
<script type="text/javascript">
function resetcounter()
{
document.getElementById("counter").innerHTML = window.innerWidth;
if (window.innerWidth < 500)
{
document.getElementById('stylelink').setAttribute('href', "style2.css");
}
else
{
document.getElementById('stylelink').setAttribute('href', "style1.css");
}
}
</script>
</head>
<body onresize=resetcounter();>
<div id="counter">000</div>
</body>
</html>
Tuesday, October 18, 2011
Classes with Colin canceled on Thursday
I am going to a funeral on Thursday. I don't expect to be at any classes. Except maybe the 0900 one. Check back here for an update
SOFT7001 Class
We looked a color and text. I spoke a little bit about the different kinds of fonts and how they can make a different impression. The interaction of background and font can impact on readability. I stressed the importance of relative sizing.
I referred students to fonttester.com to experiment with the different font properties
We finished up around 1730 instead of 1800
I referred students to fonttester.com to experiment with the different font properties
We finished up around 1730 instead of 1800
Monday, October 17, 2011
SOFT7001 Class 13
I asked students make a vertical menu from a nested list in CSS. This is much easier than the horizontal one we did last week. But it's best to start with an empty CSS file rather than modify the horizontal one.
Thursday, October 13, 2011
SOFT7001 Class 12
We looked at color and backgrounds. I asked students to add backgrounds to the menus we made in the last class.
I referred students to a YouTube video about color systems. A second video on the RGB system was rejected by YouTube for being too long so it's available here.
I referred students to a YouTube video about color systems. A second video on the RGB system was rejected by YouTube for being too long so it's available here.
Tuesday, October 11, 2011
SOFT7001 Class 11
We completed out horizontal menu using CSS to change the properties of a nested list. We resisted the temptation to create classes for the inner and outer lists using child selectors.
Getting the elements to line up nicely proved difficult because of inheritance of the padding properties - or something. Colin promised to look into it.
Colin attempted to use background images instead of colors for the hovers, but that didn't go so well. We will look at images the next day.
Today's code. Note the child selectors and the display property's none and block attributes
body {background-color: #cccccc;}
div.menulist {
width:100%;
border-top: 5px solid #069;
border-bottom: 5px solid #069;
margin-top:20px;
float:left;
background-color: #ffa;
}
div.menulist >ul >li {
float:left;
width:6em;
padding-left:0;
}
div.menulist li {
list-style-type:none;
background-color: #ffa;
border-right: 1px solid #069;
}
div.menulist > ul {
margin-top:0;
padding-left:0px;}
a:link {color:black;}
a:visited {color:black;}
a {text-decoration:none;}
a:hover {color:red;}
div.menulist li:hover {background-color: #aaa;}
div.menulist ul li ul {
margin:0;
width:6em;
position:absolute;
padding-left:0;
}
div.listmenu ul li ul li {
width:100%;
}
div.menulist ul li ul {display:none;}
div.menulist ul li:hover ul {display:block;}
Getting the elements to line up nicely proved difficult because of inheritance of the padding properties - or something. Colin promised to look into it.
Colin attempted to use background images instead of colors for the hovers, but that didn't go so well. We will look at images the next day.
Today's code. Note the child selectors and the display property's none and block attributes
body {background-color: #cccccc;}
div.menulist {
width:100%;
border-top: 5px solid #069;
border-bottom: 5px solid #069;
margin-top:20px;
float:left;
background-color: #ffa;
}
div.menulist >ul >li {
float:left;
width:6em;
padding-left:0;
}
div.menulist li {
list-style-type:none;
background-color: #ffa;
border-right: 1px solid #069;
}
div.menulist > ul {
margin-top:0;
padding-left:0px;}
a:link {color:black;}
a:visited {color:black;}
a {text-decoration:none;}
a:hover {color:red;}
div.menulist li:hover {background-color: #aaa;}
div.menulist ul li ul {
margin:0;
width:6em;
position:absolute;
padding-left:0;
}
div.listmenu ul li ul li {
width:100%;
}
div.menulist ul li ul {display:none;}
div.menulist ul li:hover ul {display:block;}
Monday, October 10, 2011
SOFT7001 Class 10
We looked at the poristion property. It's tricky but very important.
static, relative, absolute, fixed
We coded a list and used it as the basis for a menu
code:
div.menulist {
width:100%;
border-top: 5px solid #069;
border-bottom: 5px solid #069;
background-color:#ccf;
margin-top:20px;
float:left;
}
div.menulist li {
float:left;
list-style-type:none;
background-color: #ffa;
padding: 0px 6px;
border-right: 1px solid #069;
}
div.menulist ul {
margin-top:0;}
a:link {color:black;}
a:visited {color:black;}
a {text-decoration:none;}
a:hover {color:red;}
div.menulist li:hover {
background-color:black;}
static, relative, absolute, fixed
We coded a list and used it as the basis for a menu
code:
div.menulist {
width:100%;
border-top: 5px solid #069;
border-bottom: 5px solid #069;
background-color:#ccf;
margin-top:20px;
float:left;
}
div.menulist li {
float:left;
list-style-type:none;
background-color: #ffa;
padding: 0px 6px;
border-right: 1px solid #069;
}
div.menulist ul {
margin-top:0;}
a:link {color:black;}
a:visited {color:black;}
a {text-decoration:none;}
a:hover {color:red;}
div.menulist li:hover {
background-color:black;}
Thursday, October 6, 2011
SOFT7001 Class 9 canceled
Class canceled again today. Really sorry guys.
This is going to be my third trip to CUH in as many days.
This is going to be my third trip to CUH in as many days.
Tuesday, October 4, 2011
Monday, October 3, 2011
SOFT7001 Class 07
http://mcom.cit.ie/staff/computing/cmanning/soft7001/SOFT7001-CSS1.pdf
We discussed the cascade and specificity. Tricky enough. But it makes sense really.
We discussed the cascade and specificity. Tricky enough. But it makes sense really.
Thursday, September 29, 2011
SOFT7001 Class 06
We looked at a simple 3-column layout. I asked student to code a simple 3-colum layout of their own from scratch.
We looked at how the BostonGlobe.com adapts its style to page width. This is the kind of thing we would hope to do eventually.
Don't worry! We will be going back to all those tricky selectors.
We looked at how the BostonGlobe.com adapts its style to page width. This is the kind of thing we would hope to do eventually.
Don't worry! We will be going back to all those tricky selectors.
Tuesday, September 27, 2011
SOFT7001 Class 05
Still in section 8 of the W3 specification
I asked students to get to grips with sibling combinators
I asked students to get to grips with sibling combinators
8.3
div + p
h1 ~ div
We looked at psuedo classes
a:link /* unvisited links */ a:visited /* visited links */ a:hover /* user hovers */ a:active /* active links */
6.6.3 :lang
6.6.4 not for us
6.6.5
:nth-child is very complicated. I doubt we'll use it
:first-child is very useful
6.6.6 nothing for us
6.6.7 nothing for us
7.1 ::first-line 7.2 ::first-letter7.3 nothing for us7.4 nothing for usMonday, September 26, 2011
SOFT7001 Class 04
I couldn't get my computer connected to the projector, so that wasted some time. Hopefully we will find out groove soon. The new room is a vast improvement, projector or no
I asked students to codes pages with combinator selectors, and child selectors to demonstrate that they know how they work, Specifically these three forms
I asked students to codes pages with combinator selectors, and child selectors to demonstrate that they know how they work, Specifically these three forms
- h1 em (descendant)
- body > p (child)
- div * p (grand child or deeper)
Thursday, September 22, 2011
SOFT7001 Class 03
This class was in PF54. There was no projector, no computer, and not that many power points either.
Students that had laptops hared with those that didn't and go to work on the different combinator selectors (Secion 8 p32 of the handout). I got students started but I left at 1530 because I was no longer to prepared to shout over workers outside cutting stone.
I hope we will move the class from this room soon.
Students that had laptops hared with those that didn't and go to work on the different combinator selectors (Secion 8 p32 of the handout). I got students started but I left at 1530 because I was no longer to prepared to shout over workers outside cutting stone.
I hope we will move the class from this room soon.
Wednesday, September 21, 2011
Tuesday, September 20, 2011
SOFT7001 Class 01
We looked at the module descriptor and I explained what this module was and wasn't. Since a number of students are taking this an an elective I explained what the pre-requisites were.
I asked students to construct a simple web page with some tags and to change the color of the text using a linked style sheet. The students present were able to do that, so I figure they know enough CSS to proceed with this module.
I gave out a handout. I had enough for all but one student. It was a copy of (most of) http://www.w3.org/TR/css3-selectors/
Students with laptops should being them to the class in PF54. There is no prospect of doing anything productive there otherwise. I have requested a room change.
DWEB2 students are automatically registered for this module. Other students need to register. The CRN for this module is 22517. I would like these students to also e-mail their names to me.
audio: soft7001-01-20110920.m4a
I asked students to construct a simple web page with some tags and to change the color of the text using a linked style sheet. The students present were able to do that, so I figure they know enough CSS to proceed with this module.
I gave out a handout. I had enough for all but one student. It was a copy of (most of) http://www.w3.org/TR/css3-selectors/
Students with laptops should being them to the class in PF54. There is no prospect of doing anything productive there otherwise. I have requested a room change.
DWEB2 students are automatically registered for this module. Other students need to register. The CRN for this module is 22517. I would like these students to also e-mail their names to me.
audio: soft7001-01-20110920.m4a
Subscribe to:
Posts (Atom)