Я только что провел около двадцати технических собеседований для прохождения практики, и большинство моих интервьюеров распечатали мое резюме. Я заметил некоторые серьезные несоответствия в том, как это получается в печатном виде, и я предполагаю, что виновником являются различия в том, как разные браузеры «рендерит» html / css.
Двумя основными проблемами были (общий, и не слишком большой) размер маркера и (редкая, но огромная) ширина моего резюме, которое не помещалось на одной странице, так что в него было брошено МНОЖЕСТВО материала. следующая строка.
Все мое резюме имеет ширину 800px, имеет много маркеров, несколько границ и кучу элементов (некоторые из которых смещены влево, поэтому у меня может быть два столбца материала). Есть ли ресурс, который документирует вещи, на которые нужно обратить внимание при создании страниц, которые должны выглядеть одинаково в разных браузерах? Есть ли способ масштабирования страницы, когда чьи-то поля печати составляют 3 дюйма, а не альтернатива испортить дизайн?
Спасибо!
Кстати, вот длинный источник html / css (я не ожидаю, что вы пройдете его здесь, но, скорее всего, скопируйте его, вставьте в блокнот и откройте страницу для себя).
edit: или см. Страницу jsfiddle
<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>