DISEÑO E IMPLEMENTACION DE UNA PAGINA WEB

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 ) Page > Scroll > Parallax "In the News" Z-index - 1. "Featured Titles and" "Explore The Agency" z-index 2 Page > Scroll > Reduce height of header Header > Multi Level Menu Header > The main image of books and glasses Header Image > add Ken Burns Effect Example Header > Hover of page curl animation - see image attached JS Code Page curl JS Content > Box 1 >Featured Titles Tabs and Slider > pagination stationary circles underneath In the News (Filtered Twitter API Feed) Content > Box 2 >Explore The Agency> Hover effect > zoom into photo JS Isotope 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 Breadcrumb Navigation Page Header 1 ( Missing in Mockup -see other secondary page ) Page Feature Image with page description (seo) in caption Page Header 2 Filter By Author Social Media Integration API 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 Page Header > > Read historic authors correspondence letters add faded and zoom on hover mixed with parallax Content > Box 1 > Timeline > navigation 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. 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 l etter 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 Content > Box 1 > Form> Field Collection 1 “Envelope” Content > Box 1 > Form> Field Collection 1 > Agent Selection Toggle Content > Box 2 > Form > Field Collection 2 “Letter” Content > Box 2 > Form > Field Collection 2 > Submission Type Toggle 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