Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged html coding

Rss Feed Group items tagged

Vernon Fowler

Web Designer Notebook » How to use Modernizr - 1 views

  • Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.
  • To install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example: ?1<script src="js/modernizr-1.0.min.js"></script> The second step is to include on your html tag a class of “no-js”: ?1<html class="no-js"> Why add this tag? Because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all (and probably other features of your site won’t work either…), so it’s good that we have a fallback for that case. If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this: ?1<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">
  •  
    "There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr. In this short tutorial, learn how to apply this handy script to maximum effect on your sites."
Soul Book

The Incredible Em & Elastic Layouts with CSS - 0 views

  • Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
  • All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
  • The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
  • ...9 more annotations...
  • However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
  • Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
  • 1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
  • While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
  • Set a 12px font size with 18px line height and margin for paragraphs
  • Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
  • To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
  • Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
  • Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
  •  
    A nice and simple explanation of using EMs to make elastic layouts
Vernon Fowler

Don't Use The Placeholder Attribute - Smashing Magazine - 4 views

  • To recap, the placeholder attribute: Can’t be automatically translated; Is oftentimes used in place of a label, locking out assistive technology; Can hide important information when content is entered; Can be too light-colored to be legible; Has limited styling options; May look like pre-filled information and be skipped over.
  • Move the placeholder content above the input, but below the label:
  • Development Here’s how to translate our designed example to code:
  • ...4 more annotations...
  • aria-describedby ensures that the p content will be described last, after the label’s content and the kind of input it is associated with.
  • By using aria-describedby to programmatically associate the input with the p element, we are creating a priority of information for screen readers that has parity with what a person browsing without a screen reader would experience.
  • The floating label effect, a close cousin to this phenomenon, oftentimes utilizes the placeholder attribute in place of a label, as well.
  • Content hidden by an on-screen keyboard. 3rd party keyboards with larger heights may have a greater risk of blocking important content.
  •  
    Not only argues for not using the placeholder attribute but also describes an inclusive input hint and how to code it.
  •  
    Protonmail login
DJ XC

How to correctly insert a Flash into XHTML » La Trine - 0 views

  • Final Solution The complete code will then look like this (example + validator): <!--[if !IE]> --> <object type="application/x-shockwave-flash" data="movie.swf" width="300" height="135"> <!-- <![endif]--> <!--[if IE]> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="300" height="135"> <param name="movie" value="movie.swf" /> <!--><!--dgx--> <param name="loop" value="true" /> <param name="menu" value="false" /> <p>This is <b>alternative</b> content.</p> </object> <!-- <![endif]--> Maybe it's not a brilliantly elegant solution, but it's only truly functional
  •  
    Solucion para insertar Flash y que funcione en todos los navegadores
Attu Gautam

QR Codes - How About Embedding them in Your Web Design? - 0 views

  •  
    QR codes have become a hullabaloo in the internet realm. Over the past few years, they have been readily adopted by online merchandisers. QR code also affectionately known as quick response code is a two dimensional barcode that often contains alphanumeric text and feature URLs that direct a user to relevant sites. It's becoming a rage even with some of the best web design companies around. QR codes have brought a creative storm in the online hallways. Everything needs to have a barcode these days. They are a definite marketing vehicle in the recent times.
Jochen Burkhard

20+ Tools for Quick and Clean Code Development | Web Design Ledger - 0 views

  •  
    Developing websites is much more than just a pretty face, and depending on what typed of features you'd like to implement on the site, there's a lot of coding that goes into it. Many times designers turn to a WYSIWYG tool, however tools of that sort are more limited to advanced code. Being able to code a site using a variety of tools lets you simplify the coding process while you take a big bite out of saving time.
pr getxhtml

PSD To CSS Coding - A Great Way To Have Unique And Successful Websites - 0 views

  •  
    CSS is a basically a coding language that helps you demonstrate the presentation texture of a file written in mark up languages like HTML or XHTML. PSD to CSS coding is all about separating the document content with elements of document presentation like color, font, style and layout.
