Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ANDREA SACCÀ
Follow me! @andreasacca @magentiamo
Web Designer & Frontend Developer,
Sviluppatore Frontend Certificato Mage...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Magento 2
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Introduzione...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Introduzione...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
REQUISITI DI...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Introduzione...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Introduzione...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Introduzione...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
RWD: Respons...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Le novità de...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Creare un Te...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Creare un Te...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Creare un Te...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
8. Controlla...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Creare un Te...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Novità del D...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Novità del D...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Novità del D...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Risorse util...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
Magento 2 Do...
Magento2: Tutte le novità per lo sviluppo Front End
ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
GRAZIE.DOMAN...
Magento 2 Frontend le novità - Meet Magento 2015
Upcoming SlideShare
Loading in …5
×

Magento 2 Frontend le novità - Meet Magento 2015

20,840 views

Published on

Tutte le maggiori novità sullo sviluppo fronend per la nuova versione del miglior CMS per l'ecommerce: Magento.
Nella nuovissima e rivisitata Magento2 molti sono i cambiamenti e le novità da esplorare.

Published in: Design
  • Thanks for sharing nice presentation. I would like to suggest one more Magento 2 multipurpose and responsive theme Kosmic. I have puchaged and installed just before a few days. I like the most in this theme is that have many features & premium extenions free, easy customization & well written code. http://goo.gl/fj4BZ9
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Magento 2 Frontend le novità - Meet Magento 2015

  1. 1. ANDREA SACCÀ Follow me! @andreasacca @magentiamo Web Designer & Frontend Developer, Sviluppatore Frontend Certificato Magento, Autore del libro Mastering Magento Theme Design, CEO & Founder 1604lab S.R.L. Ideatore e Fondatore di Magentiamo.it Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15
  2. 2. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Magento 2
  3. 3. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento2 Le Novità del Front End Creare un Tema per Magento2 Le Novità del Design del Back End Risorse Utili Magento 2 1 2 3 4 5
  4. 4. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento2 1
  5. 5. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 REQUISITI DI SISTEMA per Magento2 Guida all’installazione --> http://goo.gl/qdgA7X Apache: 2.2 or 2.4 PHP: >=5.4.11 o 5.5.x MySQL: 5.6.x Introduzione a Magento21
  6. 6. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento21 Quando uscirà Magento 2?
  7. 7. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento21 https://github.com/magento/magento2
  8. 8. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Introduzione a Magento21 COMPOSER - https://getcomposer.org/ { “name”: “magentiamo/theme-frontend-yuki”, “description”: “Super Duper Theme for Magento2”, “require”: { “php”: “~5.4.11|~5.5.0”, “magento/theme-frontend-blank”: “0.42.0-beta1”, “magento/framework”: “0.42.0-beta1”, “magento/magento-composer-installer”: “*” }, “type”: “magento2-theme”, “version”: “0.42.0-beta1”, “license”: [ “OSL-3.0”, “AFL-3.0” ], “extra”: { “map”: [ [ “*”, “Magentiamo/Yuki” ] ] } ESEMPIO FILE COMPOSER.JSON
  9. 9. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End 2
  10. 10. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 Struttura Frontend MAGENTO 1.x ROOT |--- APP | |--- design | | |--- frontend | | |--------| package | | |--------| theme ROOT |--- SKIN | |--- frontend | | |--- package | | |--------| theme
  11. 11. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 Struttura Frontend MAGENTO 2 ROOT |--- APP | |--- design | | |--- frontend | | |--------| package | | |--------| theme ROOT |--- SKIN | |--- frontend | | |--- package | | |--------| theme
  12. 12. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 Struttura Frontend MAGENTO 2 MAGENTO 2 |--- APP | |--- design | | |--- frontend | | |--------| package | | |--------| theme WEB |--- css |--- fonts |--- images |--- js THEME |--- etc |--- media |--- web |--- composer.json |--- theme.xml
  13. 13. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 view.xml - Un file per le dimensioni delle immagini ... <var name=”category_page_grid:type”>small_image</var> <var name=”category_page_grid:width”>250</var> <var name=”category_page_grid:ratio”>1</var> <var name=”category_page_grid:height”>250</var> ...
  14. 14. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 MODULO (Es. Catalog) |--- view | | |--- adminhtml | | |--- base | | |--- frontend | | | |--- layout | | | |--- templates | | | |--- web XML PHTML IMG, JS, CSS “View” Integrata nel modulo
  15. 15. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 XML PAGE LAYOUT - Wireframe della Pagina <CONTAINER> ------------------------------> Blocco Struttura <REFERENCECONTAINER> Per definire il blocco “Madre” ! THE <ACTION> INSTRUCTION IS DEPRECATED. DO NOT USE IT! <MOVE> Per spostare un blocco da un contenitore ad un altro <REMOVE> Per eliminare un blocco <UPDATE> Per aggiornare gli “handle” magento2/app/code/Magento/Theme/view/frontend/page_layout/2columns-left.xml
  16. 16. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 XML PAGE LAYOUT - Wireframe della Pagina <layout xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLoca- tion=”../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_layout.xsd”> <update handle=”1column”/> <referenceContainer name=”columns”> <container name=”div.sidebar.main” htmlTag=”div” htmlClass=”sidebar sidebar-main” after=”main”> <container name=”sidebar.main” as=”sidebar_main” label=”Sidebar Main”> <remove name=”report.bugs”/> <container> </container> <move element=”name.of.an.element” destination=”name.of.destination.element” as=”new_ alias” after=”name.of.element.after” before=”name.of.element.before”/> </referenceContainer> </layout>
  17. 17. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 XML PAGE LAYOUT - Esempio Inserimento CSS <referenceContainer name=”head”> <block class=”MagentoThemeBlockHtmlHeadCss” name=”css-name”> <arguments> <argument name=”file” xsi:type=”string”>css/styles.css</argument> </arguments> </block> </referenceContainer>
  18. 18. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 Finalmente... JQUERY! JQUERY 1.8.2 JQUERY NO CONFLICT JQUERY LOADER WIDGET JQUERY TABS WIDGET JQUERY TRANSLATEINLINE WIDGET
  19. 19. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 LESS: Il Preprocessore per il CSS “Dinamico”
  20. 20. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 MAGENTO UI Library
  21. 21. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 RWD: Responsive Web Design Le novità del Front End MAGENTO 22
  22. 22. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 I Temi di default di Magento 2: BLANK
  23. 23. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End MAGENTO 22 I Temi di default di Magento 2: LUMA
  24. 24. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End2 Traduzioni Magento 2: Il Dizionario Nuova posizione per i file csvMAGENTO2 |--- APP | |--- i18n | | |--- Magento | | |--------| it_it | | | |-------- language.xml | | | |-------- composer.json | | | |-------- *.csv
  25. 25. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End2 CSV Traduzioni Magento 1.x 1. “Testo/Frase Originale”,”Traduzione” 2. “Add New Block”,”Aggiungi nuovo blocco” 3. “Add New Page”,”Aggiungi Nuova Pagina” 4. “All Countries”,”Tutte le Nazioni”
  26. 26. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Le novità del Front End2 CSV Traduzioni Magento 1.x 1. “Testo/Frase Originale”,”Traduzione”,”Meta Info 1”,”Meta Info 2” 2. “Add New Block”,”Aggiungi nuovo blocco”,”module”,”Mage_Cms” 3. “Add New Page”,”Aggiungi Nuova Pagina”,”theme”,”blank” 4. “All Countries”,”Tutte le Nazioni”,”theme”,”blank”
  27. 27. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Creare un Tema Magento2 3
  28. 28. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Creare un Tema MAGENTO 23 1. Crea la cartella del “Vendor” in MAGENTO2/app/design/frontend/Magentiamo 2. Al suo interno crea la cartella del “Theme” MAGENTO2/app/design/frontend/Magentiamo/Yuki 3. Crea un’immagine THEME/media/preview.jpg del tema 4. Dichiara il tema: Crea il file theme.xml nella cartella del tema <theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd”> <title>Magentiamo - Yuki</title> <!-- your theme’s name --> <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme’s preview image --> </media> </theme>
  29. 29. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Creare un Tema MAGENTO 23 5. Definisci la dimensione delle immagini in THEME/etc/view.xml 6. Crea la cartella “web”per i files statici MAGENTO2/app/design/frontend/Magentiamo/Yuki/web 7. Crea il file composer.json { “name”: “magentiamo/theme-frontend-yuki”, “description”: “Super Duper Theme for Magento2”, “require”: { “php”: “~5.4.11|~5.5.0”, “magento/theme-frontend-blank”: “0.42.0-beta1”, “magento/framework”: “0.42.0-beta1”, “magento/magento-composer-installer”: “*” }, “type”: “magento2-theme”, “version”: “0.42.0-beta1”, “license”: [ “OSL-3.0”, “AFL-3.0” ], “extra”: { “map”: [ [ “*”, “Magentiamo/Yuki” ] ] }
  30. 30. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 8. Controlla che il tema venga riconosciuto da Magento in ADMIN:Content > Design > Themes. Creare un Tema MAGENTO 23
  31. 31. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Creare un Tema MAGENTO 23 Creare un Tema MAGENTO 23 9. Attiva il tema in ADMIN: Stores > Configuration > Design
  32. 32. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Novità del Design del Back End 4
  33. 33. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Novità del Design del Backend MAGENTO 24
  34. 34. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Novità del Design del Backend MAGENTO 24
  35. 35. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Risorse utili per Magento2 5
  36. 36. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 Magento 2 Documentation https://magento.com/developers/magento2 Ben Marks Magento Community Evangelist http://bhmarks.com/blog/ GitHub Magento2 https://github.com/magento/magento2 Alan Kent Chief Magento 2 Architect https://alankent.wordpress.com/category/magento/ Magentiamo.it http://www.magentiamo.it/magento2 Risorse Utili MAGENTO 25 2MAGENTO
  37. 37. Magento2: Tutte le novità per lo sviluppo Front End ANDREA SACCA’ - Meet Magento Italy - @andreasacca #mmit15 GRAZIE.DOMANDE?  #mmit2015 Le novità del FrontEnd in #Magento2 @andreasacca @MeetMagentoIt ?

×