Disseny Web :
Aquest curs està dirigit a professionals , estudiants i particulars que volen , no només realitzar un lloc web, sinó
introduir l'àrea del desenvolupament de projectes en línia.
objectius :
Amb aquest curs aprendràs a treballar a nivell professional amb Adobe Dreamweaver CS6 per a la realització de continguts en línia i aconseguir una base sòlida per treballar com a dissenyador i programador web .
Aprofundiràs en el coneixement de la maquetació de pàgines web utilitzant CSS3 i HTML5 , els nous estàndards web .
Introduirem el treball amb frameworks per facilitar el desenvolupament i rendibilitzar la teva feina .
Durant el desenvolupament del curs es desenvoluparà un projecte web en línia.
Edge Animate :
Adobe Edge Animate CC és el Flash per HTML5 , permet crear animació amb o sense interactivitat per a navegadors moderns d'ordinador , smartphones i tablets , de forma fàcil i ràpida .
¿ Què aprendràs en aquest curs d'Edge Animate CC ?
1 . Generar contingut gràfic des Photoshop o Illustrator . Reutilitzar il · lustracions vectorials de Flash .
2 . Crear composicions noves , importació de gràfics per a la web .
3 . Crear diferents tipus d'animacions per banners , intros ...
- keyframing : crear fotogrames clau i Edge Animate crea una transició gradual .
- Pining ( inversa - directa) : una forma simplificada i flexible de keyframing , modificant les propietats dels objectes a l'escenari, interactivament amb el ratolí .
- Mostra - amagar : activar desactivar keyframe visibilitat .
- Flipbook : animació frame a frame .
- Animacions niades amb símbols : molt útil en objectes amb animacions secundàries, terciàries ...
- Rutes de moviment : amb traçat vectorials editables ( novetat Edge Animate CC ) .
5 . Posicionament relatiu vs . absolut : posició i escala d'objectes , no en píxels sinó percentual .
6 . Afegir interactivitat .
7 . Integració amb fluxos de treball :
Enriquir el contingut d'un projecte web , amb efectes animats o interactius .
Exportació i integració de l'animació a : Dreamweaver , DPS ( revistes digitals InDesign ) , IbooksAuthor ...
Usos d'Edge Anima't CC
• Animacions web HTML5 : banners , intros ... mitjançant una interfície gràfica , sense escriure codi CSS3 . Suportat per navegadors moderns , en ordinador , tablets i smartphones .
• Animació interactiva : usant JavaScript, API propi Edge Animate , jQuery i altres llibreries JavaScript.
• Integració amb : Dreamweaver i witgets per a publicacions digitals DPS - InDesign i IbooksAuthor .
La creació del contingut gràfic s'ha de fer des Illustrator , Photoshop ...
Disseny Web :
Introducció
Navegadors i editors de pàgines web ; Diferents tipus de dispositiu ; HTML : estructura i semàntica ; CSS : format i maquetació ; JavaScript: interactivitat ; Continguts estàtics i dinàmics ; Costat client , costat servidor ; Concepte de lloc i pàgina web
Interfície i entorn de treball WYSIWYG
Maneres de visualització : codi , disseny , en viu ; Configuració de panells ; Configuració de navegadors i extensions ; Configuració del servidor FTP ; L'entorn de treball .
elements
Text . Propietats i formats . Estils i etiquetatge ; Imatges . Tipus i formats utilitzats. Edició i integració amb Adobe Photoshop . Mapes d'imatges . efectes ; Hipervincles . Tipus d'enllaços i atributs ; Formularis . Maquetació i disseny . Integració amb programes d'enviament. Validacions ; Taules . Importació de dades externes ;
Introducció a CSS
Concepte de fulls d'estil : on declarar codi css . Associar fulles d'estil a documents; Panell CSS; Tipus de selectors : redefinir element HTML , classe , id, contextules , grup de selectors ; Selecció múltiple de classes CSS : simultàniament a un mateix element HTML , de manera assistida ; Maquetació ús d'etiquetes div des de zero (concepte de float , clear ) ; Layouts per defecte de DreamWeaver CS6 ; Creació d'un menú de navegació
Mòduls de javascript ( ginys de Spry )
Panell contraible , Acordió , Panells en fitxes , Barra de menús, XML ; Comportaments : pop - menu , mostrar - amagar , alert ...
Ús d'APIs externes
Concepte de mash- up ; Utilització d'APIs i integració en el projecte ( Google Maps , YouTube , etc )
Posada en línia i validacions
Comprovació de vincles i compatibilitat amb els diferents navegadors ; Validació d'estàndards ; sincronització
Novetats en HTML5 i CSS3
Estudi dels nous elements i exemples d'aplicació ; La importància de la semàntica en l'estructura web i l'etiquetatge de continguts per al posicionament en cercadors
Media Queries CSS
Creació de layout ; Mitjanes CSS2 : impressió , dispositius mòbils antics ; Mitjanes condicions CSS3 : detecció de diferents amples de pantalla escriptori , iPad , iPhone
Maquetació utilitzant Responsive Web Design
Layout de reixeta líquida . Adaptació i reestructuració de continguts sensibles a diferents mides de pantalla .
HTML5
Etiquetes semàntiques : header , footer , nav , section , article , aside ; Modernizr i compatibilitat amb navegadors antics ; Treball off - line ; Àudio i vídeo natiu ; SVG arxiu vectorials nadius ; Formularis millorats
CSS3
Aplicació de les noves propietats i atributs . Exemples d' ús; Incrustació de fonts; Nou panell d'animacions CSS3
WebFonts
Configura conjunts de fonts web compatibles , Estudi de les diferents alternatives ( Cufón , Google fonts , Typekit , etc )
Edge Animate :
Què és Edge Animate i Interfície
- Animació HTML5 vs Flash - SWF . Descàrrega , requeriments mínims . Versió CC trial o subscripció Creative Cloud . Compatibilitat entre versions .
- Recórrer finestres . Eines . Tecles acceleradores . Espais de treball . Canviar idioma .
- Panells : Escenari , Línia de temps , Elements , Propietats (veure equivalència amb regles CSS ) .
Generació de contingut gràfic i importació a Edge
- Flash: reutilitzar contingut gràfic .
- Illustrator i Photoshop : exportació de múltiples pàgines , en format jpg , png , SVG ( vectorial HTML5 ) .
- Panell Propietats: dimensions i color l'escenari ...
- Importació i multi -importació : arxius gràfics suportats . Actius carpeta images .
- Selecció i Edició d'objectes : Eina de selecció i Transformar . Alinear , distribuir , organitzar ( ordre d'apilament ) .
Animacions no interactives
- Tipus d'animació: keyframing , pinning ( inversa - directa) , Mostra - amagar , flipbook .
- Reemplaçar imatge i editar en origen .
- Efectes d'acceleració Easing a canals d'animació : lineal , acceleració , frenada , rebot ...
- Afegir animació a contingut HTML existent.
- Símbols i implantació. Compartir símbols ( importació - exportació ) .
- Rutes de moviment transformables .
- Màscares de retallada i filtres .
- Disseny líquid : objectes amb escala i posició percentual . Centrat i escalat de l'Escenari .
- Textos : Fonts web . Text viu seleccionable i indexable a Google. Animació amb propietats de text p.e. mida , interlletres ...
Animacions interactives amb fragments de codi
S'obtenen sentències predefinides , sense necessitat d'escriure codi .
- Animació amb bucle , assignació d'accions a un Activador .
- Hipervincles : a URL pàgines web remotes .
- Textos dinàmics : canviar el contès d'una caixa de text dinàmicament .
- Obtenir símbol : trucar a la línia de temps independent d'un símbol , des d'un altre nivell .
- control àudio, etc ...
àudio
- Importació arxius d'àudio compatibles amb HTML5 mitjançant un nou Panell , sense escriure codi .
- Associar esdeveniments d'àudio a objectes oa un activador en la línia de temps .
- Crear amb transicions amb propietat volum per intensificar o esvair so .
Animacions interactives avançades
- Conmumtador Botó desplegar - replegar menú : Control dinàmic de la línia de temps amb JavaScript . Etiquetes -label . Variables Boolean i condicionals .
- Drag and Drop : Arrossegar i deixar anar objectes .
- Random : animació amb moviment aleatori .
- Efecte Paralax : animació interactiva sincronitzada pe amb la posició de la barra d' scroll .
- Carregar contingut HTML dins un objecte .
- Càrrega de scripts : importació de biblioteques JavaScript ( pe jQueryUI ... ) mitjançant el nou Panell .
Testejar , provar l'animació en :
- in - stage : a l'escenari. in - browser : al navegador. Assignar diferents navegadors d'escriptori.
- simulador - IOS : viewport . Dispositius : smartphone o tablet ( iPad , iPhone , Android ... )
Pre- publicació i publicació
- Pantalla d' Precàrrega per a web i DPS . Pantalla de Nivell - inferior per a navegadors antics que no suporten HTML5 .
- Integració amb Dreamweaver CS6 i CC . Publicacions digitals : DPS , IbooksAuthor .
Novetats i millores de la versió Edge Animate CC 3.0
- Àudio : importació arxius d'àudio compatibles amb HTML5 mitjançant nou Panell , sense escriure codi . Associar esdeveniments d' àudio a un activador en la línia de temps o objectes i crear transicions (pe intensificar o esvair so ) .
- Centrat i escalat de l'Escenari : mantenint la proporció respecte a la finestra del navegador .
- Imatge de pòster . OAM amb transparència : per DPS actualment no suportada , per a publicacions PDF , només PNG i JPG .
- Animació amb rutes de moviment millorades : basat en traçat vectorials editables , opció d'auto - orientació i escalar i girar .
- Esdeveniment swipe : escombrat horitzontal a dreta i esquerra amb el ratolí o dit .
- Eina comptagotes : prendre i emmagatzemar mostres de color d'objectes de l'escenari .
- Càrrega de scripts : afegiu biblioteques JavaScript ( pe jQueryUI ... ) per ampliar els seus projectes Anima't amb el nou panell de càrrega d'scripts . La importació pot ser des de fonts locals i en línia .
A Microgestió oferim de manera directa, sense tràmits, un descompte en els nostres cursos per als següents col·lectius:
15% de descompte per a Estudiants.
15% de descompte per a Aturats.
15% de descompte per a Autònoms.
A més si véns al curs amb 1 amic t'oferim un 5% de descompte addicional i si véns amb 2 un 10%. *
Empreses:
Realitzem els tràmits necessaris per gestionar la bonificació del curs mitjançant la Fundació Tripartida per a la Formació en l'Ocupació sense cap cost addicional.
2 alumnes inscrits en el mateix curs 5% de descompte. *
3 alumnes inscrits en el mateix curs 10% de descompte. *
* Descomptes no acumulables a altres promocions.