Jochen Burkhard

Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices | DevSnippets - 0 views

  • HTML5 is the next major version of HTML. HTML5 provides some great new features for web designers who love to create readable code and semantically-meaningful layouts. HTML 5 introduces and enhances a wide range of features including: form controls, APIs, dragging and dropping, multimedia, drawing graphics on screen and a lot more.
  •  
    HTML5 is the next major version of HTML. HTML5 provides some great new features for web designers who love to create readable code and semantically-meaningful layouts. HTML 5 introduces and enhances a wide range of features including: form controls, APIs, dragging and dropping, multimedia, drawing graphics on screen and a lot more.
  •  
    HTML5 is the next major version of HTML. HTML5 provides some great new features for web designers who love to create readable code and semantically-meaningful layouts. HTML 5 introduces and enhances a wide range of features including: form controls, APIs, dragging and dropping, multimedia, drawing graphics on screen and a lot more.
magecompinc

Adding custom code in Magento 2 HTML tag - 0 views

  •  
    Magento 2 allows you to add custom code in HTML tag to link any external resources, add metadata or JavaScript code for search engine and store demo notice. Let's learn Adding custom code in Magento 2 HTML tag.
simplykreative

How to start coding? - 0 views

  •  
    With the rise of big internet coded applications like the Google brothers, Mark Zuckerberg coding seems to interest everybody. Learning how to code opens up a whole new world of opportunity were your imagination is the only limit.
Vernon Fowler

Font sizing with rem - Snook.ca - 0 views

  • The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px!
  • The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
  • We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units. html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
  • ...3 more annotations...
  • I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
  • consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers
  • The compounding nature of em-based font-sizing can be frustrating so what else can we do?
Jochen Burkhard

Max Design - Web standards checklist - 0 views

  •  
    Web standards - more than just 'table-free sites' The term web standards can mean different things to different people. For some, it is 'table-free sites', for others it is 'using valid code'. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc). In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.
Soul Book

zen-coding - Project Hosting on Google Code - 0 views

  •  
    Quickly code HTML css style
esigners

SEO Friendly Web Design Guidelines - 1 views

  •  
    The importance of web design as an SEO-friendly tool transcends mere aesthetics. As you keep reading this piece, you'll actually find out what we mean. Now, SEO friendly web design can very simply be described as a process of crafting websites that can be easily crawled, understood and indexed by the search engines. The very fundamental defining equation between web design and SEO friendliness - is - of course - the HTML code. The search engines are not capable of interacting with websites as humans do. It's the HTML code which provides the signals to these search engines to understand how well a particular website is structured and eventually crawl and index it. Some of the integral parts of the "structure" that we are speaking about are Accessibility, Internal link structure, User Experience, Site Structure and On-Page SEO Optimization. As has been stated earlier, the look of the website governed by its font, colors etc is not something the Search Engine takes into account while crawling or indexing your website. Accessibility Make sure that your website is properly accessible by the optimizing your Robots.txt, checking and eliminating crawl errors by using efficient tools, submitting and optimizing your XML sitemap and using a canonical URL. Do not forget to:  Specify your pages to Google by setting a preferred domain  Using Alt Text for Images  Add special tags to your HTML Code to facilitate structured data markup Internal Link Structure You can improve your internal link structure by ensuring that all your important web pages are directly linked to from your home page. By doing that you would be able to ensure improved crawling and indexing, direct traffic to the most important web pages, topic relevancy and better SEO. User Experience Several factors that determine whether or not your users would like to stay on your page. The very first thing that you would want to remember is the fact that they don't like to wait. Your web
Soul Book

