Skilled HTML5 developer needed to create a 'responsive design' web page (that changes the size of all elements on the page to fit the page/browser size). More work to follow.

Storniert Veröffentlicht Jun 18, 2012 Bezahlt bei Lieferung
Storniert Bezahlt bei Lieferung

**Functionality:** Create a javascript+CSS+HTML solution that will resize all the elements on a web page based on the size of the page.

Important clarification: This needs to be a resuable solution. It needs to be generic. More details on this in the "details" section below.

**Goal:** We want all elements on the page to be visible but sized proportionality to be viewable on various sized devices (iPad, Android Table, PC's of various screen sizes). We do not need it to resize dynamically, only when the page loads. So if the user were to resize their browser it's OK to expect them to refresh the browser (F5)

**Seeking a *Developer* not just a *coder***:

We are an established, 17 year old software company and this proof-of-concept project is a *first step* in a much larger project. I'm looking for a developer for a long term relationship. More info on the larger projects is in the *details* section.

I am looking for a cadidates with not only technical skills (below) but also strong "developer skills" who can write maintainable code, help with architecting the program, anticipate problems we should address and ask good questions. In other words: not a "code monkey", a *Software Developer*. (The choosen developer may not have *all* of these skills, but the more the better.)

## Deliverables

Project: **Elastic/Responsive Web Page**

**Goal**: to adapt the web page to various sized devices (iPad, Android Table, PC's of various screen sizes). We do not need it to resize dynamically, only when the page loads. So if the user were to resize their browser it's OK to expect them to refresh the browser (F5)

Clarification:

This needs to be a reusable solution. We need to support about 10 different screen resolutions (everything from a Nook up to a Widescreen Mac monitor, and inbetween). And we'll have about 50 different variations of Web Page UI for the this application. So we want to be able to just scale a page and all elements and text.

You can assume that there will be a small number of CSS Classes used for the text sizing. So you can just resize those classes and that should take care of the text.

I need to take a closer look at those classes and supply you with a list. Or **could you to just assume that ANY class name in the .css file that starts with txt is the style for text and thus resize it's font-size property?**

Some classes I know we'll have:

* txtTitle

* txtHeading1 (and 2,3,4)

* txtPrompt

* txtSimulus

* txtTargetorFoil

* txtInstructions

1. Resize all objects (both their size and relative position and font size) in the browser based on browser size.

1. Assume all objects will be be in a table with id="pagecontainer".

2. Resize that container *proportionally* so that it fits within the visible page of the browser. (I.e., the browser itself might be 600px tall but the visible page display area might be only 500px).

So, if the browser is displayed in portrait orientation (e.g., if the iPad is rotated to Portrait orientation) then there will be a lot of wasted space above and below the page( see diagram)

3. Width is usually the biggest limiting factor for font size increases. (I.e., more likely that the text will be too wide than too tall (for it's container). So *adjust font based on the change in width*.

4. You can assume the *pagecontainer* will be sized for the smallest possible screen so that you only need to make things larger and ignore the change to portrait.

If the browser goes into Portrait mode (taller than it is wide) you could display a warning message (please rotate this so that it is wider than it is tall) and let the page be wider than the browser (resulting in horizontal scroll bars) If they are using it on a tablet they really should be using it in the intended aspect ratio for our program (landscape)

2. Options that might make this easier for you

1. You could define your own CSS sheet and to deal with the font sizes so that you know how large each CSS style is. That way you could say " class=large is known to be font size=3em so we'll make the new size 3em * (page size change). (I've used our CSS sheet here for convenience. You could create a version of it . In the final product we'll create a new CSS sheet.

2. If it would be easier to define the layout with a CSS sheet (instead of the table we've used) that's fine as well.

3. Resource that might be useful:How to [/auto-resize-text-font-size-when-resizing-window][1]

4. Testing and Deliverables

1. File to test: [[url removed, login to view]][2]

2. Important _update_: I've uploaded [screen designs as a pdf file.][3] They are actually simpler than the above test page, but not in HTML.

3. Browsers that you should test on:

1. Latest Safari (ideally on an iPad, but on Windows or a Mac if Ok as well)

2. Google Chrome

3. FireFox

4. Internet Explorer (if you have trouble getting it to work on IE, just note the problems. We'll probably us [Google Frame][4] to let users use Chrome within IE

4. **Deliverable #1**: resizes the elements (but not the fonts)

5. **Deliverable #2** resizes the elements *and* the fonts within them.

5. Questions for you

These are _not_ required, they are just to give me an idea of your style of programming. Answer as many of these in 5m as you can. (Dont' worry if you can't answer all of them. )

**Javascript**

1. Download and find the bug in : [[url removed, login to view]\download\temp\*[url removed, login to view]*][5] file.

2. How would you force the contents of a page to not get any wider than MaxWidth (in pixels) in the Chrome browser (latest version) even if the browser were wider than that, and yet resize smaller as the browser resizes smaller than that width?

3. Do you use any coding standards (e.g., consistent variable naming conventions (e.g., Classes always start with C_ (C_Person), indent spacing, placement of { and } 's?

4. If not, is there any way to distinguish, when reading your code, between a Class, an Object, Variable, etc. Or to tell what the Scope of that object is (Global vs. Local)?

5. If so, can you provide a link to what you use? (maybe a "style guide"?)

6. Do you use any tool to enforce (or detect non-compliance)? Maybe something like jsLint

7. Do you test your own code's basic functionality (Unit Testing) or does someone else (the customer/employer/testing dept) do that for you.

8. Do you regularly use any automated Unit Testing?

9. Do you feel that you can do a good job of Unit Testing (automated or manual)?

**CSS** :

1. How would you dynamically resize the page (the content) to not be displayed wider than Max pixels wide? (using CSS3, on the Chrome browser) (So if the browser is larger than Max pixels, the page would be resized to Max width.

2. Would that work in IE9? FF 12?

**HTML5**

1. If you wanted to store 200 MB of data on an iPad with an HTML5 app, could you do that and what technique/feature would you use.

2. Same question for Chrome browser.

**Expectations**

* **Excellent spoken and written English**. And if you need (and want) to improve your English let me know. I can help with that as well. There's one simple trick that can dramatically improve how understandable your spoken english is. (One of our current programs helps with that and you're welcome to a copy of it if you are the successful bidder.)

* During days you are working, We need you to be **available for a scheduled skype call at least 1 hour** during some of the hours (of your choice) from 8am to 10pm (USA, New York time, UTC/GMT -4 hours ). In the *title/subject* of your response/bid, please _include_ what hours (in our timezone) during that period that you can be available (e.g., avail 6-8pm EDT). These calls will be for any questions you or we have that can't be dealt with via email. I do not plan to use time for skype calls often, but we need to be able to schedule a call (e.g., we get the latest version from you and have feedback/questions, we'd schedule a skype call to you that day or the next day.)

* You have an Android tablet (preferably a color Nook) and an iPad for testing. Please **let me know if you do NOT have an iPad** (1 or 2) **and** an **Android Tablet** (preferably a Color Nook) for testing.

It's better that you have one to test on but in that case you can test on Windows with Safari (in lieu of testing on Safari on the iPad).

(There are some options for making Safari on Windows "act" more like the Safari on the iPad, including setting the size to match the iPad.

And you can test on Windows using Nook for Windows:

[url removed, login to view]

**Required Skills**

Extensive knowledge of, and skills with (250+ hours (e.g., a year of daily use experience) with:

* Javascript

* HTML5

*

<!-- -->

* CSS3

Excellent skills (and at least 100 hours (e.g., 4+ months of daily use) or at least 3 projects (equivalent skill) with:

* jQuery (or a comparable javascript library)

* Creating an HTML5 Application (either "desktop browser" or (even better): mobile browser based. Please include a link to any HTML5 App that you have created.

**Additional *Desired* skills**

* Familiarity with other .js libraries (especially jQuery mobile). _Include_ in your bid a list of libraries you've used and # of hours you've spent working with each.

* Experience using and (deploying an application into public use) PhoneGap. _Include_ a link to a finished app.

* * *This broadcast message was sent to all bidders on Tuesday Jun 26, 2012 10:19:29 AM:

I will slow in responding to emails as I am currently on vacation ,back in the office on July 3rd.

* * *This broadcast message was sent to all bidders on Tuesday Jul 10, 2012 8:20:34 PM:

Important update: I've uploaded more accurate screen shots: [url removed, login to view] The screens are actually simpler than the example HTML page I originally provided in this project description. You are free to create any CSS Classes and then accomplish the resizing by modifying those Classes. We would then make sure that we are using those Classes so that your solution would work on other pages. If this affects your bid, please update it. Thanks! -Clay

PHP Softwarearchitektur Testen von Software Web Hosting Website-Management Testen von Webseiten

Projekt-ID: #2751941

Über das Projekt

3 Vorschläge Remote Projekt Aktiv Sep 2, 2012

3 Freelancer bieten im Durchschnitt $750 für diesen Job

hiddenpearls

See private message.

$750.55 USD in 18 Tagen
(494 Bewertungen)
7.5
tiborveres

See private message.

$750.55 USD in 18 Tagen
(26 Bewertungen)
5.5
madhuamb

See private message.

$750 USD in 18 Tagen
(26 Bewertungen)
5.4