--- name: agency-web-developer description: Sviluppare siti web statici o landing page partendo da copy e design system. Usare quando: (1) costruire sito da sitemap + copy, (2) creare landing page, (3) implementare design in HTML/CSS/JS. Output: Sito completo con HTML semantico, CSS (Bootstrap o custom), JS (jQuery + GSAP). --- # Agency Web Developer — Sviluppo Siti Web Statici Trasforma copy e design system in siti web funzionanti con HTML semantico, CSS e JS. ## Quando Usare - **Nuovo sito:** Costruire sito completo da sitemap + copy + design tokens - **Landing page:** Pagina singola campaign-specific - **Design implementation:** Convertire mockup in codice - **Static site:** Sito senza backend (brochure, portfolio, landing) --- ## Input | Input | Tipo | Validazione | |-------|------|-------------| | `client_path` | string | Percorso client | | `sitemap` | object | Da agency-ux-copy | | `page_copy` | array | Copy completo per ogni pagina | | `design_tokens` | object | Da agency-design-system | | `page_layouts` | array | Layout definitions | | `seo_metadata` | array | SEO notes per pagina | --- ## Processo ### Fase 1: Setup Struttura Progetto **Obiettivo:** Creare directory structure per il sito. **Azioni:** 1. Crea cartella `clients/{client}/website/` 2. Crea sottocartelle: - `index.html` (homepage) - `pages/` (altre pagine HTML) - `css/` (stylesheet) - `js/` (JavaScript) - `assets/` (immagini, font, etc.) - `assets/img/` - `assets/fonts/` 3. Inizializza file base: - `css/main.css` (o `css/bootstrap.min.css` + `css/custom.css`) - `js/main.js` - `assets/` (vuoto, pronto per asset) **Output:** - Struttura directory pronta --- ### Fase 2: HTML Semantico **Obiettivo:** Costruire struttura HTML per ogni pagina. **Azioni:** 1. **Per ogni pagina in sitemap:** 2. **Struttura base:** ```html {SEO Title}

{Navigation}

{Content}

``` 3. **Hero section:** - `

` - `

