1.  

  2. Positioning

    We reviewed this point several times in our sessions, i think its a good idea to have everythings written in one place.

    We talked about position:absolute and how it can help us create the compostion from our design. It’s a CSS rule that give each object a specific location on the page, we have to specify a distance from the top of the page and from the left of the page (which means all the distance is relative to the top-left corner of the HTML page).

    for example a CSS rule could be like this:

    #logo {

    position:absolute;

    top:120px;

    left:80px;

    }

    This rule will postion the object with the ID logo 120 pixels from the top and 80 pixels from the left.

    Objects that are positioned in an absolute way are relative to the objects they are inside of (if the parent objects are also absolutely positioned) which means that if all the objects of the page were to be inside a DIV and that div had position:absolute rule for its ID the count of the position will start from the top-left corner of that div, this allows us to make things like center the page (to have equal amount of space on both side of the design).

    An example for a CSS rule for centering a page with absolute:position:

    #everything {

    position:absolute;

    top:0px;

    left:50%;

    width:800px;

    margin-left:-400px;

    }

    This code will center the page by the instruction of putting the object at exactly 50% of the page and then we tell him to go back to the left half of the overall width of the object, in this case it was 800 pixels so we write -400 pixels.

    If we are not using position:absolute in our design it can be achieved with the code:

    #everything {

    margin:0 auto;

    width:800px;

    }

    We also talked about using the specification of float in CSS, it allows us to tell a group of objects that they should fill the page by order based on space available. the position of those objects are relative to each other and therefore it’s not necessary to give each one a specific position in the page.

    Position:fixed will keep the object on screen in a specific location regardless of any scrolling.

    Position:relative can help us move objects that are positioned by a non absolute way, for example a button that is inside a block of text and you want it to be 5 pixels lower than the line, can be positioned in this way. it will take the position from the natural order of the page but will push it 5 pixels down. the code for this rule is identical to position:absolute- you need to specify top, left or both.

     

  3. Integration (embed)

    videos, music, facebook like buttons and commenting systems- these are all things we can embed in our website by only copying a paragraph of code and inserting it in our HTML code.

    To embed Youtube videos, click on share under the video box, there you have an option called Embed- choose a size that fits your design, and copy the code they give you. To add it to your HTML just paste it in the location where you would like it to be. Remember that you can style this content just like anything else in the page!

    Other video and audio website offer very similar code system, you can also do it with Vimeo videos and Soundcloud music.

    To add a Facebook Like button to your website go to this page, fill in your website details and click “get code” to generate the code that you need, notice that they offer different types of code, i suugest to go for IFRAME option as it’s the most simple.

    Google+ also have their own version of the same thing right here

    Twitter here. Twitter also have a widget (small program) that you can add to your page to show your latest tweets get it here

    If you would like to have some conversation with the visitors to your website you will need a comment system, it can be implimented in a very similar way to the rest of the objects we talked about- Facebook’s commenting plugin give you the option to add a piece of facebook to your page, the only problem is that if some people are not registered they can’t comment. Disqus (the comment system for this blog) is a much more flexible solution because it offers many ways to identify the users and even to post anonymously. Keep in mind that a comment system require moderation, which means that there will be work to be done- as people ask questions, give you feedback you are expected to answer and interact.

     

  4. Webfonts

    Two fantastic resources we can use for fonts on the web:

    Google’s Web Fonts library - have a lot of fonts availabe to use in any website project, you just have to follow their instuction on how to link your page to the font, and the rest is up to you to tell (using CSS) where the font should appear. The fonts from this library are also available to download and use offline.

    Font Squirrel - A collection of fonts that are free and free to use on commercial projects, they also have a free tool to convert your fonts into working webfonts and supply all the code necessary for using fonts in online websites.

     

  5. Typography Time!

    In our 5th session we reviewed the typography options available for use in CSS.

    In HTML with CSS we have absolute control over the way text will appear, we just have to specify all the details in the CSS ID or Class. Things like- font family, size, color, weight, letter spacing, line spacing, alignment and justification, and more..

    We already discussed how to position elements in the page using the position specification, and controlling the width of the text area (usually our div). Using these two parameters we can make any layout we can think of.

    Everything in the page have to be styled, from the background until what happens when you press a link, we also saw that we can give other objects (that are not links) instructions for what happens the mouse hover over them.

    Here we have the small test that we made:

    You can visit it right here to see how it looks in the browser.

    You can download the files from here, to see how the code looks like.

    Notice that i added some things, I’m using 3 simple divs with rounded borders to create a basic face shape, each one have only a border and background-color to give the visual style of an eye, the round edges are achieved using border-radius.

    Play around! There are infinite possibilities!

     

  6. Analyzing design / Planning HTML

    When we have a page designed, an image of what the page is meant to look like, we have to start analyze how it will be constructed in HTML. This is different from planning a grid for the design in the fact that we are looking for a grid or structure in the design that we have.

    We have to look back and recognize what are the different areas, what is their sizes, what they have inside of them, what spaces are around, everything have to be considered.

    Making a good list of areas with their proper specifications will help you create an HTML file for the content that goes inside of those areas and a CSS file for the design of those areas.

    Lets do one really quickly!

    The website for Zara, affordable fashion company from Spain

    Lets recognize the areas that we see

    Lets look at it without the content

    This gives us a very clear picture, this is what we need to do in HTML. we see which areas exist and we go on to build them and give them the styling (font, colors, position, etc…)

    It might help to think about each of the areas separately (assuming they are not inside each other), in a similar way to layer in photoshop- each one have his own position, spacing, and in case that they are overlapping- will cover each other.

    Now we can start creating the HTML, we know that we have 6 areas in the page, we can create 6 div tags by the order that they appear (unlink photoshop the first to be written is the most low on the order). We can start with the image in the background and then we can follow with the rest in any order that we like.

    Make sure that every div tag has an ID that explain who it is. For exemple:

    <div id=”menu”>

         NEW THIS WEEK

         WOMAN

         TRF

         MEN

         …

    </div>

    later when we build the CSS for this page we will design the “menu” ID to give this div it’s design and position.

     
  7. Yuna Kim

     
  8. Academy

     
  9. Tim Bjørn

     
  10. Dear Lament

     
  11. Hanging up the moon

     

  12. Transferring files with FTP

    To use your new hosting service you have to use an FTP program, I recommend Cyberduck you can get it from here (there are many other programs and plugins for FTP).

    After getting the program on your computer you have to connect to your server, to do so click on “Open Connection” at the top left corner of the window. Inside write your server name, username and your password. You can locate those in the control panel in your hosting service (usually under an area marked as FTP configuration).

    Connect!

    Now you can see the files on your server. The first page that appears when a person enters your website is “index.html”. Make a nice temporary page for your website that will appear until we get on with the project.

    The files that are stored on the server are copies of the files you are transferring. It’s important to understand that if you make a change on the files on your computer you have to copy it again to the server. Be careful not to overwrite over important files and always keep your files and folders organized.

    Any questions? leave a comment…

     
  13. Brosmind

     
  14. Hey Studio

     
  15. Canada