I just had about twenty technical interviews for internships and most of my interviewers had printed off my resume. I've noticed some serious inconsistencies in how it turns out in printed form and I'm assuming the culprit is differences in how different browsers "render" html/css.
The two major issues were (common, and not too big of a deal) bullet point size and the (rare, but a huge deal) width of my resume not fitting into one page so a TON of stuff gets thrown into the next line.
My entire resume is 800px wide, has many bullet points, a few borders, and bunch of divs (some of which are floated left so I can have two columns of stuff). Is there a resource that documents things you need to watch out for in making pages that need to look identical across multiple browsers? Is there a way to scale the page when someone's print margins are 3 inches rather than the alternative of ruining the design?
Thanks!
BTW, Here's the lengthy html/css source (I'm not expecting you to go through it here, but more likely copy paste it into notepad and open up the page for yourself).
edit: or see the jsfiddle page
<html>
<head>
<title>Andrew Rasmussen</title>
<style type="text/css" media="all">
* {margin:0;padding:0;color:#000;font-size:1em}
body {font:11px Verdana;line-height:13px}
h2 {margin:0.8em 0 0.2em;text-transform:uppercase;font:bold 1.4em verdana;border-bottom:dotted 1px #777}
h4 {display:inline;padding-right:4px}
p, ul {margin-bottom:1.4em}
ul {margin-left:1.2em;padding-left:1.2em;margin-bottom:0}
li {margin-bottom: .2em}
#experience h3 {font-weight:normal}
#title {text-align:center}
#title p {margin:0}
#title h1 {font:normal 1.8em verdana}
#skills {clear:both}
#skills p {display:inline;margin:none}
#other h3, #other p {display:inline}
#wrapper {width:800px}
.entry {float:left;height:140px;border-bottom:1px dotted black}
.odd {border-right:1px dotted black;width:394px;padding-right:5px}
.even {width:390px;padding-left:10px}
.five {height:125px;border-bottom:none}
.six {height:125px;border-bottom:none}
.for {font:bold 1em verdana;position:relative}
.for span {font-style:oblique;font:normal 1em verdana;position:absolute;right:0;top:0}
</style>
<style type="text/css" media="screen">
body {padding:2em}
</style>
</head>
<body>
<div id="wrapper">
<div id="masthead">
<div id="title"><h1>Andrew Rasmussen</h1><p>3A Software Engineering - University of Waterloo</p><p>arasmussen [at] katworks.com</p></div>
</div>
<div id="skills" class="section">
<h2>Technical Skills</h2>
<ul>
<li>Eight years of programming experience
<ul>
<li><h4>C/C++ (8 years)</h4>- 3D games (OpenGL), industry experience with pointers, STL, OOP, templates</li>
<li><h4>PHP, MySQL (2 years)</h4>- Backend of web applications with thousands of rows in the database</li>
<li><h4>OpenGL/GLSL (1 year)</h4>- Modern OpenGL using vertex buffer objects, fragment/vertex shaders</li>
<li><h4>C# (8 months)</h4>- Windows Forms GUI applications, backend of ASP.NET web applications</li>
<li><h4>JavaScript, jQuery (6 months)</h4>- Interactive web plugins</li>
<li><h4>Python (6 months)</h4>- 2D games using PyGame (Astroids and Breakout clones)</li>
</ul></li>
<li>Familiarity: XML, JSON, Regex, HTML, CSS, Scheme, ASP.NET, Perl, Lua, Bash</li>
<li>Platforms: Linux (Ubuntu, Red Hat, Fedora), Windows</li>
<li>Editors: Vim, Visual Studio 2008/2010, Eclipse</li>
</ul></div>
<div id="experience" class="section"><h2>Relevant Work Experience</h2>
<div class="entry odd">
<div class="for">Digital Extremes: London, ON<span>September-December, 2011</span></div>
<h3>Star Trek Gameplay Programming</h3>
<div class="details">
<ul>
<li>Independently designed, implemented, and tested many new features and bug fixes</li>
<li>Touched a broad spectrum of codebase from low-level network serialization in the engine to high-level visible gameplay features</li>
<li>Technologies: C++, Lua</li>
</ul>
</div>
</div>
<div class="entry even">
<div class="for">Morgan Stanley: New York, NY<span>January-April, 2011</span></div>
<h3>Electronic Trading Infrastructure</h3>
<div class="details">
<ul>
<li>Enhanced and fixed a C++ project which serializes C++ objects into specific formats</li>
<li>Project was distributed for use in internal trading applications in production</li>
<li>Solely responsible for the design and testing of my enhancements and bug fixes</li>
<li>Technologies: C++, Bash, Perl, Python, JSON</li>
</ul>
</div>
</div>
<div class="entry odd">
<div class="for">Qualcomm Incorporated: San Diego, CA<span>May-August, 2010</span></div>
<h3>QDSP6 Audio Test Framework</h3>
<div class="details">
<ul>
<li>Designed and developed a Perl script to automate audio testing with extensive capabilities, including running overnight stress tests, recording audio playback, and comparing audio output using bit exactness</li>
<li>Ran stability and stress tests for bi-weekly builds</li>
<li>Assisted our development team in developing these C++ tests</li>
<li>Technologies: Perl, C++, Bash</li>
</ul>
</div>
</div>
<div class="entry even">
<div class="for">Microsoft Corporation: Redmond, WA<span>June-August, 2009</span></div>
<h3>Visual Studio 2010 Globalization</h3>
<div class="details">
<ul>
<li>Developed and tested a web-based Silverlight application that could be localized for multiple locales as a presentation piece to help explain the process of Globalization</li>
<li>Pseudo-localized a daily build of Visual Studio 2010 for familiarity with the globalization process</li>
<li>Technologies: ASP.NET, Silverlight, C#, HTML, CSS</li>
</ul>
</div>
</div>
<div class="entry odd five">
<div class="for">Microsoft Corporation: Redmond, WA<span>June-August, 2008</span></div>
<h3>Windows Embedded, Point of Service</h3>
<div class="details">
<ul>
<li>Developed an application that kept an inventory of POS devices and associated information</li>
<li>Designed a neat, systematic, GUI that could be accessed throughout the entire team (over network)</li>
<li>Technologies: C#, Windows Forms, SQL, ADO.NET</li>
</ul>
</div>
</div>
<div class="entry even six">
<div class="for">Freelance Work</div>
<div class="details">
<ul>
<li>Real Estate Listing - currently developing an interactive real estate site (PHP, jQuery, MySQL) - for Tungsten Property</li>
<li>Content Slider - a jQuery plugin that slides between any generic unordered list of div's you give it - for Katworks Inc.</li>
<li>Xliff Target Editor - a C# WinForms application to edit XML-like files with a GUI - for Katworks Inc.</li>
<li>Directory Remover - an easily configurable DOS Batch script to schedule the removal of certain directories - for Global Labs</li>
</ul>
</div>
</div>
</div>
<div id="other">
<div id="activities" class="section"><h2>Related Activities</h2>
<ul>
<li><h3>Game/Graphics Programming:</h3>
<ul>
<li>3D games (C++, modern OpenGL) using vertex buffer objects and shaders (GLSL)</li>
<li>Rendered ~3 million textured triangles using VBOs with >300fps in a minecraft-like game (including physics)</li>
<li>Designed and implemented a game using a heightmap and associated collision detection</li>
</ul>
</li>
<li><h3>Web Programming:</h3>
<ul>
<li>Interactive web plugins using vanilla JavaScript or jQuery</li>
<li>Applications with a PHP/MySQL backend and careful, secure, graphical interface to the database</li>
</ul>
</li>
<li><h3>Stack Overflow: </h3>Over 130 answers, have a reputation in the top 12% of users; mostly from answering C++/OpenGL questions</li>
<li><h3>Project Euler: </h3>Completion of the dozens of challenges on this programming challenge/contest site for fun</li>
<li><h3>UW/Google AI Challenge: </h3>Participation in two Google sponsored, UW hosted, AI programming competitions. Overall ranking in both challenges were in the top quartile. Competition subjects include Rock Paper Scissors and Tron.</li>
</ul>
</div>
<div id="education" class="section"><h2>Education</h2>
<ul>
<li><h3>Candidate for Bachelor of Software Engineering </h3>at the University of Waterloo, June 2014. Relevant courses include Operating Systems, Algorithms, Object Oriented Software Development, Data Structures</li></ul></div>
</div>
</div>
</body>
</html>
There's the CSS3 Module: Paged Media, where you could define the margin and other properties yourself. However, I recommend you to convert your resume into a PDF and put it on your website for offline use, because (1) you can't be sure whether the recipient's browser will understand your stylesheet and (2) whether the font 'Verdana' is installed on the recipients PC.
If you want to achieve the same behavior on all browsers your interviewers could use, then you'll have to work through dozen of compatibility tests, install several browser, print on different operation systems... Even then you can't be sure your recipient isn't using a browser that behaves in a strange way. HTML and CSS are - after all - only markup/style languages and the standards are only recommendations. A PDF is determined to look the same on all compatible devices and is an ISO standard. I would rather stick to PDF, than use HTML/CSS for this kind of design you provided.
(Extra information - on decent browser, you can achieve .odd .even with .entry:nth-of-type(odd), .entry:nth-of-type(even).)
Bullet point size anomalies are caused by quirks mode. Put a DOCTYPE declaration on top to trigger standards mode and the bullets will be OK.
Apart from margin:none, I don't really see any errors in your source.
Well, it's recommended to treat font names as case sensitive, so that would be 'Verdana', the way the system has it.
I don't think there's really a comprehensive list of that kind of recommendations somewhere. Maybe I should put up something myself.
Anyway, see the other answer.
Related
So I'm practicing some beginner HTML and CSS and I'm working on this demo site. I got everything to look like I want it in Chrome, and when I went to test it in other browsers (Edge, Firefox and Internet Explorer) the menu bar at the top was misplaced on every one of them. It was either too high up or too low.
What's going on here?
https://jsfiddle.net/o51km0ub/
<head>
<title>how to make a web site : demo site</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="site_title">
<span>Making a Web Site from Start to Finish</span>
</div>
<div id="primary_content">
<div id="menu">
</div>
<div id="page_content">
<h1>Design</h1>
<p>We're not going to get into how to design a web site, technically or artistically. (We've sort of done that already.) You should have your site design figured out already, but there are a few things we do need to talk about before you start figuring out how to translate it into code.</p>
<p>First, the most important thing to know is that your font choices are sort of restricted online. While you can use the #font-face rule in CSS to externally load fonts, this isn't supported by older browsers. You also may need rights to use certain typefaces with this tag. That said, you <em>can</em> use #font-face to solve the problem of limited font choices on the web, but if you're not ready to jump into that world quite yet you should either use a web fonts service like WebType (which can be free depending on your use) or limit yourself to web-safe fonts. Which fonts are web-safe? Times New Roman and Arial are the most common options, but most operating systems come with several other built-in fonts that are considered web-safe. These include fonts like Tahoma, Verdana, Lucida Grande, Gill Sans, Trebuchet MS, Courier New, and Georgia. Do a search for web-safe fonts if you're looking for additional options.</p>
<p>Second, you need to consider what is going to be an image and what isn't. Nowadays you don't really need to use images for much more than complex graphics and photos as HTML and CSS can handle many of the complex things that we used to do with images. Menus, for example, can be created very easily in CSS with an unordered list. Generally you do not need text to be rendered as an image, but there may be some circumstances where you will need to do that (e.g. if the text is combined with a graphic).</p>
<p>Finally, you need to consider which images are going to be displayed as actual images or as backgrounds for one of your DIVs. How do you determine this? If you have text that's going to go on top of an image (e.g. with a menu), then you have your answer: your image will be a background. The reason this is important to know is because you need to export it unadorned with any text, images, or anything you're going to add later in the code. Once you've got that figured out, head on to the next step ("Preparation") where we discuss preparing your layout for coding and exporting any necessary images.</p>
</div>
</div>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><span class="color01">01</span> DESIGN</li>
<li>
<span class="color02">02</span><a style="font-size 15px" href="#">PREPARATION<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li><span class="color03">03</span> DEVELOPMENT</li>
<li><span class="color04">04</span> DEPLOYMENT</li>
</ul>
</nav>
</div>
</body>
Every browser has a default CSS. You will have to write a reset css before any other styles.
Most common reset css is Eric Meyer's reset.
You can also write the following for a quick check.
*{
margin:0;
padding:0
}
On my Wordpress page, I have the following code:
<div class="row">
<div class="col-md-6">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " /></a>
</div>
<div class="col-md-6">
<h1 class="text-center">Vision</h1>
<span style="font-size: 12.0pt;">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</span>
<h1 class="text-center">Mission</h1>
<span style="font-size: 12.0pt;">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</span>
<ul>
<li><span style="font-size: 12.0pt;">Building, managing and supporting cross-sector coalitions</span></li>
<li><span style="font-size: 12.0pt;">Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</span></li>
<li><span style="font-size: 12.0pt;">Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</span></li>
<li><span style="font-size: 12.0pt;">Advocating and shaping policy to support improvements of systems</span></li>
</ul>
</div>
</div><!--end div class="row"-->
You can see how it looks here.
As you can see, the text stays floating to the right 50% inside the wordpress page template area. I would like the text to start taking up 100% of the available area once it hits a new line that is underneath the first picture column to the left.
For an example of how I want it to look, check out our old Squarespace site and zoom in if you have a high aspect ratio.
I know similar questions have been asked before but I have not been able to find an answer while using the Bootstrap framework.
Bootstrap is not terribly different than designing in tables. I mean, they even call them rows and columns. It's 1990's web design using CSS. (I'm only half kidding).
If you want that image to do what you're asking, you should combine your bootstrap columns (just use one col-md-12) and use CSS to float the image left.
Your other option is to decide what text you want always to the side of the image, and what you want under it, and to move that text to a new row with a new col-md-12.
See this answer, it is about Bootstrap - Wrapping Columns Around Larger Column
This is not a 'bootstrap' specific issue. All bootstrap does is use some class names with a long stylesheet.
Unrelated - I would remove those inline styles also.
Thanks to the tips of both #BenFried and #Rkhayat , I was able to come up with some code that is functioning.
<div class="row">
<div class="col-md-12">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" style="float: left; padding-right: 1em; padding-bottom: 1em;" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " width="50%" />
</a>
<h1 class="text-center">Vision</h1>
<p class="text-justify">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</p>
<h1 class="text-center">Mission</h1>
<p class="text-justify">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</p>
<ul>
<li>Building, managing and supporting cross-sector coalitions</li>
<li>Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</li>
<li>Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</li>
<li>Advocating and shaping policy to support improvements of systems</li>
</ul>
</div> <!-- end <div class="col-md-12"> -->
</div> <!-- end <div class="row"> -->
There is white space below my div in Firefox but not in Chrome. I think it has something to do with my #body-content-container having the properties position: relative; and bottom: 300px; this gets the right positioning effect I'm looking for in Chrome, but in Firefox it creates a white space. When I get rid of these lines the div isn't positioned in the right place in either FF or Chrome.
Here's the code:
HTML:
<div id="body-content-container">
<div id="body-content"class="row">
<div class="small-12 small-centered columns">
<br/>
<div align="center" id="page-title">COMPANY</div>
<h1 align="center">About Us</h1>
<p>ADU Consulting has been developing quality e-learning programs since 2004. It is a training and education company that collaborates with partner organizations in developing, hosting and managing online educational programs based on the individual curriculum and client needs.</p>
<p>It operates from two regional offices one in New York and another in Northern Virginia, close to the capital city of Washington D.C. The ADU datacenter is also located near the corporate office in Virginia.</p>
<p>We:</p>
<ul>
<li>Develop e-Learning courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>ADU business is divided into two areas: <span style="font-family:FuturaStd-Heavy;">e-Learning Consultancy</span> for client organizations and running its <span style="font-family:FuturaStd-Heavy;">International Maritime College</span> where it offers a number of Certificates, College Primers and Vocational Skill Development programs, aimed primarily at the maritime industry. These courses focus on training the seafarers and the shore based employees within the shipping business.</p>
<p>ADU fills the gap between traditional education and the needs of people today. Interactive courses taught by experienced professionals help students keep pace with changing industry demands in addition to providing a holistic and need-based education. Our Instructors are picked from around the world with the majority from the United States; they have the highest professional and academic backgrounds that befit the purpose of industry ready education and training.</p>
<h1 align="center">Our Purpose</h1>
<p>We believe that online education's role is to compliment the "best" practices in education. It must support instructors to teach a larger student body and make learning possible based on individual learning needs. With this in mind, our integrated learning platform is equipped with necessary tools in helping the Instructors create a self-paced learning environment.</p>
<h1 align="center">Technology</h1>
<p>The LMS software and courses system is housed in a tier 1 datacenter that has a redundant firewall, switches and servers for complete data security. This hosted delivery model provides scalability, reliability and eliminates technological burden on client resources.</p>
<h1 align="center">Course Development</h1>
<p>ADU Consulting's content creation and delivery platforms are tied together such that it allows faculty to modify, or enhance contents to fit their unique teaching style. Thus a course developed for an organization can be further customized by the Instructor. In addition, since the world of online resources is expanding every minute, Instructors are able to link external content or add other resources through this platform. The student assessment is an integral part of the learning and evaluation process: the platform is configured with a question bank and a multi-faceted assessment system.</p>
<h1 align="center">Support</h1>
<p>In order to keep pace with the changing landscape of online learning ADU Consulting's platform is constantly updated in keeping with such advances. We are committed to support our partners both from technical management and pedagogical viewpoint.</p>
<h1 align="center">Course Delivery</h1>
<p>Courses are delivered to students in an asynchronous mode that allows students to learn at their own pace and allows flexibility when they want to study; Collaboration and communication with faculty is done in a synchronous mode through online video conferencing. The teacher-centric approach helps to consolidate and maximize the learning outcome.</p>
<h1 align="center">Course Creation & Quality Control</h1>
<p>ADU Consulting has an e-learning Quality Management Process that looks at various quality attributes in a course that must be meet to meet the ADU performance criteria. This is an internal quality audit system that must be satisfied before a course can be put on line for client review. The QA task is done from Virginia.</p>
<p>ADU Consulting’s courses are built at Chennai, India with an affiliated organization that maintains a large content development team including subject matter experts, instructional designers, graphic designers, Flash and other programmers, voice-over specialists etc.</p>
<p>The development is an iterative process and is only signed off once the user client is fully satisfied with the intended and agreed quality standard.</p>
<h1 align="center">Collaberation Projects</h1>
<p>ADU Consulting collaborates with partner organizations in developing, hosting and managing online educational programs based on individual curriculum and client needs and this may take any of the following project types:</p>
<ul>
<li>Develop e-Learning Courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting for e-learning services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div align="center">
<h1>Contact Us</h1>
<span style="font-family:FuturaStd-Heavy;font-size:20px;">ADU Consulting Services</span>
<br/>
<p>6 Pigeon Hill Drive Suite 230<br/>
Sterling, VA 20165<br/>
United States of America</p>
<p>Email: info#adu.us.com</p>
<p>Telephone: (804) 205-1210<br/>
Fax: (703) 738-7723</p>
</div>
</div>
</div>
<div align="center" id="footer">
<br/>
Copyright © <script type="text/javascript">
document.write(new Date().getFullYear());
</script> ADU Consulting, All Rights Reserved. Site designed & developed by <a target="_blank" style="text-decoration: underline;" href="http://zrrdigitalmedia.com">zrrdigitalmedia</a>
<br/>
<br/>
</div>
CSS:
#body-content-container{
background-color: #d5b93f;
position: relative;
bottom: 300px;
}
Also here's a link to the site: http://zrrdigitalmedia.com/_ADU/company.html
I'm super lost here, any suggestions are much appreciated! Thank you!
Try changing the bottom value for the #body-content-container.
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: -15px; /* change 300px to -15px */
}
Tested on both, Firefox and Chrome.
Alternatively you can target Mozilla Firefox and add a negative margin-bottom
to the #body-content-container:
#-moz-document url-prefix() {
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: 300px;
margin-bottom:-320px; }
}
Some digging in FireBug lead me to this:
#body-content-container {
background-color: #d5b93f;
bottom: 300px; /* <-- this is the issue, remove it */
position: relative;
}
I just heard about zen-coding, which basically is just a script that generates markup based on a css-esque selector, ex:
div#foo > p*6
generates
<div id="foo">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
Edit: Here's a more advanced example..
And PS - I'm not even going through any API, I'm totally guessing based on my CSS selector knowledge, this is very easy and intuitive for me.
ul#nav > li[id] * 6 > a
Generates
<ul id="nav">
<li id="">
</li>
<li id="">
</li>
<li id="">
</li>
<li id="">
</li>
<li id="">
</li>
<li id="">
</li>
</ul>
when you hit a shortcut such as Ctrl-E. Very very useful if you do a lot of front end development. I had the idea of the exact opposite, a CSS selector generator which basically parses markup and generates selectors so one can go in a tool such as Firebug and rapidly see live changes on the dot, I just never bothered to actually finish the script I had started.
It's currently supported in TextMate, Dreamweaver, Aptana, NetBeans, unfortunately not vim/emacs however there is a fork named sparkup which works on vim ( I use that now ).
I'm wondering if anyone has come across such plugins or tools in the past - I'm aware that there are snippet scripts in Vim/Textmate/Emacs and other powerful editors, just curious of what else is out there in the wild.
Hm. I write a lot of HTML and CSS every day and I am not excited. The paragraph you mention I write in five seconds, and six times Ctrl+C and Ctrl+V. Granted, there may be scenarios when a meta language will save more time but I have never felt the need for one. When there are really massive amounts of HTML - or SQL, or arrays - to produce, I will write a small PHP or VB script for the task. I wouldn't want another meta-language to produce something in another language.
Maybe useful for others but not for me.
If discussion about the general usefulness was what you were looking for. Reading your post a second time, I'm not that sure any more. Anyway. :)
If you are developing rails, check out Sass and Haml
Sass can do use variables and do basic math:
// Sass
!blue = #3bbfce
!margin = 16px
.content_navigation
border-color = !blue
color = !blue - #111
.border
padding = !margin / 2
margin = !margin / 2
border-color = !blue
renders:
/* CSS */
.content_navigation {
border-color: #3bbfce;
color: #2aaebd;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Haml uses indentation instead of divs and matches the css # and . system for labeling classes and divs:
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
renders to:
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
<div id="address"><%= current_user.address %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></div>
<div id="bio"><%= current_user.bio %></div>
</div>
</div>
I'm really amazed that you guys are having this conversation.
I've been doing Web Development for 4 years and I can not remember the last time that I've had to write something like
<li>some text</li>
more then once in single instance.
The most html that I would write in any given point is something like
<ul>
<?php foreach ( $menu as $item ) : ?>
<li><?php echo $item->title ?></li>
<?php endforeach; ?>
</ul>
Needless to say, I really don't see the point in learning a tool to speed up writing of stastic HTML. It's like getting a bigger shovel, you're only going to dig yourself into a bigger whole.
I think you should be asking yourself, how can I eliminate the amount of static html that I generate?
The answer to that question is to use CMSs like Joomla, Drupal or Wordpress.
If you absolutely have to write static html sites, then look at something like Sphinx.
Sphinx completely eliminates the need to write HTML and it allows you to create static sites with multiple pages without ever writing a single hard coded html link.
Sphinx uses reStructuredText markup. I will show you how you would generate your code in reStructuredText.
- `Joomla`_
- `Drupal`_
- `Wordpres`_
- `Sphinx`_
_ :doc:`Some intermal Page <internal/file>`
.. _Joomla: http://joomla.org
.. _Drupal: http://drupal.org
.. _Wordpress: http://wordpress.org
.. _Sphinx: https://www.sphinx-doc.org
I tried to show how this would work with reStructuredText, the example that you have doesn't exactly make sense in Sphinx context because you would never create a tags without providing links to them. But you get an idea I hope.
The Blueprint CSS framework has a Rapid HTML/CSS Development-like tagline:
Spend your time innovating, not replicating.
This is a community wiki that asks the question, "Just how semantic can our HTML markup get thanks to HTML 5?" Below You can find the source code of a sample HTML 5 page. The object is to make a very usable, accessible, style-able webpage using as few classes and IDs as possible.
Also, when do you plan to start implementing HTML 5? Are you going to wait 10+ years until the draft is finalized, or are you going to be an "early adopter" now that browser support is rapidly growing?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Site Name • Page Title</title>
</head>
<body>
<nav>
<h1>Site Name</h1>
<ul>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
</ul>
</nav>
<header>
<p>Welcome to the site!</p>
Call to action!
</header>
<section>
<aside>
<!-- Sidebar -->
</aside>
<article>
<header>
<h2>Article Name</h2>
<p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p>
</header>
<p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p>
<figure>
<img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" />
<label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label>
</figure>
<p>Lorem ipsum dolor...</p>
</article>
</section>
<footer>
<p>© <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p>
</footer>
</body>
</html>
It won't be 10+ years. That time period is for "final completion", all browsers support all parts of the spec. It's due to become a candidate late this year, early next, and hopefully approved by 2011/2.
I'm phasing it it in where I can, right now. How much I use depends on audience, but since IE share has been falling constantly, what they don't support is no longer a killer, especially as John Resig's "HTML5 shiv" lets the semantic tags play even in IE6 with js turned on.
More importantly, I'm starting to shift my thinking into HTML5 lines, using classes today for what will become HTML5 tags tomorrow (div class="nav"). That way I'll be more used to thinking in HTML5 terms when the opportunity arises.
Although I take great happiness in seeing new capabilities, the truth still remains that my clients use IE6 (and similar browsers). As much as I would like to see everybody using a modern browser, the fact that they aren't means I have to work with technologies that don't require them to upgrade.
I'm going to use it as soon as browsers support it. The sites I make are mainly hobby projects mostly visited by Firefox users. (80% of my traffic uses the latest version of FF).
Keep in mind that the cite element is not appropriate for a person's name: HTML5 states "A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names." Also, the trailing slash in <meta charset="UTF-8" /> isn't necessary.
The main driver for people adopting HTML 5 would be better search engine placement, without that, I'm not seeing a huge reason to adopt.
(Maybe if people could somehow convince me that the web might be more data-like and therefore interoperability would improve, then I might be somewhat convinced, but that sounds a bit overly optimistic)
I'll echo jonothan sampson. As long as a reasonable number of people are still using older browsers, it's hard to make that jump.
On the other hand, it's probably sensible to detect browsers and send a version that makes good sense. Since the differences between the two languages will be moderate, it will probably be feasable to transform an HTML5 page to HTML4 with additonal class and styles depending on user agent, perhaps with a little server side xslt. That said, I doubt I'd be the one to invent that technology, although I'd use it if or when it becomes available.
People keep mentioning a javascript solution for older browsers such as ie6 but what if they do not support javascript?
Sorry not an answer but more a ????? As this is the point I just don't get about semantic html5 and IE support.
You could always go belt and braces for older browsers
<nav><div id="nav"> some nav stuff</div></nav>
But that feels dirty to me?