Jorge Pedret » html http://jorgepedret.com Freelance Web Developer + Front End Designer Wed, 25 Jan 2012 16:43:31 +0000 en hourly 1 http://wordpress.org/?v=3.3 Finding Placeholder Images for your Designs http://jorgepedret.com/tools/finding-placeholder-images-for-your-designs/ http://jorgepedret.com/tools/finding-placeholder-images-for-your-designs/#comments Tue, 10 May 2011 17:55:51 +0000 Jorge Pedret http://jorgepedret.com/?p=398 Placeholder image from flickholdr.com

Here are 3 tools that I’ve been using lately to show placeholder images in the sites I design: Lorempixum, Flickholdr & Placehold.it

Lorempixum

http://lorempixum.com/

Lorempixum Screenshot

It was recently launched , but I’ve found it to be one of the best tools so far. You can specify the size, the category and if you want it colored or black & white.

Here are some examples of how to use it, simply put this in the src parameter of your img tag:


http://lorempixum.com/400/200

http://lorempixum.com/g/400/200

http://lorempixum.com/400/200/sports

http://lorempixum.com/400/200/sports/1

Flickholdr

http://flickholdr.com/

Flickholdr Screenshot

Works the same way as Lorempixum, but looks for the images in Flickr. It makes sure that the images’ copyright allow you to use them anywhere.

The thing that I like about Flickholdr that Lorempixum doesn’t have, is that you can choose your own tags, instead of using fixed tags.

I had a couple of issues with Flickholdr’s interface to generate images, but other than that it works like a charm.

Here are some examples of how to use it. Again, simply put this in the src parameter of your img tag:


http://flickholdr.com/200/300

http://flickholdr.com/200/300/sea,sun

http://flickholdr.com/200/300/sea,sun/bw

http://flickholdr.com/200/300/sea,sun/1

Placehold.it

http://placehold.it/

PLACEHOLD.IT Screenshot

And finally… placehold.it. It’s a much simpler version compared to the last two tools, it’s a solid color image instead of a picture. You can use it when you just need to mark a place as an image placeholder, or if you are just doing a website’s wireframe, etc.

Here are some examples of how to use it. Again, simply put this in the src parameter of your img tag:


http://placehold.it/350x150

http://placehold.it/300x100/000/fff/&text=Custom%20Text

http://placehold.it/600x200/000/fff.png
]]> http://jorgepedret.com/tools/finding-placeholder-images-for-your-designs/feed/ 0 How to create a cool css background transition effect http://jorgepedret.com/web-development/how-to-create-a-cool-css-background-transition-effect/ http://jorgepedret.com/web-development/how-to-create-a-cool-css-background-transition-effect/#comments Fri, 22 Apr 2011 21:38:14 +0000 Jorge Pedret http://jorgepedret.com/?p=319 Check out the Demo]]> I first saw this effect in the popular website Think Geek, when you scroll down all the way to the bottom you can see how it makes a transition from cool Robots to cool Zombies.

It bugged my mind for a bit so I decided to figure out how they did it. It turns out it’s a lot more simple than you think, all you need is two images and CSS.

See the demo Download the demo files

Here’s how you can easily create the effect:

Start by creating the transition image

  1. Create a 1200 x 300 pixels image in Photoshop with transparent background.
  2. Create the images that you want to see at the top of the page and make sure they’re only in #666.
  3. Then, create the images that you want to see at the bottom of the page and make sure they’re only in #000.
  4. Save it as a PNG named bottom-bg.png, making sure there’s no background color. The only two colors that can exist in this image are #666 and #000.
The two top and bottom images can’t be touching each other, they have to be separate, otherwise the effect will not work. They can be very close though.
This is the design that Think Geek used: https://www.thinkgeek.com/images/sitewide/backgrounds/robozombies7.png

