Facebook app wrapper full page3/30/2023 I then remove this wrapper and the CSS for it before I put it into Facebook. This is just to ensure that I'm staying within 760px the width of the canvas that Facebook allows your app to sit in. Whilst creating the html version of our Facebook app I'd like to put everything in a wrapper that is 760px wide. This file will allow us to do our filter search and change the content of our page tabs Setting Up Our Page I've then followed this by the latest include of jQuery and an include to my own javascript file which I have named 'myjava.js' (although we will be creating this file in the next part of the tutorial). I'm not going to go into too much detail about this in this tutorial but you can find more information regarding this in the further reading section below.Īfter the reset I've then linked to my own CSS file which I've named 'style.css'. If you're not familiar with a CSS reset, in its most basic form it can be described as:Ī stylesheet to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings etc For my CSS reset I've linked to Yahoo's CSS reset from their YUI library. As you go along I'm sure you will come up with your own methods and ways of doing things and a part of it is finding the best way that suits you.ĭesign and Code an integrated Facebook App įor this project I've used the HTML5 doctype, which I think most of you should have tried out by now. This also makes life easier when I'm coding things up. Sometimes I also like to print out my wireframe and mark the dimensions on them with a pen. It can be much easier to arrange and conceptualize things in Photoshop than it can be in your code editor. It can also come in handy in the future for when you want to update your app. Personally I always like to create what I am going to be coding into Photoshop first as it gives me a strong visual idea as to what I am going to be coding. Some of you will want to design your layout in Photoshop whilst some of you who are confident enough will want to jump straight from the wireframe into the HTML/CSS mark up. It's always a good idea to begin with a bit of forward planning. Step 1: Failing to Prepare is Preparing to Fail So stick with me, make yourself a cup of tea and happy coding! In this part of the tutorial we're going to be coding that design into HTML and illustrating some of Facebook's CSS style properties that will give it that native feel.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |