Blog Coding - Type A Conference Recap
I'm a geek. In my head, I'm a geek, and I love it. I love the idea of being able to understand code and adapt it to my needs. In reality, that doesn't exactly happen. I'm proud when I can figure out that the reason something doesn't work is because it has a backwards quotation mark instead of the forwards one. Real coding? It doesn't happen, but I'm still fascinated by it.
Or I should say, it doesn't happen yet. While I may never be a power coder, I attended the most enlightening session with Peter Pollock (@PeterPollock) and Cailin (@RentAGeekMom) on coding I've been to last week while at Type A Conference. While my brain shorted out somewhere near the end, I picked up so much while I was there. I had lightbulbs going off constantly in my head. A little knowledge is a dangerous thing....
I have also posted other Type A Conference recaps:
Keynote session with Chris Garrett
Don't Rank Me: Getting Past Scores and Numbers with Kelly Whalen and David Binkowski
Time Management with Amy Bair
Taking Over the World with Google+ with Lynette Young
Vlogging for Bloggers: From Keyboard to Camcorder with Christie Crowder
Blog Coding
Peter Pollock has graciously posted the slides to the Blog Coding presentation. Caitlin also has all sorts of Q&A stuff, as well as snippets of code that you can cut and paste and examples to use.
Caitlin: I have lots of experience coding in html and CSS
Peter Pollock: I have a business coding and hosting, PHP, html, CSS, and I mostly focus on blogging.
Peter: Some of you may be like me where you can't remember this language stuff all the time. My reason for being here is to tell you that it's ok. Once you learn the basics, you can work through it. Caitlin can handle everything when it goes bananas.
Caitlin: Let's go through some definitions first to ensure that we're all on the same page.
html - hypertext markup language. It's basically the bones of a website - a body tag where all the content goes, a head tag where it tells the browsers what you're about. Within the body you'll have div tags that are the different segments of the blog
CSS - cascading style sheets. This file defines all the formatting. This is what makes the blog pretty - what the font, size, background color, italic, bold, etc., whether the div is to the left or the right or the bottom.
If you think of coding as a house, html is the walls, and CSS is the decorations. That's the difference between the two.
jQuery, PHP, Javascript all go together because you don't need them to build a website. You can pull information dynamically from a database instead of typing it all in. This is a little more advanced. Once you get good with html and CSS, then you can start dabbling in these.
Platform - this refers to whether you're running a self-hosted WordPress or Blogger or what have you. It could also be the server environment, but for us we're talking about where you have your blog.
Browser - this is what you use to surf the web. I use Chrome. Opera and Firefox are common. Explorer is common on PCs. What version you are using could vary widely. IE6 is dead, IE7 is on the way out, IE 8 and 9 are in use, 10 is in beta. Something will look great in Chrome and Firefox but looks horrible in Explorer. Google - "why does X not look right in IE," and there will be an answer. IE9 renders almost everything really well.
Web host - the folks that you pay to host monthly. GoDaddy, HostGator, Bluehost is really good, RackSpace is excellent if you can afford it. A lot of people have had issues with BlueDream.
Domain - this is recommended instead of sending someone to an IP address. We all have these. You can buy a domain from your web host, but best practice is not to buy your domain from the person who hosts your domain. If you move, they will take it back and ask for money for you to keep it. I made this mistake before.
Permalink - this is the link to a specific page or post. If you send someone to a permalink, they won't go to your home page but a specific page on your site.
Content - you can define content on your pages, post area or on widgets on the back end in WordPress. You need to separate your design and your content and how you think about those two things. There are people create their post and then do a lot of markup to make it look fancy. It's a waste of time and effort. You need to have a design that says this is how a heading looks and how italics looks. That way everything is the same on the site and when you change your theme, it's a lot easier. It's easier to define this in the style sheet of your theme versus every time you write a post defining the H3 (header 3). You'll save yourself a lot of time, and it's a lot easier.
Basic anatomy of a web page
Peter: You start with the background. That is what's in the background. The header area is at the top of a page. The content area is where your posts will appear or the stuff you type. You have a sidebar that holds widgets and a footer area and that can also host widgets and your dislaimers and copyright, etc. You can have a sidebar in multiple places that range from one next to the other, one on each side, or even on the bottom of the page. You can identify the setup of a web page. They'll have the title and navigation and then the content below.When you look at the html, this is basically what it will look like:
<html> - tells the internet that this is html and how to read it<head> - the section where the page tells the browser what it's going to be doing - the title of the page, what version of JQuery to use, it pulls in different scripts, where your theme or another reference to a style sheet goes. It will apply styles and scripts in the order that it sees them, so make sure you put them in the right order. WordPress instructions will often say put this in a specific place. The stuff that goes here doesn't appear visually or as text in this page for the most part. If you did a tag wrong or do your syntax wrong, it will just show up in the head, so that gives you a clue as to what went wrong.
<body> This is the main part of the document and what will be displayed on the screen. This is the header, content and footer. What you'll normally find is that there is an opening <div> that is called something like container which is used to put CSS to define how wide the page is and how it will look. You can name this whatever you want. That said, make it sensible when you name is so that will have an ID of content and sidebar and footer, etc. My div ID header is going to be background black which makes the header area black, then define the text as white. They don't do anything to the html markup but help define the style.
<div id="container">
<div id="header">...... </div>
<div id="content>....</div>
<div id="sidebar">.... </div>
<div id="footer"> ... </div>
</div>
</body>
</html>
You can name these whatever you want, but make them something that makes sense so that they are easy for you to understand (e.g., "container" could be "pumpkin" but that is not helpful).
You can define your content that is 600 pixels wide and that will show the content and then you can nest another div within that 580 so that you can get the borders the way you want them to be instead of trying to get the margins set exactly right, etc. You want between 980 and 1100 for your whole page; this is ideal because otherwise it's either too small or you have to scroll back and forth to see what all is on your page.
If you pick a theme that has responsive design, the website will resize itself based on the size of the browser window, but this may make it so that your CSS tweaks do not have the effects you intend. Most screens today are about 1000 pixels wide, so we tend to stick around that.
You can have multiple divs for the header, the header will then also have a nav div within it
<div id="header"> ...
<div id="logo"> ... </div>
<div id="navigation> ... </div>
</div>
When coding your page, I suggest that you indent each time you open a div and then stop indenting when you close out the div, which helps you see what is closed and not closed and where different divs have been created to better see what you've done with your page. The structure is more clear this way. Your browser doesn't care about the indents.
Now we move into html5. It's been out for 2 years. IE9 doesn't use it properly, but IE10 does. They have new tags, so where now we use <div id="container"> html5 has this thing called <canvas> and this replaces all of that. It looks like:
<body>
<canvas>
<header> ... </header>
<nav> ... </nav>
<article> ... </article>
<aside> ... </aside>
<footer> ... </footer>
</canvas>
</body>
You can use html5, but don't mix it with xhtml, so make sure you have a theme that is in html5. There is a way with a script to have html5 translate to IE browsers that are reading this page so that they read it as xhtml.
Caitlin: The most important part is how to get help when you get stuck.
Wordpress Resources:
http://wordpress.org - it has a lot of stuff for colors and fonts and how to change the way your post displays so the post meta are above the post title and comments are that bottom, etc.http://wpbeginner.com - they're aimed toward beginner site education. He does a newsletter, does a series of freebies, they put out articles every day on various things you can do with WordPress from how to modify your theme to how to do stuff in your admin.
http://wpvideos.com - beginner videos for developers, less helpful but I'm not a video learner
http://stackoverflow.com/
questions/tagged/wordpress - a whole active section of people asking about WP and getting answers
http://wp.tutsplus.com - they have a WordPress subsite with tutorials from beginner to developer. How to write a plug in to, how to change the colors of things, and more.
http://premium.wpmudeve.org/ - this is membership only and sort of pricey but it can be helpful if you're designing sites for others. They have a whole lot of plug ins and themes that you can download.
https://learnable.com/ - This is another paid site. You can get lessons for stuff. They tend to be really quality lessons that people have developed for this site and then uploaded.
HTML, CSS help:
Personally, I google it. I go to google and say "how do I make the margin bigger CSS"http://w3schools.org (HTML, CSS) - it allows you to see the code and say this is how you use something. You can go in and change the code box to play with to see how it looks when you update it.
http://webdesign.tutsplus.com/ - this is for web design like we talked about with the WordPress help. It's handy to sort of look to see what are best practices, what you should avoid. Don't use yellow text, don't use 12 fonts on a page, etc.
http://htmlgoodies.com/primers/html/articles.php/3478141 - some specific places for html help.
http://codeacademy.com/
http://codeacademy.com/courses/my-first-webpage (hmtl, CSS)
https://learnable.com/ - again they have a ton of lessons, including on html and CSS
PHP resources:
http://www.php.net - official documentation for PHPhttp://wordpress.org/codex WordPress PHP specifically - you need to know about this because there are tags specific to WP and you need to know what they are. You can't just use the tags anywhere. There will be these tags scattered through your theme, so learn to recognize them.
Other resources
Twitter - crowdsource on Twitter. Try a hashtag related to the language your question is about - like #wordpress or #wp or #html or #css or #jquery. You may have to ask multiple times over the course of the day, but people will help you. Sometimes people will help you for free, and sometimes they will want to charge you. You have to know what you're willing to pay. Try rewording your question if no one answers, as they may not know what you're asking.Stackoverflow! Ask questions, get answers. It's free, community driven, and very active. The people there are paid to answer your questions for free.
Where does html go?
Caitlin: It's not as clear cut as you would want. It sort of finds itself everywhere. It can be added to .html files in older web pages, as well as integrated into .php files. This .php file is more likely where you will find the html. There are files that display the information from the database and the .php are what pulls from the SQL server. All your html files for WordPress will be in .php files. There will also be .php tags scattered throughout to show where things go.You might also have the html in your text or into Widgets/Gadgets/Woozits, and you may have plaes within your them or site where you could add other html code snippets to further customize them. When you write text, you could also see html in the the text and body itself, but you're less likely to be writing it here.
Where does PHP go?
The PHP is dynamic, pulling information and content from a database - with html to structure that information. If you're using a standard WordPress theme, you'll have files like page .php, archive .php, header .php, etc. There is a specific structure that the theme has to follow, and you can find how this works and the hierarchy if you search in the codex.You can also find php in a functions file. This is where you might find code snippets to do things like how to change the length excerpts. This gets dumped into the bottom of your php file.
Where do we use CSS?
CSS is where the bulk of most of us are learning. This is the pretty-ifier. You'll have at least one style sheet to help style CSS. you might have an IE style sheet to help translate those or a custom CSS to put in custom tweaks so you aren't modifying the original styles. They can be named anything you like so long as you know what they're going to be for, so try to be sensible. If you create a new style sheet, you also need to link to it the head of your style sheet.
Where do we put Javascript/jQuery?
If you're following tutorials, you might run into this stuff. You may find something that says copy this into your <head>. The problem with Javascript/jQuery is that it will tell you to put it in various places. The tutorial should specify for each area what to do and where to put it, but it sometimes misses this step. If something is not working properly, the first thing to check is that you've put everything in the right place. jQuery is related to Javascript because it's the Javascript library.HTML Syntax
HTML is a language for defining web pages. It's not a language as such, it's a markup language. You can have a title, and your title might be "homepage." We put markup around that, it's in a tag, and you put something like H1 for Header 1, and your markup is what tells the computer how to display this. When the computer gets this, we know the content says homepage and it looks at the markup to see how big it should be. It then goes to your CSS file and looks to see what Header 1 is supposed to be - blue, 20 point, etc.HTML Tags
You're going to mark up a lot of documents with html, so they're important. You aways have an opening and a closing tag. The opening tag will just have a < and > with the word between it. The closing tag has a < />. If you don't have a closing tag, then it just keeps going. There are specific markup tags that you can use. You can't just make them up yourself. WP3school lists them all for you. Look down the edge for what you need and can do.
You start off with your tag. You could just say <div> but you have to provide the additional information about the attributes. They always come in name/value pairs like name="value".
"a" means anchor. Then you have to say the hyperlink reference is, whatever the address is and the words you want to be linked. It looks like <a href="http://website.com">NAME OF THE LINK</a> There are a lot more attributes for the anchor from class to tags (for SEO), a rel tag that you will use if you're trying to create a light box or to open a new window or tab, but they aren't required.
The difference between a an ID and a class. An ID is suposed to appear just once in your site, but a class of left may be supposed to appear multiple times. You may see themes where they use IDs multiple times (container) that then will give unexpected results when you modify them. Be careful of what changes when you modify something.
You have to use tags in the right way. The <h1> tag to <h6>. When Google goes to your website, it looks to see what's most important. <h1> should only be used once. <h2> will be the sub header. If you don't do this properly, it will confuse the search engine. That is just for the robots. They are looking at the markup to know what your page is and this helps them understand it.
CSS Syntax
This is different than HTML syntax. You use { instead of <. It will have a selector like h1 and then is comprised of the value and the property. {color:blue; font-size:12px;} Here, color and font-size are the property and blue and 12px are the value. The selector is usually the html element you want to style (h1). You can define size in pixels or Ms (a relative sizing M, 2M - twice as big as others on the page, which is good for the relative design sites).
cssfontstack.com has a list of all the fonts available. Not every browser supports supports every font style. You always want to have a fallback so that if someone doesn't have it supported, something will be displayed.
There are things like CSS 3 that are for box shadow and other fancier things. The easiest way to start messing around with these is to use a tool called Firebug or other tools that are an add on to your browser. It is a toolbar on the browser - on the left side, it will be the code and on the right it will show what is visible. This allows you to play with things a little without publishing them to see what things will look like.
Some of the enhancements where you are targeting an HTML element's class don't work on IE and just show up as nothing. Don't use them in critical parts of your design because it will render your website nonfunctioning for IE that doesn't support this. You also want to ensure you have font families that you're using so if someone has uninstalled Arial from their computer, they can still see something.
You can have specifications for all sorts of different classes, and it can really get fun. The specificity does get people tripped up though. Sometimes areas of your site have been defined with the same selector, so it may not be changed if it is in a different div. Thus when you change h2 to be blue instead of red, it may change it in one place, but then in another place it will still be red because it was defined in the different div.
Your browser will read your style sheet from top to bottom. What is at the bottom overrides what is at the top. If you have h1 blue and then near the bottom there is something else that is h1 and it's red, it will read the red last and that one wins. If you bring in multiple style sheets, it also reads style sheets in order, so whatever the last definition of a selector is what will override everything. Make sure your custom style sheet is last so that it is the one that rules.
You can look at the source code of any website by right clicking and selecting to see the source. It can be helpful to see what others are doing with some CSS and some HTML. You don't see the PHP though, so there are elements they've created and you don't see it , and that can be confusing.
Linked Image:<a href="http://mylink.com"><img src="http://yourdomain.
comdirect-image-link.jpg" alt="Text In Case Image Doesn't Load"/></a>
This sort of nesting happens within html everywhere. There is no closing image tag, it just closes with /> at the end of the image. This is rare that a tag does this. Please always have the alt text so that those who cannot see and are using a reader assistant, it will read something. This also helps the search engines know what your picture is and where it fits in search.
Add a CSS Class to an HMTL elementAdd class="yourclassname" to any element. For example:<div class="YourClassName"> this is what is in the is div.</div><p class="YourClassName"> this is what is in the paragraph. </p><imp src="http://yourimage.jpg" class="yourclassname" />
This is not as fast to load. If you want a border around an image, this is a design element. You say that this is how you define a border and put this in your image element. However, this changes the load time slightly versus having it in your style sheet where it applies to all of that type of element and only pulls one time. One of the great advantages is that if you have 3-4 years of blog posts and you want to put in a new fancy design, when you update the style sheet instead of inline CSS then all your posts will change and not just the new ones. Ones that have the inline CSS will keep their old style.
Unordered list:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
Ordered list (every item in the list will be numbered sequentially - you can define in CSS how they look but not separate from the rest of the text):
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
Common Mistakes and Troubleshooting
Please always back up your sites. Please get something for all the ftp files. Backup buddy is paid. Search for WordPress backup, and choose ones that are regularly updated and have good reviews since this is something that interacts with your database. Before you make any changes, back everything up. The simplest backup is to copy and paste your code into a Word document if you're just doing a style sheet change.
Use a sandbox. This basically is a separate site where you can do all your testing where you can test and wipe it and start again without affecting your live site. You can get a separate domain or a subdomain within your domain or offline with a wamp or amp. The easiest way to do this is to migrate your WordPress site to the subdomain or test domain and then play with it.
Syntax errors are one of the biggest issues.
A call to an undefined function is a PHP error. You have a file called functions.php that defines all your functions, and if you type in the name of the function wrong and it can't find that function, it will give you this error.
You will sometimes get a white screen of death, which is usually a PHP error. You'll find that some of these things will cause you problems.
Your incorrect endif or endwhile often cause problems. A missing ";" or "," somewhere in the middle will makes it so that your site will ignore everything after it. It will also cause errors with the single and double quotes when used wrong.
You'll make a change in your CSS file and it doesn't do anything - you may have made it too high in the CSS file and it's being overwritten. If you use display instead of visibility, then when you go into Firebug, it will have a red line through it saying that it doesn't understand.
Missing </div> or just not closing things at all cause problems. It sometimes can even occur in the post content and then you accidentally open or close a /div> and the brower then moves everything to the right or the left, and your whole site goes wonky. If you have posted and something looks wrong, look at an old post. If the old post looks wrong, then you know you did something in the post and can fix it more easily.
If you have broken links or private links, then this will create errors, too. Copy and paste, don't trust yourself to know or remember the link.
Using Development Tools
Firebug will change the way your site looks on your screen but doesn't change the actual page, so when you press refresh, it returns to the original state. It's great for checking and playing around. When you turn on Firebug, there's a toolbox that pops up. On the left will be the html and the right will be the CSS that controls that html. This works only for Firefox. Chrome has a built in tool called Inspector. There is nothing available for Safari or IE.You can then change the CSS, and it will automatically do it on that element - but only in a test mode, not permanently. You can do this for any website, not just your own. You can do this for any element on the page to play around with deleting whole sections just to see what it would look like. You can see how style is affected. After you have your change, copy and then paste to your style sheet. The right side will tell you what style sheet in CSS you're modifying, so you can override the right thing. You can also click on the right box and see the whole style sheet rather than just the element you've clicked on the page. There are tutorial videos for this to show you how to do different things.
Do not make changes to your theme without being connected to the server or you cannot get into your site. You'll have to go to your host via FTP, which is a huge pain. You can drag and drop your local computer to your server. To do your backups, you just do it the other way. To edit a file that is on the server, you can edit through the FTP. It will often show you color coded what you're pasting there so that you can quickly see any errors you've made, e.g., you forgot to do a closing tag.
FTP: CyberDuck.ch
Code Editing: Notepage-plus-plus.org
Code Editing: Notepage-plus-plus.org
For Mac:
FTP: CyberDuck.ch
Code Editing: Panic.com/coda (this is a paid program but it is FTP and the coding combined in one site, so it makes it easier, but probably not worth it if you're just dabbling in code)
You want to edit via the FTP. You can edit using the code editing via Code Plus, then when you go to the FTP it will ask if you want to update the file. If there is an error, you can control Z and go back to your previous version in Code Plus and upload that file via FTP and save yourself.
1 comments:
Wow, great recap!
I can't believe you managed to transcribe all of that.
Thanks for coming and for your kind comments.
Post a Comment