Next, create the background image

  1. Create a 10 x 700 pixels image in Photoshop
  2. Select the gradient tool and configure the gradient to be from #000 to #666
  3. Vertically drag it from the very top to the middle of the image approximately.
  4. Save that as a PNG file named body-bg.png and you’re done with the background image.
Once you understand the way this effect works, you will be able to use whichever colors you want. But for now we’re sticking to #000 and #666

And finally, write the CSS and HTML

Let’s start with the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="fancywrap">
	<div id="wrap">
		<article>
		<!-- Your content here -->
		</article>
	</div>
</div>
</body>
</html>
This is a simple structure for this demo, but you can adapt it to your own project.

For the styles, you’re going to attach to your body tag the background image that you created in step 2 and make the color background #000.

body{
	background: #000 url(body-bg.png) left bottom repeat-x;
}

Next step is styling the .facywrap class by attaching the transition image to it. And the secret for this effect to work is to use the CSS property background-attachment: fixed; like this:

.fancywrap{
	background: url('bottom-bg.png') repeat-x;
	background-position: center bottom;
	background-attachment: fixed;
}

See the full demo code in Github: https://gist.github.com/937679

That’s it! Once you understand how it works, you will be able to choose your own color combination other than the boring #000 and #666.

See the demo Download the demo files

Get updates via Email ]]> http://jorgepedret.com/web-development/how-to-create-a-cool-css-background-transition-effect/feed/ 0 HTML5 – What you really need to know http://jorgepedret.com/web-development/html5-what-you-really-need-to-know/ http://jorgepedret.com/web-development/html5-what-you-really-need-to-know/#comments Sun, 18 Apr 2010 23:53:09 +0000 Jorge Pedret http://jorgepedret.com/?p=125 This is a quick reference for those designers & developers who just want the facts.

What’s new?

DOCTYPE

<!-- Before -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Now -->
<!DOCTYPE html>

Most browsers will parse documents with that doctype as html5. That simple :-)

CHARSET

<!-- Before -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Now -->
<meta charset=utf-8 />

What was removed?

This tags are no longer valid in html5

<basefont>
<big>
<center>
<font>
<s>
<strike>
<tt>
<u>

Frames were removed as well.

<frame />
<frameset>
<noframes >

Obsolete tags were taken out of html5 as well:

<acronym>
<!-- Use abbr instead -->
<applet>
<!-- Obsoleted in favor of object -->
<isindex>
<!-- Replaced by usage of form controls -->
<dir>
<!-- Obsoleted in favor of ul -->

Tag’s attributes referring to visual characteristics were removed as well. Just to mention some:

align, background, bgcolor, border, clear, height

What changed?

<a>
<!-- Now it can contain block elements. Hurray! -->
<b>
<!-- Now represents text whose typical typographic presentation is emboldened -->
<hr />
<!-- Now reprensents a thematic break in paragraph-level -->
<i>
<!-- Now represents text in an alternate voice or mood -->
<menu>
<!-- Has been redefined to be usefull for toolbars and context menues -->
<small>
<!-- Is now used to represent small print in documents, generally for legal purposes -->
<b>
<!-- Now represents importance instead of strong emphasis -->

New stuff, the exiting part!

A bunch of new tags have been created to satisfy the common needs that HTML coders find everyday.

