Ok here we go:
Day 1. In the morning: Have a cup of coffee and a bagel with creme cheese. Ok, ready with that? Perfect. Now go ahead and sit back for 1 hour and take in this introductory video. It starts by telling you the very basics of jQuery: Read the rest of this entry »
Hi everybody. I hope you guys are having a blast. One thing that I’ve been aware lately is the desire to quickly deploy a WordPress installation. Now, I understand that for advanced developers you can have WordPress multisites and deploy them extremely fast and with less restrictions than what I am going to explain here. This post is for beginners. Read the rest of this entry »
So let’s say that you have finally designed your website and are getting ready to share it with the whole world. You might be asking yourself well, how do I do just that? Read the rest of this entry »
In the first sessions we have taken a look at how understand the markup and styles. However, it is extremely important to understand that most professional design doesn’t happen directly in code. Most website design happens in the traditional graphic design work-flow.
In our previous article we took a look at what is html and how hyper transfer protocol allowed us to see pages. In this article I am going to explain in a simple way how the browser finds and displays your pages.
The browser is a piece of software that sits in your computer and interprets html, css, javascript and some other technologies like images, videos and java applets.
The first step in using a browser is that you type in a URL in the URL bar. The URL (Uniform Resource Locator) is the address that identifies a particular resource on the web. The address is a naming convention and it is composed of different parts:
Learn some of the secrets behind the success of top web designers. Grab these concepts and take your design to the next level. These are just some tips for new designers learning about what professionals do to make their websites look better: Read the rest of this entry »
Many people are becoming new web designers and therefore I feel like I could use a couple of posts to explain to our readers how to start designing for the web as professionals do. This is one of several sessions that hopefully I’ll share with you guys. Let’s get to it:
You are going to need to download the tools to start designing like a professional. I’ll share with you guys my favorite tools and obviously you can decide to use other tools. It is important to understand the even though the tools are not the most important thing, they are indeed important. Many web designers out there use tools that are not optimal, and therefore their websites end up showing it. There are plenty of professional-level tools out there. I am going to be showing with you the ones I use and the ones that my website designer friends and mentors use. Read the rest of this entry »
You might be wondering what is the purpose of this post. And let me explain where I am coming from before I start. Lately I have seen that a lot of design tutorials focus on teaching technique, not decision of technique. In other words, they teach you how to do something, but they don’t teach you why they decided to use that technique in the first place.That’s what this post is for.
Obviously, the reasoning behind design is a very large topic and can’t be covered completely here. But this should be taken as an introduction to meaningful design.
White Space
Design usually is associated with several elements like shape/type, size, placement, etc. One of the most important decisions for a designer is white space. Many designers have a lot of trouble not filling up the canvas. Why? Well, I guess some feel that if the canvas is not full that the client is going to think that they are lazy. And this is true sometimes. However, is harder for a designer to abstain from adding more and more.
The main question that I try to answer in regards to white space is: Is this the most minimal way of powerfully presenting the idea?
Lets take a look at an example:
I am trying to illustrate the word Design in a white square.
First Example
So far so good. It looks good and it seems like indeed is minimal enough however I feel like the white space itself is not adding to the design. So lets go ahead and iterate in order to modify the white-space:
Example 2
Can you tell what changed from example 1? First, the right margin length is equal to the height of the font. That gives the sense of order and purpose for that margin. Second, the bottom margin is equal to double the distance of the right margin. This creates a point of interest while keeping it organized. Finally, the spacing between characters of the word Design (the kerning) has been adjusted to make the word appear more as a cluster – an object. Now, we have a background and a subject that are clearly defined and separated and they have a relationship.
To finalize this example I decided to replicate the overall white-space shape, invert it and add it to the corner of the word Design to add balance to the message.
Example 3
Now, in this example we have very little background to make design decisions. But in real life examples, as a graphic designer, you would have a client that has a market to satisfy and a product to sale. That should strongly drive your design decisions.
Final thoughts: How can this translate into an active recommendation that makes your design better? Ok, next time that you sit down to layout ask the final question about your white space and how it is adding to your design and if it could do a better job.
I hope this helps and thanks for reading.
Alex Centeno +
Hey there… I have been testing this new technique that I wanted to share with our readers. Sometimes you have a website that requires some dynamic loading of its background. An example of usage could be a surfing website. Depending on the forecast or tide, you could parse the xml information and display a different background in your surfing site. So when a user arrives to the site automatically knows if it is a surfing day or a sleep-in day… You get the idea!
Anyways, the code is fairly simple in php and I am sure you can translate this fairly easily to other languages out there.
First you are going to setup the php page that handles the dynamic nature of the background image. For example, create a file named: back.php and then add the following to it:
/*Comment of Code*/
$now = date(a);
if($now == 'am') {
$img = "morning.jpg";
} else {
$img = "night.jpg";
}
$contentType = 'Content-Type: image/jpeg';
header($contentType);
readfile($img);
/*End of Code*/
The above code says: “Check the time of the day, if is am – then change the image variable to morning.jpg, if it is pm, then change the image variable to night.jpg. Then change the content-type of the document to image/jpg.
That is it. Then, you go into your site’s css stylesheet and add the following:
/*CSS Code*/
body {
background: url('back.php')no-repeat;
}
/*End of Code*/
And that should do the trick. If somebody visits the page in the morning, then background morning.jpg is used, if somebody visits the page at night, then background night.jpg is used.
Obviously this is a over simplistic example of what can be accomplished with this technique. You can set up backgrounds with animations in GIFs. You can dynamically control the opacity of your background depending on time of day for a better experience for your visitors. You can detect the location of the users and change the elements of the page to show a more customized page to them.
For example: In landing pages for your Google Adwords ads, you could detect the location of the users and if they are in let’s say New York, they would land in a page with a background of the Statue of Liberty, however if they visit from Vegas, they could have the background of the Bellagio Fountains.
The possibilities are endless, and as always, you don’t have to use it in every project! Take this technique and put in your bag of tools. When the time is right, you’ll know it.
If you have any questions or you need custom website design, please visit Merkados. Perhaps we can help.
All right everybody. I just wanted to use this post as a quick way to demo the installation of syntax highlighter or in other words, styling your code in posts. You might be asking: “How do I style code inside my posts?” or “How do I share code bits in my posts?” and if you are, this is the right post for you.
First, you need to know that there are several ways to style the code bits in your posts. I am going to demonstrate only one. The Syntax Highlighter way:
Steps:
1. Go to Syntax Highligher Project and download the necessary files.
2. Upload the necessary files to your server.
3. Go ahead and change the head and/or footer files in your blog/site to reflect the locations of the three files that are needed like this:
That is it.
Now you can just pretty much create a Pre tag with name:”code” and with class “html” for example, and it would style it for you.
Later,