ETE PH) Volu Desarrollo Mobile Ure CCM AU Ecl etal P42) Estructura del Sitio - Formulario de Contacto Video y Redes SocialesEe PEs) DESARROLLO MOBILE I vost por Desarrollo Mobile Desarrollo Mobile Optinizacon para 10s eee eee ery tc Disefia aplicaciones web Mobile First, desde una web estatica hasta 100% dinamica. Convierte tu web en PWA, la proxima generacion de aplicaciones moviles y de escritorio.Ee PEs) Desarrollo Mobile El Universo Frontend y Materialize Estructura del Sitio - Formulario de Contacto Video y Redes Sociales CES Titulo: Desarrollo Mobile -Vol. 1 / Autor: Fernando Omar Luna Coordinador editorial: Miguel Lederkremer / Edicién: Claudio Penia Diseio y Maquetado: Marina Mozzetti / Coleccién: USERS ebooks - LPCU292, Copyright © MIXIX. Es una publicacin de Si Ediciones. Hecho el depésito que marca la ley 11723, Todos los, derechos reservados. Esta publicacién no puede ser reproducida ni en todo ni en parte, por ningin medio actual © futuro, sin el permiso previo y por escrito de Six Ediciones. Su infraccién esta penada por las leyes 11723, y 25446. La editorial no asume responsabilidad alguna por cualquier consecuencia derivada de la fabricacién, funcionamiento y/o utiizacién de los servicios y productos que se describen y/o analizan. Todas las marcas mencionadas en este libro son propiedad exclusiva de sus respectivos duefias. Libro de edicién argentina, Luna, Femando O. Desarrollo mobile 1 / Fernando O. Luna. - 1a ed . - Ciudad Auténoma de Buenos Aires : Six Ediciones, 2019. Libro digital, PDF - (Desarrollo Mobile ; 1) Archivo Digital: descarga y online ISBN 978-987-4958-14-3 1. Disefio de Software. 2. Aplicaciones Web. I. Titulo. CDD 005.384 PREMIUM. REDUSERS.COMEe PEs) Este curso se divide en tres e-books. En el primer volumen conoceremos Materialize CSS, y comenzaremos a ver cémo implementar la barra de navegacidn, los titulos, los parrafos y las imégenes en el disefio de un sitio web adaptado para méviles. Luego profundizaremos en la manera de integrar audio y video en nuestros desarrollos, y en la forma de sumar contenido desde y hacia las diferentes redes sociales mas populares a la fecha. En el segundo volumen de la coleccidn potenciaremos la barra de navegacidn, y la integraremos en modo lateral, tal como la utilizan las aplicaciones nativas. Luego aprenderemos las diferentes opciones de botones que podemos aplicar con Materialize, como integrar mensajes de tipo tooltip y toast, cémo integrar mapas dindmicos, de qué forma leer y mostrar datos utilizando JSON, y cémo explotar al mdiximo las herramientas para desarrollador de Google Chrome y los distintos emuladores moviles del mercado. En el tercer volumen aprenderemos a acondicionar nuestros desarrollos web adaptandolos a las diferentes plataformas moviles. Veremos como integrar metatags para la plataforma iOS, qué nos ofrece Onsen.io, cdmo convertir nuestra web en una PWA e instalarla en Android e iOS, y de qué modo hacer una web 100% desconectada de Internet. También veremos cémo optimizar las imagenes integradas en una web y la forma de ofrecer una experiencia 360° con imagenes panordmicas Desarrollo Desarrollo Mobile Mobile a8 Cra) oe PREMIUM.REDIEe PEs) DESARROLLO MOBILE | Prologo La Web es todo. Desde ella no solo nos informamos, sino que también compramos productos y servicios, pagamos impuestos, consumimos peliculas y musica, realizamos reservas en restaurantes y volcamos opiniones sobre lugares visitados. Ademds leemos mails, ponemos recordatorios en un calendario € interactuamos varias veces al dia con las redes sociales, entre un sinfin de cosas mas. Y quienes desarrollamos software sabemos que la Web fue, es y serd durante muchisimo tiempo mas el puntapie inicial de nuestro dia a dia. Cada vez estard mas comprometida con nosotros y, a su vez, mas integrada; y todo esto seguird ocurriendo desde nuestro bolsillo, desde nuestro dispositive mévil. Por eso, los invitamos a recorrer la serie de e-books que integran esta obra, para conocer los principales secretos del desarrollo web para dispositivos méviles y saber cémo encarar el disefio e integraci6n de las PWA, la proxima generacién de aplicaciones méviles y de escritorio, que ya lleva un tiempo conquistando las pantallas méviles. Fernando Omar Luna Es Analista de Sistemas y Technical Writer. Lleva mas de 25 afios desarrollando software para diferentes plataformas, y algo mas de una década colaborando como autor de publicaciones técnicas orientadas a la programacién y las nuevas tecnologias. Su pasion se divide entre la programacién, la electronica y la educacién, siendo este ultimo el motivo por el cual se encuentra cursando un profesorado que le permita ejercer profesionalmente su pasion por el desarrollo del software. PREMIUM.REDUSERS.COMEe PEs) Introducci6n al desarrollo frontend y Materialize. 6 Perfil de un frontend developer / Visual Studio Code / Desarrollo Web / HTMLS / CSS / JavaScript / Ejemplos practicos EI universo Material Design. 14 Donde profundizar mas sobre MD puro / Materialize CSS / Estructura de un proceso Materialize CSS / Estructura HTML / Integracién de CSS, fuente tipogratica y JS / Iconografia Verificar la funcionalidad / CSS Adicional / JavaScript adicional / Personalizar la fuente tipografica / Mas informacién sobre tipografias / Clases CSS Barras de navegacion... 26 Navbar / Una barra de navegaci6n funcional / Insertar un logo grafico / Uso de clases segiin display / Ejerecicio praictico: Barra de meni superior responsiva / Testear el comportamiento responsivo / Redimensionar la pagina / Optimizacién del meni para dispositivos méviles / Material Icons / Testear su comportamiento / Ejemplos practicos Footer: construir un pie de pagina funcional. 34 Disefio del footer / Fijar el footer / Agregar contenido al pie de pagina Estructura y estilos Web.. 40 Tipografias / Tipografias Web / Google Fonts / Blockquotes (énfasis e parrafos) / Flow Text / Parrafos editables (content editable) / Imagenes: la clase materialboxed / Breadcrumbs (jerarquia de navegaci6n) / Pagination (estructurar el cimulo de informacién) Formulario de contacto... ee +50 Estructura de los text input de Materialize CSS/ Agregar iconos a cada campo / Disefio de un formulario / Validacién de datos / Mensajes de confirmacién 0 error personalizados / Botén de envio de formulario / Metatag form / El servicio Mailthis.to / Ejercicio practico: disefio de una web corporativa / Pautas complementarias para el diseiio del ejercicio / Prueba del sitio web en dispositivos mdiles. PREMIUM.REDIAudio y Video.. El elemento