<section>
<!-- Generic document or application section -->
<article>
<!-- INDEPENDENT piece of content of a document. E.g: Blog entry, newspaper article -->
<aside>
<!-- Content slightly related to the rest of the page. *cough* side bars *cough* -->
<hgroup>
<!-- Header of a section. E.g: To include title and subtitle, or company name and slogan type of thing -->
<header>
<!-- Group of Introductory or navigational aids. Doesn't necessarily needs to be at the top of the document, it can be the header of a section of the page -->
<footer>
<!-- Footer for a section. Can contain information about the author, copyright, etc. -->
<nav>
<!-- Section of document intended for navigation. -->
<figure>
<!-- Associate a caption with some embedded content, such as graphic or video. -->
<figcaption>
<!-- Provides caption for the previous tag's embedded content -->
<video>
<!-- Video and audio multimedia content. Very exciting tag :-)  -->
<mark>
<!-- Run of marked text. E.g: Can be used for marking keywords of a search in a long text -->
<progress>
<!-- Represents a completion of a task. E.g: Downloading, performing series of expensive operations -->
<meter>
<!-- Represents a measurement, such as disk usage. -->
<time>
<!-- Represents a date and/or time. Very exciting tag :-)  -->
<canvas>
<!-- Rendering dynamic bitmap graphics on the fly. Very exciting tag -->
<command>
<!-- Represents a command the user can invoke -->
<details>
<!-- Additional information or controls which user can obtain on demand -->
<datalist>
<!-- Used for creating a list of options for the new 'select' tag. -->
<keygen>
<!-- Control for key pair generation. -->
<output>
<!-- Represents some type of output. E.g: Calculation result -->

Input tag‘s type attribute now has the following values:

  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Depending on the device or browser used, this can prompt change the way to input the value. For example, if browsing from an iPhone, the datetime value promts the native way for the iPhone to choose a date+time.

The type attribute can also be used for automatic browser native validation purposes.

For more details on form changes, take a look at http://diveintohtml5.org/forms.html

Visit: http://www.w3.org/TR/html5-diff/#new-attributes for more new attributes in html5 that you need to know about.

New html5 API’s

Other than tags, html5 implements a bunch of new API’s (think of it like javascript libraries) that will help you develop better applications in a faster way.

  • Video & Audio: API for playing of video and audio; it can be used with the new video and audio elements.
  • Offline Apps: An API that enables offline Web applications.
  • Editable Content: API for editing inline content; use it with the new global contenteditable attribute.
  • Drag & Drop: API for drag & drop elements; use in combination with a draggable attribute.
  • History: API that exposes the history and allows pages to add to it to prevent breaking the back button.
  • Geolocation: API that provides scripted access to geographical location of the device that’s browsing the site
  • Local Storage: API for persistent data storage of key-value pair data in Web clients (how exciting is that!?)

Examples:

Check out html5 examples here http://html5demos.com/ they have everything and more of what I’ve said here and it’ll also tell you the current browser support.

]]> http://jorgepedret.com/web-development/html5-what-you-really-need-to-know/feed/ 0 WordPress Code Highlight http://jorgepedret.com/web-development/wordpress-code-highlight/ http://jorgepedret.com/web-development/wordpress-code-highlight/#comments Wed, 07 Oct 2009 04:22:28 +0000 Jorge Pedret http://www.jorgepedret.com/blog/?p=19 While I was writing the last post, I was trying to find a nice code highlighter with this requirements:

  1. Keep Indentation: I want to code to look nice, but if it’s not indented correctly as I submit it, then it’s garbage
  2. Support Different Languages: I’m going to be writing post about Javascript, PHP, XHTML and I need all these languages/markups to be highlighted
  3. Line number/Plain code view: You should be able to switch between plain code view and line number. I couldn’t find specifically what I was looking for but this one had a different approach to solve this problem.
  4. W3C Compliant: The code produced has to be W3C Compliant.

After like 1 hour of research and testing, I found SyntaxHighlighter Evolved! here is the plugin’s website: http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/.

To install it you can go to your WordPress Admin panel and look for SyntaxHighlighter Evolved and install it.

To use it:[language]…code…[/language]
Example:

1

It’s pretty straight forward, for better details on how to use it, I went to my WordPress Admin Back-end > Plugins > Installed, then I looked for SyntaxHighlighter Evolved and clicked on Settings, at the bottom of this page you’ll see the details of what parameters you can pass to change the functionality.

Do you know another code highlighter that works better than this one?

]]> http://jorgepedret.com/web-development/wordpress-code-highlight/feed/ 0