DISEÑO DE PAGINA WEB CON TODO EL DETALLE E INFORMACION NECESARIA PARA SU CODIFICACION

1. Website Development RFP
Project Goal:
Replace ASP.NET Front End jhalit.com with Angular
JS framework - both client and server apps with
endpoints
Technology Full Stack
ASP.NET, Angular, Bootstrap, Git, SVG, Docker
Example Site Architecture
Website Mockups

2. Project Requirements
● Expert in the Following Technologies
ASP.NET, Angular, JavaScript,Jquery,Bootstrap, Git
● Work with Existing Custom ASP.NET CMS Code Base
Work with an existing ASP.NET solution we wrote in VB.NET
2003 however the application has been upgraded and builds
in ASP.net Core 2..0
● Agile Development
Accommodate for modest amount change requests from
original scope, around 20 %
● Site Content ad Design Assets
Work designer to obtain any missing content / graphical site
elements, populate CMS with provided content, export from
Illustrator to SVG. SEO optimize HTML markup, page meta,
semantic naming etc..
● Project Extensibility
Provide knowledge transfer (commenting in code , code review
etc..)
● Development Environment
Work with Local / Staging / Production Environments /git /
Docker
● Project Schedule and Timeline
Adhere to agreed upon milestone and completion dates (total
project duration: 30 days) within the context of iterative based
workflow.
● Project Budget
30-40 hrs
● Ticketing System Work within provided ticketing system to:
update project tasks / milestones with completion status, add /
change tasks as needed etc.

3. Home Page
Page Sections
(Note, the following JQuery examples are to be rendered in Angularjs)
1. Page > Scroll >Parallax "In the News" Z-index - 1. "Featured Titles
and" "Explore The Agency" z-index 2
2. Page > Scroll > Reduce height of header
3. Header > Multi Level Menu
4. Header > The main image of books and glasses Header Image >
add Ken Burns Effect Example
5. Header > Hover of page curl animation - see image attached JS
Code Page curl JS
6. Content > Box 1 >Featured Titles Tabs and Slider > pagination
stationary circles underneath
7. In the News (Filtered Twitter API Feed)
8. Content > Box 2 >Explore The Agency> Hover effect > zoom into
photo JS Isotope
9. Footer
CMS Backend Content > “Featured Titles” entities already exist in the
CMS. Need to add “Explore the Agency” as top level content category

4. Contemporary Authors
Page
Main Function: Visitor explores Author social media outlets through
browsing thumbnail screenshots of respective Social Media Pages
Template >Secondary Page
CMS Backend Content > Add “Author” as top level content category and
merge with
Page Sections
1. Breadcrumb Navigation
2. Page Header 1 (Missing in Mockup -see other secondary page)
3. Page Feature Image with page description (seo) in caption
4. Page Header 2
5. Filter By Author
6. Social Media Integration API
7. Homepage Thumbnail Snapshot

5. Firm Timeline
Main Function: Visitor explores Interactive timeline of prominent authors
represented in the past
Template >Secondary Page
CMS Backend Content > Use existing “Title” and “Timeline” content entity
types
Page Sections
1. Page Header > > Read historic authors correspondence letters add
faded and zoom on hover mixed with parallax
2. Content > Box 1 > Timeline > navigation
3. Content > Box 1 > Timeline > Mosaic (200 Titles)
● The mosaic generator produces a CSV output that maps mosaic tile
location with file name. we can use in the hover script to update the
author name etc in the caption at the bottom of the mosaic. As the user
hovers over a jacket. We will need to associate the book title records in
the CMS with the individual title image the mosaic uses. Could run a utility
type script to rename the file names, currently the names of the book
jacket files are arbitrary, but are connected in CMS.
1. Content > Box 1 > Timeline > Caption

6. Firm Timeline (Interactive)
Event: User Hovers Over Timeline Navigation:
a) Cursor over Single Author Name:
b) Cursor over Multiple Author Names
c) The Year: same as above
Actions
a) Single Author Name: corresponding book jackets magnify in mosaic
b) Multiple Author Names: corresponding book jackets magnify in
mosaic on timmer iterating through sets of authors jackets
c) The Year: same as above
d) If no Title image exists for author, show quote in caption and blur
mosaic
Event: User Hovers Over Mosaic of Jackets:
Action
a) The user's mouse cursor becomes the magnifying glass as the user
moves his mouse around the mosaic of jackets.
Event: User Hovers Over Mosaic of Jackets and the magnifying glass cursor is
persists over the jacket
Action
a) Jacket magnification

7. Submissions Form
Main Function: Visitor submits their manuscript, uploads their document,
and fills out related information.
Interactive: “Letter” “Envelope”
After the user submits the form, the letter and envelope animate which
culminates in a “Submission Received”.
Template >Secondary Page CMS Backend Content > Use existing page /
node with new Theme
Form Submission > Processed by submissions database
Page Sections
1. Content > Box 1 > Form> Field Collection 1 “Envelope”
2. Content > Box 1 > Form> Field Collection 1 > Agent Selection
Toggle
3. Content > Box 2 > Form > Field Collection 2 “Letter”
4. Content > Box 2 > Form > Field Collection 2 > Submission Type
Toggle
5. Content > Box 2 > Form > Field Collection 2 >File Upload

8. About
Main Function: Informational. Show firm history
Template >Secondary Page
CMS Backend Content > Add “Founder” Profiles as top level content
category

9. Agent Profiles Page
Main Function: Informational. Ability to make a submission to or email
the agent directly.
Template >Secondary Page
CMS Backend Content > Use existing “Agent” Profiles content
category
Story for illustration purposes only

10. Permissions Page
Main Function: Informational and email routing
Template >Secondary Page
CMS Backend Content > Use existing page / node with new theme

11. Style Guide
Colors: #495151 #EFF1EF
Fonts: Google Fonts ( Railway, Cormorant Garamond)
Website media query parameters...
Image Format SVG optimized