` per headline - `
` per subcopy - `` per CTA 4. Content sections: - Usa tag semantici: `
`, `
`, `
` - Heading hierarchy: `
`, `
` (mai saltare livelli) - Liste: `
`, `
` con `
` - Immagini: `` 5. Componenti da copy: - Card grid per services - Testimonial blocks - FAQ accordion - CTA sections - Form di contatto 6. Segui `references/html_semantics.md`: - Semantic HTML best practices - Accessibility (ARIA labels dove necessario) - SEO on-page (heading structure, alt text) Output: - `clients/{client}/website/index.html` - `clients/{client}/website/pages/.html` --- ### Fase 3: CSS Layout Obiettivo: Stilizzare il sito con CSS. Decisione: Bootstrap vs Custom Usa Bootstrap se: - Design è standard (grid, cards, buttons standard) - Progetto semplice/veloce - Cliente non richiede customizzazione estrema Usa Custom CSS se: - Design altamente personalizzato - Brand ha linee guida specifiche - Layout non-standard Azioni: 1. Se Bootstrap: - Includi CDN in HTML - Crea `css/custom.css` per override - Usa classi Bootstrap (.container, .row, .col, .btn, etc.) - Override tokens in custom.css 2. Se Custom: - Crea `css/main.css` da zero - Implementa design tokens (fonts, colors, spacing) - Crea grid system (o usa CSS Grid/Flexbox) - Stilizza componenti uno a uno 3. Implementa da `references/css_layout.md`: - Responsive design (mobile-first) - Breakpoints (mobile, tablet, desktop) - Typography scale - Color system - Spacing system 4. Componenti da stilizzare: - Header/navigation (sticky, mobile menu) - Hero section - Buttons (primary, secondary, hover states) - Cards - Forms - Footer Output: - `clients/{client}/website/css/main.css` (o `bootstrap.min.css` + `custom.css`) --- ### Fase 4: JavaScript Interattività Obiettivo: Aggiungere interattività al sito. Librerie: - jQuery: Per DOM manipulation, event handling, AJAX (se necessario) - GSAP: Per animazioni fluide, timeline, effetti complessi Azioni: 1. Includi librerie in HTML: ```html ``` 2. Funzionalità base (jQuery): - Mobile menu toggle - Smooth scroll per anchor links - Form validation - Accordion FAQ - Image lazy loading - Back to top button 3. Animazioni (GSAP): - Fade-in on scroll - Hero animations (headline, CTA) - Parallax effects (se richiesti) - Hover animations complesse - Timeline per sequenze animate 4. Segui `references/js_interactivity.md`: - Best practices jQuery - GSAP patterns - Performance considerations - Accessibility (respect reduced-motion) Template `js/main.js`: ```javascript $(document).ready(function() { // Mobile menu toggle $('.mobile-menu-toggle').on('click', function() { $('.nav-menu').toggleClass('is-open'); }); // Smooth scroll $('a[href^="#"]').on('click', function(e) { e.preventDefault(); const target = $(this.getAttribute('href')); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top - 80 }, 800); } }); // FAQ accordion $('.faq-question').on('click', function() { $(this).next('.faq-answer').slideToggle(300); $(this).toggleClass('is-active'); }); // GSAP animations gsap.from('.hero h1', { duration: 1, opacity: 0, y: 30, ease: 'power3.out' }); gsap.from('.hero .btn', { duration: 1, opacity: 0, y: 20, delay: 0.3, ease: 'power3.out' }); // Scroll animations gsap.utils.toArray('.fade-on-scroll').forEach(function(elem) { gsap.to(elem, { scrollTrigger: { trigger: elem, start: 'top 80%', toggleActions: 'play none none none' }, opacity: 1, y: 0 }); }); }); ``` Output: - `clients/{client}/website/js/main.js` --- ### Fase 5: QA e Testing Obiettivo: Verificare qualità del sito. Azioni: 1. HTML validation: - Tag chiusi correttamente - Attributi required presenti - Nesting corretto 2. CSS check: - Responsive su mobile/tablet/desktop - Color contrast (accessibility) - No overflow o layout broken 3. JS check: - Console errors (nessuno) - Funzionalità testate (menu, form, accordion) - Animazioni fluide 4. SEO check: - Title tag unico per pagina - Meta description presente - Heading hierarchy corretta - Alt text su immagini 5. Performance: - Immagini ottimizzate (se presenti) - CSS/JS minified (opzionale) - No console warnings Output: - `clients/{client}/website/qa/qa_website.md` --- ## Output | File | Formato | Descrizione | |------|---------|-------------| | `clients/{client}/website/index.html` | HTML | Homepage | | `clients/{client}/website/pages/.html` | HTML | Altre pagine | | `clients/{client}/website/css/main.css` | CSS | Stylesheet | | `clients/{client}/website/js/main.js` | JS | Interattività | | `clients/{client}/website/assets/` | Folder | Immagini, font, etc. | | `clients/{client}/website/qa/qa_website.md` | Markdown | QA checklist | --- ## References ### Technical (Web Developer Specific) - [html_semantics.md](./references/html_semantics.md) — Semantic HTML best practices - [css_layout.md](./references/css_layout.md) — Layout, responsive, Bootstrap - [js_interactivity.md](./references/js_interactivity.md) — jQuery + GSAP patterns ### UX/Design Patterns (Shared References) Consultare PRIMA di implementare: - [hero_sections.md](../references/hero_sections.md) — Hero checklist, formula, layouts - [design_patterns.md](../references/design_patterns.md) — Card grid, split layout, testimonial, FAQ patterns - [navigation_patterns.md](../references/navigation_patterns.md) — Primary nav, mobile nav, IA - [conversion_patterns.md](../references/conversion_patterns.md) — CTA hierarchy, forms, friction reducers - [layout_systems.md](../references/layout_systems.md) — Grid, spacing, vertical rhythm Flusso consigliato: 1. Leggi pattern UX da shared references (COSA fare) 2. Implementa con technical references (COME codificare) --- ## Note Edge Cases: - Nessun design system: Usa Bootstrap default + stile minimal - Solo landing page: Crea single-page con anchor navigation - Cliente fornisce asset: Copia in `assets/` e usa percorsi corretti - Animazioni complesse: Usa GSAP timeline, documenta in decision log Limitazioni: - Siti statici (no backend, no database) - Form richiedono servizio esterno (Formspree, Netlify Forms) o backend - E-commerce non supportato (richiede piattaforma dedicata) --- _Skill creata per agency_v3_1 suite_