Codingplus Back in Action
Readers!
Codingplus is now back in action and I am beginning to start posting again. I’m looking to help out as many people as I can with tutorials for many different platforms, aswell as interviews with some top dogs on the internet! You can expect to see some of these articles coming soon. Thanks very much for being with us.
Away from Blogging this week + Announcement.
Hey Readers!
First off, the announcement. This blog will soon get a youtube channel for tutorials for web design. I’ll make a post when it comes out.
Secondly, I will be gone from the 21st of June to the 29th of June on a roadtrip. If any of you would like to take over, that know web design, I would be happy to let you.
Please make a comment if you want to help out during this time!
-Mike
WYSIWG Editors – Good or Bad?
WYSIWYG editors, or what you see is what you get, have been around for a long time. In short, they are literally what the name is. You can write something as if you’re writing it out in a word document, and then easily take the HTML Code. But are these good or bad?
I recently ran into a problem with WYSIWYG, not coding in Wysywyg, but the people on the other end. Being a freelance web designer, I was asked to generate a website using Emerald. Emerald is a site ran off of wysiwyg for older public accountants, and this all went terribly wrong. You can code it in WYSIWYG to HTML, or Vice Versa, and this is where things start to go bad.
Being me, coding in all HTML; the client had no idea what all the funky symbols such as <font> and other things; so, he turned WYSIWYG off. This added a bunch of extra codes that messed up all 42 hours of work. This is one thing that makes WYSIWYG bad. It’s much better to use a program than to use an online text editor that ca throw in a bunch of spare code, and it’s also much harder to remove that code once the damage is done. Take this for Example:
Suppose you are fed up with rush-hour traffic and you’re looking for a new way to get to make your daily commute. “I’ve got just the thing,” I say: a personal-sized airplane that will deliver you to work like the Jetsons. Don’t worry, you don’t need to know anything about flying—it’s all automated. No knowledge of flight dynamics, weather, or navigation is required. Just push the right buttons on the dash and the computer will take care of the rest. It’s as easy as driving a car!
I hope you’d say, “thanks but no thanks.” Sure, someday that will be a reality, but you realize that right now flying is a much more complex operation than driving. You’re operating in three dimensions instead of two; there are more external factors, like weather and turbulence; you can’t just pull over onto the shoulder. The consequences of making wrong choices are much higher and aviation AI just isn’t sophisticated or trustworthy enough yet.
Taken from http://redcloth.org/articles/wysi-dangerous-why-wysiwyg-editors-are-bad-for-your-website/
and also:
WYSIWYG editors are a key component of content management systems. They empower non-technical users to manage rich content efficiently and intuitively. Unfortunately, WYSIWYG editors are notorious for generating “bad” markup (or “dirty code”). In the longer-term, the problems that bad markup creates can outweigh the benefits that WYSIWYGs offer.
Taken from: http://www.xstandard.com/en/articles/wysiwyg-editors-and-bad-markup/
Textwrangler
As you can see, some things about WYSIWYG can go terribly wrong, but is there also an upside? WYS (shorter version for this posts’ sake) can help to speed up a website building but it can have an effect on the amount you learn. For example there is no CSS support with wys unless you use <style> tags.
If you want something done right, it’s better to get a free web design program that comes with a split screen. They don’t throw in any extra code and can help you alot. Textwrangleris an example of this. With programs like these, you can easily learn web desinging skills whilst learning HTML and CSS, without having to rely on an editor.
Adobe Kuler
Do you ever run into the annoying conflict of choosing colors that fit together on your website? Do your colors conflict, or not fit well enough? Look no further. Today, it’s time to blog about a revolutionary website from Adobe which I use every day. Some of you may have heard of this, and others may not. This website is Adobe Kuler.
Adobe Kuler
Kuler gives you the opportunity to use colors generated by other users of Kuler. Colors that match together and ones that will fit when making your website.
Not only will you like what they have for you, you’ll also love the fact that you can copy the HEX or RGB code to your clipboard and just paste it in your CSS! No images or any other type of coding involved. Read some Testimonials:
Kuler
Adobe Kuler is a color collaboration service. Adobe Kuler offers space for those who visit the site to view colors and information related to colors and it allows registered users to additionally create, share and store color swatches, to discuss color, and to download color swatches. These terms of use apply to all users of the service, including users who are also contributors of materials on the Service.
The service may contain links to third party Web sites that are not owned or controlled by Adobe. Adobe has no control over, and does not assume any responsibility for the content, policies, or practices of any third party Web sites. By using Adobe Kuler, you expressly relieve Adobe from any and all liability arising from your use of any third party Web site.
Read more: Adobe Kuler – Free web applications and web app reviews – CNET Downloads http://download.cnet.com/Adobe-Kuler/3000-12945_4-10713018.html#ixzz1P783Yq7b
I think that you, aswell as I would want to use this all the time. Check Adobe Kuler out now!
(One of many site ads for useful Web Design tools)
CSS/HTML Container Tutorial
Before I start the tutorial, I want to introduce those of you who don’t know to the power of containers. Containers will hold the main content of your website, see image below for details:
(Click for bigger image)HTML/CSS Container
In the above image, all of the boxes can be put there by Containers. Containers can give you any type of freedom you want when building a website. Here’s how it works;
The code:
#container {
width: 910px;
margin: 0px auto;
padding: 40px 30px 0px 30px;
background: #353535;
}
What does this code do though?
Width: The initial width of the container; this will vary based on what type of webpage/container you’re building.
Margin: A margin set to Auto will force the container into the middle of the page.
Padding: The padding works when you resize the page, the container will never touch the sides of the webpage, and will stay 30px away from it (as specified in the padding)
Background: This is basically the background color of the webpage. It can be adjusted to what you think suits your layout.
Now, we have the CSS, where does the HTML come into play?
The following is used to make the container show (it will pull it from the CSS and insert it.)
<div id="container">Container Content here</div>
Id=”container” – The ID is a variable and can be changed it is basically what you call it in the CSS.. for example mine said #container.
Container Content Here – All of the content inside of the container, this would most likely be either text or images.
<div> – A div tag is a container in itself, which brings me up to my next point.
There is another way to have the same div effect with HTML. Do the following:
<div style="width: 910px; margin: 0px auto; padding: 40px 30px 0px 30px; background: #353535;">Content</div>
In this version, you have the ability to change it on the page, instead of having to edit a CSS file. This works best when you do not have access to a CSS file; and it will show the same as the above.
style – Defines the style of the Div container
Here’s how it looks as actual HTML (with a shorter width)
And there’s a DIV container!
If you have any questions please check out our forum, or post a comment!
Hosting on Free Web Hosts
Web Hosts are always a trouble to pay for. Just buying a domain name for a website itself costs over $10, and depending on who you host with, you may need to pay more than $40 a month to keep your plan going to run your website. What if you’re a web designer who has no money? How do you pay for everything? One resource that people have been going to for years are free web hosts. They offer everything an actual host does, just you have one of their crappy subdomains and their ads all over your website, and if you want them removed, then it’d be another $20 a year.
There’s something about the internet that’s been keeping it relying on money for years, and it’s only getting worse. With inflation coming, people have been starting to pay just to visit websites.
The solution: Free Web Hosts, whether it be a free website builder or just a Free host that you can put your files on, they’re all the same.
Webs.com
Webs.com is probably one of the most popular Free Hosts.
It gives it’s users the opportunity to make a free website and host it on their domain. One thing that they don’t tell you is that you get a limited amount of bandwidth and space. So, if you have more than 100 visitors a day, there’s a very high chance that your website will get shut down. There’s also page limitations that stop you from making a certain number of pages; and there isn’t much freedom on the site either. It’s mainly WYSIWYG Editors, until you enter an HTML widget, and you can’t see what it’s doing. Webs.com, although most popular, isn’t something that I’d recommend for others to use.
Weebly.com
Weebly.com is another popular host
Personally I’ve hosted two sites with weebly, and I liked it alot. Weebly uses a drag and drop feature to implement the features you want to use, such as an image, image with text, HTML, and widgets. Although weebly isn’t reliable for their WYSWYG editing; in my opinion it beats webs.com nine times out of ten. It has more freedom with HTML, and gives a live preview of what you’ve created. Being able to see what I make is something that contributes a lot to how I make something; in other words, I need to be able to see what I’m doing.
If you want a free host you can use any of these two, however the best websites you can make come with making them yourself; having a design laid out in photoshop and then transferring it to HTML and CSS. I personally use Dreamweaver. It has everything I need to build and maintain a website. Of course, this isn’t a free software, but to build something awesome, you need awesome features.
Need help? Visit our forum! Got an Opinion? Comment it!
Google WebFonts
Now introducing:
Google Web Fonts
If any of you haven’t seen it yet, I’d like to introduce you to Google Web Fonts. Google Webfonts is an awesome system that I found the other day. Google Webfonts provides (using a JS sheet and a CSS stylesheet) free fonts for web masters.
Have you ever had the pain of making an effort with fonts on websites and then having them not work when you visit it because the computer that someone is at doesn’t have the font? I think many of us have, however Google Web Fonts provides a different way of doing this. They have about 30 fonts right now (and more are coming) that you can select and use. Basically they’re fonts that you can use on any website and every browser will recognize it, because it uses Javascript and CSS for it to be recognized.
Font Example
These fonts work the best for when making titles and H-tags for your website. They don’t work so well for having paragraph text since many of them are decorative.
Introduction to HTML/HTML5
HTML Code
HTML is the most basic form of internet coding. Without it, nothing on the internet would be possible, since alot of it is built and consisted of HTML. HTML is just a foundation though, what comes with HTML is the real deal. HTML runs hand in hand with CSS, and other languages such as JQuery, PHP, Coldfusion and more. For the most experienced users, HTML is a breeze and comes easily; however for others they do not understand it as easily. HTML is a basic essential for all internet browsers; and without it, websites like Facebook and Myspace would not exist.
However, coming out soon is the newest version of HTML coding; HMTL5. HMTL (or hyper text markup language) has always been the basic essentials for internet users until now. With HTML 5 comes even more features for coders and designers to take advantage of, and it also bares a problem for amateurs with some elements becoming obsolete in the newest version.
The newest brings attributes such as:
- Article <article>
- Canvas <canvas>
- Audio <audio>
- Video <video>
- Header <header>
- Footer <footer>
all of which will make coding and styling even easier. However with it comes a disadvantage. All Italic (< i >) tags will become obsolete and must be traded for <em> and all <b> tags must be traded for <strong> tags.
HTML in it’s most basic form can crank out something like this:
Raw HTML
However now with HTML5 you can create sites like this:
I think you can already tell the difference, and if you’ve read the CSS post, you’ll see which one you like better. HTML and HTML5 are essential to a websites success, and if you don’t use HTML at least use CSS.
Stay tuned for more tutorials.
Need help? Visit our forum.
Introduction to CSS/CSS3
CSS Being used on a site
CSS, otherwise known as Cascading Stylesheets have been around since the beginning of the internet; and when mixed together with HTML or another coding source, you can make some pretty kick a** stuff on the web. With the introduction of CSS3 making things with CSS has become even easier. With even more resources and options with CSS, using it has even become more fun.
From the Amateur web designer to the professional who works for a living, CSS takes part in everyone’s lifestyle. Without it websites would look dull and have plain text. Take the following for an example:
Website Not using CSS
The above website is using basic HTML, while they may use some CSS to make the text the way it is, this is the best version of a non-css using website I could find. Building a website in Pure HTML can be hard, and not fun to do. Web designers often like to see an attractive side to things and also something that they can model off of. Who would want to model off of a non CSS webpage?
On the other hand, below you can find something that does use CSS. Something that you can model a website off of and use for years to come, without having to change a thing about the layout!
Website taking advantage of CSS.
I think you can tell which website you’d rather use. The second website takes advantage of every aspect of CSS that there is avaliable, and even uses the new version of CSS… CSS3.
What is CSS3?
CSS3 is the newest version of CSS that has appeared along with HTML5. HTML5 is a new version of HTML but will be discussed in a new post.
CSS3 comes with loads more advantages to web designing. It’s advantages are great, and for those of you who aren’t using it; I highly recommend you do.
Some of the new features that come with CSS3 are:
- Gradients
- Shadows
- Rounded Corners
- Buttons
- MORE!
#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
The box-shadow is the intial CSS that makes everything work with the shadow, the #888 is the color that the shadow will be, and the pixel amount (px) is how far the shadow will drop.
Below is an example using the above code:
Using a box shadow isn’t highly recommended for content like I just did, it’s more for adding a shadow to the background of your website to make it look more attractive.
Moving on..
In my opinion rounded corners are the best. Having sticking out edges looks very bad, and before, it had to be done using an image. But fear no more! Here’s how Rounded corners work:
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
here’s how it looks in action:
Border radiuses come in handy for almost anything, and look very attractive on alot of websites. Use this site for help
Thanks for Reading, check again soon for even more HTML/CSS and JQuery Tutorials! For more help, please visit our Forum.
codingplus 