CSS techniques I use all the time - 0 views

  • EM calculations Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules: html { font-size:100.01%; } body { font-size:1em; } The explanation for this comes from "CSS: Getting Into Good Coding Habits:" This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
  • I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px
  • Safe Fluid-width Columns I work with hybrid fluid layouts all the time, usually with max-width set at anywhere from 900 to 1000px. I usually have floated columns with percentage widths, and browsers will calculate these percentage widths to whole pixel values when rendering the columns.
  • ...3 more annotations...
  • A typical problem is the following: when a user has the viewport at a size that makes the outer container 999 pixels wide, if the first column is 60% and the second is 40%, IE 6 will always calculate the two columns as 600 and 400 pixels and as a result, the two will not fit (600+400 = 1 more than 999) and it will drop the second column. This is obviously not intended behavior, and in a world where we still have to use floats for columns (I can't wait for display:table support across all browsers), it's important to work around this problem. I used to give my last column 1 less percent (in this example, it would have 39% instead of 40%, but this would usually result in columns that don't quite fill up the container. Of late I have been giving the last column .4 less percent (in this example, 39.6%), which seems to work perfectly. Browsers will calculate this width and round up, but it will still fit even with an odd container width like 999px and I won't have to worry about dropped columns.
  • Filtering for Old Browsers To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands
  • Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result: div#container { width:900px; } html>body div#container { width:auto; max-width:900px; } /* This overrides the previous declaration in new browsers only, IE 6 simply ignores it. */
  •  
    Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant
Vernon Fowler

- HTML | MDN - 1 views

  • If this attribute is absent, the script is treated as JavaScript.
  • The defer attribute shouldn't be used on scripts that don't have the src attribute.
  • defer This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.
awqi zar

code · Video for Everybody! - 8 views

  •  
    Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 element, falling back to QuickTime and Flash automatically, without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don't support Flash) and on many, many browsers and platforms.
Magento

Magento Customer Pictures Contest is a social Magento Extensions that allows customers ... - 0 views

  •  
    Magento Customer Pictures Contest is a social Magento Extensions that allows customers to take part in the pictures contest rated by facebook like system. Relying on the results, Administrator will announce winner of the contest and send coupon code to the winner who can use the coupon code to buy the products on the main site and recieve incentives on price. Main Features: Customer back end: Customers after logging in can attend Magento Customer Pictures Contest if they agree the terms& conditions. Customers can upload pictures using Ajax uploader with a progress bar. After uploading successfully, customer can add title, descriptions of picture Customer can edit/delete pictures from list Customers can crop images using tool developed by Jcrop Javascript Customer can change avatar picture, user name Customer can withdraw from the contest Magento Templates design for customer back end: Picture list view User info block Upload picture block Picture list: pictures, facebook like button, system status, delete/hide button Toolbar: sort by (newest, most popular) Picture view User info block Picture items: picture, title, description Admin back end: Admin back end can be accessed at a tab located on admin navigation bar. The tab includes 2 items (all pictures, all winners) All pictures view: include all pictures to present Allow admin to set status for pictures such as: Approved, Denied, Removed Admin can send email to user to notify user's pictures status changes Allow admin to set winner for pictures, send email notification to customer Allow admin to set up coupon code and send email to customer All winners view Include current winner block: picture, username, number of likes by facebook List winners: admin can sort, filter.... Front end: List all pictures of all contestants if a user visits the Magento Customer Pictures Contest Include an upload button to allow user to upload image or ask user to login to upload image Include late
Vernon Fowler

Best Practices for Speeding Up Your Web Site - 1 views

  • Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size. Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8. "Be mobile-friendly" and don't leave big gaps between the images in a sprite. This doesn't affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100x100 image is 10 thousand pixels, where 1000x1000 is 1 million pixels
  • Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.
  • Many web sites fall in the middle of these metrics. For these sites, the best solution generally is to deploy the JavaScript and CSS as external files. The only exception where inlining is preferable is with home pages, such as Yahoo!'s front page and My Yahoo!. Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times. For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests that inlining provides, as well as the caching benefits achieved through using external files. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser's cache.
  • ...1 more annotation...
  • CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
qualitypoint Tech

Need to solve error in PHP code useful for getting Google PageRank - 2 views

  •  
    We are working on to get Google pagerank using php code for one of our customer projects.I referred http://www.pagerankcode.com/down\nfor doing this.This code works fine in our local machine. We are using it for long time from our local machine. And, we tried to use it in our server few months back.
1 - 20 of 169 Next › Last »
Showing 20 items per page