tag:blogger.com,1999:blog-75001859607719785502024-03-13T11:19:16.476-07:00Tomando café com um elefante e um pinguimleandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.comBlogger25125tag:blogger.com,1999:blog-7500185960771978550.post-79551455962067496172022-08-02T16:03:00.002-07:002022-08-02T16:03:22.322-07:00Ion-button e ion-card<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxkpX7LrM8VkGelPk6i6VCJTH2_72LLyEdOj5NzP1Hvr5v6Di5Aggrl0uf5sIN1ePqc9JtH6Mk_ybBRt6D99ZOQ0Lqav76XESXziikI9scSOT4BvKsmz_dk1YlfxcgBnyKZSeJ0_W_l-Z7xZB6GfjeyAmyARDi49X1KiW84Tfx5lh6_nKMax-itkG/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxkpX7LrM8VkGelPk6i6VCJTH2_72LLyEdOj5NzP1Hvr5v6Di5Aggrl0uf5sIN1ePqc9JtH6Mk_ybBRt6D99ZOQ0Lqav76XESXziikI9scSOT4BvKsmz_dk1YlfxcgBnyKZSeJ0_W_l-Z7xZB6GfjeyAmyARDi49X1KiW84Tfx5lh6_nKMax-itkG/s320/ionic-logo.png" width="320" /></a></div><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY6RgmXEnUw7C3UgO7YGtKGZVdoPmaL0cwla77s1Ii0ssAsXgam8cSG9iFnm7zIrUJuBBZeaS1TKLq5d0hG3CLhCaXYVMCdLpxzFSKDyfptEl7azvk8glK-eDQasxGlsOL0NBpbw1KuWwTV_mW906tDDhTHK9zxhVjoVmDeMN-wip91ZI30CKygKUq/s578/button001.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="578" data-original-width="295" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY6RgmXEnUw7C3UgO7YGtKGZVdoPmaL0cwla77s1Ii0ssAsXgam8cSG9iFnm7zIrUJuBBZeaS1TKLq5d0hG3CLhCaXYVMCdLpxzFSKDyfptEl7azvk8glK-eDQasxGlsOL0NBpbw1KuWwTV_mW906tDDhTHK9zxhVjoVmDeMN-wip91ZI30CKygKUq/s320/button001.png" width="163" /></a></div><p style="text-align: justify;"><span> </span>Vamos a mais dois componentes visuais do <u>framework Ionic</u>, o <b>ion-button</b> e o <b>ion-card</b>, são componentes essencialmente HTML, portanto, sua implementação é mais fácil.</p><p style="text-align: justify;"><span><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"> </span></span></span><span style="color: #3d85c6;"><b><span style="font-size: large;">ion-button</span></b></span></span></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>O <b>ion-button</b> é como o próprio diz um "botão" uma simples TAG já cria um botão</span></span><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc">. Vamos então iniciar a implementação propriamente dita. Vamos deixar o projeto limpo como na imagem abaixo para colocar o botão:</span></span></span></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"></span></span></p><div class="separator" style="clear: both; text-align: center;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbFoN8ok89yb5uwOew98UcO4kFB3rJKa1xxh1w6BGDplHGrpEz2UVZ03Wj4DjnHiEUURrymDIIrXuSzabj6azx4rbE5fl4TEVBAkwvJBe5C7yJy3NBKGvgk8QwP2IoUvMkIy9kwUkZ3F-2G7_8R08SN7fCIjxv2ii4dILHDLr4mNJhe97dVCobTS2m/s780/contentLimpo01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="308" data-original-width="780" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbFoN8ok89yb5uwOew98UcO4kFB3rJKa1xxh1w6BGDplHGrpEz2UVZ03Wj4DjnHiEUURrymDIIrXuSzabj6azx4rbE5fl4TEVBAkwvJBe5C7yJy3NBKGvgk8QwP2IoUvMkIy9kwUkZ3F-2G7_8R08SN7fCIjxv2ii4dILHDLr4mNJhe97dVCobTS2m/s320/contentLimpo01.png" width="320" /></a></span></span></div><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><br /><span class="Q4iAWc"></span></span></span><p></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"><span> </span>Com o código "limpo" coloque o código como abaixo:</span></span></span></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"></span></span></p><div class="separator" style="clear: both; text-align: center;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtTYXptMLnTHn7-cgIXxFqAGLmMQxklDSt4R9HpGJBdSWX-iI0qz_p3GzY1FAh7m9jqjzTfxxMGOotb3g9g0NtQfxCeU1y8vSn6xiqOBJGgK15GhDQjUAcrGU8ocQttJQon3tlx5BFAYA0ld-wqOak3p--YZHh21_kKT26Zmc6q118-JBrYK5ITpnK/s627/botao001.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="195" data-original-width="627" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtTYXptMLnTHn7-cgIXxFqAGLmMQxklDSt4R9HpGJBdSWX-iI0qz_p3GzY1FAh7m9jqjzTfxxMGOotb3g9g0NtQfxCeU1y8vSn6xiqOBJGgK15GhDQjUAcrGU8ocQttJQon3tlx5BFAYA0ld-wqOak3p--YZHh21_kKT26Zmc6q118-JBrYK5ITpnK/s320/botao001.png" width="320" /></a></span></span></div><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><br /><span class="Q4iAWc"></span></span></span><p></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"><span> </span>E a saída dele será esta:</span></span></span></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"></span></span></p><div class="separator" style="clear: both; text-align: center;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2-LoVWRkVDbqISHzQoBHCKypGsvKz5Dye6V86Hr7EcrpzZJGLpErjsZese262GfNvLtsfQp3L7s0knD0ilyAD8YhtKmoPMvupWSvSB583eagP55Yw1QWFajNHcI6J0RwqdY8-q5yAbcMRlMUjLNBbH6KxshjpHeN8Gcg4CR095ASKqB08bLXHARpy/s615/botao002.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="615" data-original-width="424" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2-LoVWRkVDbqISHzQoBHCKypGsvKz5Dye6V86Hr7EcrpzZJGLpErjsZese262GfNvLtsfQp3L7s0knD0ilyAD8YhtKmoPMvupWSvSB583eagP55Yw1QWFajNHcI6J0RwqdY8-q5yAbcMRlMUjLNBbH6KxshjpHeN8Gcg4CR095ASKqB08bLXHARpy/s320/botao002.png" width="221" /></a></span></span></div><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><br /><span class="Q4iAWc"></span></span></span><p></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"><span> </span>E pronto tão fácil quanto isto, óbvio que existem personalizações como tamanho, troca de cor etc. e que veremos melhor estas mudanças em diversos componentes para a elaboração de layout de telas em post's posteriores.</span></span></span></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"></span></span></p><div class="separator" style="clear: both; text-align: center;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGaN49_u8NHk6gQKcAZcfW14JJ75xeveU_2sRsrlLPZRnPL3w4sczBB5ZkslsSAC1u6ckmfPeIiQr6eJ2WqiuPJS0il9FsWKne-o_ZJ_rghQphU1ZjqZKusjtgv3AdqHmvIYt2vGDOLg3KccGyMeIndYXUyxv9LWUFV5ZN3LgdjP6HYKCcjkzFEKW/s579/card001.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="579" data-original-width="295" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGaN49_u8NHk6gQKcAZcfW14JJ75xeveU_2sRsrlLPZRnPL3w4sczBB5ZkslsSAC1u6ckmfPeIiQr6eJ2WqiuPJS0il9FsWKne-o_ZJ_rghQphU1ZjqZKusjtgv3AdqHmvIYt2vGDOLg3KccGyMeIndYXUyxv9LWUFV5ZN3LgdjP6HYKCcjkzFEKW/s320/card001.png" width="163" /></a></span></span></div><br /><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"><span><span style="color: #3d85c6;"><b><span style="font-size: large;">ion-card</span></b></span></span></span></span></span><p></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>O <b>ion-card</b> podemos considerá-lo para um melhor entendimento como se fosse uma postagem em uma rede social, sim, aquele layout clássico que começa com um cabeçalho com o avatar do usuário seguido do seu nome, logo abaixo uma frase de "impacto" e a cereja do bolo a imagem que pode ser uma selfie ou outra imagem qualquer, logo depois da imagem botões de "gostei" ou "like", compartilhe, comentários e etc., enfim, um post padrão. </span></span></span></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>Mas a idealização do <b>ion-card</b>, é mais uma referência à algo mais cultural estadunidense, você já deve ter visto filmes em que algum personagem vai discursar ou falar algo importante para alguém e este personagem leva "cartões" para não se perder no que vai falar. E o <b>ion-card</b>, tem esta "cara" de cartão, você consegue perceber pela sombra que o envolve. </span></span></span></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>Muito bem vamos ao que interessa a implementação! Vamos implementá-lo logo abaixo do <b>ion-button</b> que fizermos anteriormente, ok?! Então é só copiar o código mostrado na imagem abaixo:</span></span></span></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"> </span></span></span></p><div class="separator" style="clear: both; text-align: center;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwwx6hqI8ptuwl7fzqFX4laJj7vRXvAXTj6DbBBz7IOiCawv5nwqOWBspmYmpDaKjtMJxTg4xHijmiQGXDgFfdQQ2uGdmuBLZjKo0PP60Q4zfEdk_tJ6_nuXDRpUyDdfjeVd4vGQpA215UAsjesP8o5P8ZTLXEhFvy8J2QG3VzNMz6F9Z5VRRfmUz/s818/card002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="358" data-original-width="818" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwwx6hqI8ptuwl7fzqFX4laJj7vRXvAXTj6DbBBz7IOiCawv5nwqOWBspmYmpDaKjtMJxTg4xHijmiQGXDgFfdQQ2uGdmuBLZjKo0PP60Q4zfEdk_tJ6_nuXDRpUyDdfjeVd4vGQpA215UAsjesP8o5P8ZTLXEhFvy8J2QG3VzNMz6F9Z5VRRfmUz/s320/card002.png" width="320" /></a></span></span></span></div><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><br /></span></span></span><p></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>E vamos ver como ele vai ficar renderizado no celular:</span></span></span></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"> </span></span></span></p><div class="separator" style="clear: both; text-align: center;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlmQhQKFdaZekXRpGR94DSjh9wCgW68joCvGS3RbAtZkClA8pjKIz4aupQjj21yvaNsP93UJcFvw6I7k6LnBengxXbBRCWyfHsPFAONhBPXxaiFuo0gSKYFz0t9qQCE6HolnMGxxSQfY1jGZr7U0-Jd8FtvjniV8SgMn-avNMfBrAod7jklWKT_6t0/s615/card003.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="615" data-original-width="453" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlmQhQKFdaZekXRpGR94DSjh9wCgW68joCvGS3RbAtZkClA8pjKIz4aupQjj21yvaNsP93UJcFvw6I7k6LnBengxXbBRCWyfHsPFAONhBPXxaiFuo0gSKYFz0t9qQCE6HolnMGxxSQfY1jGZr7U0-Jd8FtvjniV8SgMn-avNMfBrAod7jklWKT_6t0/s320/card003.png" width="236" /></a></span></span></span></div><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><br /></span></span></span><p></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>Vamos agora discutir algumas lacunas: perceba que toda estrutura é sustentada pela TAG <b>ion-card</b>, e temos outras 4 TAG's dentro dela: </span></span></span></p><ul style="text-align: left;"><li><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><i><b><span></span>ion-card-header:</b></i> que delimita a região dentro do <b>ion-card</b> que será para o cabeçalho do mesmo.</span></span></span></li><li><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span></span><i><b>ion-card-subtitle:</b></i> que é reservado para subtítulos já com super própria personalização padrão.</span></span></span></li><li><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><i><b>ion-card-title:</b></i> que é reservado para título do <b>ion-card</b> que também possui seu próprio padrão.</span></span></span></li><li><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><i><b>ion-card-content</b></i>: que é a região que conterá aquilo que queremos que o usuário realmente veja, dê a atenção, o conteúdo que o componente mostrará para o usuário.</span></span></span></li></ul><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>Concluindo, temos o <b>ion-button</b>, que não há muito segredo em colocá-lo em seu projeto, e usamos muitos botões em nossos projetos de todas as formas e tamanhos, já o <b>ion-card</b> utilizaremos quando queremos separar determinada coisa na tela, por exemplo se estivermos desenvolvendo um aplicativo de vendas poderemos colocar cada produto em um <b>ion-card</b>, dando a sensação ao usuário de separação e organização. </span></span></span></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>Espero que tenham gostado, qualquer dúvida deixe nos comentários, terei prazer em ajudá-los, grande abraço e fiquem com Deus!!! <br /></span></span></span></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-65138394879768181412022-07-26T15:55:00.002-07:002022-07-26T15:57:29.702-07:00Ion-badge e ion-breadcrumbs<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SntocvnsGkLq7BIVPN69z8pjytZPykyNBvrph3NIQGuELg5ld5qFkiFGI5VUtj8b9s65LOsKObkAe27VtX8hzUyx_RFVWrfX50h65OS5CcB-ZoKVMBvW2Mfogp0fQd8Z-avcF5F9p9tD4zNoW_tBi8oARlMMK5RFC3KlvKpSOx1qEMjpaWXUgAIn/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7SntocvnsGkLq7BIVPN69z8pjytZPykyNBvrph3NIQGuELg5ld5qFkiFGI5VUtj8b9s65LOsKObkAe27VtX8hzUyx_RFVWrfX50h65OS5CcB-ZoKVMBvW2Mfogp0fQd8Z-avcF5F9p9tD4zNoW_tBi8oARlMMK5RFC3KlvKpSOx1qEMjpaWXUgAIn/s320/ionic-logo.png" width="320" /></a></div><p></p><div style="text-align: justify;"><span> </span>Olá galerinha, como estes dois componentes são de fácil entendimento e de fácil implementação resolvemos, os dois componentes são ion-badge e ion-breadcrumbs. Lembrando que para os exemplos utilizamos o modelo blank, pelo simples
fato de ser o modelo em branco, sem nada, se você não entendeu sugiro a
leitura deste <a href="https://cafeelefantepinguim.blogspot.com/2022/06/modelos-de-apps-ionic-para-comecar-um.html" target="_blank">artigo</a>.</div><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUxwyiRncmEZ0JhoxtIoieGC8JDJ9oYqyKxQyaOIcny-xUXLTDvrJEUDz4bSvYg-4J-BBw_j95cUtATOLq7-0sHjcTOMd7Ya1ZdGDKU4La6MPjBRP8UhMjRZqzYwvv9guMlnZpWd0f9Wg8lQUL5EgMuQuc-lzVokBEIJNaTfBe9CATRrrVjBbaGS6/s580/badge001.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="580" data-original-width="295" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUxwyiRncmEZ0JhoxtIoieGC8JDJ9oYqyKxQyaOIcny-xUXLTDvrJEUDz4bSvYg-4J-BBw_j95cUtATOLq7-0sHjcTOMd7Ya1ZdGDKU4La6MPjBRP8UhMjRZqzYwvv9guMlnZpWd0f9Wg8lQUL5EgMuQuc-lzVokBEIJNaTfBe9CATRrrVjBbaGS6/s320/badge001.png" width="163" /></a></div> <span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"> </span></span></span><span style="color: #3d85c6;"><b><span style="font-size: large;">ion-badge</span></b></span><p></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>O ion-badge geralmente aparecem próximos a outro elemento.</span></span> <span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="1"><span class="Q4iAWc">Normalmente, eles contêm um número ou outros caracteres que</span></span><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"> podem ser usados como uma notificação de que há itens adicionais ou indicam quantos itens existem daquela determinada coisa.</span></span></span></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"><span> </span>Já dê aquele "ionic serve" maroto e com o projeto aberto, limpe o ion-content como na imagem abaixo:</span></span></span></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"></span></span></span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNaDOOKA6zLW0DBaa2R83a_t3VweqBgBNbgtGnnC4XAiJu_m7Y07tPddHevyD0t3SK98jnwwR6S7bibmTK5MymqR609cmNLKTrQZ1feqYbLIu8VQg2FsXHXk7tzYtPOkg732TsHQ6A9nVtDqs6lO3qGp3gL5utk5v_38kfr5J__GVHV2B1PinjojX/s780/contentLimpo01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="308" data-original-width="780" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNaDOOKA6zLW0DBaa2R83a_t3VweqBgBNbgtGnnC4XAiJu_m7Y07tPddHevyD0t3SK98jnwwR6S7bibmTK5MymqR609cmNLKTrQZ1feqYbLIu8VQg2FsXHXk7tzYtPOkg732TsHQ6A9nVtDqs6lO3qGp3gL5utk5v_38kfr5J__GVHV2B1PinjojX/s320/contentLimpo01.png" width="320" /></a></div><br /> <span> </span>Para a implementação dele é só colocar no HTML seguindo apenas o exemplo abaixo. <p></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"></span></span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaStURnHITy2wKm6Q10jvBbx7naqRSoLIXfxs2zVVd5BdAc_PDJ8iT5-chWxhbdT17vgD_yKtGew2pVNtgFl1B8bS-d7emZzhX9w_34p_73S6hfb5XxG8SAQemxfLurOUaocA3Oc2ce217mv2K-jkp2mEtY6ybdV9ZRx3Tp-JiB6nBWxccxBIV0qhg/s763/badge002.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="167" data-original-width="763" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaStURnHITy2wKm6Q10jvBbx7naqRSoLIXfxs2zVVd5BdAc_PDJ8iT5-chWxhbdT17vgD_yKtGew2pVNtgFl1B8bS-d7emZzhX9w_34p_73S6hfb5XxG8SAQemxfLurOUaocA3Oc2ce217mv2K-jkp2mEtY6ybdV9ZRx3Tp-JiB6nBWxccxBIV0qhg/s320/badge002.png" width="320" /></a></div><br /><span class="Q4iAWc"></span><p></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"><span> </span>E agora como ele fica no app:</span></span></span></p><p><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"></span></span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOFcAKzrbqLystQYN321fpP6NYrQ85x4ntmEhxc-t5iVbESBaaMnjyU2p1qIUenftKkTminTHWtsWCEUL4NuK-v69n-FtCpoDoFdPADfECFg-i1WLZ7IaXzQNiMV9WbcAMvxdGa6izdQB_KPd5wBmkB5nco3LMk0-ug2hSe9_Zr01SCnOL7uJSZOTh/s603/badge003.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="603" data-original-width="415" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOFcAKzrbqLystQYN321fpP6NYrQ85x4ntmEhxc-t5iVbESBaaMnjyU2p1qIUenftKkTminTHWtsWCEUL4NuK-v69n-FtCpoDoFdPADfECFg-i1WLZ7IaXzQNiMV9WbcAMvxdGa6izdQB_KPd5wBmkB5nco3LMk0-ug2hSe9_Zr01SCnOL7uJSZOTh/s320/badge003.png" width="220" /></a></div><br /><span class="Q4iAWc"></span><p></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"><span> </span>Agora você consegue perceber que é necessário que ele esteja com algum outro elemento que "diga" o que é aquele dado mostrado, pois um "quadradinho" com um número colorido não nos diz nada. Bastante tranquilo este componente, vamos ao próximo...</span></span></span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcY3Qnlv7fcJ7_JtkVoHyKN0AZoA2rEBnfaVeV8Gnz8Ot1bnR7wfVy17HejxjIEUkWqB33n2Nyxha_sI4eV6ShtzRezVn6QzfqCv5U1_x8EIRlU0Sybp8cXjpdDPBAwwVZpjcAe-Cgils/s415/breadcrumbs001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="33" data-original-width="415" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcY3Qnlv7fcJ7_JtkVoHyKN0AZoA2rEBnfaVeV8Gnz8Ot1bnR7wfVy17HejxjIEUkWqB33n2Nyxha_sI4eV6ShtzRezVn6QzfqCv5U1_x8EIRlU0Sybp8cXjpdDPBAwwVZpjcAe-Cgils/s320/breadcrumbs001.png" width="320" /></a></div><p><br /><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="2"><span class="Q4iAWc"> <span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"> </span></span></span><span style="color: #3d85c6;"><b><span style="font-size: large;">ion-breadcrumbs</span></b></span></span></span></span></p><p></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>Antes de explicar este componente vamos entender seu nome breadcrumbs em uma tradução livre quer dizer "migalhas de pão" que é um nome muito convidativo ao componente onde sua função única e principal é a de mostrar ao usuário onde ele se encontra dentro de uma hierarquia de navegação.</span></span></span></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>A sua implementação é tão fácil quanto a do <b>ion-badge</b>, ela é realizada, por enquanto, apenas em HTML, desta forma continuando inclua o código demonstrado abaixo no seu projeto como demonstrado na imagem abaixo:</span></span></span></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"></span></span></p><div class="separator" style="clear: both; text-align: center;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7watfpkoawT2CDIna-CNDdYg67dPykjmltQA4bnD6WRElWOiDX9MF3QrmOIiB5JXS865ObQs2ByIM7-Ea7PYV-hlTkVL8xTu2ePaO5gUfReDKzuBIM29K5VSLsRkIR9gpXAoyAJ_1f96QwMaduIzRVJim-TItDszDrwa-p1Igt5Ev01PYE-BG01Z/s692/breadcrumbs002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="213" data-original-width="692" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7watfpkoawT2CDIna-CNDdYg67dPykjmltQA4bnD6WRElWOiDX9MF3QrmOIiB5JXS865ObQs2ByIM7-Ea7PYV-hlTkVL8xTu2ePaO5gUfReDKzuBIM29K5VSLsRkIR9gpXAoyAJ_1f96QwMaduIzRVJim-TItDszDrwa-p1Igt5Ev01PYE-BG01Z/s320/breadcrumbs002.png" width="320" /></a></span></span></div><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><br /><span class="Q4iAWc"></span></span></span><p></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>Com isso temos a seguinte saída do nosso projeto:</span></span></span></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"></span></span></p><div class="separator" style="clear: both; text-align: center;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiukiZSkUNZSjrbBDCo-699ZeVKRqABgsBjnsTBLdnjZo327eQxkBReyEgOsmgq6CJpTm1xacWni-K0N91rGeyf9vpcXCTddczVtimkyBMBnIkzzckCBcmHfkT93tRyBu06pbFlI9pjNE2rbKKOiwKa5F936Nlbzo1lkFlmCRZXH6EzP-U3c8DQSvm3/s610/breadcrumbs003.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="610" data-original-width="420" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiukiZSkUNZSjrbBDCo-699ZeVKRqABgsBjnsTBLdnjZo327eQxkBReyEgOsmgq6CJpTm1xacWni-K0N91rGeyf9vpcXCTddczVtimkyBMBnIkzzckCBcmHfkT93tRyBu06pbFlI9pjNE2rbKKOiwKa5F936Nlbzo1lkFlmCRZXH6EzP-U3c8DQSvm3/s320/breadcrumbs003.png" width="220" /></a></span></span></div><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><br /><span class="Q4iAWc"></span></span></span><p></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>Perceba que o código é iniciado com a TAG <b>ion-breadcrumbs</b> com "s" no final e cada item fica no "singular" sem o "s" demonstrando assim um grupo. Perceba também que o último item (<i>Profissionais</i>), a última TAG dentro do grupo, quando renderizada, quando mostrada no navegador ela fica em destaque sozinha, por padrão, exatamente para denotar onde o usuário está na sua navegação no app, percebemos muito a utilização deste componente em sites de vendas.</span></span></span></p><p style="text-align: justify;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"><span> </span>Bom é isso galera, qualquer dúvida coloque nos comentários terei muita alegria em ajudá-los, grande abraço e fiquem com Deus!!!<br /></span></span></span></p><p style="text-align: left;"><span class="VIiyi" lang="pt"><span class="JLqJ4b ChMk0b" data-language-for-alternatives="pt" data-language-to-translate-into="en" data-number-of-phrases="3" data-phrase-index="0"><span class="Q4iAWc"> </span></span></span></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-87029860435004315042022-07-25T10:22:00.003-07:002022-07-25T10:22:40.416-07:00Ion-Alert<p> <br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JXe3C33c5O06UWKhF2p4mP0epTKTX_opgJsioS4Bgcz797FzOXaesJMI7iqeYLcHY5jEYn9Wmr_QqYN1NR7Vg6iwziyXI68tCybfGP1TKq-DT9Tg6-rM27Lnp8r5L6EfhTLHg15Um94FlB8dVU7m5w8bF6T3v6wYbbnKc1WKp_UxZeFjs6dW_MDx/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JXe3C33c5O06UWKhF2p4mP0epTKTX_opgJsioS4Bgcz797FzOXaesJMI7iqeYLcHY5jEYn9Wmr_QqYN1NR7Vg6iwziyXI68tCybfGP1TKq-DT9Tg6-rM27Lnp8r5L6EfhTLHg15Um94FlB8dVU7m5w8bF6T3v6wYbbnKc1WKp_UxZeFjs6dW_MDx/s320/ionic-logo.png" width="320" /></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JXe3C33c5O06UWKhF2p4mP0epTKTX_opgJsioS4Bgcz797FzOXaesJMI7iqeYLcHY5jEYn9Wmr_QqYN1NR7Vg6iwziyXI68tCybfGP1TKq-DT9Tg6-rM27Lnp8r5L6EfhTLHg15Um94FlB8dVU7m5w8bF6T3v6wYbbnKc1WKp_UxZeFjs6dW_MDx/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG9LNS4u7qOwJBgzR65NBvxbuq9AewxeQQPdA53wDhO78EKTVuJg10nUGckT_RI1yidlCsVZbz2T2f_S5c-plpB-a_G_sBr69JofLE9EmD6rYT_un9-Q_mi1KAgPYKn1RvWyJPAIQUd1aWJF8PG40xlLU3VnrH-_qzEMCLx7k6_900IZoOW57NkrFG/s245/alert001.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="161" data-original-width="245" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG9LNS4u7qOwJBgzR65NBvxbuq9AewxeQQPdA53wDhO78EKTVuJg10nUGckT_RI1yidlCsVZbz2T2f_S5c-plpB-a_G_sBr69JofLE9EmD6rYT_un9-Q_mi1KAgPYKn1RvWyJPAIQUd1aWJF8PG40xlLU3VnrH-_qzEMCLx7k6_900IZoOW57NkrFG/s1600/alert001.png" width="245" /></a></div></div><p style="text-align: justify;"><span> </span>Senhoras e senhores continuamos nossa aventura para conhecer os componentes visuais do Framework Ionic, lembrando que para os exemplos utilizamos o modelo blank, pelo simples fato de ser o modelo em branco, sem nada, se você não entendeu sugiro a leitura deste <a href="https://cafeelefantepinguim.blogspot.com/2022/06/modelos-de-apps-ionic-para-comecar-um.html" target="_blank">artigo</a>, muito bem vamos ao que interessa!</p><p style="text-align: justify;"><span style="color: #3d85c6;"><b><span style="font-size: large;">ion-alert</span></b></span> <br /></p><p style="text-align: justify;"><span> </span>O ion-alert é a clássica "telinha" central que nos informa alguma coisa, por exemplo: "Deseja realmente excluir?"; "Informação salva com sucesso!". De forma básica é isto, mas há variações em que é possível obter informações através desta tela. Entendendo qual a dinâmica de funcionamento deste componente podemos ver como implementá-lo.</p><p style="text-align: justify;"><span> </span>A implementação dele é muito parecida com o ion-actionsheet, vamos trabalhar com os arquivo HTML e TS (Typescript), bom, claro que você já deu o famoso "ionic serve", e com o projeto aberto vamos remover tudo o que está dentro do ion-content, como na imagem abaixo:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvErBYUzYfi6qSKdm9-oCT3KiF2IWsGtp5qwmYYo_dDrRWc3gTA_6QtyJuMoEEETdwUrXXXUTk5dX27lABqJKD9R4TDajp6YzJePatnaAcoTLCMF8XDixZ5N7MhivkV9T_usM_s6CzDIIT6wQ2Q8WRUAhrnnACEwntctWwq-7zm76aUBVAoQHRtQm5/s780/contentLimpo01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="308" data-original-width="780" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvErBYUzYfi6qSKdm9-oCT3KiF2IWsGtp5qwmYYo_dDrRWc3gTA_6QtyJuMoEEETdwUrXXXUTk5dX27lABqJKD9R4TDajp6YzJePatnaAcoTLCMF8XDixZ5N7MhivkV9T_usM_s6CzDIIT6wQ2Q8WRUAhrnnACEwntctWwq-7zm76aUBVAoQHRtQm5/s320/contentLimpo01.png" width="320" /></a></div><br /><p style="text-align: justify;"><span> </span>E vamos criar um botão simples, que será nosso gatilho de chamada do ion-alert, siga a imagem abaixo:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK_NvaVe9MfYXzRMhzLSH62mryOTH97fTVmeP3SHpjgWLxmb73GkhOvv1s0Xc4vjGV50evZtSoXqvWYePQg6Y-f89IfUd1Nawc2_yCCt4j59gyL5GsIhJfX_12OYtEW3ha9WYiuYjQtvkp7EpoAtJYWDQemWIfmD1v-nEoV3zAm__JE5yN_IV4lOSr/s555/alertBotao001.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="141" data-original-width="555" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK_NvaVe9MfYXzRMhzLSH62mryOTH97fTVmeP3SHpjgWLxmb73GkhOvv1s0Xc4vjGV50evZtSoXqvWYePQg6Y-f89IfUd1Nawc2_yCCt4j59gyL5GsIhJfX_12OYtEW3ha9WYiuYjQtvkp7EpoAtJYWDQemWIfmD1v-nEoV3zAm__JE5yN_IV4lOSr/s320/alertBotao001.png" width="320" /></a></div><p style="text-align: justify;"></p><p style="text-align: justify;"><span> </span>Agora vamos para a parte do Typescript, abra o arquivo home.page.ts para implementarmos o método que constrói a tela, primeiro necessitamos inserir o import como na imagem abaixo: <br /></p><p style="text-align: justify;"> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFnavzsfBRMiL08r-_-7ftjfTPhmOQ4eyhwbaf7jR3wYRmL5gSeNeQA96JcZ1HEHpoJtJvA5rfmIrvyk6n-a_TeofsOqng9Gp3v7bJUu7pSmPtSECoxFapgy56exGk8l_n4m54J7X95MnrfsAO69B47ssGqtX4FjgN-v3sEDM3q5smlEyZV6z7yon6/s622/alertImport001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="117" data-original-width="622" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFnavzsfBRMiL08r-_-7ftjfTPhmOQ4eyhwbaf7jR3wYRmL5gSeNeQA96JcZ1HEHpoJtJvA5rfmIrvyk6n-a_TeofsOqng9Gp3v7bJUu7pSmPtSECoxFapgy56exGk8l_n4m54J7X95MnrfsAO69B47ssGqtX4FjgN-v3sEDM3q5smlEyZV6z7yon6/s320/alertImport001.png" width="320" /></a></div><br /><p></p><p style="text-align: justify;"><span><span> </span>Vamos colocar o controlador no construtor para podermos usar o componente que foi incorporado na importação:</span></p><p style="text-align: justify;"><span> </span></p><div class="separator" style="clear: both; text-align: center;"><span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qU_4r0QHVDI8c8xB64Wgk88mz4ZrKrp9dLEwUVTjFkcNXPdKl8EUo2SN7zxurnEpVLuPOzNteWq_9XQ-1RvKnjKfAylHnF-w5h4Kdlu9zokNuR15CYPsGwwbDndngGzLYOcq8x9_upu9OJGWjo_kKV9DqJ92TNSj7OXJyulaJzxGoPBktLZvLprb/s570/alertControlador001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="161" data-original-width="570" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qU_4r0QHVDI8c8xB64Wgk88mz4ZrKrp9dLEwUVTjFkcNXPdKl8EUo2SN7zxurnEpVLuPOzNteWq_9XQ-1RvKnjKfAylHnF-w5h4Kdlu9zokNuR15CYPsGwwbDndngGzLYOcq8x9_upu9OJGWjo_kKV9DqJ92TNSj7OXJyulaJzxGoPBktLZvLprb/s320/alertControlador001.png" width="320" /></a></span></div><span><br /></span><p></p><p style="text-align: justify;"><span><span> </span>Desta forma já podemos fazer o método em si que faz a magia acontecer:</span></p><p style="text-align: justify;"><span> </span></p><div class="separator" style="clear: both; text-align: center;"><span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcqqOH87M11ilsmuuJr0UbytY5vj8wStldMHIg5oKrhQaEohKURegrtq5uUTlFc90Fhy1OQTd5l1fQFulqdZ-2eZM4NRllJcXOIVF1JnWRphuLL6KZPbMDgMphaOWPArRt4_XZCyy6QLjDFUFUQPKXaMv8HY-kMqCVg9-3qTA64UYrNQvjBDEWybjD/s587/alertaMetodo001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="330" data-original-width="587" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcqqOH87M11ilsmuuJr0UbytY5vj8wStldMHIg5oKrhQaEohKURegrtq5uUTlFc90Fhy1OQTd5l1fQFulqdZ-2eZM4NRllJcXOIVF1JnWRphuLL6KZPbMDgMphaOWPArRt4_XZCyy6QLjDFUFUQPKXaMv8HY-kMqCVg9-3qTA64UYrNQvjBDEWybjD/s320/alertaMetodo001.png" width="320" /></a></span></div><span><br /></span><p></p><p style="text-align: justify;"><span><span> </span>Com isso precisamos agora fazer o nosso botão capturar o evento do clique e chamar o método (como na imagem abaixo) finalizando a implementação: </span></p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7kPwymnvqZxgGfZr0r_NyHK_2pdgFQjP3NfUheDNL34_U3-wibIj-RACWh2MKTeXZobDxCMcD0A_4ZZHajEwUdnSfxm-A4toXk5lXfvxj2SVQ5MprnhMXCQ7OGIZI9oBrdXj8CJQDHweMthqUKmL9EEq9BU_qXuDG0ImHH6Ie659dX4SsZ24kgzkA/s699/alertaMetodoClique001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="180" data-original-width="699" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7kPwymnvqZxgGfZr0r_NyHK_2pdgFQjP3NfUheDNL34_U3-wibIj-RACWh2MKTeXZobDxCMcD0A_4ZZHajEwUdnSfxm-A4toXk5lXfvxj2SVQ5MprnhMXCQ7OGIZI9oBrdXj8CJQDHweMthqUKmL9EEq9BU_qXuDG0ImHH6Ie659dX4SsZ24kgzkA/s320/alertaMetodoClique001.png" width="320" /></a></div><br /><span></span><p></p><p style="text-align: justify;"><span><span> </span>O produto final, o botão:</span></p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8TYuOg_WkNi9QvhqqbbwGVMA_IsyKU6pGYq9tZ9BnLzxITgf4-RgrKq9jTZWfudMBWFr0RagQ27f-lydqvyJWUVI4wY1RT2epiZZUHHU5_rc4s54tj-8krNtwM9suHerj6DuAqUxTmhxJyBYQHHk9xDg3Eb_MIIDdQMX9fgRh5La2i28A3XuIt4TB/s602/alertBotao002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="602" data-original-width="438" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8TYuOg_WkNi9QvhqqbbwGVMA_IsyKU6pGYq9tZ9BnLzxITgf4-RgrKq9jTZWfudMBWFr0RagQ27f-lydqvyJWUVI4wY1RT2epiZZUHHU5_rc4s54tj-8krNtwM9suHerj6DuAqUxTmhxJyBYQHHk9xDg3Eb_MIIDdQMX9fgRh5La2i28A3XuIt4TB/s320/alertBotao002.png" width="233" /></a></div><span></span><p></p><p style="text-align: justify;"><span><span> A janela de alerta clicada:</span></span></p><p style="text-align: justify;"><span><span></span></span></p><div class="separator" style="clear: both; text-align: center;"><span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqRhPHyrHLLtcBByNZ2jcOFzZgDqz_iRZxjMbtMpB7zpGuxa3EsO0cLcSN_9r9qgdADPWYcePHYDhWWMRv6ARLp4Kq8ZhnCKG_iXuNTj7hagpTTZCdDNq-eR76FM8C2M_YfwGexRgufHTIh-ZSt5t87Nn6BA5sItLgt2mLye5vNnuQu43VrwrixsNb/s630/alerta002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="630" data-original-width="426" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqRhPHyrHLLtcBByNZ2jcOFzZgDqz_iRZxjMbtMpB7zpGuxa3EsO0cLcSN_9r9qgdADPWYcePHYDhWWMRv6ARLp4Kq8ZhnCKG_iXuNTj7hagpTTZCdDNq-eR76FM8C2M_YfwGexRgufHTIh-ZSt5t87Nn6BA5sItLgt2mLye5vNnuQu43VrwrixsNb/s320/alerta002.png" width="216" /></a></span></div><span><br /> <span> </span>Se você chegou até aqui é porque deu tudo certo e você já está capacitado para implementar o ion-alert, sei que você está se perguntando: "E se eu quiser personalizar?", acalme seu precioso coração veremos em artigos posteriores!!! Espero que tenham gostado, qualquer dúvida deixe nos comentários terei o prazer em ajudá-los, grande abraço e fiquem com Deus!!! <br /></span><p></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-47089701647071551802022-07-20T19:41:00.002-07:002022-07-20T19:41:29.616-07:00MX Linux - Instalação<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZT2GnO2ET8Xo6gAEziihQR-9tPDusKrn9YAD-d0i92GeJVwEU6qP0wpLuUb11tiPaYEftx1-DstjCDpyw2YtqnwLlUlmuXFecMfpExLXtERHZhYxyKCB2EwCGjsyHNpj8g0fiIABP1zQqcUOwad1o_qlOgL8EhAROxs4xD5WF7ELjoVU8z02ejwj/s560/mxlinuxlogo.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="560" data-original-width="560" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZT2GnO2ET8Xo6gAEziihQR-9tPDusKrn9YAD-d0i92GeJVwEU6qP0wpLuUb11tiPaYEftx1-DstjCDpyw2YtqnwLlUlmuXFecMfpExLXtERHZhYxyKCB2EwCGjsyHNpj8g0fiIABP1zQqcUOwad1o_qlOgL8EhAROxs4xD5WF7ELjoVU8z02ejwj/s320/mxlinuxlogo.jpg" width="320" /></a></div><p></p><p style="text-align: justify;"> Olá amiguinhos, amiguinhas e amiguinhes, vamos falar um pouco de Linux e recentemente tive uma boa experiência com uma distribuição linux que eu negligênciava é a chamada <b>MX Linux</b>. Tive uma ótima impressão dele, por isso decidi fazer esta resenha, mas não vou falar daquelas chatices que todos falam, tipo de kernel, performance em arquitetura de processador, ah vá pra p!t# que o p%r!&!!! O cara que nunca viu linux não quer nem saber disso, ele quer saber como usar no dia a dia dele, sem mais frescura vamos à ele.</p><p style="text-align: justify;"> O <b>MX linux</b> possui atualmente seis sabores sendo que na verdade, antes de instalar você tem que se fazer a seguinte pergunta: meu computador é "<u>véio</u>" (32 bits) ou <u>novo </u>(64 bits)?, tá respondeu esta pergunta vá pra segunda pergunta: meu computador tem<u> pouca RAM</u> (menos de 4Gb) ou <u>muita RAM</u> ( de 8Gb pra cima), vamos então dar as possibilidades baseados nas respostas:<br /></p><p></p><ul style="text-align: left;"><li style="text-align: justify;">Se você respondeu que seu computador é "<u>véio</u>" (32 bits) invariavelmente é beeeeem possível que você tenha menos de 4Gb de RAM então recomendo instalar <b>MX 32bits</b> (que vem como padrão de window manager o XFCE) ou se você for minimalista o <b>MX Fluxbox 32bits</b></li><li style="text-align: justify;">Se você tem um computador de 64bits você tem 3 escolhas possíveis: <b>MX 64 bits</b> (que vem com o XFCE) ou se for minimalista o <b>MX Fluxbox 64bit</b> e por fim o <b>MX KDE 64bits</b> que é a versão mais pesada, não que o computador vai ficar lento mas que ele terá o máximo de beleza visual.</li></ul><div style="text-align: justify;"><span> Se você não teve ainda uma experiência com linux provavelmente não entendeu nada quando eu falei de window manager, quando citei o XFCE o Fluxbox e o KDE. Eles "gerenciam" o formato, a beleza e a dinâmica de funcionamento das janelas para o usuário.</span><br /></div><div style="text-align: justify;"><span><span> Exemplo do XFCE puro sem ser o implementado pelo MX:</span><br /></span></div><div style="text-align: justify;"><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDD3u5xK-7UNZy5OPUEtTNWZj9dMkSteJS5GzixJ64Q2BQXYkxS_OoqstvFLB3_Ckh0teKpl6Ljz1v5UnoM2RM3FHpPu66u5MQTkvtCnk2PjOVEzhwawdvp0EyWb-6vlS5R3smDQBNF1VgRVoiXIfZD30MIQH9h3-zYc5-UUJV8cc_EzEOj0ucFheW/s620/xfce.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="387" data-original-width="620" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDD3u5xK-7UNZy5OPUEtTNWZj9dMkSteJS5GzixJ64Q2BQXYkxS_OoqstvFLB3_Ckh0teKpl6Ljz1v5UnoM2RM3FHpPu66u5MQTkvtCnk2PjOVEzhwawdvp0EyWb-6vlS5R3smDQBNF1VgRVoiXIfZD30MIQH9h3-zYc5-UUJV8cc_EzEOj0ucFheW/s320/xfce.jpg" width="320" /></a></div></span> Exemplo do Fluxbox puro sem ser o implementado pelo MX:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxvUu0YkwM6fZ6JoS72VgPoRPv1xt3EuQwEsnYJ_rS4nF4h0UeZuZS3zkNMbylDtxOYqNisP6YZHw5GahcRD2pRJcasBoL_BskTSJqKY6OTRC5T97KUcToVTNMriczJuUPLGdss9hQLtYz04tVF5-gUz9RQZkna3e7SjxUTENV5IzIdCTgM0x3AsC/s1280/fluxbox.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxvUu0YkwM6fZ6JoS72VgPoRPv1xt3EuQwEsnYJ_rS4nF4h0UeZuZS3zkNMbylDtxOYqNisP6YZHw5GahcRD2pRJcasBoL_BskTSJqKY6OTRC5T97KUcToVTNMriczJuUPLGdss9hQLtYz04tVF5-gUz9RQZkna3e7SjxUTENV5IzIdCTgM0x3AsC/s320/fluxbox.png" width="320" /></a></div><br /><div style="text-align: justify;"> Exemplo do KDE puro sem ser o implementado pelo MX:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOYRQa2V95Q9Aws_Kmriw96X-qqz93Ym2dX2B-tgCSApw6rH5w5z20thooinS2huRmdVsaonXnQSjhwY8TQaqhs4ikqsiqHojJaEIiRU_tlyYVCsUS6bc5QDhiKvFz_ygVDpGv7CKA9H0RhTbQqdbZgB-07Pm6JDePk6ftiQAI9ODtQ9dpaY_lPaiM/s1200/KDE.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="675" data-original-width="1200" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOYRQa2V95Q9Aws_Kmriw96X-qqz93Ym2dX2B-tgCSApw6rH5w5z20thooinS2huRmdVsaonXnQSjhwY8TQaqhs4ikqsiqHojJaEIiRU_tlyYVCsUS6bc5QDhiKvFz_ygVDpGv7CKA9H0RhTbQqdbZgB-07Pm6JDePk6ftiQAI9ODtQ9dpaY_lPaiM/s320/KDE.png" width="320" /></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"> Entendido esta introdução vamos a instalação do MX Linux. Primeiro você deve baixar uma ISO, segundo as sugestões que eu passei logo acima baseado na potência da sua máquina, e você encontrará as ISO´s para download neste <a href="https://mxlinux.org/torrent-files/" target="_blank">site</a>.<br /></div><div style="text-align: justify;"> <b>DISCLAIMER: <span style="color: red;">ATENÇÃO!!! A PARTIR DESTAS LINHAS TENHA CUIDADO POIS O PROCEDIMENTO REALIZADO APAGARÁ TODOS OS DADOS DE SEU DISCO RÍGIDO (HD), FAÇA POR SUA CONTA E RISCO, NÃO NOS RESPONSABILIZAMOS POR QUALQUER DANO, RISCO OU PERDA DE DADOS!</span></b><br /></div><div style="text-align: justify;"><span><span> Vamos então para instalação, logo após dar o boot (iniciar a máquina pelo pendrive já com o sistema que você quer instalar que neste caso é o MX Linux), se você pulou esta aula, não sabe do que estou comentando vá direto para este <a href="https://cafeelefantepinguim.blogspot.com/2022/07/como-criar-um-pendrive-bootavel-com.html" target="_blank">link</a>, caso entendeu de primeira o que estou me referindo você se deparará com esta tela, logo abaixo:</span><br /></span></div><div style="text-align: justify;"><span><span><span> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNVMNlIwKyw2st6vtixP8QoyRJRWKoagZlukftRiF2vc29aI2ypM3zefRM3GwmP2D6eU3buqYRhVa8nc7cPte43qv8OeOrAFcJTLlGSAy_MvYijR6DmHvUIZ2TotsaiHhiKAUyZctfbCTUEPuYIuSKOFFOgL_EJxUyYBw4EwGWy7iDLz8UsZlLupS/s1366/0telaInicial1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNVMNlIwKyw2st6vtixP8QoyRJRWKoagZlukftRiF2vc29aI2ypM3zefRM3GwmP2D6eU3buqYRhVa8nc7cPte43qv8OeOrAFcJTLlGSAy_MvYijR6DmHvUIZ2TotsaiHhiKAUyZctfbCTUEPuYIuSKOFFOgL_EJxUyYBw4EwGWy7iDLz8UsZlLupS/s320/0telaInicial1.png" width="320" /></a></div></span><div style="text-align: justify;"><span><span><br /></span></span></div> E você clicará em "<b>Install MX Linux</b>" e aparecerá a imagem abaixo:</span></span></div><div style="text-align: justify;"><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZMXVNTjtd_USyEWpthXRItCJKcsJW2a9qWzmMODVfBtiA2L00mLWU1s8AEdRK3AT5IVsGR-BBImT7uQVHmsN482SZ99UTdvcATg7O5qhkT9R-hXdvBtvohxDqZNwqtZ7Zpj2P6aO-2VHJXbDzmW7A7oP_Exzx1PkakLk9-T8VplV9jQPt6wGJM1cA/s1366/1teclado1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZMXVNTjtd_USyEWpthXRItCJKcsJW2a9qWzmMODVfBtiA2L00mLWU1s8AEdRK3AT5IVsGR-BBImT7uQVHmsN482SZ99UTdvcATg7O5qhkT9R-hXdvBtvohxDqZNwqtZ7Zpj2P6aO-2VHJXbDzmW7A7oP_Exzx1PkakLk9-T8VplV9jQPt6wGJM1cA/s320/1teclado1.png" width="320" /></a></div><br /><span><br /></span></span></div><div style="text-align: justify;"><span><span> Esta tela acima é onde você deve escolher o seu teclado, para escolher bem é melhor dar uma "caçada" na internet qual o layout do seu teclado para o linux. Depois de escolhido clique em <b>próximo</b> e irá para tela logo abaixo:<br /></span></span></div><div style="text-align: justify;"><span><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_yFgvX1Ul9ftOJKVkoWpqMWpnyJYLltPjTedBVjnKVwV0wCsIfMMGYhft1S1uOFRuz8IwF8y629Kqsv09o63hdpmdZy6Or9V2VnRizMICW6YsXerBsAsdRDy3oBn0iHOyB0bSgn-0O4M2u9ZNAvSQBQWOaIppboX_SAOF3_EfE7jg4L7TKIE2-UuI/s1366/2disco1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_yFgvX1Ul9ftOJKVkoWpqMWpnyJYLltPjTedBVjnKVwV0wCsIfMMGYhft1S1uOFRuz8IwF8y629Kqsv09o63hdpmdZy6Or9V2VnRizMICW6YsXerBsAsdRDy3oBn0iHOyB0bSgn-0O4M2u9ZNAvSQBQWOaIppboX_SAOF3_EfE7jg4L7TKIE2-UuI/s320/2disco1.png" width="320" /></a></div> </span></span></div><div style="text-align: justify;"><span><span><span> </span> Na tela acima você clicará em "<b>Instalação regular usando todo o disco</b>" assim você está dizendo que vai utilizar o disco todo para o novo sistema operacional, há outras formas de instalação que não serão abordados neste artigo, talvez em artigos posteriores, logo depois clique em <b>próximo </b>e aparecerá a próxima tela: <br /></span></span></div><div style="text-align: justify;"><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBT6lBswyic2XSX36ddy23e0Pcd4psGyZFETKMFAnkfiqeTtpQEDTeOG0lmUxD9q0bYH4XBd0rYB8f6UZn6gKp01TbRVFtIsSyUnsw1ttMEGLrkCpS_bpy6iFim0vRUL7riIfw2-dicIjAYLdncYml1ECTYSNuAmrWehS355VNXctabHTyukjnMfD5/s1366/3grub1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBT6lBswyic2XSX36ddy23e0Pcd4psGyZFETKMFAnkfiqeTtpQEDTeOG0lmUxD9q0bYH4XBd0rYB8f6UZn6gKp01TbRVFtIsSyUnsw1ttMEGLrkCpS_bpy6iFim0vRUL7riIfw2-dicIjAYLdncYml1ECTYSNuAmrWehS355VNXctabHTyukjnMfD5/s320/3grub1.png" width="320" /></a></div><br /><span><br /></span></span></div><div style="text-align: justify;"><span><span> Na tela acima ele está apenas mostrando que instalará o <b>GRUB</b>, simplesmente não mexa em nada e clique em <b>próximo</b>:</span></span></div><div style="text-align: justify;"><span><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunFsNf8OcUUDOCTj2MUp2AXo6g9riQ062bcb03GFGsgY2CqxTshZekosdpgXjPyScxGm7BxBTDgjrPN1swSwRh-Q10_NQc-gogKx638-996b0UPca28ARSaV-qSFqPw7kJ3eRcTUZlM6YlpXcLNBjLq1aK83IckQ8o0pGtmYOahaprIkSDpo2BAPd/s1366/4nomePC1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunFsNf8OcUUDOCTj2MUp2AXo6g9riQ062bcb03GFGsgY2CqxTshZekosdpgXjPyScxGm7BxBTDgjrPN1swSwRh-Q10_NQc-gogKx638-996b0UPca28ARSaV-qSFqPw7kJ3eRcTUZlM6YlpXcLNBjLq1aK83IckQ8o0pGtmYOahaprIkSDpo2BAPd/s320/4nomePC1.png" width="320" /></a></div><br /><span><br /></span></span></span></div><div style="text-align: justify;"><span><span><span><span> Esta tela acima, já percebemos que logo na parte superior, temos uma barra de progressão que mostra que o sistema operacional já está sendo instalada, nesta tela colocamos o nome do computador, o domínio (se você não sabe o que é deixe como está) e o grupo de trabalho ou grupo de rede (</span></span>se você não sabe o que é deixe como está) e dê um próximo:</span></span></div><div style="text-align: justify;"><span><div class="separator" style="clear: both; text-align: center;"><br /></div><span><br /></span></span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-WXzypcpzL8E4mokTMX896rCaVSEPIilZk9iA7dS6Jzr8Xdr1BMVVdsw5j-tB-DtIkKQfRGkVpPdeTIlPt3Jx3LjR9M5i7ML9o8AO-R5wzu4kudkwCVLDq14iO2g5giMRv5ztipFohTAOA2Y48SSguEmpfcHZ5TCTlMOcQEbwlCdRLium_eMhhS15/s1366/5localizacao1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-WXzypcpzL8E4mokTMX896rCaVSEPIilZk9iA7dS6Jzr8Xdr1BMVVdsw5j-tB-DtIkKQfRGkVpPdeTIlPt3Jx3LjR9M5i7ML9o8AO-R5wzu4kudkwCVLDq14iO2g5giMRv5ztipFohTAOA2Y48SSguEmpfcHZ5TCTlMOcQEbwlCdRLium_eMhhS15/s320/5localizacao1.png" width="320" /></a></div><br /></div><div style="text-align: justify;"><span><span><span> Nesta tela acima refere-se a toda localização, fuso horário e formato de horas, arrume como desejar e dê um próximo:</span><br /></span></span></div><div style="text-align: justify;"><span><span><span><span> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGhC22aZK3PI6yxfr2kjS0RLp7Nf3nU1QlKH1EhxGDVlc0nc112uR5MJPfH0Q9LKVqAWGhMkYPjWaNbmH15ulmaOVqxFWIOWHFW7HtlXrmsUWaxe_OFfDEsp3rdXQO7x9UIBSlnSEZJfTkVVL7wBppKidfHXcR_kF05fUasUyq2jghokqtY6OwAi2V/s1366/6usuario1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGhC22aZK3PI6yxfr2kjS0RLp7Nf3nU1QlKH1EhxGDVlc0nc112uR5MJPfH0Q9LKVqAWGhMkYPjWaNbmH15ulmaOVqxFWIOWHFW7HtlXrmsUWaxe_OFfDEsp3rdXQO7x9UIBSlnSEZJfTkVVL7wBppKidfHXcR_kF05fUasUyq2jghokqtY6OwAi2V/s320/6usuario1.png" width="320" /></a></div><br /></span><br /></span><div class="separator" style="clear: both; text-align: center;"><span style="text-align: justify;">Esta tela acima temos que colocar o nome do usuário, a senha para este usuário, habilite também "Conta de Root (Administrador)" e dê uma senha para ele também, logo depois dê um próximo:</span></div></span></span></div><div style="text-align: justify;"><span><span><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkwoJDistffDt-5W-aniDhVCMa5lkFZYBfg4xWlsRO_dZjlQiE76Oh9Bm82KzWt_QJn0G_ZfB_QlsxLQp6cgW7tMwKN4GQVuLbXHpSe068s7ZhxNnlgGDqsaI1YoA5YYnZ5KmprG40XSA2UdKKNyhLQxr5jTeOtkG3Dyz54tVHr9n0ep8lzhW6bxY/s1366/7dicas1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkwoJDistffDt-5W-aniDhVCMa5lkFZYBfg4xWlsRO_dZjlQiE76Oh9Bm82KzWt_QJn0G_ZfB_QlsxLQp6cgW7tMwKN4GQVuLbXHpSe068s7ZhxNnlgGDqsaI1YoA5YYnZ5KmprG40XSA2UdKKNyhLQxr5jTeOtkG3Dyz54tVHr9n0ep8lzhW6bxY/s320/7dicas1.png" width="320" /></a></div><br /><span><br /></span></span></span></span></div><div style="text-align: justify;"><span><span><span><span><span> E como a tela acima está demonstrando estamos no finalzinho da instalação e você precisa apenas ficar ligado até aparecer a tela abaixo!</span><br /></span></span></span></span></div><div style="text-align: justify;"><span><span><span><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_qxQwogM2e3YQziYPo9NB2k79waxhQedJY_mUxzcO3A14D5xCX-xikke7ijJiUpxCmjU1xkZG75vrnsIgFDcBuJ6c73M3nZgmk9JE1i6whbiSixtOGBvnEWeWvAoYrmQK9vo-Pe8ipvcRY4YD4BL-tek9x2RCSqLTeKeB0sTUYmu2WQYqsJABjQK7/s1366/8finalizado1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_qxQwogM2e3YQziYPo9NB2k79waxhQedJY_mUxzcO3A14D5xCX-xikke7ijJiUpxCmjU1xkZG75vrnsIgFDcBuJ6c73M3nZgmk9JE1i6whbiSixtOGBvnEWeWvAoYrmQK9vo-Pe8ipvcRY4YD4BL-tek9x2RCSqLTeKeB0sTUYmu2WQYqsJABjQK7/s320/8finalizado1.png" width="320" /></a></div><br /><span><br /></span></span></span></span></span></div><div style="text-align: justify;"><span><span><span><span><span><span> Bom agora você tem um novo sistema operacional o MX Linux, se você seguiu todos os passos como supracitados viu como é fácil instalar o MX Linux, parabéns!!! No próximo artigo vamos falar melhor sobre ele, grande abraço e Fique com Deus!!!</span><br /></span></span></span></span></span></div><p></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-42881971836826284222022-07-20T13:16:00.004-07:002022-07-20T14:25:06.822-07:00Como criar um pendrive bootável com ISO´s Linux<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rIXzlJetWtGtR42JmlOwGqQtwPOBHoiG4D9Ah9mYg5UFxoKzY5WBkaJ6QDaJtr-3WX9s8lfPTCDOaS9-QlnXbUp_RY5sh_OGCPlEvPg7xMS7kSJe8aNiXv2VO2v6XXlM_ZRhPg7anGtCqMc0k5G46qlTHsa1I3piwRuo-a4ZQNZkb2i9yzPjrM91/s860/logolinux.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="860" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rIXzlJetWtGtR42JmlOwGqQtwPOBHoiG4D9Ah9mYg5UFxoKzY5WBkaJ6QDaJtr-3WX9s8lfPTCDOaS9-QlnXbUp_RY5sh_OGCPlEvPg7xMS7kSJe8aNiXv2VO2v6XXlM_ZRhPg7anGtCqMc0k5G46qlTHsa1I3piwRuo-a4ZQNZkb2i9yzPjrM91/s320/logolinux.jpg" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNsc3xu9XCArCiMLMbSd61RNMfgDl-ptKqpnoAxjkh2WwAM7Fk8-pmOEEJeO29IdGBDa0PsZeB7qvpakod6bykFp2akcABJsAJ0J3EsWydlGfn2Q3yfKsaEO0pipfysAFXCYPI1pkpuoiGKKEwjKNIT4F9Rma73hZnTaPZRMxeo23wIrSbyEF0-cAq/s300/rufuslogo.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="300" data-original-width="250" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNsc3xu9XCArCiMLMbSd61RNMfgDl-ptKqpnoAxjkh2WwAM7Fk8-pmOEEJeO29IdGBDa0PsZeB7qvpakod6bykFp2akcABJsAJ0J3EsWydlGfn2Q3yfKsaEO0pipfysAFXCYPI1pkpuoiGKKEwjKNIT4F9Rma73hZnTaPZRMxeo23wIrSbyEF0-cAq/w149-h179/rufuslogo.jpg" width="149" /></a></div><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd5YOvv2FOOxgRUYT0F9NrmIJR-2sTKINq96pinWb7rHZnyIlkil-KSuP3eRhneKvfv0ZFrC1JvU5Pfd2ZeCFx8ppYBUVdL8RI6K-osYM0sbvduygvCp5v_y0ohT5BAOb_9UbvpcW-w3kGBt74-BGjRcIoQ1sLvybhOJVjp_vz1D2Xtov6v1-BOmCU/s560/mxlinuxlogo.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" data-original-height="560" data-original-width="560" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd5YOvv2FOOxgRUYT0F9NrmIJR-2sTKINq96pinWb7rHZnyIlkil-KSuP3eRhneKvfv0ZFrC1JvU5Pfd2ZeCFx8ppYBUVdL8RI6K-osYM0sbvduygvCp5v_y0ohT5BAOb_9UbvpcW-w3kGBt74-BGjRcIoQ1sLvybhOJVjp_vz1D2Xtov6v1-BOmCU/w200-h200/mxlinuxlogo.jpg" width="200" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"></td></tr></tbody></table><p></p><p style="text-align: justify;"><span> </span></p><p style="text-align: justify;"><span><br /></span></p><p style="text-align: justify;"><span><br /></span></p><p style="text-align: justify;"><span><br /></span></p><p style="text-align: justify;"><span><br /></span></p><p style="text-align: justify;"><span><br /></span></p><p style="text-align: justify;"><span><span> </span>Olá galerinha, vamos começar várias resenhas e dícas para linux, para tanto, é necessário que saibamos como instalar cada distribuição, neste momento você deve estar se perguntando: "Distribuição?".</span><br /></p><p style="text-align: justify;"><span><span> Vamos discutir alguns jargões antes de começar:</span><br /></span></p><p style="text-align: justify;"></p><ul><li><span><span><span><b>Distribuição</b>: Como o linux é software livre e código aberto (isso quer dizer que você pode ler o código fonte dele e modificar ele, "melhorar" ou personalizar), qualquer empresa, grupo de pessoas ou mesmo uma única pessoa pode "criar" um linux e "distribuir" seu próprio linux, por isso o nome distribuição.</span></span></span></li><li><span><span><span><b>Versão</b>: agora que você entendeu o que é distribuição, então já dá pra entender o a sacada da versão. Se partirmos do princípio de que qualquer um pode criar um linux, a pessoa, grupo ou empresa que criou este novo linux pode criar inovação, atualizações e melhorias nele, consequentemente criando "versões", entendeu?</span></span></span></li></ul><p></p><p style="text-align: justify;"><span><span><span><span> Muito bem, as distribuições são entregues por download geralmente no formato de <b>imagem ISO</b>. A imagem ISO ou arquivo ISO, trocando em miúdos, são tudo que é necessário para instalar o sistema operacional completo e/ou rodá-lo sem instalar, sim, rodá-lo diretamente no pendrive, sem a necessidade de instalar o sistema operacional. <br /></span></span></span></span></p><p style="text-align: justify;"><span><span><span><span> Óbvio que se você for utilizar o sistema operacional diretamente no pendrive sem instalá-lo você terá uma forte perda de performance, equiparando com o mesmo sistema operacional plenamente instalado na máquina. Quando ele é utilizado diretamente no pendrive, ele utiliza a <u>memória RAM</u> por isso a perda de performance frente a ele instalado, mas, com esta proposta você pode utilizar várias ferramentas e apreciá-lo antes de instalar e ter uma noção de como ele se portará depois de instalado.<br /></span></span></span></span></p><p style="text-align: justify;"> Bem chega de lenga-lenga e vamos a criação de um pendrive pronto para instalar seu linux ou usá-lo no modo <i>live </i>(rodando no pendrive sem instalá-lo). Para o nosso truque vamos utilizar como exemplo a distribuição MX Linux.<br /></p><p style="text-align: justify;"> Para obter a imagem ISO (arquivo ISO) acesse: <a href="https://mxlinux.org/torrent-files/" target="_blank">MX Linux</a> , irá abrir o site como na imagem abaixo, escolha a que melhor convier:<br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RY3oHZq-xlZC1XLpIzqVGVwBOtTqOnCZNJoik5MXnB733GS5-OuDzWcEUTqLFUFOAS52kB3bKHcNX-FTqMoEgcnQhBWwaf0YOoD0EAvgZUFVzOgzNR8UOxdwKfgESEeohLI_9UumotF3szt3uOtCNoxA-BuEpZnRvdgZXyQDIkDRGtuFLYj3gu3X/s1280/mxTorrent.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="815" data-original-width="1280" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RY3oHZq-xlZC1XLpIzqVGVwBOtTqOnCZNJoik5MXnB733GS5-OuDzWcEUTqLFUFOAS52kB3bKHcNX-FTqMoEgcnQhBWwaf0YOoD0EAvgZUFVzOgzNR8UOxdwKfgESEeohLI_9UumotF3szt3uOtCNoxA-BuEpZnRvdgZXyQDIkDRGtuFLYj3gu3X/s320/mxTorrent.png" width="320" /></a></div><br /><p style="text-align: justify;"> Depois de feito o download (ele terá, em tamanho algo próximo de 2Gb, dependendo da distribuição este valor pode ser maior) você necessita de um programa que pegue esta ISO e jogue dentro do pendrivre já no formato para instalação ou utilização em modo live, e para isso vamos utilizar um programa bem pequeno e bem simples ele se chama Rufus e você pode baixar ele neste <a href="https://rufus.ie/pt_BR/">link</a>.</p><p style="text-align: justify;"><span><span><span> Vai abrir a página, desça um pouquinho e você vai encontrar algo como na imagem abaixo clique e baixe ele: </span><br /></span></span></p><p style="text-align: justify;"><span><span></span></span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCDvm3mamEOD4Cgmi7G6_cu_8FrXvDLN3YRoJz5_0jzhsPENcP-CK4vrfuPkIMY_PCy5SIzeR8e50yLrbYvOTGJpfbEIOiVLDZ1CseLbGw5Wd1PBxUWaV2Gt-aXbXH5KCuhZcDgYO-1uU6hoRZAiCGkUZaGbPLOOZtXsZv7lu0j7YwBAB6cThpAr_K/s1253/downloadRufus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="817" data-original-width="1253" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCDvm3mamEOD4Cgmi7G6_cu_8FrXvDLN3YRoJz5_0jzhsPENcP-CK4vrfuPkIMY_PCy5SIzeR8e50yLrbYvOTGJpfbEIOiVLDZ1CseLbGw5Wd1PBxUWaV2Gt-aXbXH5KCuhZcDgYO-1uU6hoRZAiCGkUZaGbPLOOZtXsZv7lu0j7YwBAB6cThpAr_K/s320/downloadRufus.png" width="320" /></a></div> Agora você tem tudo que necessita para nosso trabalho, vá na pasta em que você baixou o rufus e dê um duplo clique (execute-o) aparecerá a sequinte tela:<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3e1Tl8sLafzjMvT-BoeGViqs664yfzyNHZf8172wZ6jGFpjH83FhI3pEc1BWs5WjJeTjwiN13DC7ui8QcyW40akk1kevpkhpYbRfzi-1ILN-qzIqFKAKEfHSTd2UUdPWG_0m2nEipNYzkWCivCSE5VoCHxqr3q74psoD0f55fbiLRNbdsBbANBD3V/s551/telaRufus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="551" data-original-width="483" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3e1Tl8sLafzjMvT-BoeGViqs664yfzyNHZf8172wZ6jGFpjH83FhI3pEc1BWs5WjJeTjwiN13DC7ui8QcyW40akk1kevpkhpYbRfzi-1ILN-qzIqFKAKEfHSTd2UUdPWG_0m2nEipNYzkWCivCSE5VoCHxqr3q74psoD0f55fbiLRNbdsBbANBD3V/s320/telaRufus.png" width="281" /></a></div><p style="text-align: justify;"><span> Com a tela aberta você clica em SELECIONAR:</span><br /></p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Bbv5YZfUFKkfZSwA40RclHBW3PWeNy3EvfUjmp0g8xgthjbMpivOxA9-RNHtXkx_t6f-Xy4QBZr2ZpG42qLtyiK6uoqicfb3SBALw7emdjvNkRASPPmdRwfVJu0tfD7YqhBDm-Pl1QsoR1PVl1XxTmuuFNDMGwfiVrAxaY1gNclm1vJqaUXFqT4R/s178/rufusSelecionar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="107" data-original-width="178" height="107" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Bbv5YZfUFKkfZSwA40RclHBW3PWeNy3EvfUjmp0g8xgthjbMpivOxA9-RNHtXkx_t6f-Xy4QBZr2ZpG42qLtyiK6uoqicfb3SBALw7emdjvNkRASPPmdRwfVJu0tfD7YqhBDm-Pl1QsoR1PVl1XxTmuuFNDMGwfiVrAxaY1gNclm1vJqaUXFqT4R/s1600/rufusSelecionar.png" width="178" /></a></div><span><br /></span><p></p><p style="text-align: justify;"><span> Ele vai abrir uma tela para você procurar a ISO, a imagem do MX Linux que você baixou, escolha e clique em "<i>abrir</i>", pronto está tudo certo, agora é só clicar no botão iniciar:<br /></span></p><p style="text-align: justify;"><span></span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0NJRLH3HFwIinSsd7EDNLBCZ2om5No6LJeC-Eivxv4Ttegt8F4f6ij6e50-gtORdCUj_8gaJVTjuWTxSPOD8A-_1K5ej7VcLjRJFljajzEyk-o4Z2aHgYzcqUs7jm8zp4LuTg9KWtOYQGAKgtvg9NvaLpJDVWJzubhHeg1LcZUoc19E4G9nObd2Q/s267/rufusIniciar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="157" data-original-width="267" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0NJRLH3HFwIinSsd7EDNLBCZ2om5No6LJeC-Eivxv4Ttegt8F4f6ij6e50-gtORdCUj_8gaJVTjuWTxSPOD8A-_1K5ej7VcLjRJFljajzEyk-o4Z2aHgYzcqUs7jm8zp4LuTg9KWtOYQGAKgtvg9NvaLpJDVWJzubhHeg1LcZUoc19E4G9nObd2Q/s1600/rufusIniciar.png" width="267" /></a></div> E ele vai apagar todo o conteúdo do pendrive e colocar os arquivos necessários para instalar o MX Linux, neste caso. <p></p><p style="text-align: justify;"><span><span><span><span> Quando terminar, coloque o pendrive na USB do computador ou notebook que você queira testar o linux ou instalar o linux e inicie-o através pelo pendrive, infelizmente, esta parte é muito personalizada para cada máquina, pois depende do fabricante da placa mãe para configurar a máquina para iniciar (dar o boot) pelo pendrive, por isso esta parte peço que procure na internet como fazer isso, é simples e eu acredito em você!</span><br /></span></span></span></p><p style="text-align: justify;"><span><span><span><span><span> Bom, deu o boot pelo pendrive? Então com certeza já deve estar rodando seu línux, parabéns!!! Aqui nós fizemos com MX Linux mas para outro linux é a mesma coisa a única coisa que muda é o site para o downloado do linux pretendido, grande abraço eu fico por aqui, até a próxima e fique com Deus!!!</span></span></span></span></span> </p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-90060443317165275442022-07-17T03:59:00.003-07:002022-07-17T04:18:27.835-07:00Ion-accordion<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTzpZ3JAlVPtLEnRdARiBSvZskBHxPYC9tUZaSlnx3at3Zzf0wE3KNbWcDjaaNq-u6by4e9uRNPr3wYcEChZwoDdOwKVZg57HghFEMb_aLBVpaCXYI2BsR_fDIUM3w_T4pxHjSKrfkY4Nq3zXuLATn70Onarw2wMra9p-uFSPhd4e9Ht4ifX9WA5cU/s1024/ionic-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTzpZ3JAlVPtLEnRdARiBSvZskBHxPYC9tUZaSlnx3at3Zzf0wE3KNbWcDjaaNq-u6by4e9uRNPr3wYcEChZwoDdOwKVZg57HghFEMb_aLBVpaCXYI2BsR_fDIUM3w_T4pxHjSKrfkY4Nq3zXuLATn70Onarw2wMra9p-uFSPhd4e9Ht4ifX9WA5cU/s320/ionic-logo.png" width="320" /></a></div><br /><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd9ONi-fQQ19ps62inoOCZ2UEhq1BjRe9TWqoMGghVGsYBAXQZd2jIOaOnRj1hoLdwvw8Q6_BkWj7leLo3dshh6MT9qrQOd3TttTc_9J4HWbF6Eph7hxK49ftv_CzJ_RxNBDgV8Zheit29wzy09_hRThGj-RAGaonLAT-Hk7jKNdTemgIhT7oe7_mY/s238/accordion01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="232" data-original-width="238" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd9ONi-fQQ19ps62inoOCZ2UEhq1BjRe9TWqoMGghVGsYBAXQZd2jIOaOnRj1hoLdwvw8Q6_BkWj7leLo3dshh6MT9qrQOd3TttTc_9J4HWbF6Eph7hxK49ftv_CzJ_RxNBDgV8Zheit29wzy09_hRThGj-RAGaonLAT-Hk7jKNdTemgIhT7oe7_mY/s1600/accordion01.png" width="238" /></a></div><p><span> </span>Fala galerinha, neste artigo vamos conversar sobre o novo componente visual ionic chamado ion-accordion! </p><p><span> </span>Como sempre comecemos com um modelo to tipo blank (se você não está entendo nada sugiro que leia a sequência de artigos que começamos neste <a href="https://cafeelefantepinguim.blogspot.com/2022/06/criacao-de-novo-projeto-com-ionic.html" target="_blank">link</a>), e vamos deixar nosso HTML limpo como na imagem abaixo:</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_VT1iB1wD7jhKZbOBpISJgU92oTgHTOg9dl0c_pa1nA3X9SX5WA9byTbD-Eml1TCaV02BncXlJ8mgXnsqtG3Ajd1adNRVJyDVjXnmf0Z7iGBlx9V5InheSh34uYv_zkqNGqyS42wOHDj_HMZtWfUNvrFh-TGBK3YqiO8_URpszN77mNE2U1ncE-H/s780/contentLimpo01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="308" data-original-width="780" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_VT1iB1wD7jhKZbOBpISJgU92oTgHTOg9dl0c_pa1nA3X9SX5WA9byTbD-Eml1TCaV02BncXlJ8mgXnsqtG3Ajd1adNRVJyDVjXnmf0Z7iGBlx9V5InheSh34uYv_zkqNGqyS42wOHDj_HMZtWfUNvrFh-TGBK3YqiO8_URpszN77mNE2U1ncE-H/s320/contentLimpo01.png" width="320" /></a></div><p></p><p><span> </span> <span> </span><span style="color: #3d85c6;"><b><span style="font-size: large;">ion-accordion</span></b></span> <br /></p><p style="text-align: justify;"><span> </span>Quando olhamos o nome deste componente podemos pensar na palavra acordeão, ou mais conhecido aqui no Brasil como sanfona, e de certa forma este componente lembra muito este instrumento, pois nada mais é do que um "menu" que está fechando e quando clicado ele se abre, mostrando assim que foi o escolhido pelo usuário.</p><p style="text-align: justify;"><span> </span>Este componente é essencialmente HTML, sua implementação é bem simples, vamos utilizar apenas o arquivo home.page.html e será apenas uma copiar / colar dentro do ion-content como na imagem abaixo:</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhcWxeJC5o3KANqFOwN61yLlSXfnL2y1H3Ljji1ZlDunokG0QsDDVrooFI5fVlm3PxLy2lZx0xUMI46MvuA4Vkin3N-h02rUWuHhUlEHkp5_3frsnYqBVu8_J_rKNVCNoGd1HFr1A_3t3NmudY7p1B_eLg9PoSIJuwzX_YEqTG9r5ntlQ1TG1NGk_/s1122/ionAccordion01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="660" data-original-width="1122" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhcWxeJC5o3KANqFOwN61yLlSXfnL2y1H3Ljji1ZlDunokG0QsDDVrooFI5fVlm3PxLy2lZx0xUMI46MvuA4Vkin3N-h02rUWuHhUlEHkp5_3frsnYqBVu8_J_rKNVCNoGd1HFr1A_3t3NmudY7p1B_eLg9PoSIJuwzX_YEqTG9r5ntlQ1TG1NGk_/s320/ionAccordion01.png" width="320" /></a></div><br /> <span> </span>Agora vejamos como ele fica no celular: <br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6vktjcZn8nLWhDVl-AJRk1M6aASek1-YLJcAZ0I8hWdNdh7wVrNZUDZFNMYuGFsPu_qI6kOuhMq9lW2tq4z5koqo0xeDesw8Xw6b1mntDwMisHr59E5IWkx-5gI4psbSzRZpq2ppLXHWMUtDBRYt34NA4jVOQh4znMk2FKTTlPQBqklRmQ9KRaa4/s509/ionAccordion02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="509" data-original-width="436" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6vktjcZn8nLWhDVl-AJRk1M6aASek1-YLJcAZ0I8hWdNdh7wVrNZUDZFNMYuGFsPu_qI6kOuhMq9lW2tq4z5koqo0xeDesw8Xw6b1mntDwMisHr59E5IWkx-5gI4psbSzRZpq2ppLXHWMUtDBRYt34NA4jVOQh4znMk2FKTTlPQBqklRmQ9KRaa4/s320/ionAccordion02.png" width="274" /></a></div><br /><p></p><p style="text-align: justify;"><span> </span>O componente clicado:</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjklruAzgk-V0Np-dP7N7kPtGtW4HiE-ZKaEoeFOIqsqwYF7BZoia6oZV9DVwWaQhhHRQA6RLJOAsxjEu8OWZvDEkXyrugwvIOrs949gp7nXRJeEXc64E9KTi0_5TWfzPecA-cplBsvVtZt9XT_ISgZEPmDrahfH6VJbxlqzktQ-9DN_2pGybuJkFvh/s590/ionAccordionClicado01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="590" data-original-width="441" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjklruAzgk-V0Np-dP7N7kPtGtW4HiE-ZKaEoeFOIqsqwYF7BZoia6oZV9DVwWaQhhHRQA6RLJOAsxjEu8OWZvDEkXyrugwvIOrs949gp7nXRJeEXc64E9KTi0_5TWfzPecA-cplBsvVtZt9XT_ISgZEPmDrahfH6VJbxlqzktQ-9DN_2pGybuJkFvh/s320/ionAccordionClicado01.png" width="239" /></a></div><br /> <span> </span>Como o código é extenso vou colocá-lo logo abaixo:<p></p><p style="text-align: justify;"> <span style="font-family: courier;"><ion-accordion-group><br /> <ion-accordion value="first" toggleIcon="caret-up-circle-outline" toggleIconSlot="start"><br /> <ion-item slot="header" color="light"><br /> <ion-label>Primeiro Acordeão</ion-label><br /> </ion-item><br /> <div class="ion-padding" slot="content"><br /> Primeiro Conteúdo<br /> </div><br /> </ion-accordion><br /> <ion-accordion value="second" toggleIcon="caret-up-circle-outline" toggleIconSlot="start"><br /> <ion-item slot="header" color="light"><br /> <ion-label>Segundo Acordeão</ion-label><br /> </ion-item><br /> <div class="ion-padding" slot="content"><br /> Segundo Conteúdo<br /> </div><br /> </ion-accordion><br /> <ion-accordion value="third" toggleIcon="caret-up-circle-outline" toggleIconSlot="start"><br /> <ion-item slot="header" color="light"><br /> <ion-label>Terceiro Acordeão</ion-label><br /> </ion-item><br /> <div class="ion-padding" slot="content"><br /> Terceiro Conteúdo<br /> </div><br /> </ion-accordion><br /> </ion-accordion-group></span></p><p style="text-align: justify;"> <span> </span>Vale a pena conversarmos um pouco sobre ele. Perceba que o código é envolvido pela TAG <b>ion-accordion-group</b>, pois ele tem um funcionamento muito parecido com o <i>ion-radio</i> (que discutiremos em artigos posteriores) ou se você vem do HTML puro sabe que um radioButton deve estar em um grupo para que a escolha seja exclusiva.</p><p style="text-align: justify;"><span> </span>Entendendo isso temos a própria TAG <b>ion-accordion</b> que possui 3 propriedades interessantes, primeiro a propriedade <u><i>value</i></u> que é o valor que é capturado pelo sistema quando clicado, a segunda que é a propriedade <u><i>toggleIcon</i></u> que é o ícone que você pode trocar utilizando um ícone neste <a href="https://ionic.io/ionicons" target="_blank">site</a> (falaremos sobre ícones com mais ênfase em artigos posteriores) que quando clicado o próprio sistema gira-o automaticamente, por fim a propriedade <u><i>toggleIconSlot</i></u> que é a posição em que você necessita que o ícone esteja que pode ser <i>start</i> à esquerda e <i>end</i> à direita.</p><p style="text-align: justify;"><span> </span>Dentro da TAG <b>ion-accordion</b> temos um <i>ion-item</i> que ajuda no layout do componente e ainda dentro dele temos um <i>ion-label</i> que é o texto da escolha. Logo depois temos uma <u>div</u> com uma <u>class</u> preestabelecida no framework ionic que é o <i>ion-padding </i>(discutiremos no futuro) e uma propriedade <u>slot</u> que é o conteúdo que aparecerá para o usuário quando o item for escolhido.</p><p style="text-align: justify;"><span> </span>Ufaaaa! Espero que você tenha compreendido e este componente é beeem mais fácil de implementar do que o anterior, o ion-actionsheet, lembre-se qualquer dúvida deixe nos comentários, terei o prazer em ajudá-los(las/les), grande abraço e Fiquem com Deus!!!<br /></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-54673094182066650202022-07-16T06:36:00.002-07:002022-07-16T06:36:45.591-07:00Ion-actionsheet<p style="text-align: justify;"> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHrxO8Zk2AnA67qonxZz8FfkQp_JZEHr9rKvlg0HMAtO8OiL4jMJiiP-PlReK0pw-0FlEKjKYlu7muZ3ZWkhdLPeJLgT80Z83ivvvXZpnCH0l66GbIsx3FdmY-bjlYNuoBysHog9772sKV6mzoO_r8QTTdtij3e9zjpKRj59phQTxdn_cisOVnAYx/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHrxO8Zk2AnA67qonxZz8FfkQp_JZEHr9rKvlg0HMAtO8OiL4jMJiiP-PlReK0pw-0FlEKjKYlu7muZ3ZWkhdLPeJLgT80Z83ivvvXZpnCH0l66GbIsx3FdmY-bjlYNuoBysHog9772sKV6mzoO_r8QTTdtij3e9zjpKRj59phQTxdn_cisOVnAYx/s320/ionic-logo.png" width="320" /></a></div><br /><p></p><p style="text-align: justify;"> <span> </span>Galerinha, a partir de agora, iniciaremos uma sequência de estudos nos componentes visuais Ionic. Sempre haverá um pequeno texto explicativo alguns exemplos de implementação (não confunda com utilização, mesmo porque vários itens dependem de banco de dados e afins) e personalização (como troca de cores), óbvio que haverá também sempre alguma imagem ilustrativa.</p><p style="text-align: justify;"><span> </span><span> </span>Para todos os projetos vamos interpretar que você já leu os artigos anteriores e não vamos ser repetitivos, combinado? Então vamos ao que interessa.</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtLOA_usCqrFNm5I5HqFwNRO-YWVQOS50w0QVgNWBF71vPY7InCj4_zoVfWT6_U5TCvuAj2J_VBUj_PnyjjU7IavZ2RFxOlK7fDpEUTNOBsmsfKYbBx3tRnH_JCXTbgUeDtNiX8pG40-ib8rZPeJBPvCHZvcPu4Ks_TSrIaoc29ZG6uj3896OAuOg3/s648/ActionSheet01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="648" data-original-width="333" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtLOA_usCqrFNm5I5HqFwNRO-YWVQOS50w0QVgNWBF71vPY7InCj4_zoVfWT6_U5TCvuAj2J_VBUj_PnyjjU7IavZ2RFxOlK7fDpEUTNOBsmsfKYbBx3tRnH_JCXTbgUeDtNiX8pG40-ib8rZPeJBPvCHZvcPu4Ks_TSrIaoc29ZG6uj3896OAuOg3/s320/ActionSheet01.png" width="164" /></a></div><br /> <span> </span><span style="color: #3d85c6;"><b><span style="font-size: large;">ion-actionsheet</span></b></span> <p></p><p style="text-align: justify;"><span> </span>De forma bem grosseira é um menu que aparece de baixo para cima, próximo do meio da tela com uma variedade de botões ou escolhas depende do contexto e que geralmente é chamado por um clique do usuário em algum componente. A imagem acima ilustra bem ele já sendo chamado.</p><p style="text-align: justify;"><span> </span>Sim, sim, eu sei que você quer saber como colocar isto no seu app, vamos a implementação! Ele não é um item copia e cola trivial, para que ele funcione é necessário uma ação conjunta entre a parte HTML e Typescript.<br /></p><p><span> </span>Para todos os exemplos de implementação utilizaremos o blank (app limpo) e se seguirmos os artigos anteriores teremos a tela abaixo:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4p0o7HLm7NMcbCAoEyXhEuIdqCPQaxWABaRS_c_k1_H0RHj_55KxAjjbZ7WM86YMq-U0t6pMYj5WSRdI6qyv9UE61z41q9bONgZBhj-69EVdefxuUNZxegEeWZ93dW6rJt5vWOg08BcsW3zaFa8WcmLjNwgdWbr-umrqsBBJaLbmpFZHGBGzNiX_/s1096/telaLimpa01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="467" data-original-width="1096" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4p0o7HLm7NMcbCAoEyXhEuIdqCPQaxWABaRS_c_k1_H0RHj_55KxAjjbZ7WM86YMq-U0t6pMYj5WSRdI6qyv9UE61z41q9bONgZBhj-69EVdefxuUNZxegEeWZ93dW6rJt5vWOg08BcsW3zaFa8WcmLjNwgdWbr-umrqsBBJaLbmpFZHGBGzNiX_/s320/telaLimpa01.png" width="320" /></a></div><p></p><p><span> </span>Vamos deixar a nossa tela limpa tirando tudo do que está dentro da TAG ion-content que ficará como na imagem abaixo:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WuoeSeeXxlIB-yGpIOpm-_vdiqdx50uRkXDxGWIY6CQ6scFy3R-NfrClMZ5C67Ov1IuGkFo2OiaWvyola72RXPSp50g1SONDOfp0ZUotgysil-pQWXKX0ChatMTnOHIc3qXQG-oiXEKv-9E_FQZd2bUN4R9z7yhwfvmp26gGm26ABtP4oq8nnP8i/s780/contentLimpo01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="308" data-original-width="780" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WuoeSeeXxlIB-yGpIOpm-_vdiqdx50uRkXDxGWIY6CQ6scFy3R-NfrClMZ5C67Ov1IuGkFo2OiaWvyola72RXPSp50g1SONDOfp0ZUotgysil-pQWXKX0ChatMTnOHIc3qXQG-oiXEKv-9E_FQZd2bUN4R9z7yhwfvmp26gGm26ABtP4oq8nnP8i/s320/contentLimpo01.png" width="320" /></a></div><br /><p><span> </span>Agora podemos começar, vamos colocar um simples botão apenas para chamar o componente, siga a imagem abaixo: <br /></p><p><span> </span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh13gyVc1QuyRYf-Mfh82ePK83Hz7QJyYMob_s8i3YFOErDkVkDYzodHu2vy7afTBg7B4eSZAIHOgInjrc_A_pC_3FijYbLzHvNPW2TkU0Nqq7qtVh1NZ6GRepyUghZtm5vx2AqKhGQtJpJt1AXPgsdbXwaAxaKlZjn4XYHM8er39_RNCDuq7cj38CJ/s795/ActionSheet02.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="312" data-original-width="795" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh13gyVc1QuyRYf-Mfh82ePK83Hz7QJyYMob_s8i3YFOErDkVkDYzodHu2vy7afTBg7B4eSZAIHOgInjrc_A_pC_3FijYbLzHvNPW2TkU0Nqq7qtVh1NZ6GRepyUghZtm5vx2AqKhGQtJpJt1AXPgsdbXwaAxaKlZjn4XYHM8er39_RNCDuq7cj38CJ/s320/ActionSheet02.png" width="320" /></a></div><br /><p></p><p><span> </span>Com este código aparecerá um botão, como na imagem:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGGZUPvgevF6gC_cWRXVF_MdmEEg0odZxWs-BtsPW6_cbYGAS_SLKZhGqp6k9HeOI5XXARSXDatN8jQW_iucIHRCYi0rj0ihKlLVrLNKWBsj7BRYFi0ie0i8RCkCd1XD2wNXdokbzL-zcxyXo541NPWWVvXob4_RJ8G0yIH9a9V5MxqvX0TSP_3Vz/s545/ActionSheet03.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="545" data-original-width="429" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGGZUPvgevF6gC_cWRXVF_MdmEEg0odZxWs-BtsPW6_cbYGAS_SLKZhGqp6k9HeOI5XXARSXDatN8jQW_iucIHRCYi0rj0ihKlLVrLNKWBsj7BRYFi0ie0i8RCkCd1XD2wNXdokbzL-zcxyXo541NPWWVvXob4_RJ8G0yIH9a9V5MxqvX0TSP_3Vz/s320/ActionSheet03.png" width="252" /></a></div><br /><p></p><p style="text-align: justify;"><span> </span>Agora faremos uma série de inclusões no código <i>TypeScript</i> do arquivo home.page.ts, não é necessário entender "muuuuuuito" dos códigos <i>TypeScript</i>, neste momento, porque em artigos posteriores vamos falar melhor sobre como manipular de forma plena o <i>TypeScript</i> no contexto do Ionic, por hora execute cada passo mostrado. Com isso vamos acrescentar uma importação da biblioteca do <u>ActionSheet</u>, como na imagem abaixo:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSSDgLlKab_Z9cWJanhDgPhpatl6jed-Q2Hp9Qpt9OaH7cQd8qAecUdAOnFPKugcp_mns30hex3zLNJhUjFQfXBnPqwOsM75pNTAqQCN0JruBRukkDSXGVvPkwcaH3UcBw-rdmrrhF9mgDrc4q5KEFvgb3iPNoLopaeV8DDxntCGtXLBYPTWHlR08/s1026/importActionSheet01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="352" data-original-width="1026" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSSDgLlKab_Z9cWJanhDgPhpatl6jed-Q2Hp9Qpt9OaH7cQd8qAecUdAOnFPKugcp_mns30hex3zLNJhUjFQfXBnPqwOsM75pNTAqQCN0JruBRukkDSXGVvPkwcaH3UcBw-rdmrrhF9mgDrc4q5KEFvgb3iPNoLopaeV8DDxntCGtXLBYPTWHlR08/s320/importActionSheet01.png" width="320" /></a></div><p><span> </span>Vamos agora acrescentar um controlador no construtor, como na imagem abaixo: <br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwAh-zRndaiHVV4Y6s6TxYS_Qk02YjsX3Ue9ZEN9lG1WHy9NufmuYU1I-FyMCt9-qKczEKlmwJXUDeNWmLw6wYgNUoxfuj5JXhwNebtsOGI_RLkwB3wFW241FeBHhuhIJN0gBxu_msbET9GhgAVumeZJ2ohzEtE0x96dTToKJXEayKXDsCpOYUmy2I/s1024/controladorActionSheet01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="357" data-original-width="1024" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwAh-zRndaiHVV4Y6s6TxYS_Qk02YjsX3Ue9ZEN9lG1WHy9NufmuYU1I-FyMCt9-qKczEKlmwJXUDeNWmLw6wYgNUoxfuj5JXhwNebtsOGI_RLkwB3wFW241FeBHhuhIJN0gBxu_msbET9GhgAVumeZJ2ohzEtE0x96dTToKJXEayKXDsCpOYUmy2I/s320/controladorActionSheet01.png" width="320" /></a></div><p></p><p><span> </span>Enfim vamos colocar o método que faz a "<i>magia</i>" acontecer de fato, coloque o método exatamente entre o construtor e a chave de fechamento, faça exatamente como na imagem abaixo (a imagem está pegando apenas uma parte do método):</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNleRVqL-FWjJ1gp6PbY97VwXRRBroDcK21F5jDKK3H7doTbCJY_BL4GRFb9DBbTjSyzm14tVDULvO5Hi3BptpAsp9KvaMO6I5It7UJFgcDoT-Papi4Uj3TtjAiz8klIPH7Dm_2jR_Ogc3OPw1On5-dc3ng0cg4bjiGaLjje46LjKnB9RnEgzVy7GP/s1037/metodoActionSheet01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="560" data-original-width="1037" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNleRVqL-FWjJ1gp6PbY97VwXRRBroDcK21F5jDKK3H7doTbCJY_BL4GRFb9DBbTjSyzm14tVDULvO5Hi3BptpAsp9KvaMO6I5It7UJFgcDoT-Papi4Uj3TtjAiz8klIPH7Dm_2jR_Ogc3OPw1On5-dc3ng0cg4bjiGaLjje46LjKnB9RnEgzVy7GP/s320/metodoActionSheet01.png" width="320" /></a></div><p></p><p><span> </span>Como o código do método é um pouco extenso vou colocar logo abaixo ele na íntegra:</p><p> <span style="font-family: courier;">async exemploActionSheet() {<br /> const actionSheet = await this.actionSheetController.create({<br /> header: 'Galeria',<br /> cssClass: 'my-custom-class',<br /> buttons: [{<br /> text: 'Excluir',<br /> role: 'destructive',<br /> icon: 'trash',<br /> id: 'delete-button',<br /> data: {<br /> type: 'delete'<br /> },<br /> handler: () => {<br /> console.log('Excluir Clicado');<br /> }<br /> }, {<br /> text: 'Compartilhar',<br /> icon: 'share',<br /> data: 10,<br /> handler: () => {<br /> console.log('Compartilhar Clicado');<br /> }<br /> }, {<br /> text: 'Play (abrir modal)',<br /> icon: 'caret-forward-circle',<br /> data: 'Data value',<br /> handler: () => {<br /> console.log('Play clicado');<br /> }<br /> }, {<br /> text: 'Favorito',<br /> icon: 'heart',<br /> handler: () => {<br /> console.log('Favorito clicado');<br /> }<br /> }, {<br /> text: 'Cancelar',<br /> icon: 'close',<br /> role: 'cancel',<br /> handler: () => {<br /> console.log('Cancelar clicado');<br /> }<br /> }]<br /> });<br /> await actionSheet.present();<br /><br /> const { role, data } = await actionSheet.onDidDismiss();<br /> }</span><br /></p><p><span> </span>Este método deve ser chamado pelo botão que fizemos no HTML, portanto, vamos voltar lá e colocá-lo no evento click do botão, como na imagem abaixo:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvC1_v60R3zxqWUrA6ZMRvrQSicvoaKGGjqIq_QSKdla8kXt1ciZHAJdKRWIiLPaPHBz-DatE5IOTS9bhzG0I6u9kkA9T9yZaa7cznb7Qt4qpagwLwEvZCUXb4RdL54V_OkXUrjLR6GxASrGMLVOEuRm3uJHv8q1qi1CbLeMXc1x0kXwOF_gMpoO6U/s1053/botaoActionSheet01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="327" data-original-width="1053" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvC1_v60R3zxqWUrA6ZMRvrQSicvoaKGGjqIq_QSKdla8kXt1ciZHAJdKRWIiLPaPHBz-DatE5IOTS9bhzG0I6u9kkA9T9yZaa7cznb7Qt4qpagwLwEvZCUXb4RdL54V_OkXUrjLR6GxASrGMLVOEuRm3uJHv8q1qi1CbLeMXc1x0kXwOF_gMpoO6U/s320/botaoActionSheet01.png" width="320" /></a></div><br /><p><span> </span>Por fim vamos ver como ficou, o botão deve ficar da seguinte maneira:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbCIfQJ2dgRpp7opTnqgZg1wZuYFv-hWUxjo8HW8ydHw1MQ9ncG1wZuRLI4LtgDt9HUogwW2PNiJIHIS_cGIS_2uHMNwZ5Nn9NoK-X7irU9LuuJMiae6ujf9CvSucIsC38GYbpcevba47epNzlun67nD8LNR099uMBKzpSIXZnMSHdoe9eQOUn28vt/s709/actionSheetPronto01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="709" data-original-width="415" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbCIfQJ2dgRpp7opTnqgZg1wZuYFv-hWUxjo8HW8ydHw1MQ9ncG1wZuRLI4LtgDt9HUogwW2PNiJIHIS_cGIS_2uHMNwZ5Nn9NoK-X7irU9LuuJMiae6ujf9CvSucIsC38GYbpcevba47epNzlun67nD8LNR099uMBKzpSIXZnMSHdoe9eQOUn28vt/s320/actionSheetPronto01.png" width="187" /></a></div><span> </span>E quando clicado ficará da seguinte maneira:<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ6emOeptnHbJnzZfrtsxlmYzWgr-u2Hcp8i3TgA8EOb3VNf8PpAt5AOd238FCfVdm9_R-hiCFVLq--mEihNKS5frepM9CdXV9d2EyYsYVG6aaIN4rxRQgatekx-gXuyiyF3wU3keBd1TRygq9XF4e5U22VPsYazDSZKCPbsZJov_fQsELExOt-TLm/s694/actionSheetClicado01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="694" data-original-width="430" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ6emOeptnHbJnzZfrtsxlmYzWgr-u2Hcp8i3TgA8EOb3VNf8PpAt5AOd238FCfVdm9_R-hiCFVLq--mEihNKS5frepM9CdXV9d2EyYsYVG6aaIN4rxRQgatekx-gXuyiyF3wU3keBd1TRygq9XF4e5U22VPsYazDSZKCPbsZJov_fQsELExOt-TLm/s320/actionSheetClicado01.png" width="198" /></a></div><p style="text-align: justify;"><span> </span>Muito bem, mesmo que ainda não estamos discutindo a importância do <i>Typescript</i> agora, precisamos fazer alguns comentários. Vamos começar com os ícones, percebam que dentro do método "<i><b>exemploActionSheet()</b></i>" existem subdivisões que tratam com cada botão, vamos ver o exemplo abaixo:<br /></p><p><span> <span> </span><span> </span></span><span style="font-family: courier;">}, {<br /> text: 'Favorito',<br /> icon: 'heart',<br /> handler: () => {<br /> console.log('Favorito clicado');<br /> }<br /> }, {</span></p><p style="text-align: justify;"><span> No exemplo acima temos as especificações do botão de "<i>Favorito</i>" vejam que todos possuem a propriedade "<i>text</i>" que obviamente é a palavra ou texto que aparecerá para o usuário logo depois temos "<i>icon</i>" que representa o "desenhinho", ou ícone, que você quer que apareça para o usuário, mas você deve estar perguntando: "<u>Da onde ele tira este nome para o ícone?</u>", boa pergunta nenê, você encontrará vários ícones no link dos ícones do ionic clicando <a href="https://ionic.io/ionicons" target="_blank">aqui</a> (falaremos mais sobre ícones em artigos posteriores). </span></p><p style="text-align: justify;"><span><span> </span>Continuando nossos estudos temos a propriedade "<i>handler</i>" que "captura" o clique do usuário, onde neste exemplo apenas demos saída para o console, em artigos posteriores trabalharemos melhor isto, não se preocupe agora. Quanto a personalização de cores será tudo realizado por CSS que faremos em artigos posteriores. Em outros botões há outras propriedades que falaremos com mais ênfase em artigos posteriores fique ligado! Por hora é importante que você execute as instruções demonstradas aqui com sucesso!</span></p><p style="text-align: justify;"><span><span> </span>Espero que esteja apreciando esta nova sequência de artigos, lembre-se que se tiver alguma dúvida deixe nos comentários que terei o prazer da ajudar naquilo que compete meu conhecimento sobre o assunto, grande abraço e fiquem com Deus!!! </span><br /></p><p><span> </span><br /></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-35277445430625921352022-07-01T17:33:00.004-07:002022-07-01T17:33:53.285-07:00Modificações Simples em projeto Ionic. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFeCCDMxqmyu0KyUWzBQpT1D-p5i9_etgok2ihBXr_S5M2I9A8wU9_7HLiZKq9NU2NTOPCSQtrYBDhH3tqOApTQm0ojhB9d3-DXqx9dSh_xhgmHLjXrHvIKGBZgjSIoEvDsIgukgRCRhvR1zmfpW89aIC88FekZV5EAUN6uIExw4qtKWkypEW-uKt/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFeCCDMxqmyu0KyUWzBQpT1D-p5i9_etgok2ihBXr_S5M2I9A8wU9_7HLiZKq9NU2NTOPCSQtrYBDhH3tqOApTQm0ojhB9d3-DXqx9dSh_xhgmHLjXrHvIKGBZgjSIoEvDsIgukgRCRhvR1zmfpW89aIC88FekZV5EAUN6uIExw4qtKWkypEW-uKt/s320/ionic-logo.png" width="320" /></a></div><p></p><p style="text-align: justify;"><span> </span>Faaaaala galerinha! Hoje vamos fazer modificações simples com HTML e CSS, caso você não conheça o básico de HTML ou CSS, sugiro que dê uma olhada neles e depois volte aqui pois é necessário saber o básico destas duas tecnologias para que se possa absorver o conhecimento passado neste artigo, combinado? Ok, vamos lá!</p><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXWN9ZN3uPGrOSmmfJRXWyfJyW4GIRpktXaEVa_1IlDKi9UQVgvi8EQpPc7hNlVwGHZeTK1pwB_0sqMS3OWxniPke_LEn9sZWJ0ltPCnhAMJ8v-su9ynxO0R529aBxTCZ52aMrNCGmopG27YCcq_WiCGajmip_H3jql_KP3PZFYlk7wyPzGgYtehq/s1280/visualstudiocode_logo.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="720" data-original-width="1280" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXWN9ZN3uPGrOSmmfJRXWyfJyW4GIRpktXaEVa_1IlDKi9UQVgvi8EQpPc7hNlVwGHZeTK1pwB_0sqMS3OWxniPke_LEn9sZWJ0ltPCnhAMJ8v-su9ynxO0R529aBxTCZ52aMrNCGmopG27YCcq_WiCGajmip_H3jql_KP3PZFYlk7wyPzGgYtehq/w200-h113/visualstudiocode_logo.png" width="200" /></a></div><p></p><p style="text-align: justify;"><span> </span>Já faça o que se tornou o clássico, abra o prompt entre na pasta do seu projeto (vou usar o anterior "teste001") e dê um ionic serve para subi-lo, logo depois já abra o Visual Studio Code na pasta do seu projeto e vamos codificar.</p><p style="text-align: justify;"><span> </span>Com o arquivo home.page.html, que discutimos no artigo passado, vamos fazer algumas TAG`s básicas HTML para que você possa perceber que várias TAG`s HTML funcionam plenamente aqui no ionic. </p><p style="text-align: justify;"><span> </span>Antes da TAG DIV vamos colocar uma H1 com o texto "Teste de Título". Seguindo as imagens abaixo.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTCqHluGPn6FVgeSDwf15zh-K_bWkOSeathgS7w8tziIvAwQlJdbUpnQARyg8UjoVr4X5gRhrPro0xm-KFqxSRCwSQxnigY_uNLKe8yH-R7T9LjgShOtN6UvLacgyVMi8Flzr5BhFlIOc1PNPr0WQZRw0EJksPhY0VUX945Rs5so_3e8SfOLhto8ro/s962/fraseDepois01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="274" data-original-width="962" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTCqHluGPn6FVgeSDwf15zh-K_bWkOSeathgS7w8tziIvAwQlJdbUpnQARyg8UjoVr4X5gRhrPro0xm-KFqxSRCwSQxnigY_uNLKe8yH-R7T9LjgShOtN6UvLacgyVMi8Flzr5BhFlIOc1PNPr0WQZRw0EJksPhY0VUX945Rs5so_3e8SfOLhto8ro/s320/fraseDepois01.png" width="320" /></a></div><p style="text-align: justify;">código antes da alteração</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_9Iu6uJk5Y4HA2Zd83oQONMHGKo0txoprvrlQj1TrAKurgWhNS4lR64bK71gFYlnBeZvX_I1K4BCgIas-Ge6wUvt3UJHyHP6GNHQ_fZkPlr59nRLVSUZPp_iOR7537uMbKs42fONbOkyiB-qm4n-tKOITiGne_Rdxok4ELyGJuZradWlRS40txVfC/s947/h101.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="291" data-original-width="947" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_9Iu6uJk5Y4HA2Zd83oQONMHGKo0txoprvrlQj1TrAKurgWhNS4lR64bK71gFYlnBeZvX_I1K4BCgIas-Ge6wUvt3UJHyHP6GNHQ_fZkPlr59nRLVSUZPp_iOR7537uMbKs42fONbOkyiB-qm4n-tKOITiGne_Rdxok4ELyGJuZradWlRS40txVfC/s320/h101.png" width="320" /></a></div><p style="text-align: justify;"></p><p style="text-align: justify;">código com a alteração</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgXvrZ9QIoEUpk2pKEKCtWFfgKb-z7HCdXg23vZ7D281kjqXb2C05e_XtH1Ma4ISrhyzkXy3ISehVG05owkaVBBYHZwqPdKV1wHET-3oTRPuCV18xj9jrT3HCtV4V0is73vAvHGTVE0x-nC7dr2SLvu-9i_HhJQ6VVVjQ-lb2XVZwE7rmA_lhTV-Q/s457/testeH101.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="457" data-original-width="457" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgXvrZ9QIoEUpk2pKEKCtWFfgKb-z7HCdXg23vZ7D281kjqXb2C05e_XtH1Ma4ISrhyzkXy3ISehVG05owkaVBBYHZwqPdKV1wHET-3oTRPuCV18xj9jrT3HCtV4V0is73vAvHGTVE0x-nC7dr2SLvu-9i_HhJQ6VVVjQ-lb2XVZwE7rmA_lhTV-Q/s320/testeH101.png" width="320" /></a></div><p style="text-align: justify;">tela após a alteração</p><p style="text-align: justify;"><span> </span>Virão como é fácil, coloque você mesmo mais TAG`s HTML para ver como elas reagem neste ambiente de app mobile. </p><p style="text-align: justify;"><span> </span>Desta vez vamos um pouco mais longe, vamos agora colocar uma TAG P com uma frase: "Blog mais sensacional do universo!!!" e vamos colocar uma class CSS nele para promovermos algumas personalizações com CSS. Siga as telas abaixo:</p><p style="text-align: justify;"> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYFq6JvB920XSRTHwR5lqYgRQBw1ED35gSLag5Xa5Zr7X4NqHukvScsJeQWmiA4KAoxN9JhXh-eu2jK48M-CHgl5hbu5fiz9NFT2-dXsf1HKiwcfRbGy1TQA9cIoQHGRnx2-mEwtJCwSuDmXiJLcylLpUlqV6utahkiCGuDjVqDqrh-HsZoPLZO0s/s1055/tagPComClass01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="282" data-original-width="1055" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYFq6JvB920XSRTHwR5lqYgRQBw1ED35gSLag5Xa5Zr7X4NqHukvScsJeQWmiA4KAoxN9JhXh-eu2jK48M-CHgl5hbu5fiz9NFT2-dXsf1HKiwcfRbGy1TQA9cIoQHGRnx2-mEwtJCwSuDmXiJLcylLpUlqV6utahkiCGuDjVqDqrh-HsZoPLZO0s/s320/tagPComClass01.png" width="320" /></a></div><p></p><p style="text-align: justify;">aplicação da tag P no código</p><p style="text-align: justify;"> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3nUGha3tO57y3bYDYQdj_1cyjrHEFcG5YPkwQHo0YSb86zIQKtw9ureJfnr9W0gCUaISMU8cSMnHHI5Ua79c4OxESe2-Og2_6s0pmz--ekFZ1A8sNZxub5PyqmDrHTf2UTi3P8JDf3CbJdBfFVmzysjBr5XHRRYKV1qH7cHDL7rtcXMvyLomJx-KQ/s462/tagP01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="294" data-original-width="462" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3nUGha3tO57y3bYDYQdj_1cyjrHEFcG5YPkwQHo0YSb86zIQKtw9ureJfnr9W0gCUaISMU8cSMnHHI5Ua79c4OxESe2-Og2_6s0pmz--ekFZ1A8sNZxub5PyqmDrHTf2UTi3P8JDf3CbJdBfFVmzysjBr5XHRRYKV1qH7cHDL7rtcXMvyLomJx-KQ/s320/tagP01.png" width="320" /></a></div><br /><p></p><p style="text-align: justify;">A tag P renderizada no app.</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEEKZ8jH0gaNr6fg1X3uVGb5G1Kc_rb7-Tw9gpjMaNirSBdCFGfh2TxVBe50KL2LNzk-NAWjpWX2CH9WHavA_Q_DckoKTBpDIc2HhC8GzsCjdgYh5jJkZReyQzj2REIjrsRb3B4CN5RokOm6ZtBFcHu5BYY3EBfMCK-RIxJWJ7kmOWujL-O9uXdnos/s864/classVerde01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="435" data-original-width="864" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEEKZ8jH0gaNr6fg1X3uVGb5G1Kc_rb7-Tw9gpjMaNirSBdCFGfh2TxVBe50KL2LNzk-NAWjpWX2CH9WHavA_Q_DckoKTBpDIc2HhC8GzsCjdgYh5jJkZReyQzj2REIjrsRb3B4CN5RokOm6ZtBFcHu5BYY3EBfMCK-RIxJWJ7kmOWujL-O9uXdnos/s320/classVerde01.png" width="320" /></a></div><br /> Abrindo o arquivo home.page.scss e aplicando a class teste ao final do arquivo trocando a cor <br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKN1xhGjPyzJgZleIyr5Y3owEX3z8ue02SfvszlECGaJrdJkQE6VgoEUDuXKUygyLI5mc8QBHOYbBgjm2KGpnOYTrwythNRvCVXgmEFUqTuxLrEktaftxEjCEDINm4Yzx8_lVUJqw3DcRmf4sR2ApoiP_w2aaR4Myly9cgP9KPFjsygKw4tpYsa4bc/s442/renderizadoVerde01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="143" data-original-width="442" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKN1xhGjPyzJgZleIyr5Y3owEX3z8ue02SfvszlECGaJrdJkQE6VgoEUDuXKUygyLI5mc8QBHOYbBgjm2KGpnOYTrwythNRvCVXgmEFUqTuxLrEktaftxEjCEDINm4Yzx8_lVUJqw3DcRmf4sR2ApoiP_w2aaR4Myly9cgP9KPFjsygKw4tpYsa4bc/s320/renderizadoVerde01.png" width="320" /></a></div><p></p><p style="text-align: justify;">A renderização com a cor trocada</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMTbWbF-j6f2rRxxFW4cyioqDnwwtEgxZRbgUqI_v9_mPijCnDx_oEVpv5gc8Emc6T8H3mxhPFC9p0X4AQkI14INXAVquZmsGDHvWKViNl-ej9TnAqxfStMgqDFgy5c5xh5IBVmmFzA6TrQy2M0pah0fDScJr3J5btnf9bAgvRhk-vs689osVdTqL9/s768/classNegrito01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="231" data-original-width="768" height="96" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMTbWbF-j6f2rRxxFW4cyioqDnwwtEgxZRbgUqI_v9_mPijCnDx_oEVpv5gc8Emc6T8H3mxhPFC9p0X4AQkI14INXAVquZmsGDHvWKViNl-ej9TnAqxfStMgqDFgy5c5xh5IBVmmFzA6TrQy2M0pah0fDScJr3J5btnf9bAgvRhk-vs689osVdTqL9/s320/classNegrito01.png" width="320" /></a></div><br /> Agora colocando negrito com font-weight <br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-2ucLpu_VkT_JdSVpduN9uNSW_X1JW7PSr2myLzLfL2daiTvmqqGdMlqtn0BzW93YH6Hw1BbcgPJGx-zpI5KLooXr1m4g2l2ssQ2QZa431d1hEQQ2oldLXVmA5i1KBuum9KkjkhwuFztkuV5W4mphyo0GSZcaw_On5AJDyw-i6-LzqvT1AK2POeK/s436/renderizadoNegrito01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="327" data-original-width="436" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-2ucLpu_VkT_JdSVpduN9uNSW_X1JW7PSr2myLzLfL2daiTvmqqGdMlqtn0BzW93YH6Hw1BbcgPJGx-zpI5KLooXr1m4g2l2ssQ2QZa431d1hEQQ2oldLXVmA5i1KBuum9KkjkhwuFztkuV5W4mphyo0GSZcaw_On5AJDyw-i6-LzqvT1AK2POeK/s320/renderizadoNegrito01.png" width="320" /></a></div><p></p><p style="text-align: justify;">E ela finalizada com a troca da cor e o negrito</p><p style="text-align: justify;"><span> </span>Lembrando que cada modificação só é efetuada depois que você salva o arquivo!!! <br /></p><p style="text-align: justify;"><span> </span>Com isso percebemos que podemos utilizar as TAG`s HTML como desenvolvemos páginas de internet e utilizar as técnicas de CSS também da mesma forma, faça mais TAG`s e mais personalizações com CSS por sua conta e veja como vai ficando, qualquer coisa deixe no comentário sua dúvida que terei o prazer de responder suas dúvidas assim que possível!!! Grande abraço e fique com Deus!!! <br /></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-67512543578594000982022-07-01T16:42:00.002-07:002022-07-01T16:42:58.408-07:00Estrutura Básica de um novo projeto Ionic<p style="text-align: justify;"> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQEqqvsjs4RSkZqYBLewI6ROMfGwWGEXobzfUI9844mAqCFTW9YtnkTuh_nyt8UBE4Xi_jPrCQx_aB6p6PvWvWkaOqQxm3FFhemlkTeMzG8d-bq7F0JXL1UZV-_rJ0NOXd0j6Gsp64Ayv8asM17nm6d_Hsbut-eteh7wDoF-C6uwkrbdQVQV1a3Wp/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQEqqvsjs4RSkZqYBLewI6ROMfGwWGEXobzfUI9844mAqCFTW9YtnkTuh_nyt8UBE4Xi_jPrCQx_aB6p6PvWvWkaOqQxm3FFhemlkTeMzG8d-bq7F0JXL1UZV-_rJ0NOXd0j6Gsp64Ayv8asM17nm6d_Hsbut-eteh7wDoF-C6uwkrbdQVQV1a3Wp/s320/ionic-logo.png" width="320" /></a></div><br /><p></p><br /><p style="text-align: justify;"><span> </span>Olá amiguinhos e amiguinhas e amiguinhes, o lance de hoje é estrutura básica de um projeto novo em ionic, vamos utilizar o modelo <u>blank</u>, e se você está acompanhando a série das últimas postagens não preciso explicá-lo, para discutirmos isto utilizaremos ele.</p><p style="text-align: justify;"><span> </span>Então vamos iniciar o projeto blank, se você não lembra como criar um projeto blank leia atentamente este <a href="https://cafeelefantepinguim.blogspot.com/2022/06/modelos-de-apps-ionic-para-comecar-um.html" target="_blank">artigo</a>, vamos dar o nome de<u> teste001</u>. Logo depois de criado, entre na pasta dele com <i>cd teste001</i> e dê um <i>ionic serve</i> para subir o projeto no navegador para que possamos visualizar melhor as modificações que fizermos. </p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: right;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPHOvtV_hNG6YEPd1z2vfsqCJ_DP-RBruJg8yP9LBhBHSp94ZkKhQPgD3Oek1gGyMer-DPQ4NTDU9YnkbSqTzid3AfgF1MFJ-5MhvRJi5Moj4QdQYvCffHFStbHAlipPiUzHTLaK-cEcwHNWyQUSGDAgEPhfoczd3RokcxzAbCZXXM5ug8h_6cGs36/s1280/visualstudiocode_logo.png" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="720" data-original-width="1280" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPHOvtV_hNG6YEPd1z2vfsqCJ_DP-RBruJg8yP9LBhBHSp94ZkKhQPgD3Oek1gGyMer-DPQ4NTDU9YnkbSqTzid3AfgF1MFJ-5MhvRJi5Moj4QdQYvCffHFStbHAlipPiUzHTLaK-cEcwHNWyQUSGDAgEPhfoczd3RokcxzAbCZXXM5ug8h_6cGs36/w200-h113/visualstudiocode_logo.png" width="200" /></a></div><span><div style="text-align: justify;"><span> </span>Depois do <i>ionic serve</i> o projeto subiu no navegador e agora é a hora de deixar o navegador com "cara" de celular, se não sabe fazê-lo leia este <a href="https://cafeelefantepinguim.blogspot.com/2022/06/criacao-de-novo-projeto-com-ionic.html" target="_blank">artigo</a>. Agora abra seu Visual Studio Code, ah você ainda não instalou, então leia este <a href="https://cafeelefantepinguim.blogspot.com/2022/06/instalacao-ionic.html" target="_blank">artigo</a>, já tem instalado? Então vamos seguir, se o seu Visual Studio Code estiver em <u>inglês</u> vá no menu<b> File</b> e logo depois <b>Open Folder</b> e procure a pasta do nosso projeto e clique em <b>Open</b>, se você estiver usando em <u>português</u> vá no menu <b>Arquivo </b>e logo depois <b>Abrir Pasta</b> e procure a pasta do nosso projeto e clique em <b>Abrir</b>. Enfim Seguindo as imagens abaixo:</div></span><p></p><p></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj80vNjNdCtW2M62WDsKxMF0iagBB0TgJNbpIhbSXJiFu-hGEWhJdSOaA5EsyZG0_s4dZgeFzaycl22CgbWamk8Pe61rD2FHQBeRai3OX0vBG9Z-9y2IaIHfoDZcsaMu9Qdk-ySOy7Sfs7EANWZSH7sJE3-YDgd0BcGnQ4IG9Yv3IB30d3YYH-Cr2za/s721/VSCArquivo01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="721" data-original-width="474" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj80vNjNdCtW2M62WDsKxMF0iagBB0TgJNbpIhbSXJiFu-hGEWhJdSOaA5EsyZG0_s4dZgeFzaycl22CgbWamk8Pe61rD2FHQBeRai3OX0vBG9Z-9y2IaIHfoDZcsaMu9Qdk-ySOy7Sfs7EANWZSH7sJE3-YDgd0BcGnQ4IG9Yv3IB30d3YYH-Cr2za/s320/VSCArquivo01.png" width="210" /></a></div>Arquivo.<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2PMeeZijwsoQfX1Yz23gUkuTZ91AVZy9B5p887rUmg4m3wegDHhoimCLePved7clzl7f8VTAC7uJ2CQdBupdwS4vx8CaM-hQxEdfyqV6-QH6D4kt37TsAC3RIqFysknyOSKLa_EM0UXEkH1w6VQyV00wUeb2CjYzzJ2S66NeNwJ_algCiwAdVfKyi/s452/VSCAbrirPasta01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="305" data-original-width="452" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2PMeeZijwsoQfX1Yz23gUkuTZ91AVZy9B5p887rUmg4m3wegDHhoimCLePved7clzl7f8VTAC7uJ2CQdBupdwS4vx8CaM-hQxEdfyqV6-QH6D4kt37TsAC3RIqFysknyOSKLa_EM0UXEkH1w6VQyV00wUeb2CjYzzJ2S66NeNwJ_algCiwAdVfKyi/s320/VSCAbrirPasta01.png" width="320" /></a></div><p></p><p>Abrir Pasta: irá abrir a tela de procura e procure a pasta do seu projeto (teste001), clique na pasta e clique em abrir.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2Rxgy6mpN8zPKFXsvJr_a4heUu9k7HSJe6uU1qt7vZ2QD8rMW5izreTL0VHGMU_ZGKXz_agv9zQznOyEoW6RQRo1G6eOr92S1RwSa132KYWpUdffqr75mW5K3yuhl4vR3reLwzrKAbJP2JajUEQr0WhieRe7cctSS870piklzlaOiB5gcwfdcP0w/s1280/VSCBLANK01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="776" data-original-width="1280" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2Rxgy6mpN8zPKFXsvJr_a4heUu9k7HSJe6uU1qt7vZ2QD8rMW5izreTL0VHGMU_ZGKXz_agv9zQznOyEoW6RQRo1G6eOr92S1RwSa132KYWpUdffqr75mW5K3yuhl4vR3reLwzrKAbJP2JajUEQr0WhieRe7cctSS870piklzlaOiB5gcwfdcP0w/s320/VSCBLANK01.png" width="320" /></a></div><p></p><p>Se você executou corretamente sua tela será a mesma acima.</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_4ubct8nmJXYM4C84vPXtyfgx4TSv8VxCXTgGZifBRTEeT3fP1qGnyZec8L2kuKOpTgzH3ZGzHblHuMRS7veRSuewKPPEBAz_l1vn3hRoTMgDkqmTKxs3mH3Qm_FuH7VypplxCs5hWY_cD9aCqH9aIh4pgxRmIWiXToQd6dZwoQHjcQXsVeuCcAqu/s1280/VSCsrc01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="778" data-original-width="1280" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_4ubct8nmJXYM4C84vPXtyfgx4TSv8VxCXTgGZifBRTEeT3fP1qGnyZec8L2kuKOpTgzH3ZGzHblHuMRS7veRSuewKPPEBAz_l1vn3hRoTMgDkqmTKxs3mH3Qm_FuH7VypplxCs5hWY_cD9aCqH9aIh4pgxRmIWiXToQd6dZwoQHjcQXsVeuCcAqu/s320/VSCsrc01.png" width="320" /></a></div><p></p><p>Por enquanto o que importa para nós é a pasta <b>SRC</b>, esqueça o restante.</p><p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSFK9lv5SaI6wd7rEdY1Rru_i0K9NSGVlwk-OazRqPJXu35jkOJnKMSpO7JdjtoLKBxOvbhvGUSIeSOetw1motuCzPJOi6zyVXaYwFOCLPKy23kIf5mmoGOnI_k2ThST19AkDJMcrGePjEILXKjTOGchKIfb52MPKwaXrZL8v_qbExM6OIhUdw3-uO/s1280/VSCapp01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="774" data-original-width="1280" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSFK9lv5SaI6wd7rEdY1Rru_i0K9NSGVlwk-OazRqPJXu35jkOJnKMSpO7JdjtoLKBxOvbhvGUSIeSOetw1motuCzPJOi6zyVXaYwFOCLPKy23kIf5mmoGOnI_k2ThST19AkDJMcrGePjEILXKjTOGchKIfb52MPKwaXrZL8v_qbExM6OIhUdw3-uO/s320/VSCapp01.png" width="320" /></a></div><br /><p></p><p>Dentro da pasta SRC você deve ater apenas a pasta <b>APP</b>.</p><p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjhgAdt3kDpxLvwglxBqRP2ppcHGdNZ0bEPIpmCgu4SQIexh2XBYbFl6cdGzG35hPIX9LrcrITzuEnLxlUBJE4YPaR97Xv0muQ5njidAIk6fBweg0hCyn6CjfnMoj1a9nHQCOVszdwtViRSMm1eynbCQoslBOCV5zjH2dQtclRMYsWgSxM0-EAOWDl/s1280/VSCblankHome01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="778" data-original-width="1280" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjhgAdt3kDpxLvwglxBqRP2ppcHGdNZ0bEPIpmCgu4SQIexh2XBYbFl6cdGzG35hPIX9LrcrITzuEnLxlUBJE4YPaR97Xv0muQ5njidAIk6fBweg0hCyn6CjfnMoj1a9nHQCOVszdwtViRSMm1eynbCQoslBOCV5zjH2dQtclRMYsWgSxM0-EAOWDl/s320/VSCblankHome01.png" width="320" /></a></div><br /><p></p><p>Por fim você chegou na pasta que vamos trabalhar que é a <b>HOME</b>. Abrindo a pasta HOME você terá 5 arquivos que vamos discorrer abaixo. </p><p><span><span> </span>Mais a frente veremos como criar uma tela, porém, uma verdade absoluta é de que (por enquanto) toda vez que criamos uma tela serão criados 6 arquivos. Estes 6 arquivos em conjunto formam a tela. Ok, entendi, mas para quê serve cada arquivo? Vamos então discorrer cada um.</span></p><p><span><span> </span>Tomamos a tela <u>home</u> como exemplo, a primeira coisa que percebemos é que todos os arquivos começam por <u>home</u>, com isto percebido vamos começar:</span></p><p><span><span> </span><i><b>home-routing.module.ts</b></i> : contém as rotas internas a partir desta tela (entenderemos posteriormente).</span></p><p><span><span> </span><i><b>home.module.ts </b></i>: contém os módulos / bibliotecas que ajudarão em programações mais personalizadas.</span></p><p><span><span> </span><i><b>home.page.html</b></i> : é neste arquivo que vamos inserir os componentes visuais, é onde vamos fazer o "esqueleto" de nossas telas, utilizando o HTML.<br /></span></p><p><span> <span> </span><i><b>home.page.scss</b></i> : é o clássico, é onde damos cores e belos designer`s para nossas telas, utilizando o CSS. <br /></span></p><p><span> <i><b>home.page.spec.ts</b></i> : que é onde realizamos os testes de software para mensurar a qualidade do software.</span></p><p><span><span> </span><b><i>home.page.ts </i></b>: que é onde realmente fazemos a "coisa" acontecer, onde criamos as variáveis, os métodos e toda a lógica de programação, utilizando o TYPESCRIPT. </span></p><p><span><span> </span>Agora, para fecharmos este artigo vamos fazer uma edição simples, vamos mudar a frase central de nosso aplicativo exemplo, a frase: "Ready to create an app?". Que se encontra, naturalmente, no arquivo home.page.html e que está na TAG ion-content que consequentemente está na TAG div:</span></p><p><span> </span></p><div class="separator" style="clear: both; text-align: center;"><span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidwcGviPe25ZJQGz97Id8am52DU_GdWqFGLoq9TopM9b4lS4V6f4jDimiWe2u-Dsf3KFtmkJMx-cStlIf4AKPJbir15_KJTbQzpXkUK512NemBisilYXDd5zrFYCSYiMysqwDwUfBGKOcqRTu-h7mCcW9JlMXyon3RzWnd1hyrvshXB4azfWofp8R3/s658/testeAntes01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="658" data-original-width="412" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidwcGviPe25ZJQGz97Id8am52DU_GdWqFGLoq9TopM9b4lS4V6f4jDimiWe2u-Dsf3KFtmkJMx-cStlIf4AKPJbir15_KJTbQzpXkUK512NemBisilYXDd5zrFYCSYiMysqwDwUfBGKOcqRTu-h7mCcW9JlMXyon3RzWnd1hyrvshXB4azfWofp8R3/s320/testeAntes01.png" width="200" /></a></span></div><p></p><p><span>tela inicial antes de modificarmos</span></p><p><span></span></p><div class="separator" style="clear: both; text-align: center;"><span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimSy1961E4c43FXnAy9D2vH5-12pJSHD9Wk8Cc_nvpAqFbW94lAqbbmkHeBEqbo__gRWbo-YpUlNwrTYHL09CKlJN1mUzYdBQyqLwM2VorP3S35plpGeav8xv1Bg4UMpD2z-ZEuDytd3zqWmt1WZCLA5wuFCEVkbKhjFW_z1hU-021R1GnzA7Nr8sG/s966/fraseAntes01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="348" data-original-width="966" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimSy1961E4c43FXnAy9D2vH5-12pJSHD9Wk8Cc_nvpAqFbW94lAqbbmkHeBEqbo__gRWbo-YpUlNwrTYHL09CKlJN1mUzYdBQyqLwM2VorP3S35plpGeav8xv1Bg4UMpD2z-ZEuDytd3zqWmt1WZCLA5wuFCEVkbKhjFW_z1hU-021R1GnzA7Nr8sG/s320/fraseAntes01.png" width="320" /></a></span></div><p></p><p><span>local da modificação</span></p><p><span></span></p><div class="separator" style="clear: both; text-align: center;"><span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijW-VCzZHWV9ATIt2jctoGJKKgjQIA8OLJynOw_S3i1V47TlnA39eXfsPDjV2E6Qcjdn8FfFOxWu7qxcSCrICQxM4E-WtU4PLSrH32MGOWP065eCdsaiqJGmyg0f0nC0Js_J2gbzerAZyZABXZ_kZDLcM05htaR7dlKenN-YLx_Gscbdn_Wzg1Aqe9/s962/fraseDepois01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="274" data-original-width="962" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijW-VCzZHWV9ATIt2jctoGJKKgjQIA8OLJynOw_S3i1V47TlnA39eXfsPDjV2E6Qcjdn8FfFOxWu7qxcSCrICQxM4E-WtU4PLSrH32MGOWP065eCdsaiqJGmyg0f0nC0Js_J2gbzerAZyZABXZ_kZDLcM05htaR7dlKenN-YLx_Gscbdn_Wzg1Aqe9/s320/fraseDepois01.png" width="320" /></a></span></div><span> </span><span></span><p></p><p><span>frase modificada (trocamos por: Está pronto para criar seu app? )<br /></span></p><p><span> </span></p><div class="separator" style="clear: both; text-align: center;"><span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zIuUQRt8vMaIRCa4CCjz2q0Pv7hFjWq9I5jP5NyYJkCI-Zo5LGYA6NhEnj3aP0KkotTCqt6ByTe6Ag_-Dg-EB0BgCzEPji5CoW-GpeeN8mnjFFMrxnJ5HsHtgebhsTfINvMXWP6xCDnwQVoAaCGfb6bikvGf9Xpw8zve5sZkqtHmofhBa0Uk__89/s520/testeDepois01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="360" data-original-width="520" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zIuUQRt8vMaIRCa4CCjz2q0Pv7hFjWq9I5jP5NyYJkCI-Zo5LGYA6NhEnj3aP0KkotTCqt6ByTe6Ag_-Dg-EB0BgCzEPji5CoW-GpeeN8mnjFFMrxnJ5HsHtgebhsTfINvMXWP6xCDnwQVoAaCGfb6bikvGf9Xpw8zve5sZkqtHmofhBa0Uk__89/s320/testeDepois01.png" width="320" /></a></span></div><p></p><p><span>tela modificada (não esqueça de salvar o arquivo modificado)</span><br /></p><p><span> Enfim, realizamos nossa primeira modificação com sucesso, simples, porém, com sucesso! No próximo artigo fazermos mais modificações simples para que vocês possam ir pegando o jeito, grande abraço e fiquem com Deus!!!</span><br /></p><span> </span><br /><br />leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-78119509682734346882022-06-27T07:56:00.000-07:002022-06-27T07:56:37.948-07:00Modelos de apps ionic para começar um novo projeto - parte II<p> </p><p style="text-align: justify;"><span></span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfCZ54MQoorX9Y_ltHmqGvWP-yeMbbQ8euAdoxgMdg1HhBNQZfiVP-XvK-6JQbuU54JB0e_PAeOKyZUJ9FDAwJHQhdLbZD-j1e0BRoj4XyGO5h3kjA3GhDtTpYhWNWopQVFTXZLkBVizCy0W_UzRNO3sR2K7qJACNSb9MzITg0F5WWOvCHTEkv-g3/s1024/ionic-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfCZ54MQoorX9Y_ltHmqGvWP-yeMbbQ8euAdoxgMdg1HhBNQZfiVP-XvK-6JQbuU54JB0e_PAeOKyZUJ9FDAwJHQhdLbZD-j1e0BRoj4XyGO5h3kjA3GhDtTpYhWNWopQVFTXZLkBVizCy0W_UzRNO3sR2K7qJACNSb9MzITg0F5WWOvCHTEkv-g3/s320/ionic-logo.png" width="320" /></a></div><p></p><p style="text-align: justify;"><span> </span>Olá amiguinhos e amiguinhas, neste post finalizaremos os modelos que usamos para
iniciar um novo projeto com o ionic framework!</p><p style="text-align: justify;"><span> </span>Sem frescuras já comecemos pelo <b>list</b>,
para criarmos um aplicativo com este modelo damos o seguinte comando no
prompt de comando (se você chegou agora convido a ler este <a href="https://cafeelefantepinguim.blogspot.com/2022/06/criacao-de-novo-projeto-com-ionic.html" target="_blank">artigo</a> para entender melhor esta parte):</p><p><i>ionic start nomeDoAplicativo04 list --type=angular</i></p><p style="text-align: justify;"> <span> </span>Assim
ele criará um projeto com este modelo, mas o que faz este modelo? Ele
cria um aplicativo com uma lista de itens clicáveis levando a telas personalizadas conforme o item clicado, as imagens
abaixo demonstram ele executado após o "ionic serve":</p><p style="text-align: justify;"><span></span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjarFyzkj1EwobUEpojbimnG9KcW5NvNOV9TkEMll2UnoyVgRoy5rWfyYtpBJQcurSImLRCnoVGwejfB5dPnGhP-XFKylMkOSuZD8QgbWcRpWFMdpo07KXoTS92x3HcYTw1XVZMLnrygjPXo6s_5GBliSLR4l-FvFZ2tgtKtTa0T6WG-6UATb22ggrm/s1280/list1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjarFyzkj1EwobUEpojbimnG9KcW5NvNOV9TkEMll2UnoyVgRoy5rWfyYtpBJQcurSImLRCnoVGwejfB5dPnGhP-XFKylMkOSuZD8QgbWcRpWFMdpo07KXoTS92x3HcYTw1XVZMLnrygjPXo6s_5GBliSLR4l-FvFZ2tgtKtTa0T6WG-6UATb22ggrm/s320/list1.png" width="320" /></a></div><p></p><p style="text-align: justify;">Tela da lista</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOKTCy6rDYIbtFE0FbWHQZtr-iGfM11cB7T8ujjJj3EUKw7-bHN8qqDAQ8b6SYfgxiTmHczzwItsF0LRQLlMyNlZy08ApeslPqweo0Y4wqRrvlsM9ZLKIJIKEZHv_N3qW-_grDCl6cYKiotSo4T2Be4Q1fgIaC-SsmHnVczFVeehBxZSSjOKK-HiY/s1280/list2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOKTCy6rDYIbtFE0FbWHQZtr-iGfM11cB7T8ujjJj3EUKw7-bHN8qqDAQ8b6SYfgxiTmHczzwItsF0LRQLlMyNlZy08ApeslPqweo0Y4wqRrvlsM9ZLKIJIKEZHv_N3qW-_grDCl6cYKiotSo4T2Be4Q1fgIaC-SsmHnVczFVeehBxZSSjOKK-HiY/s320/list2.png" width="320" /></a></div><p></p><p style="text-align: justify;">Item clicado</p><p style="text-align: justify;"><span> </span>Por fim o último modelo é o mais complexo de todos o <b>my-first-app</b>, que cria um aplicativo com 3 abas, sendo a segunda aba um gerenciador de galeria de fotos tiradas pelo app. O comando para criar o projeto é: </p><p style="text-align: justify;"> <i>ionic start nomeDoAplicativo05 my-first-app --type=angular</i></p><p style="text-align: justify;">Vejamos a tela e a dinâmica de funcionamento:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3K1L3CaDeYyFcXwkhqunwWIhMK1SuckNkIM0AVApdQkW1VFR7IIQQbNXvbGL-QcMoZD3cHC3nA_oLleVChB2cNCPJ9TmnfrjawWQcGhcZNbGMGCEHv09hALm1U7RjUTPrGTfNWV-RLsJnBmvG30gQEW_O-srLkUWx8bZneHqbAkkxEzWY6tmSTlh6/s1280/myfirstapp1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3K1L3CaDeYyFcXwkhqunwWIhMK1SuckNkIM0AVApdQkW1VFR7IIQQbNXvbGL-QcMoZD3cHC3nA_oLleVChB2cNCPJ9TmnfrjawWQcGhcZNbGMGCEHv09hALm1U7RjUTPrGTfNWV-RLsJnBmvG30gQEW_O-srLkUWx8bZneHqbAkkxEzWY6tmSTlh6/s320/myfirstapp1.png" width="320" /></a></div><p style="text-align: justify;"></p><p style="text-align: justify;">Tab 1</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk8Q8jJw1nDHOKBko3DhFLAnL6KPWzuuUuUghqSp1yjmA01mgJpzcxwdw423SDDTKLnt-E_WdGifcwcaObsMFR-a5tzeJDicFbTFz24l-FXME9TW_UKGDefEGWV6wpo5yt61R1VoA-FRMd7YS1QGhVUt6d5Ey355RzGgkrBmRn7lGwjEd2g4C3Kyc6/s1280/myfirstapp2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk8Q8jJw1nDHOKBko3DhFLAnL6KPWzuuUuUghqSp1yjmA01mgJpzcxwdw423SDDTKLnt-E_WdGifcwcaObsMFR-a5tzeJDicFbTFz24l-FXME9TW_UKGDefEGWV6wpo5yt61R1VoA-FRMd7YS1QGhVUt6d5Ey355RzGgkrBmRn7lGwjEd2g4C3Kyc6/s320/myfirstapp2.png" width="320" /></a></div><p style="text-align: justify;">Tab 2 : App de galeria de fotos</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjemfx6qnyUg9dmyofbLnpr5HQ8bqNzRGAn_HNlfaEM2aFYLxRx2DzEjN_CkveGqCncHTWiq0hiRKlcg_g57ycGMtL0iVtUjW2bK7LxhJU0QtbPmQlj9m9FDBaPi0Vh2SQ_bKKPzK-8W6wFdeXShm7SnOtfh5LVTdXMzi6sJTfyscmEN_bjq-fpjZI7/s1280/myfirstapp3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjemfx6qnyUg9dmyofbLnpr5HQ8bqNzRGAn_HNlfaEM2aFYLxRx2DzEjN_CkveGqCncHTWiq0hiRKlcg_g57ycGMtL0iVtUjW2bK7LxhJU0QtbPmQlj9m9FDBaPi0Vh2SQ_bKKPzK-8W6wFdeXShm7SnOtfh5LVTdXMzi6sJTfyscmEN_bjq-fpjZI7/s320/myfirstapp3.png" width="320" /></a></div><p style="text-align: justify;">Tab 3</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV0KuxN0jJsaWirg6A3RgsgX9U2bFxuufvwYOjMC1rTqvkdxBOqS74_UrfLANKLrccJ2onZ8owZefBWFZiVfCk-woHUOd2WOJAAPC3NB-EEW7983lLk-3LOtRdpo2hER4o9Pc9cTXirOYIWJwrS5x5FKCr4oKyqELPxuK4HNASDBLY9eFMv74kMDy8/s1280/myfirstapp4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV0KuxN0jJsaWirg6A3RgsgX9U2bFxuufvwYOjMC1rTqvkdxBOqS74_UrfLANKLrccJ2onZ8owZefBWFZiVfCk-woHUOd2WOJAAPC3NB-EEW7983lLk-3LOtRdpo2hER4o9Pc9cTXirOYIWJwrS5x5FKCr4oKyqELPxuK4HNASDBLY9eFMv74kMDy8/s320/myfirstapp4.png" width="320" /></a></div><p style="text-align: justify;"></p><p style="text-align: justify;">Tab 2: ao clicar no símbolo da câmera</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIAn338nlvyyjTwOhLKuLy6lCGoT6p-gHkpOiUaGHLWKde6YdCQLs0PW6mCYPjmFepk7ZFn6-Gu2xK0k4JOJIGl8OXKev7sU1FteLoKSyoTFdnON9KMREQ4NjxBdWYfSzV0gl3_m2e9sI3O7kCa-AR0o-LgNqBuZ0Kdtota2K6gFr_w8ZyQPpcU7s/s1280/myfirstapp5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIAn338nlvyyjTwOhLKuLy6lCGoT6p-gHkpOiUaGHLWKde6YdCQLs0PW6mCYPjmFepk7ZFn6-Gu2xK0k4JOJIGl8OXKev7sU1FteLoKSyoTFdnON9KMREQ4NjxBdWYfSzV0gl3_m2e9sI3O7kCa-AR0o-LgNqBuZ0Kdtota2K6gFr_w8ZyQPpcU7s/s320/myfirstapp5.png" width="320" /></a></div><br />Tab 2: ao clicar no botão de tirar a foto<p></p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZLj-zYqZm9sQFn4wI7ZbmA5XFrJ9zgqubptHt5eUyvrzsYnq7RL8y_Xfv709KKm_NqRb2bslD1S9uAbB-lawS9OKKlOae34m7ot9s9wClwc4SywreUmqlNuztnNhxbQQKoTF9QkyYtN3QLlFs6txISuqs4TPWMP3ghffhjJ0lbxHSN5YzJoe_DlLJ/s1280/myfirstapp6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZLj-zYqZm9sQFn4wI7ZbmA5XFrJ9zgqubptHt5eUyvrzsYnq7RL8y_Xfv709KKm_NqRb2bslD1S9uAbB-lawS9OKKlOae34m7ot9s9wClwc4SywreUmqlNuztnNhxbQQKoTF9QkyYtN3QLlFs6txISuqs4TPWMP3ghffhjJ0lbxHSN5YzJoe_DlLJ/s320/myfirstapp6.png" width="320" /></a></div><br />Tab 2: ao clicar no "V" confirmando a foto <p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0yTUBpku2TI7kM1Aa_20Jf6SbWYrHX9wdM9JM_X7wYPXZ0i_EEhlP89KIEBS6n4COVPdeDyJ8GskEV3WuoPEc34RJ8uyHFIAM4VqPX5d5osVPDrKGPardtOi72f3ZuOHygyKP0pNMgSdz5iZFKuyYUpJZ1ocN4ew9rlIhrjXrruR8D-nadQiyHqJ/s1280/myfirstapp7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0yTUBpku2TI7kM1Aa_20Jf6SbWYrHX9wdM9JM_X7wYPXZ0i_EEhlP89KIEBS6n4COVPdeDyJ8GskEV3WuoPEc34RJ8uyHFIAM4VqPX5d5osVPDrKGPardtOi72f3ZuOHygyKP0pNMgSdz5iZFKuyYUpJZ1ocN4ew9rlIhrjXrruR8D-nadQiyHqJ/s320/myfirstapp7.png" width="320" /></a></div><p style="text-align: justify;">Tab 2: ao clicar na foto produzida</p><p style="text-align: justify;"><span> </span>Vamos entender melhor a dinâmica deste modelo, ele cria um aplicativo que tira fotos tanto no dispositivo físico (celular), quanto no exemplo que se seguiu acima onde tirei a foto de uma webcam, as fotos ficam armazenadas no "storage"do html5, portanto, no computador ele não armazena na "pastinha", para "pegar" a foto teríamos que fazer o bom e velho "botão direito do mouse e salvar imagem", no celular ele vai para a galeria do celular. Se você deletar com a opção que ele dá quando clicamos na foto, ela vai para o espaço sideral se transformando em pó de estrelas. Cada foto capturada fica registrada na tab2 que cria duas colunas de fotos, criando desta forma, se pudermos dizer, uma "galeria de fotos".</p><p style="text-align: justify;"><span> </span>Muuuuuuuuuuuuito bem! As últimas considerações são, depende! Sim, depende do que você vai fazer, que aplicativo quer desenvolver, se pretende desenvolver algo que tenha um menu esquerdo, já inicie com sidemenu, se precisa de abas, inicie com o tabs, e assim sucessivamente, você é o capitão da sua alma, espero que tenha gostado deste artigo, grande abraço e fiquem com Deus!!!<br /></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-64317997024985192982022-06-27T05:25:00.002-07:002022-06-27T05:29:19.572-07:00Modelos de apps ionic para começar um novo projeto - parte I <p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfZD8VT5fZN2hU_yI_dDi5kTqV9-CHE0yEC0l-WLpUbxB2QjV5VjiTub4PMlNSTwzXnioNQD8Mh95CwcyOmRYvyGrVchqPG9hGk3UQhkgt9jTrNUMYPPNpXrcFIpaQvJhIrOb34qdAXL7B26e549qmP7_Ym-U0bwP9eA_kreDuNrUGuLJrPoDXBlh/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfZD8VT5fZN2hU_yI_dDi5kTqV9-CHE0yEC0l-WLpUbxB2QjV5VjiTub4PMlNSTwzXnioNQD8Mh95CwcyOmRYvyGrVchqPG9hGk3UQhkgt9jTrNUMYPPNpXrcFIpaQvJhIrOb34qdAXL7B26e549qmP7_Ym-U0bwP9eA_kreDuNrUGuLJrPoDXBlh/s320/ionic-logo.png" width="320" /></a></div><br /><p></p><p style="text-align: justify;"><span> </span>Saudações calorosas senhoras e senhores, neste post discutiremos os modelos que usamos para iniciar um novo projeto com o ionic framework, ele será divido em 2 partes para que não fique tãããão grande, ok!!!</p><p style="text-align: justify;"><span> </span>Quando comparamos o framework ionic com o microsoft word, por exemplo, conseguimos entender melhor estes modelos iniciais. Toda vez que vamos iniciar um documento no word, principalmente as versões mais atuais, ele pede que escolhamos um modelo, e geralmente escolhemos o modelo em branco e assim iniciamos um documento, no ionic a dinâmica é a mesma, possuímos 5 modelos que podemos iniciar nosso projeto que são: <u><i>tabs, sidemenu, blank, list e my-first-app</i></u>, e discutiremos cada um deles em detalhes logo abaixo!</p><p style="text-align: justify;"><span> </span>Comecemos pelo <b>tabs</b>, para criarmos um aplicativo com este modelo damos o seguinte comando no prompt de comando (se você chegou agora convido a ler este <a href="https://cafeelefantepinguim.blogspot.com/2022/06/criacao-de-novo-projeto-com-ionic.html" target="_blank">artigo</a> para entender melhor esta parte):</p><p><i>ionic start nomeDoAplicativo01 tabs --type=angular</i></p><p style="text-align: justify;"> <span> </span>Assim ele criará um projeto com este modelo, mas o que faz este modelo? Ele cria um aplicativo com 3 "abas", 3 botões na parte de baixo com ícone e texto, onde cada um leva para um tela diferente, mas os botões ou abas permanecem na parte de baixo, entre as diferentes telas, as imagens abaixo demonstram ele executado após o "ionic serve":</p><p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFLHnclEUCk1jpJn9bRJfxf1JPu9bQ87xIsp-__N1YjnwZVnz6_Hi_JEcBGZnrMZ9OqxfMRMCCSjVe5i3ds47M34EnZn7MYDMD8--zj3pbrqi2vFooyzzskA8MX2IOOhO8huhUmih28l0LVLm2LY68OcET-Xy-rGc0kXDaQEXieG6clxtSJobHEf7x/s1280/tabs1.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFLHnclEUCk1jpJn9bRJfxf1JPu9bQ87xIsp-__N1YjnwZVnz6_Hi_JEcBGZnrMZ9OqxfMRMCCSjVe5i3ds47M34EnZn7MYDMD8--zj3pbrqi2vFooyzzskA8MX2IOOhO8huhUmih28l0LVLm2LY68OcET-Xy-rGc0kXDaQEXieG6clxtSJobHEf7x/s320/tabs1.png" width="320" /></a></div><p></p><p>Tab 1:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcSIV1C5C-Pmpe905E-nC7T8MTok_R9NmhmZ3wsJvL8mAnUjGZCqmnMa0-SmzbaE50jANyTXIDT5KV-lFohs7BfDCZEjfYyM8uqxI5xuhJ9Rr4uIUAvoOdBi-J2-Tc4ixWR0825qqId_nZU9dh3yKYEqSh0X6Va2jRmW9xm3XGeAzCaRaZhYk2XNj/s1280/tabs2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcSIV1C5C-Pmpe905E-nC7T8MTok_R9NmhmZ3wsJvL8mAnUjGZCqmnMa0-SmzbaE50jANyTXIDT5KV-lFohs7BfDCZEjfYyM8uqxI5xuhJ9Rr4uIUAvoOdBi-J2-Tc4ixWR0825qqId_nZU9dh3yKYEqSh0X6Va2jRmW9xm3XGeAzCaRaZhYk2XNj/s320/tabs2.png" width="320" /></a></div><p></p><p>Tab2:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvErJxLkdzBD0cq3ngMBKKWkwZaSiSJEPJFb9sasgJtoxSxHx-xtsGxcbK2YFYj8uqR4i0KxqtCTl_X_ScPmu7Ww0shZL-FH6j02PbM4U97SFQevizxZv7Gu5nriSPBQBrz0ajJXN1KQGOrAm8dr9ZY29oskht2x6SluzuZ3XVmlQj2AK9gaAhlHke/s1280/tabs3.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvErJxLkdzBD0cq3ngMBKKWkwZaSiSJEPJFb9sasgJtoxSxHx-xtsGxcbK2YFYj8uqR4i0KxqtCTl_X_ScPmu7Ww0shZL-FH6j02PbM4U97SFQevizxZv7Gu5nriSPBQBrz0ajJXN1KQGOrAm8dr9ZY29oskht2x6SluzuZ3XVmlQj2AK9gaAhlHke/s320/tabs3.png" width="320" /></a></div><p>Tab3:</p><p><span><span> </span>Muito bem! Vamos para o próximo modelo que é o <b>sidemenu</b>, para criá-lo dê o seguinte comando, no prompt de comando:</span></p><p><i>ionic start nomeDoAplicativo02 sidemenu --type=angular</i></p><p style="text-align: justify;"><span> </span>Desta maneira ele criará um aplicativo com uma tela inicial e na parte de cima um botão para acionar o menu do lado esquerdo, que também pode aparecer simplesmente arrastando da esquerda para a direita. O menu que aparecerá terá 2 conjuntos de componentes perceptíveis, o primeiro conjunto é clicável e leva para um tela correspondente ao clique o, segundo conjunto não é clicável sendo apenas ilustrativo. Seguimos então as respectivas telas: </p><p style="text-align: left;"><span> </span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixrLwZ_9boj1rEmiCPtsJ6VB8fbovuXUWJnnVbIipcF43Hooi1yA-LMYkwQw7AXnA1YAqSm1wkD2chwW3u-JaROHO_HG1f6ARB3n8nsBajZG03jCZr0pJv2svoUfLhQT-QBS6MuGH2C6jxixEIMwKp8FaYhRCWbwFNazroxEtmgfGqUn0el5m0EHXl/s1280/sidemenu1.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixrLwZ_9boj1rEmiCPtsJ6VB8fbovuXUWJnnVbIipcF43Hooi1yA-LMYkwQw7AXnA1YAqSm1wkD2chwW3u-JaROHO_HG1f6ARB3n8nsBajZG03jCZr0pJv2svoUfLhQT-QBS6MuGH2C6jxixEIMwKp8FaYhRCWbwFNazroxEtmgfGqUn0el5m0EHXl/s320/sidemenu1.png" width="320" /></a></div><p></p><p>Primeira tela.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpych_rcs30lYKA9VCCUd9QvddLFqiz5n4oeoofMFqH7LIxqAMnzqEZ5nDAL7SxqR-Sl6UJ48jT_9rV6iuvEOcFfxKb9q2DyygHum9x0bWC7ad56yELEMgEmunOrfjjOBIo-pY4te1aEDQmQSxELXl5XS9OAN1FFw3HczX3RtZDKFuerFbYk_yYmZI/s1280/sidemenu2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpych_rcs30lYKA9VCCUd9QvddLFqiz5n4oeoofMFqH7LIxqAMnzqEZ5nDAL7SxqR-Sl6UJ48jT_9rV6iuvEOcFfxKb9q2DyygHum9x0bWC7ad56yELEMgEmunOrfjjOBIo-pY4te1aEDQmQSxELXl5XS9OAN1FFw3HczX3RtZDKFuerFbYk_yYmZI/s320/sidemenu2.png" width="320" /></a></div><p></p><p>Menu esquerdo.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEtpXk6-mZ53bf7N40wW8QcwAi5OkCmGfo3JzTCBfpFqZdr6NByUcZ4HW4GECs_dpsRknXcK8mZYcKPxqLBkjp-ra37pJK8XFe_rC6dHj3bdeahJhbi4U_-Q_LbnPCDSYNMhTCmpqdqTsCe6tY3MkSLtqpk_VNdPoAwqtfXA5cYWk0DQWGVR0FbVxr/s1280/sidemenu3.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEtpXk6-mZ53bf7N40wW8QcwAi5OkCmGfo3JzTCBfpFqZdr6NByUcZ4HW4GECs_dpsRknXcK8mZYcKPxqLBkjp-ra37pJK8XFe_rC6dHj3bdeahJhbi4U_-Q_LbnPCDSYNMhTCmpqdqTsCe6tY3MkSLtqpk_VNdPoAwqtfXA5cYWk0DQWGVR0FbVxr/s320/sidemenu3.png" width="320" /></a></div><br /><p>Tela que aparece quando se clica nos menus clicáveis.</p><p><span> </span>Por fim vamos ter contato ao mais utilizado que é o modelo blank. O blank equivale ao documento em branco do word que referenciamos acima, ele não possui nada apenas uma única tela com um texto ilustrativo central e um ion-toolbar (componente visual ionic que veremos futuramente) logo na parte de cima. O comando que cria um aplicativo com este modelo é:</p><p> <i>ionic start nomeDoAplicativo03 blank --type=angular</i></p><p><span></span><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3sEY0pK0gGIayRaPnw3Lq6hZIgzJWRgM4GIDZ8NYnHJYxFBxdsqfMnqeWPyb-inroEP5JhijXw_HJhhi9SrZykZK88CHKuM0lgnxMtQomFlCLBPnrQBNqQLt7PorIrWOLwZOTwK0W0-XIMsZwf8-dowToGru4ZWL6WqMpTd8jBPnvnFORI09zRvdo/s1280/blank.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3sEY0pK0gGIayRaPnw3Lq6hZIgzJWRgM4GIDZ8NYnHJYxFBxdsqfMnqeWPyb-inroEP5JhijXw_HJhhi9SrZykZK88CHKuM0lgnxMtQomFlCLBPnrQBNqQLt7PorIrWOLwZOTwK0W0-XIMsZwf8-dowToGru4ZWL6WqMpTd8jBPnvnFORI09zRvdo/s320/blank.png" width="320" /></a></div><p><span>Tela do blank.</span></p><p><span> </span>Então com o modelo finalizamos a primeira parte deste artigo, em breve lançaremos a segunda parte finalizando os modelos iniciais de criação de aplicativos ionic, grande abraço e fiquem com Deus!!!<br /></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-2062989218583007002022-06-24T10:14:00.003-07:002022-06-24T10:14:54.775-07:00Criação de novo projeto com Ionic<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUf5HXsFBg29JIh6oGFggQicbpGTt6cfIjji8rOl_-Mk5IrRYU8WmiFZ028VuAOzNhlXcUmde3GawFzwVPCXt4SFkt_uxNNDZa_l4Av_LKpkxXtZ2fz7VArNo6RnAtSu1AAcTt2OT_b19ttZaY26G76NOHaQIM81SDCJcVE-9f1tCMDwfSnz2GhUDi/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUf5HXsFBg29JIh6oGFggQicbpGTt6cfIjji8rOl_-Mk5IrRYU8WmiFZ028VuAOzNhlXcUmde3GawFzwVPCXt4SFkt_uxNNDZa_l4Av_LKpkxXtZ2fz7VArNo6RnAtSu1AAcTt2OT_b19ttZaY26G76NOHaQIM81SDCJcVE-9f1tCMDwfSnz2GhUDi/s320/ionic-logo.png" width="320" /></a></div><p></p><p><span> </span>Sim meu amiguinho e amiguinha, no último post vimos como preparar o computador para programarmos em ionic, e hoje vamos criar nosso primeiro projeto!!! Vocês estão prontos? Então vamos lá!</p><p><span> </span>Abra o prompt de comando (ou cmd), geralmente quando você abre o prompt de comando, por padrão ele cai no seguinte endereço (no Windows):</p><p><i>c:\Users\NomeDoUsuário>_</i></p><p><span> </span>Estando neste endereço você estará dentro da pasta do seu usuário e na maioria das vezes não colocamos nada, diretamente, nesta pasta, desta forma vamos criar uma pasta na raiz (C:) apenas para organizar nossos futuros projetos, combinado?</p><p><span> </span>Desta forma dê o seguinte comando seguido sempre de um <b>ENTER</b>:</p><p><i>cd </i>\</p><p><span> </span>Assim você estará na raiz (C:), agora vamos criar a pasta ao qual vamos colocar todos nossos projetos, lembrando que isto não é obrigatório e muito menos influencia no funcionamento do projeto, estamos apenas organizando nossas coisas, vamos ao comando:</p><p><i>md ionic</i></p><p><span> </span>Pronto, criamos a pasta ionic, agora entremos nela para começar a criação do nosso primeiro projeto</p><p><i>cd ionic</i></p><p><span> </span>Com isso o seu prompt estará assim: <i>c:\ionic></i> , estando desta forma vamos criar nosso primeiro projeto com o comando abaixo:</p><p><i>ionic start primeiroprojeto blank --type=angular</i></p><p><span> </span>O comando acima cria o projeto, vamos entender melhor o comando. As palavras "ionic start" denotam ao ionic que queremos criar um projeto novo a próxima parte é o nome para o projeto, recomendo que não utilize acentuação, espaço, caracteres especiais (ex: #, $, @, etc.) e iniciar com números. A próxima parte do comando é o modelo com o qual queremos iniciar, que neste utilizamos o "blank" que criará um projeto em branco (falaremos em post's posteriores sobre isso com mais detalhes) e por fim temos "--type=angular" que aponta qual framework utilizaremos para nos auxiliar na geração de arquivos e a programação propriamente dita.<br /></p><p> <span> Enfim o comando completo acima fará vários downloads e várias verificações até parar no seguinte questionamento:</span></p><p><i><b> Create free ionic account? </b></i></p><p><span> </span>Digite N e dê um enter e ele concluirá a criação do projeto. Agora precisamos entrar na pasta criada do nosso projeto, faça como abaixo:</p><p><i>cd primeiroprojeto</i></p><p><span> </span>E seu prompt ficará da seguinte forma: <i>c:\ionic\primeiroprojeto></i> , vamos então ver a "cara" do nosso projeto dando o seguinte comando: </p><p><i>ionic serve</i></p><p><span> </span>Abrirá a seguinte tela:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OkfPpwhCFLE8h4k6bhBPlO9VqFLnAQZhmtRqEdmJs7Oip_ELomtzOLM7cdCkvLnpUcFaCIuNGVLSzyt5-k7CYII0XzG1_4Wp-coob7uLEgUB2Wu4fIu4mnFXRpK9gIjr7mauNYE2xknsB_nuOQ49_S9NDOIk_kvFC6u4B-v7k-XTsfZ85QVRjIya/s1306/projetoembranco001.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="799" data-original-width="1306" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OkfPpwhCFLE8h4k6bhBPlO9VqFLnAQZhmtRqEdmJs7Oip_ELomtzOLM7cdCkvLnpUcFaCIuNGVLSzyt5-k7CYII0XzG1_4Wp-coob7uLEgUB2Wu4fIu4mnFXRpK9gIjr7mauNYE2xknsB_nuOQ49_S9NDOIk_kvFC6u4B-v7k-XTsfZ85QVRjIya/s320/projetoembranco001.png" width="320" /></a></div><p><span> </span>Agora vamos preparar a tela do navegador para ficar parecida com a de um celular para podermos ver melhor como ele se portará em um dispositivo físico. </p><p><span> </span>Clique com o botão direito do mouse em algum lugar da tela e aparecerá o seguinte menu igual a imagem abaixo, agora clique em "inspecionar elemento":</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JiA03lAACLw-Vl-REWh_EfZhprX9OQV6xkPQg8eN8BSKV0PdzBoYGB_nk0a9aMVsOK8-vJmFvCOVZLCtkBBksqDzl4Y7yrsmODbHBTFmnjN_vNNaWznTN1r-Luduf-O4NzHSN6p_j7woTP9-i5EaeZsN2t-vhmfhN-_c3MVKXtU-ohtHjC-vu7c5/s1280/inspecionar.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JiA03lAACLw-Vl-REWh_EfZhprX9OQV6xkPQg8eN8BSKV0PdzBoYGB_nk0a9aMVsOK8-vJmFvCOVZLCtkBBksqDzl4Y7yrsmODbHBTFmnjN_vNNaWznTN1r-Luduf-O4NzHSN6p_j7woTP9-i5EaeZsN2t-vhmfhN-_c3MVKXtU-ohtHjC-vu7c5/s320/inspecionar.png" width="320" /></a></div><p><br /></p><p><span> </span>A tela ficará da seguinte forma:<br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyB1YZY444u-XXGe6bepD8jXTN42-dNad6RsQqjcUE0g7u1sSX8TqjW6NMhRz5T9BHKlqK7dvXp5CrhgXjLC9b74fUD16LUY6FTY1XXna74SsjhK5MupoGnBN_b23XobckCLOMvbda5a9TlaPn3hqz1SiLVeHEMW4q2M4kQMuF1bwuFa16SusdPJII/s1282/inspecionar002.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="775" data-original-width="1282" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyB1YZY444u-XXGe6bepD8jXTN42-dNad6RsQqjcUE0g7u1sSX8TqjW6NMhRz5T9BHKlqK7dvXp5CrhgXjLC9b74fUD16LUY6FTY1XXna74SsjhK5MupoGnBN_b23XobckCLOMvbda5a9TlaPn3hqz1SiLVeHEMW4q2M4kQMuF1bwuFa16SusdPJII/s320/inspecionar002.png" width="320" /></a></div><br /><p><br /></p><p><span> </span>Desta forma clique para deixar o layout responsivo o que já estaremos próximos de nosso objeto:</p><p><span> </span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZxPHH2Kq5p0LfTxZaIViXk_qL08uPGPU1NM_kXWVW2Zj8x3999v_1CNOGD1pajvftnF8KkWZ6_bATsJXJ5-ai9vxCrB-8banDMRy7Malvg_wh8EHEcy058EptFvs54DTrI_ITFEtWlnp4oir4UEPFdxahPfC80r9d_ecJn9v99-WMGBdYuuTFh1P9/s175/redimensionar001.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="170" data-original-width="175" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZxPHH2Kq5p0LfTxZaIViXk_qL08uPGPU1NM_kXWVW2Zj8x3999v_1CNOGD1pajvftnF8KkWZ6_bATsJXJ5-ai9vxCrB-8banDMRy7Malvg_wh8EHEcy058EptFvs54DTrI_ITFEtWlnp4oir4UEPFdxahPfC80r9d_ecJn9v99-WMGBdYuuTFh1P9/s1600/redimensionar001.png" width="175" /></a></div><br /><p></p><p><span><span> </span>Para finalizar vamos escolher um formato de celular para ver melhor nosso programa, clicando em Responsive, como na imagem abaixo e escolhendo um modelo de celular. <br /></span></p><p><span><span> </span> </span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWHSSzjXUcd611LwtCKclqTClsdZ0QoEhNilGqsLZ_sCR4fRkdGVoIJ9MZdt7rqxNSUW7jfRZUQXK-EGDjmJ04OHBlSqUEYoxJwQWYn6WVmUe5XMeD_-cQig8OGa6Z5ag3ZHNkiO2FlXSyyWXwUPKT81UMwAjxrhpJilDndEjmTm-HWICfu2bz4yKK/s698/redimensionar002.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="698" data-original-width="495" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWHSSzjXUcd611LwtCKclqTClsdZ0QoEhNilGqsLZ_sCR4fRkdGVoIJ9MZdt7rqxNSUW7jfRZUQXK-EGDjmJ04OHBlSqUEYoxJwQWYn6WVmUe5XMeD_-cQig8OGa6Z5ag3ZHNkiO2FlXSyyWXwUPKT81UMwAjxrhpJilDndEjmTm-HWICfu2bz4yKK/s320/redimensionar002.png" width="227" /></a></div><br /><p></p><p><span><span> </span>Assim você conseguiu com sucesso inicializar seu projeto ionic e deixar o navegador pronto para começarmos a programar!!!</span></p><p><span><span> </span>Por hoje é só pessoal, grande abraço e Fiquem com Deus!!! </span><br /></p>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-27250166347114048772022-06-20T14:46:00.000-07:002022-06-20T14:47:28.162-07:00Instalação Ionic<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmzTn3-inyVhUtfA8hBkTLGuRg-yLi1RbzcQcmMTrMaH7iS_maB2rRpQm2BVljCNZHOJvKspFaxaoDUF-jVZ0aU4wA1MzPKWyM3d9ubRWQ-_BdUj71_xdQKZjNmRsq0OkCEod7VflICcnZetHUdeb0CUOqQ8DQcN6PLn3h7K6ejtxfwFk5VbqwOoUg/s1024/ionic-logo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmzTn3-inyVhUtfA8hBkTLGuRg-yLi1RbzcQcmMTrMaH7iS_maB2rRpQm2BVljCNZHOJvKspFaxaoDUF-jVZ0aU4wA1MzPKWyM3d9ubRWQ-_BdUj71_xdQKZjNmRsq0OkCEod7VflICcnZetHUdeb0CUOqQ8DQcN6PLn3h7K6ejtxfwFk5VbqwOoUg/s320/ionic-logo.png" width="320" /></a></div><p></p><p></p> <br /><p></p><p> </p><p>Saudações queridos, queridas e querides!!!!</p><p></p><p><span> </span>Neste, vamos ajudá-lo(a/e) na instalação do framework IONIC (versão WINDOWS), o que vamos precisar:</p><ul style="text-align: left;"><li>Navegador (o que for do seu gosto)</li><li>NodeJS</li><li>Ionic Framework</li><li>Visual Studio Code</li></ul><p><span> </span>O navegador é necessário não apenas para baixar as ferramentas mas também para ver seu trabalho pronto . O NodeJS é quem será o back para sustentar todo o framework. O próprio ionic é claro e por fim o Visual Studio Code que será nossa IDE para desenvolvimento.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-TkxMaS8l2zYWDHnVMiC_5CmtAMw21XNtM8Uy-0XakpVQ3nhjT24PMTwlCkI80GhF2tj1xRxHphFkiWWvu0P4s7qyj6WEH7TZyt1GiVKr6F2dWGbY-QZi8DTICTZp3D1OIgv0zW_xjpTUJIbENVJzUAek_D2mlP4MEYIfWiYmZSv8DCv5_x8sr2H/s2560/nodejs_logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="689" data-original-width="2560" height="54" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-TkxMaS8l2zYWDHnVMiC_5CmtAMw21XNtM8Uy-0XakpVQ3nhjT24PMTwlCkI80GhF2tj1xRxHphFkiWWvu0P4s7qyj6WEH7TZyt1GiVKr6F2dWGbY-QZi8DTICTZp3D1OIgv0zW_xjpTUJIbENVJzUAek_D2mlP4MEYIfWiYmZSv8DCv5_x8sr2H/w200-h54/nodejs_logo.png" width="200" /></a></div><p></p><p style="text-align: justify;"><span> </span>Muuuuuuuuuuuuuito bem, vamos começar com o NodeJS, primeiramente baixe-o no site: <a href="https://nodejs.org/en/" target="_blank">NodeJS</a>, baixe sempre a versão LTS e não a current, a diferença entre elas é que a LTS está a mais tempo no mercado e já está com vários problemas resolvidos já a current é a versão mais nova onde os programadores ainda estão melhorando, entendeu? Voltemos, apos baixado clique duas vezes para executar e aparecerá a seguinte tela:</p><p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7t6VIpKCeHLzRF3aJNo8nGo3h46tZh47QNAq4LbQC1y0HM-4Jvw_EJWfjaMpwhHrkACl50hnOSviMWTYkK_YM9Lbiex_1-OrTebm0xTOviiDnvT6xt5lzXn_xK3VMoNmKe9CnyWZjr3-ClxBZPj4_c2aKXMHQeOcAL1HyM-3omtpkWAHJ648GuIu/s254/nodejs001.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="198" data-original-width="254" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7t6VIpKCeHLzRF3aJNo8nGo3h46tZh47QNAq4LbQC1y0HM-4Jvw_EJWfjaMpwhHrkACl50hnOSviMWTYkK_YM9Lbiex_1-OrTebm0xTOviiDnvT6xt5lzXn_xK3VMoNmKe9CnyWZjr3-ClxBZPj4_c2aKXMHQeOcAL1HyM-3omtpkWAHJ648GuIu/s1600/nodejs001.png" width="254" /></a></div><br /><p></p><p><span> </span>Nela é só dar next (na verdade toda a instalação é next, next, next) </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjReI49NH00_gjekCQfCw6_v4BJYWfPejg3kH2QYnzAKWYLg5VVrT4B3b0BXfFUzfkTVLY4dnZomcCqEVPCSGB3a3tE4uY33wmRiiyJZXzDcbNnGV-5KDiy3nUY4SCkPirAauXC31L2rHDpT1-morXuetMTSWmQhGLFGEppqmw0W4dTIwMkrdfIRL26/s254/nodejs002.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="198" data-original-width="254" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjReI49NH00_gjekCQfCw6_v4BJYWfPejg3kH2QYnzAKWYLg5VVrT4B3b0BXfFUzfkTVLY4dnZomcCqEVPCSGB3a3tE4uY33wmRiiyJZXzDcbNnGV-5KDiy3nUY4SCkPirAauXC31L2rHDpT1-morXuetMTSWmQhGLFGEppqmw0W4dTIwMkrdfIRL26/s1600/nodejs002.png" width="254" /></a></div><br /><p><br /></p><p><span> </span>É só aceitar o "pacto" e next, ele vai para esta tela, acima, onde pergunta em que pasta deve ser instalado, apenas dê next novamente.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwlhRTGlLy964t5PitWRr0stCeFpjPC4fMQQ9Cx3Q-uKh4kjIH_myz5iWDkYfZD7W68wygaF2w4DZCq-3ERUTt7AE1abCFUdURjpgrxsDzh158p7lhPUHERzzh_oXW7a33dTWRBNvS0v5UP2Il4DCBYohL3rAE_twU3F4P_EpvZFq4n7DIUtbhDO-o/s497/nodejs003.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="386" data-original-width="497" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwlhRTGlLy964t5PitWRr0stCeFpjPC4fMQQ9Cx3Q-uKh4kjIH_myz5iWDkYfZD7W68wygaF2w4DZCq-3ERUTt7AE1abCFUdURjpgrxsDzh158p7lhPUHERzzh_oXW7a33dTWRBNvS0v5UP2Il4DCBYohL3rAE_twU3F4P_EpvZFq4n7DIUtbhDO-o/s320/nodejs003.png" width="320" /></a></div><br /><p><br /></p><p><span> </span>Logo então você terá a tela acima que pergunta quais pacotes você quer instalar, deixe como está e dê next.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9WZy5PSjpP8D0lEgMa097b7nZuNscKG6J78GIwJ5XuX7Ytgz_3At-WkhL_i3gpK7-ryEb2oY2O4ySBhahhxenIwBlQb9rT9gdjyil5FOX4d4HuNMG48KuBNHVjiidANyCvJYo-vC9GhxkdEBSYW7odW4kRdGEvU1_dOBH_KsOvWLy7oG6EIhWRnYW/s252/nodejs004.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="200" data-original-width="252" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9WZy5PSjpP8D0lEgMa097b7nZuNscKG6J78GIwJ5XuX7Ytgz_3At-WkhL_i3gpK7-ryEb2oY2O4ySBhahhxenIwBlQb9rT9gdjyil5FOX4d4HuNMG48KuBNHVjiidANyCvJYo-vC9GhxkdEBSYW7odW4kRdGEvU1_dOBH_KsOvWLy7oG6EIhWRnYW/s1600/nodejs004.jpeg" width="252" /></a></div><p><br /></p><p style="text-align: justify;"><span> </span>A instalação também vai perguntar se você quer instalar o Chocolatey, simplesmente <b>NÃO</b> instale pois exclusivamente para nossos serviços não necessitaremos disto, então dê next que ele começará a instalação que geralmente não demora mais que 5 minutos.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS9dlCcMYDYYamDGuHmEaMVi4zZ4S0RHD2gb-pOm9WYA3rWSElkxT29i0QWENtIPashmFyhT5848RUIH6LLVRMBnFg2nY82DagI0edFh_Z3OkTyQ6ub3pjANrRqPQFqPz5-9EoMGgkZ40vDej0PW1nLV8G8kWscOLIlercReuroqPLlkDrkeVHbcCb/s254/nodejs005.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="198" data-original-width="254" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS9dlCcMYDYYamDGuHmEaMVi4zZ4S0RHD2gb-pOm9WYA3rWSElkxT29i0QWENtIPashmFyhT5848RUIH6LLVRMBnFg2nY82DagI0edFh_Z3OkTyQ6ub3pjANrRqPQFqPz5-9EoMGgkZ40vDej0PW1nLV8G8kWscOLIlercReuroqPLlkDrkeVHbcCb/s1600/nodejs005.jpeg" width="254" /></a></div><br /><p><br /></p><p><span> </span>Por fim aparecerá a tela acima finalizando com sucesso a instalação do NodeJS.</p><p></p><div style="text-align: justify;"><span> </span>Agora estamos prontos para a instalação do ionic propriamente dito, que é muito simples, apenas abra o prompt de comando, clique no ícone do windows e logo depois digite cmd , desta forma já irá aparecer "Prompt de comando", a famosa tela preta escrita em branco, ao abrir já dê o seguinte comando:</div><p></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4tqnBXQ9u3yMvdiIi5nNhTD4NbX5oxHLzKMQWS5-dTOZyjrLWvMkhC2GkHhBNPqx8CdRmwD_0k_dlqu2zbuO2G1KhDPoBNIvYFAijfDMvqmYoQMnMQ91lVcv_mt65fooWdpsE7VSFKh40QUsLsRpNiINy7SHP77JwJGkWoj8zi5tlFxrHGwtP9Kq/s1280/visualstudiocode_logo.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="720" data-original-width="1280" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4tqnBXQ9u3yMvdiIi5nNhTD4NbX5oxHLzKMQWS5-dTOZyjrLWvMkhC2GkHhBNPqx8CdRmwD_0k_dlqu2zbuO2G1KhDPoBNIvYFAijfDMvqmYoQMnMQ91lVcv_mt65fooWdpsE7VSFKh40QUsLsRpNiINy7SHP77JwJGkWoj8zi5tlFxrHGwtP9Kq/w173-h98/visualstudiocode_logo.png" width="173" /></a></div><i>npm install -g @ionic/cli</i><p></p><p><span> </span>Desta forma ele iniciará a instalação e terminará com sucesso, para terminarmos vamos instalar o Visual Studio Code, claramente baixe-o no site: <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>, e logo depois de baixado não há erro, realmente apenas next, next, next, finish, sem muitos problemas.</p><p><span> </span>Ok, pessoal, agora sua máquina/computador/notebook/o-que-for está pronta para programar app para celular, parabéns e até a próxima!!! </p><p><span> </span>Grande abraço à todos e fiquem com Deus!!!<br /></p><p><br /></p><br />leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0Ibitinga, SP, 14940-000, Brasil-21.7556838 -48.8325883-63.678051280585819 -119.1450883 20.16668368058582 21.479911700000002tag:blogger.com,1999:blog-7500185960771978550.post-47168428335583205472021-07-25T13:56:00.000-07:002021-07-25T15:26:56.559-07:00Clássico Jogo da Minhoca (Snake) em Java<p><span> </span>O "Snake", conhecido popularmente como jogo da cobrinha, é um clássico em vários dispositivos. Muito difundido no antigo e conhecido celular "tijolo" da Nokia. Neste artigo vamos fazer uma releitura deste saudoso jogo na linguagem Java. Basicamente utilizaremos 2 classes java e 7 imagens, do tipo png e jpg.</p><p>Vamos ao código, segue abaixo a classe Principal.java na integra, logo depois alguns comentários para ajudar o entendimento: </p><p>import java.awt.Color;</p><p>import javax.swing.JFrame;</p><p><br /></p><p>public class Principal {</p><p><span style="white-space: pre;"> </span>public static void main(String[] args) {</p><p><span style="white-space: pre;"> </span>JFrame obj = new JFrame();</p><p><span style="white-space: pre;"> </span>Gameplay gameplay = new Gameplay();</p><p><span style="white-space: pre;"> </span>obj.setBounds(10, 10, 905, 700);</p><p><span style="white-space: pre;"> </span>obj.setBackground(Color.DARK_GRAY);</p><p><span style="white-space: pre;"> </span>obj.setResizable(false);</p><p><span style="white-space: pre;"> </span>obj.setVisible(true);</p><p><span style="white-space: pre;"> </span>obj.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);</p><p><span style="white-space: pre;"> </span>obj.add(gameplay);</p><p><span style="white-space: pre;"> </span>}</p><p>}</p><p><br /></p><p>A classe Principal.java cria o JFrame para acomodar o jogo em si e então cria um objeto do tipo Gameplay adicionando-o ao JFrame tomando-o como um todo. O método setBounds funciona da seguinte maneira: </p><b><i>setBounds(int x, int y, int width, int height)</i></b><div><br /></div><div>onde o "x" é a coordenada do eixo x na tela, desta forma o "y" corresponde ao eixo y, os parâmetros width e height são respectivamente largura e altura da tela, desta forma dimensionamos e posicionamos a janela na tela do usuário;</div><div><br /></div><div>Agora segue a classe Gameplay.java:</div><div><br /></div><div><div>import java.awt.Color;</div><div>import java.awt.Font;</div><div>import java.awt.Graphics;</div><div>import java.awt.event.ActionEvent;</div><div>import java.awt.event.ActionListener;</div><div>import java.awt.event.KeyEvent;</div><div>import java.awt.event.KeyListener;</div><div>import java.util.Random;</div><div>import javax.swing.ImageIcon;</div><div>import javax.swing.JPanel;</div><div>import javax.swing.Timer;</div><div><br /></div><div>public class Gameplay extends JPanel implements KeyListener, ActionListener{</div><div><span style="white-space: pre;"> </span>private ImageIcon imagemTitulo;</div><div><span style="white-space: pre;"> </span>private int[] cobraX = new int[750];</div><div><span style="white-space: pre;"> </span>private int[] cobraY = new int[750];</div><div><span style="white-space: pre;"> </span>private boolean esquerda = false;</div><div><span style="white-space: pre;"> </span>private boolean direita = false;</div><div><span style="white-space: pre;"> </span>private boolean cima = false;</div><div><span style="white-space: pre;"> </span>private boolean baixo = false;</div><div><span style="white-space: pre;"> </span>private ImageIcon direitaI;</div><div><span style="white-space: pre;"> </span>private ImageIcon cimaI;</div><div><span style="white-space: pre;"> </span>private ImageIcon baixoI;</div><div><span style="white-space: pre;"> </span>private ImageIcon esquerdaI;</div><div><span style="white-space: pre;"> </span>private Timer tempo;</div><div><span style="white-space: pre;"> </span>private int delay = 100;</div><div><span style="white-space: pre;"> </span>private ImageIcon corpo;</div><div><span style="white-space: pre;"> </span>private int tamanhoCobra = 3;</div><div><span style="white-space: pre;"> </span>private int movimentos = 0;</div><div><span style="white-space: pre;"> </span>private int [] inimigoX = {25, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700, 725, 750, 775, 800, 825, 850};</div><div><span style="white-space: pre;"> </span>private int [] inimigoY = {75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625};</div><div><span style="white-space: pre;"> </span>private ImageIcon inimigoI;</div><div><span style="white-space: pre;"> </span>private Random aleatorio = new Random();</div><div><span style="white-space: pre;"> </span>private int xpos = aleatorio.nextInt(34);</div><div><span style="white-space: pre;"> </span>private int ypos = aleatorio.nextInt(23);</div><div><span style="white-space: pre;"> </span>private int pontos = 0;</div><div><span style="white-space: pre;"> </span><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>public Gameplay() {</div><div><span style="white-space: pre;"> </span>addKeyListener(this);</div><div><span style="white-space: pre;"> </span>setFocusable(true);</div><div><span style="white-space: pre;"> </span>setFocusTraversalKeysEnabled(false);</div><div><span style="white-space: pre;"> </span>tempo = new Timer(delay, this);</div><div><span style="white-space: pre;"> </span>tempo.start();</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>public void paint(Graphics g) {</div><div><span style="white-space: pre;"> </span>if(movimentos == 0) {</div><div><span style="white-space: pre;"> </span>cobraX[2] = 50;</div><div><span style="white-space: pre;"> </span>cobraX[1] = 75;</div><div><span style="white-space: pre;"> </span>cobraX[0] = 100;</div><div><span style="white-space: pre;"> </span>cobraY[2] = 100;</div><div><span style="white-space: pre;"> </span>cobraY[1] = 100;</div><div><span style="white-space: pre;"> </span>cobraY[0] = 100;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>// borda do título</div><div><span style="white-space: pre;"> </span>g.setColor(Color.white);</div><div><span style="white-space: pre;"> </span>g.drawRect(24, 10, 851, 55);</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>//titulo</div><div><span style="white-space: pre;"> </span>imagemTitulo = new ImageIcon("titulo.jpg");</div><div><span style="white-space: pre;"> </span>imagemTitulo.paintIcon(this, g, 25, 11);</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>//borda do jogo</div><div><span style="white-space: pre;"> </span>g.setColor(Color.WHITE);</div><div><span style="white-space: pre;"> </span>g.drawRect(24, 74, 851, 577);</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>// fundo do jogo</div><div><span style="white-space: pre;"> </span>g.setColor(Color.black);</div><div><span style="white-space: pre;"> </span>g.fillRect(25, 75, 850, 575);</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>// pontos</div><div><span style="white-space: pre;"> </span>g.setColor(Color.white);</div><div><span style="white-space: pre;"> </span>g.setFont(new Font("arial", Font.PLAIN, 14));</div><div><span style="white-space: pre;"> </span>g.drawString("Pontos: " + pontos, 780, 30);</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>// tamanho</div><div><span style="white-space: pre;"> </span>g.setColor(Color.white);</div><div><span style="white-space: pre;"> </span>g.setFont(new Font("arial", Font.PLAIN, 14));</div><div><span style="white-space: pre;"> </span>g.drawString("Tamanho: " + tamanhoCobra, 780, 50);</div><div><span style="white-space: pre;"> </span><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>direitaI = new ImageIcon("direita.png");</div><div><span style="white-space: pre;"> </span>direitaI.paintIcon(this, g, cobraX[0], cobraY[0]);</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>for(int n = 0; n < tamanhoCobra; n++) {</div><div><span style="white-space: pre;"> </span>if((n == 0) && (direita)) {</div><div><span style="white-space: pre;"> </span>direitaI = new ImageIcon("direita.png");</div><div><span style="white-space: pre;"> </span>direitaI.paintIcon(this, g, cobraX[n], cobraY[n]);</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if((n == 0) && (esquerda)) {</div><div><span style="white-space: pre;"> </span>esquerdaI = new ImageIcon("esquerda.png");</div><div><span style="white-space: pre;"> </span>esquerdaI.paintIcon(this, g, cobraX[n], cobraY[n]);</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if((n == 0) && (baixo)) {</div><div><span style="white-space: pre;"> </span>baixoI = new ImageIcon("baixo.png");</div><div><span style="white-space: pre;"> </span>baixoI.paintIcon(this, g, cobraX[n], cobraY[n]);</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if((n == 0) && (cima)) {</div><div><span style="white-space: pre;"> </span>cimaI = new ImageIcon("cima.png");</div><div><span style="white-space: pre;"> </span>cimaI.paintIcon(this, g, cobraX[n], cobraY[n]);</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if (n != 0) {</div><div><span style="white-space: pre;"> </span>corpo = new ImageIcon("corpo.png");</div><div><span style="white-space: pre;"> </span>corpo.paintIcon(this, g, cobraX[n], cobraY[n]);</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>inimigoI = new ImageIcon("inimigo.png");</div><div><span style="white-space: pre;"> </span>if((inimigoX[xpos] == cobraX[0]) && (inimigoY[ypos] == cobraY[0])) {</div><div><span style="white-space: pre;"> </span>pontos++;</div><div><span style="white-space: pre;"> </span>tamanhoCobra++;</div><div><span style="white-space: pre;"> </span>xpos = aleatorio.nextInt(34);</div><div><span style="white-space: pre;"> </span>ypos = aleatorio.nextInt(23);</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>inimigoI.paintIcon(this, g, inimigoX[xpos], inimigoY[ypos]);</div><div><span style="white-space: pre;"> </span>for(int b = 1; b < tamanhoCobra; b++) {</div><div><span style="white-space: pre;"> </span>if((cobraX[b] == cobraX[0]) && (cobraY[b] == cobraY[0])) {</div><div><span style="white-space: pre;"> </span>direita = false;</div><div><span style="white-space: pre;"> </span>esquerda = false;</div><div><span style="white-space: pre;"> </span>cima = false;</div><div><span style="white-space: pre;"> </span>baixo = false;</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>g.setColor(Color.white);</div><div><span style="white-space: pre;"> </span>g.setFont(new Font("arial", Font.BOLD, 50));</div><div><span style="white-space: pre;"> </span>g.drawString("Fim de Jogo", 300, 300);</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>g.setFont(new Font("arial", Font.BOLD, 20));</div><div><span style="white-space: pre;"> </span>g.drawString("Pressione espaço para começar", 350, 340);</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>g.dispose();</div><div><span style="white-space: pre;"> </span>}</div><div><br /></div><div><span style="white-space: pre;"> </span>@Override</div><div><span style="white-space: pre;"> </span>public void actionPerformed(ActionEvent e) {</div><div><span style="white-space: pre;"> </span>tempo.start();</div><div><span style="white-space: pre;"> </span>if(direita) {</div><div><span style="white-space: pre;"> </span>for(int r = tamanhoCobra - 1; r >= 0; r--) {</div><div><span style="white-space: pre;"> </span>cobraY[r + 1] = cobraY[r]; </div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>for(int r = tamanhoCobra; r >= 0; r--) {</div><div><span style="white-space: pre;"> </span> if(r == 0) {</div><div><span style="white-space: pre;"> </span> cobraX[r] = cobraX[r] + 25;</div><div><span style="white-space: pre;"> </span> } else {</div><div><span style="white-space: pre;"> </span> cobraX[r] = cobraX[r - 1];</div><div><span style="white-space: pre;"> </span> }</div><div><span style="white-space: pre;"> </span> if(cobraX[r] > 850) {</div><div><span style="white-space: pre;"> </span> cobraX[r] = 25;</div><div><span style="white-space: pre;"> </span> }</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>repaint();</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if(esquerda) {</div><div><span style="white-space: pre;"> </span>for(int r = tamanhoCobra - 1; r >= 0; r--) {</div><div><span style="white-space: pre;"> </span>cobraY[r + 1] = cobraY[r]; </div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>for(int r = tamanhoCobra; r >= 0; r--) {</div><div><span style="white-space: pre;"> </span> if(r == 0) {</div><div><span style="white-space: pre;"> </span> cobraX[r] = cobraX[r] - 25;</div><div><span style="white-space: pre;"> </span> } else {</div><div><span style="white-space: pre;"> </span> cobraX[r] = cobraX[r - 1];</div><div><span style="white-space: pre;"> </span> }</div><div><span style="white-space: pre;"> </span> if(cobraX[r] < 25) {</div><div><span style="white-space: pre;"> </span> cobraX[r] = 850;</div><div><span style="white-space: pre;"> </span> }</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>repaint();</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if(baixo) {</div><div><span style="white-space: pre;"> </span>for(int r = tamanhoCobra - 1; r >= 0; r--) {</div><div><span style="white-space: pre;"> </span>cobraX[r + 1] = cobraX[r]; </div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>for(int r = tamanhoCobra; r >= 0; r--) {</div><div><span style="white-space: pre;"> </span> if(r == 0) {</div><div><span style="white-space: pre;"> </span> cobraY[r] = cobraY[r] + 25;</div><div><span style="white-space: pre;"> </span> } else {</div><div><span style="white-space: pre;"> </span> cobraY[r] = cobraY[r - 1];</div><div><span style="white-space: pre;"> </span> }</div><div><span style="white-space: pre;"> </span> if(cobraY[r] > 625) {</div><div><span style="white-space: pre;"> </span> cobraY[r] = 75;</div><div><span style="white-space: pre;"> </span> }</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>repaint();</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if(cima) {</div><div><span style="white-space: pre;"> </span>for(int r = tamanhoCobra - 1; r >= 0; r--) {</div><div><span style="white-space: pre;"> </span>cobraX[r + 1] = cobraX[r]; </div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>for(int r = tamanhoCobra; r >= 0; r--) {</div><div><span style="white-space: pre;"> </span> if(r == 0) {</div><div><span style="white-space: pre;"> </span> cobraY[r] = cobraY[r] - 25;</div><div><span style="white-space: pre;"> </span> } else {</div><div><span style="white-space: pre;"> </span> cobraY[r] = cobraY[r - 1];</div><div><span style="white-space: pre;"> </span> }</div><div><span style="white-space: pre;"> </span> if(cobraY[r] < 75) {</div><div><span style="white-space: pre;"> </span> cobraY[r] = 625;</div><div><span style="white-space: pre;"> </span> }</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>repaint();</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>}</div><div><br /></div><div><span style="white-space: pre;"> </span>@Override</div><div><span style="white-space: pre;"> </span>public void keyTyped(KeyEvent e) {</div><div><span style="white-space: pre;"> </span>// TODO Auto-generated method stub</div><div><span style="white-space: pre;"> </span>}</div><div><br /></div><div><span style="white-space: pre;"> </span>@Override</div><div><span style="white-space: pre;"> </span>public void keyPressed(KeyEvent e) {</div><div><span style="white-space: pre;"> </span>if(e.getKeyCode() == KeyEvent.VK_SPACE) {</div><div><span style="white-space: pre;"> </span>movimentos = 0;</div><div><span style="white-space: pre;"> </span>pontos = 0;</div><div><span style="white-space: pre;"> </span>tamanhoCobra = 3;</div><div><span style="white-space: pre;"> </span>repaint();</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if(e.getKeyCode() == KeyEvent.VK_RIGHT) {</div><div><span style="white-space: pre;"> </span>movimentos++;</div><div><span style="white-space: pre;"> </span>direita = true;</div><div><span style="white-space: pre;"> </span>if(!esquerda) {</div><div><span style="white-space: pre;"> </span>direita = true;</div><div><span style="white-space: pre;"> </span>} else {</div><div><span style="white-space: pre;"> </span>direita = false;</div><div><span style="white-space: pre;"> </span>esquerda = true;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>cima = false;</div><div><span style="white-space: pre;"> </span>baixo = false;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if(e.getKeyCode() == KeyEvent.VK_LEFT) {</div><div><span style="white-space: pre;"> </span>movimentos++;</div><div><span style="white-space: pre;"> </span>esquerda = true;</div><div><span style="white-space: pre;"> </span>if(!direita) {</div><div><span style="white-space: pre;"> </span>esquerda = true;</div><div><span style="white-space: pre;"> </span>} else {</div><div><span style="white-space: pre;"> </span>direita = true;</div><div><span style="white-space: pre;"> </span>esquerda = false;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>cima = false;</div><div><span style="white-space: pre;"> </span>baixo = false;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if(e.getKeyCode() == KeyEvent.VK_UP) {</div><div><span style="white-space: pre;"> </span>movimentos++;</div><div><span style="white-space: pre;"> </span>cima = true;</div><div><span style="white-space: pre;"> </span>if(!baixo) {</div><div><span style="white-space: pre;"> </span>cima = true;</div><div><span style="white-space: pre;"> </span>} else {</div><div><span style="white-space: pre;"> </span>baixo = true;</div><div><span style="white-space: pre;"> </span>cima = false;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>esquerda = false;</div><div><span style="white-space: pre;"> </span>direita = false;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>if(e.getKeyCode() == KeyEvent.VK_DOWN) {</div><div><span style="white-space: pre;"> </span>movimentos++;</div><div><span style="white-space: pre;"> </span>baixo = true;</div><div><span style="white-space: pre;"> </span>if(!cima) {</div><div><span style="white-space: pre;"> </span>baixo = true;</div><div><span style="white-space: pre;"> </span>} else {</div><div><span style="white-space: pre;"> </span>baixo = false;</div><div><span style="white-space: pre;"> </span>cima = true;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span>esquerda = false;</div><div><span style="white-space: pre;"> </span>direita = false;</div><div><span style="white-space: pre;"> </span>}</div><div><span style="white-space: pre;"> </span></div><div><span style="white-space: pre;"> </span>}</div><div><br /></div><div><span style="white-space: pre;"> </span>@Override</div><div><span style="white-space: pre;"> </span>public void keyReleased(KeyEvent e) {</div><div><span style="white-space: pre;"> </span>// TODO Auto-generated method stub</div><div><span style="white-space: pre;"> </span>}</div><div>}</div></div><div><br /></div><div style="text-align: justify;">Agora os pontos relevantes desta classe, esta classe extende de JPanel para ser abrigada pela JFrame principal e implementa as interfaces "KeyListener" e "ActionListener", estas implementações nos ajuda na captura das teclas clicadas pelo usuário e todo o "desenho" (renderização) do jogo utilizamos a biblioteca java.awt.Graphics, que serve exatamente para desenhar formas, pontos e etc. em janelas java.</div><div style="text-align: justify;"><span> </span>As variáveis do tipo ImageIcon correspondem as imagens utilizadas no programa/jogo, <b>as imagens devem ser colocadas na mesma pasta em que foram salva as 2 classes do programa</b>.</div><div style="text-align: justify;"> Como o personagem principal, logo depois de iniciado o jogo, tem movimento continuo infinito até que ele bata/encoste nele mesmo, pensando desta maneira temos as 4 direções do tipo booleana (esquerda, direita, cima e baixo) que complementam este raciocínio pois enquanto a variável for <b>true</b> o personagem ficará andando naquela direção. A variável "tamanhoCobra" controla o tamanho do personagem conforme é acrescentado tamanho batendo/encostando/tocando em "inimigoI" que em sua vez precisa aparecer em lugares aleatórios pra envolver certa dificuldade/desafio ao jogador, assim as variáveis inimigoX e inimigoY são arrays com pontos específicos de coordenadas na tela e as variáveis xpos e ypos é que proporcionam a aleatoriedade ao "inimigo".<br /></div><div style="text-align: justify;"><span> Implementando KeyListener e ActionListener somos forçados a implementar os seguintes métodos:</span><br /></div><div style="text-align: justify;"><span>actionPerformed(ActionEvent e)</span></div><div style="text-align: justify;"><span>keyTyped(KeyEvent e)</span></div><div style="text-align: justify;"><span>keyPressed(KeyEvent e)</span></div><div style="text-align: justify;"><span>keyReleased(KeyEvent e)</span></div><div style="text-align: justify;"><span><br /></span></div><div style="text-align: justify;"><span><span> Para este projeto não tratamos os métodos keyTyped e keyReleased, pois o keyPressed já resolve nosso problema em capturar a tecla pressionada no teclado do usuário, por isso que temos um "if" que trata cada tecla pressionada enquanto que o actionPerformed cuida para que o personagem vá para o lado pretendido pelo jogador.</span><br /></span></div><div style="text-align: justify;"><span><span><span> O Método paint que utiliza da biblioteca Graphics, é quem cuida de desenhar os objetos em tela, é nele que damos cores e posições ao elenco do jogo.</span><br /></span></span></div><div style="text-align: justify;"><span><span><span><span> Finalizando sequem as imagens utilizadas neste projeto, espero que tenham gostado e grande abraço!!!</span><br /></span></span></span></div><div style="text-align: justify;"><span><span><span><span><br /></span></span></span></span></div><div style="text-align: justify;"><span><span><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6bxCKgEQapUrE1ZhXWknocjafzpCUSGa25tcfnzUy56pURoC9JlJXRh1VVLWqSz2zrm28-b1e9Lb6us-LH-Wz7p42by_9Fsif2lC0pxl_7NyrA6COHBqKHyZkU1XI38hPqw5Mzj7FIi0/s25/baixo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="25" data-original-width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6bxCKgEQapUrE1ZhXWknocjafzpCUSGa25tcfnzUy56pURoC9JlJXRh1VVLWqSz2zrm28-b1e9Lb6us-LH-Wz7p42by_9Fsif2lC0pxl_7NyrA6COHBqKHyZkU1XI38hPqw5Mzj7FIi0/s0/baixo.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0KwlGALtRVXCUG75gheV-a8l6ChuxMSBZGAxQSOCu2ICuxS4Gc-_K5f_lL-bvQ8jT3pDbWFdHtjQqksW2OTCUiNpTIIJiCSYoaZ3r1daQevjjSZyFH9GDw5ltr6zfYfx6eGDL9ofK9I/s25/cima.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="25" data-original-width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0KwlGALtRVXCUG75gheV-a8l6ChuxMSBZGAxQSOCu2ICuxS4Gc-_K5f_lL-bvQ8jT3pDbWFdHtjQqksW2OTCUiNpTIIJiCSYoaZ3r1daQevjjSZyFH9GDw5ltr6zfYfx6eGDL9ofK9I/s0/cima.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE3r8_a1hS1gfFSz-6GohVi8g4qQD-_vLfWHzWSek2wbhv_u_W0sVFkqjVFD9XbqfY_1d_zXe7_5miLGJ1j5xSbFjZpe3VFg2XK_9nTXdHkxYHBqgYWAT3JW5AH4qf1IvCqsKGrI9hamc/s25/corpo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="25" data-original-width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE3r8_a1hS1gfFSz-6GohVi8g4qQD-_vLfWHzWSek2wbhv_u_W0sVFkqjVFD9XbqfY_1d_zXe7_5miLGJ1j5xSbFjZpe3VFg2XK_9nTXdHkxYHBqgYWAT3JW5AH4qf1IvCqsKGrI9hamc/s0/corpo.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW_2pfN-TxNM9rSyuLg6ytdhc7ZPcyIp3ASWTcR0dB6iN7pRkfdvbPKT97tIV7AePUxcl130U2Uj4tkrWx9ZI7-2S3KgSs5TzYZvFEZmIOERAhKp7U4MsidtGmI8tfR8Qo9j2KVKM4SN0/s25/direita.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="25" data-original-width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW_2pfN-TxNM9rSyuLg6ytdhc7ZPcyIp3ASWTcR0dB6iN7pRkfdvbPKT97tIV7AePUxcl130U2Uj4tkrWx9ZI7-2S3KgSs5TzYZvFEZmIOERAhKp7U4MsidtGmI8tfR8Qo9j2KVKM4SN0/s0/direita.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg49nTOdbhM2bm5xsJRwGnjFUswoPUf4N4fS2gQcUDSD2dAdqnSvOXVDuaCJ-MptlumOXaX1GDuRhdsvBv_63m66ADNCRbQD9Hoi7nP-KM3au5MYuGTGUSlUxxXZgq6JuSkYogdg21KRxU/s25/esquerda.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="25" data-original-width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg49nTOdbhM2bm5xsJRwGnjFUswoPUf4N4fS2gQcUDSD2dAdqnSvOXVDuaCJ-MptlumOXaX1GDuRhdsvBv_63m66ADNCRbQD9Hoi7nP-KM3au5MYuGTGUSlUxxXZgq6JuSkYogdg21KRxU/s0/esquerda.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBj78_fmZfKGisXBoLgyjWe7U4BiEiqFat1fEnzN7_q2Pd72wiTXxJq76c-3duafswAVlzWmIDexQ0HMl9FR-xva8Qg2u6ITXbvmgJFjtXmGMi5B69rZjBk0POFk_M-etdwc5pjAsofo/s25/inimigo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="25" data-original-width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBj78_fmZfKGisXBoLgyjWe7U4BiEiqFat1fEnzN7_q2Pd72wiTXxJq76c-3duafswAVlzWmIDexQ0HMl9FR-xva8Qg2u6ITXbvmgJFjtXmGMi5B69rZjBk0POFk_M-etdwc5pjAsofo/s0/inimigo.png" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHJgyyHZhixVFSKqwo2WgZRMHODD-A4qPvaaETvZldPnhfrJqP4Chcp8MWPy9QF7NpGuRIj3mE3oy1GDfBSvcJFtqtiEQTMcsakxc5Byt3nqGTHqdof65KOp5F77fW8kwUxZ-ddJW7bhY/s850/titulo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="54" data-original-width="850" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHJgyyHZhixVFSKqwo2WgZRMHODD-A4qPvaaETvZldPnhfrJqP4Chcp8MWPy9QF7NpGuRIj3mE3oy1GDfBSvcJFtqtiEQTMcsakxc5Byt3nqGTHqdof65KOp5F77fW8kwUxZ-ddJW7bhY/s320/titulo.jpg" width="320" /></a></div><br /><span><br /></span></span></span></span></div>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com3tag:blogger.com,1999:blog-7500185960771978550.post-82484159377608251752017-07-31T07:40:00.002-07:002017-07-31T07:40:28.380-07:00O AWT: Ninguém tá usando o AWT?<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGyHg8eMf0Wc2hngI_hBm_Qq9NMCC09gCJtHocB0o71Zaq9iiCeWEHkrAxJ-FykoTYH4wmVfkBiA_4LF3VbwlpexwWeOosfRggXhZzs-Ru29e0cAQLXj78twPqCqLDFsMDzG8KNDQfYXM/s1600/Java-Logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="256" data-original-width="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGyHg8eMf0Wc2hngI_hBm_Qq9NMCC09gCJtHocB0o71Zaq9iiCeWEHkrAxJ-FykoTYH4wmVfkBiA_4LF3VbwlpexwWeOosfRggXhZzs-Ru29e0cAQLXj78twPqCqLDFsMDzG8KNDQfYXM/s1600/Java-Logo.png" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Os programadores java e os usuários java utilizam a AWT e nem percebem! Tudo bem, você vai me dizer que os programadores atuais java nem mesmos programam com AWT mas pelo menos utilizam SWING que originou de AWT, portanto, usam sim! Vamos desenterrar o AWT para conhecer a origem da parte visual do java...</div>
<h2 style="text-align: center;">
<u>O que é o AWT?</u></h2>
O AWT (Abstract Windowing Tool) foi a primeira, por assim dizer, biblioteca visual feito para java. Pensando neste quesito visual na época de sua origem, a Sun Microsystens, pensou em fazer algo que funcionasse em qualquer sistema operacional. O Java em si já o fazia e como a parte visual estava sendo pensada fazia-se necessário tal onipresença visual, assim eles quiseram colocar os componentes mais básicos que são:<br />
<ul>
<li>Button</li>
<li>Label</li>
<li>TextField</li>
<li>TextArea</li>
<li>Checkbox</li>
<li>Choice</li>
<li>List</li>
</ul>
Pois estes componentes povoam basicamente todos os sistemas operacionais visuais, assim é por isso que o AWT é tomado como código nativo em se tratando de programação visual.Um código básico de um Label pode ser visto abaixo (não será inserido o código de cada componente pois não é este o intuito do presente post):<br />
<pre class="prettyprint notranslate prettyprinted"><span class="pln">
</span><span class="kwd">import</span><span class="pln"> java</span><span class="pun">.</span><span class="pln">awt</span><span class="pun">.*;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> java</span><span class="pun">.</span><span class="pln">awt</span><span class="pun">.</span><span class="kwd">event</span><span class="pun">.*;</span><span class="pln">
</span><span class="kwd">public</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> TestaLabel</span><span class="typ"></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pln"> </span><span class="kwd">public</span><span class="pln"> </span><span class="kwd">static</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> main</span><span class="pun">(</span><span class="typ">String</span><span class="pun">[]</span><span class="pln"> args</span><span class="pun">){</span><span class="pln">
</span><span class="pln"> Frame tela </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Frame</span><span class="pun">(</span><span class="str">"Exemplo AWT"</span><span class="pun">);</span><span class="pln">
tela</span><span class="pun">.</span><span class="pln">setSize</span><span class="pun">(</span><span class="lit">400</span><span class="pun">,</span><span class="lit">400</span><span class="pun">);</span><span class="pln">
tela</span><span class="pun">.</span><span class="pln">setLayout</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">GridLayout</span><span class="pun">(</span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">));</span><span class="pln">
tela</span><span class="pun">.</span><span class="pln">addWindowListener</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">WindowAdapter</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd">public</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> windowClosing</span><span class="pun">(</span><span class="typ">WindowEvent</span><span class="pln"> windowEvent</span><span class="pun">){</span><span class="pln">
</span><span class="typ">System</span><span class="pun">.</span><span class="kwd">exit</span><span class="pun">(</span><span class="lit">0</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="pln"></span></pre>
<pre class="prettyprint notranslate prettyprinted"><span class="pln"><span class="pln"> </span><span class="typ">Label</span><span class="pln"> teste </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Label</span><span class="pun">();</span><span class="pln">
teste</span><span class="pun">.</span><span class="pln">setText</span><span class="pun">(</span><span class="str">"Acesse Nosso Blog, Prestigie-nos!!!"</span><span class="pun">);</span><span class="pln">
teste</span><span class="pun">.</span><span class="pln">setAlignment</span><span class="pun">(</span><span class="typ">Label</span><span class="pun">.</span><span class="pln">CENTER</span><span class="pun">);</span><span class="pln">
</span></span></pre>
<pre class="prettyprint notranslate prettyprinted"><span class="pln"> tela</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">teste</span><span class="pun">);</span><span class="pln">
</span><span class="pln"> tela</span><span class="pun">.</span><span class="pln">setVisible</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln"></span><span class="pln">
</span><span class="pun">}</span></pre>
<br />
Este código produzirá a seguinte Tela:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOifdip_spkIEFqoBzByOPTmQ-aoCdyKNA6lKG6LfRERCjtOm957_DNsy6-bt0xlzFn3vmR4xajOEq69P4pI6BDl48KuEkh7JqprnQ4KNzS_pticlI3ngC3Dgi4CydzCvrCT9mAa3xZ_U/s1600/2017-07-30+%25282%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="413" data-original-width="413" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOifdip_spkIEFqoBzByOPTmQ-aoCdyKNA6lKG6LfRERCjtOm957_DNsy6-bt0xlzFn3vmR4xajOEq69P4pI6BDl48KuEkh7JqprnQ4KNzS_pticlI3ngC3Dgi4CydzCvrCT9mAa3xZ_U/s320/2017-07-30+%25282%2529.png" width="320" /></a></div>
<br />
É óbvio que que os xiitas java vão excomungar meu código e rogarão pragas mas estou tentando ser didático e não percebendo as implicações cósmicas de não produzir um código java orientado a objetos para apenas uma demonstração de um Label! <br />
<br />
<br />
<h3>
<u>Onde ele é usado hoje?</u></h3>
Hoje ele fica sendo utilizado em todas as aplicações visuais java, mesmo porque com a herança do Swing com o AWT, ele fica embutido, enfim, ele ainda é usado para algumas coisas, um bom exemplo é em algumas APIs e componentes que
utilizam recursos de aceleração de hardware, mas isso ainda é muito raro, porém, ainda utilizado.<br />
<br />
<h3>
<u>Vantagens e Desvantagens</u></h3>
A principal vantagem de utilizar AWT puro é a produção de um software que trabalhará com toda a usabilidade possível para com a diversidade de sistemas operacionais existentes.<br />
Porém a grande desvantagem é sua pequena gama de componentes, por exemplo não existe um componente "tabela" ou "árvore", para que tal ocorra é necessário que o programador faça seus componentes personalizados. Tal deficiência é plenamente retificada utilizando SWING.<br />
<br />
<h3>
<u>Conclusão</u></h3>
O post aqui em questão não é algo aprofundado, claro, é uma apresentação sucinta da AWT, para maiores informações acesse o site da <a href="https://docs.oracle.com/javase/6/docs/api/java/awt/package-summary.html" rel="nofollow" target="_blank">oracle</a> , lá você encontrará a documentação completa desta API. Eu em épocas anteriores programei com AWT, e o chato era fazer as telas todas na unha, mesmo sendo paradoxal, era também um momento gostoso da programação, mas hoje deve-se admitir que tal API já não tem utilidade usual. Assim como o AWT foi substituído pelo SWING, o próprio SWING está sendo substituído pela tecnologia JavaFX. No entanto, toda tecnologia é válida, pois cada uma tem um contexto, uma serventia final.<br />
Grande abraço à todos!!!leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-25182137500574393462013-10-14T12:19:00.001-07:002017-07-23T16:35:54.604-07:00<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPxEDeFmAg3RyltcirlR9V9jFYPngq1uhgRbne83D-1l5bkzSVbU4toyVDAQgJloW6lDFcb3p8bf53YgsLtG4okcZ8HqqJszr4g299jrhkE1_QoI-J_kldp5cmzVkyziE7J2OrAiPrjVo/s1600/zenwalk-illusion-4-640x340.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPxEDeFmAg3RyltcirlR9V9jFYPngq1uhgRbne83D-1l5bkzSVbU4toyVDAQgJloW6lDFcb3p8bf53YgsLtG4okcZ8HqqJszr4g299jrhkE1_QoI-J_kldp5cmzVkyziE7J2OrAiPrjVo/s1600/zenwalk-illusion-4-640x340.png" height="170" width="320" /></a></div>
<br />
Olá pessoal, passando mais uma parte de minha experiência com o Zenwalk<br />
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 30/09/2013</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização apenas do firefox para navegação, o chromium organizando favoritos slides e vídeos e o transmission para baixar outras distribuições para experiência.</span></div>
<b id="docs-internal-guid-78d92d7b-b859-88ca-7587-00fa2ec9d578" style="font-weight: normal;"><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 01/10/2013</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização apenas do firefox para navegação, o chromium organizando favoritos slides e vídeos e o transmission para baixar outras distribuições para experiência.</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 02/10/2013</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização apenas do firefox para navegação, o chromium organizando favoritos slides e vídeos e o transmission para baixar outras distribuições para experiência.</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 03/10/2013</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização apenas do firefox para navegação, o chromium organizando favoritos slides e vídeos e o transmission para baixar outras distribuições para experiência.</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 04/10/2013</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização apenas do firefox para navegação, o chromium organizando favoritos slides e vídeos e o transmission para baixar outras distribuições para experiência. Instalei o Hardinfo que é parecido com o antigo Everest do Windows. Ele dá, entre outras informações sobre o hardware do computador. Instalação via: netpkg hardinfo.</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 05/10/2013</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização apenas do firefox para navegação, vídeos e o transmission para baixar outras distribuições para experiência.</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 06/10/2013</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização apenas do firefox para navegação, vídeos e o transmission para baixar outras distribuições para experiência.</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 07/10/2013</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização do firefox para navegação, o transmission para baixar outras distribuições para experiência, e instalei o cups fui como root em /etc/rc.d/chmod +x rc.cups depois /etc/rc.d/./rc.cups start e acessei localhost:631 mas imprimir via rede já não rolou, até baixei o arquivo ppd da impressora mas não funcionou.</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 08/10/2013</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização apenas do firefox para navegação, vídeos e o transmission para baixar outras distribuições para experiência.</span></div>
<b style="font-weight: normal;"><br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dia 09/10/2013</span></div>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Utilização apenas do firefox para navegação, vídeos e o transmission para baixar outras distribuições para experiência.</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No próximo post vou colocar as informações do computador utilizado na experiência, screenshots novos e screenshots da instalação, fechado assim algumas questões que acredito ter deixado em aberto, qualquer informação a mais é só me contactar! Grande Abraço à todos!</span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Segue um wallpaper só pra não passar em branco:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxTkaXfd5m3YPTgQMmafT8WVUVRHTvggB0_PET3ZHRWp08WgMeW7QqjbVnEX_pylCfryTMy7tHWgEOgbH9H6AmjUemOSFe_jWaA8kcAM69vVot8s4-qlIDNxnLZdISZ8y7EBkKpLAdZGg/s1600/Green-Forest-Wallpaper-green-20036604-1280-1024.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxTkaXfd5m3YPTgQMmafT8WVUVRHTvggB0_PET3ZHRWp08WgMeW7QqjbVnEX_pylCfryTMy7tHWgEOgbH9H6AmjUemOSFe_jWaA8kcAM69vVot8s4-qlIDNxnLZdISZ8y7EBkKpLAdZGg/s1600/Green-Forest-Wallpaper-green-20036604-1280-1024.jpg" height="256" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-11568879719166343482013-09-29T11:31:00.001-07:002017-07-23T16:35:42.487-07:00
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitsIiUKuTTIAp4iSv5IEcBuHCTqATPUW3opkg6ww8-qMJO6wnFKlYJs7Wx2apHOJlDHWXLjWCSxEbdfIAosRZT1qLspRVZKBahbMwE2aw9cHuih-dy_1wGP8WM2xgkGCJ5S6Wex5S80eI/s1600/zenwalk-illusion-4-640x340.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitsIiUKuTTIAp4iSv5IEcBuHCTqATPUW3opkg6ww8-qMJO6wnFKlYJs7Wx2apHOJlDHWXLjWCSxEbdfIAosRZT1qLspRVZKBahbMwE2aw9cHuih-dy_1wGP8WM2xgkGCJ5S6Wex5S80eI/s1600/zenwalk-illusion-4-640x340.png" height="170" width="320" /></a></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br /></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Data da instalação 17/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Bom, vou começar um relato de uso do GNU/Linux Zenwalk. Usando por
um mês relatando a experiência da distribuição.
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Conheci o Zenwalk no site sobre linux <i>distrowatch.com</i>. Para
baixá-lo fui no endereço
<span style="color: #1155cc;"><u><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">http</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">://</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">www</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">.</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">zenwalk</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">.</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">org</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">/</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">modules</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">/</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">tinyd</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">/</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">index</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">.</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">php</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">?</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">id</a><a href="http://www.zenwalk.org/modules/tinyd/index.php?id=5">=5</a></u></span>.
Escolhendo um mirror que esteja funcionando aguardei o download
tomando uma super xícara de café fera!</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Feito o download, vamos gravar um cd e começar a instalação.
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Como o Zenwalk provêm do slackware é óbvio que sua instalação é
praticamente os passos de instalação para o slackware. Primeiro ele
pede as partições, de swap e a que vai ser instalada o linux, fiz a
instalação numa hd de 80 só para ele. Depois é só escolher a
opção install que ele começa a instalar os pacotes da
distribuição. Ao final ele pede a senha de root e faz as perguntas
de criação de um novo usuário (além do root) e algum grupo de
trabalho que você necessitar.</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Ao término da instalação ele reinicia pede usuário e senha e
entra no gerenciador de janelas xfce 4, diga-se de passagem
elegantemente rápida e convidativa. E os principais programas para
desktop:</div>
<ul>
<li><div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Libreoffice 3.6 (suite para escritório)</div>
</li>
<li><div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Firefox 15.0 (um pouco atrasadinho para os mais afoitos)</div>
</li>
<li><div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Gimp 2.8 (substituto do photoshop)</div>
</li>
<li><div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Thunderbird 15.0 (leitor de e-mail)</div>
</li>
<li><div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Brasero 3.4.1 (para gravar dvd e cd)</div>
</li>
<li><div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Transmition (para baixar torrents)</div>
</li>
<li><div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Totem 3.0.1 (para assistir filmes)</div>
</li>
</ul>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 18/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Instalação do wine com pacote próprio deles (wine-1.7.2-i486-1sg.txz) pego no site <a href="http://www.winehq.org/download" style="background-color: transparent;">http://www.winehq.org/download</a> e instalando pelo installpkg nome_do_arquivo.txz.<span style="background-color: transparent; line-height: 115%;"> Instalei também o symphony lotus da IBM através de pacotes que eu já tinha do slackware 14 (os pacotes do symphony estão em </span><a href="https://www-03.ibm.com/software/lotus/symphony/home.nsf/home" style="background-color: transparent;">https://www-03.ibm.com/software/lotus/symphony/home.nsf/home</a>)<span style="background-color: transparent; line-height: 115%;">, usei também serviços de e-mail
online (gmail) e google doc e passar backup de volta, tudo que necessitei funcionou maravilhosamente.</span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 19/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Navega<span style="background-color: transparent;">ção normal u</span><span style="background-color: transparent; line-height: 115%;">sando firefox para google drive, e-mail, baixar video do via rápida
e assistí-lo no totem e fazer assinatura de e-mail do etec
institucional (é só colar a imagem na assinatura!Fera!
Sensacional!)</span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 20/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Apresenta<span style="background-color: transparent;">ção de slides com o IBM Lotus Symphony</span><span style="background-color: transparent; line-height: 115%;"> e vídeos com o totem.</span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 21, 22 e 23/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Doente demais pra usar computador.</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 24/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Bom, fiz o normal: acesso a e-mail, apresenta<span style="background-color: transparent;">ção de </span><span style="background-color: transparent; line-height: 115%;">slides, vídeos pelo totem mas mas
percebi que o totem tem um som baixo então decidi instalar o vlc,
porém, ele até apareceu no menu do xfce mas executá-lo já é
outros quinhentos. Tentei com muita boa vontade fazer o netpkg visual funcionar mas desisti, como sei que ele é baseado no slackware então
fa</span>ç<span style="background-color: transparent; line-height: 115%;">o como nele (installpkg).</span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 25/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Apenas apresenta<span style="background-color: transparent;">ção de </span><span style="background-color: transparent; line-height: 115%;">slides e e-mail's</span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 26/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
A esperança é a última que morre, então tentei o netpkg via
terminal que vi no site :
<span style="color: #1155cc;"><u><a href="http://manual.zenwalk.org/en/Package%20Management.html">http</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">://</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">manual</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">.</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">zenwalk</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">.</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">org</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">/</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">en</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">/</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">Package</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">%20</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">Management</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">.</a><a href="http://manual.zenwalk.org/en/Package%20Management.html">html</a></u></span>. Tentei instalar o apache,ele instalou o chttpd que é um
"tiny" apache. E começo a perceber que é uma distribuição
mais desktop, e menos desenvolvedor ou servidor. Encontrei o pacote
do mariaDB e instalei. Estou apanhando para encontrar documenta<span style="background-color: transparent;">ção do chttpd para instalar o php</span><span style="background-color: transparent; line-height: 115%;">. Quanto ao mariaDB ainda não consegui inicializá-lo, apesar de ter os mesmos comandos do mysql, tentarei novamente mais tarde.</span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 27/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Parece uma eternidade que estou com o Zenwalk, agora que vi que o
netpkg faz as honras na instalação dos programas fui nos pacotes que
tem no distrowatch sobre ele e instalei o abiword (editor de texto
que gosto muito) mas ele não executou assim como o vlc, e percebi
que era algo relacionado com o GTK+, depois tento resolver isso.
Instalei o Chromium (o chrome do google para linux), instalei o
inkscape que também não funcionou devido a várias bibliotecas.</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 28/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Utilização apenas do firefox para navegação.</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br />
</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Dia 29/09/2013</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Com o chromium instalado e logado com meu login do google arrumei uma
parte dos meus favoritos bagunçados e relembrei sites feras que eu
havia entrado e não lembrava</div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<br /></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
Fico por aqui, mais tarde relato mais peripécias com este fabuloso sistema operacional! Grande abra<span style="background-color: transparent;">ço à todos, Deus os aben</span><span style="background-color: transparent;">çoem. </span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4B19aIYS5Mfi8maaOfiMUlrCOs2XswiNpLMfhw83LV-y5NVbVSOjgzVKdTDD38WFOUUMNnxinij8S_wXen5719Z-otZCey3sU09cs7juVqfhsenzr6G7IyxzHFmytLbE6z9Roe0iUJk/s1600/userbar-zenwalk.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4B19aIYS5Mfi8maaOfiMUlrCOs2XswiNpLMfhw83LV-y5NVbVSOjgzVKdTDD38WFOUUMNnxinij8S_wXen5719Z-otZCey3sU09cs7juVqfhsenzr6G7IyxzHFmytLbE6z9Roe0iUJk/s1600/userbar-zenwalk.png" height="17" width="320" /></a></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;">P.S. : Se alguém quiser mais alguma informa</span><span style="background-color: transparent;">ção é só me contactar!</span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;">Screenshots</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzWgQ5VLrgji2pAPXfqlwkDHF5NaLLpopzTIeWMIoQdSZ7O5CbmMq9xJruGNvbK1PW5ZwFdQzVitMyEvVZXCKAuV8WDPfSWDdUpKo4aYlYpFS-YqxsAcFg4obU64CXX9BbwEdNJqVFEsc/s1600/Zenwalk+-+17-09-2013+-+18:15:12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzWgQ5VLrgji2pAPXfqlwkDHF5NaLLpopzTIeWMIoQdSZ7O5CbmMq9xJruGNvbK1PW5ZwFdQzVitMyEvVZXCKAuV8WDPfSWDdUpKo4aYlYpFS-YqxsAcFg4obU64CXX9BbwEdNJqVFEsc/s1600/Zenwalk+-+17-09-2013+-+18:15:12.png" height="200" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBQnAdLXGmpg0MglRC8V2KN9ZmRtpd3JfU7hiYyrnFkgg-pDiX4wFSusYiZI0Y81bgZdP3hfSqFKEDaX79v3_lfV3_8_HAw56kL1kvqv-n1buQaMX3Tjh5-Vm0us6JxB-bamus2W92hE/s1600/Zenwalk+-+27-09-2013+-+17:46:29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBQnAdLXGmpg0MglRC8V2KN9ZmRtpd3JfU7hiYyrnFkgg-pDiX4wFSusYiZI0Y81bgZdP3hfSqFKEDaX79v3_lfV3_8_HAw56kL1kvqv-n1buQaMX3Tjh5-Vm0us6JxB-bamus2W92hE/s1600/Zenwalk+-+27-09-2013+-+17:46:29.png" height="200" width="320" /></a></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;">Wallpapers utilizados:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDsryLjuKaaKWjL4Ab1fgaFRtm6poQK-DinrKl3Kf9TZbrNuGcHrAu3YagM_qRdzcRFbQC4EdIliArHnEmU6rbHrB5VRw8KQIlyz-GEEesCCIB6tPbYptjp4302RW7CceSGrJ2j3J2-Go/s1600/lemons-fruit-683954_1600_1200.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDsryLjuKaaKWjL4Ab1fgaFRtm6poQK-DinrKl3Kf9TZbrNuGcHrAu3YagM_qRdzcRFbQC4EdIliArHnEmU6rbHrB5VRw8KQIlyz-GEEesCCIB6tPbYptjp4302RW7CceSGrJ2j3J2-Go/s1600/lemons-fruit-683954_1600_1200.jpg" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipr8dgSqJ8hRJw7MJ08ZSEiIwyL8GQTJX6GJlU4qvDgxLUSfk3Jrv09wNEGaKxHo5Vz_ueEMRr2avMjzwWjHAi_haNeh3w_R4HmlmFBsF9DoNgj0zqww3EY_3WiaqaX36fUZWlTqqqIiA/s1600/wallpaperpadr%C3%A3o.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipr8dgSqJ8hRJw7MJ08ZSEiIwyL8GQTJX6GJlU4qvDgxLUSfk3Jrv09wNEGaKxHo5Vz_ueEMRr2avMjzwWjHAi_haNeh3w_R4HmlmFBsF9DoNgj0zqww3EY_3WiaqaX36fUZWlTqqqIiA/s1600/wallpaperpadr%C3%A3o.jpg" height="240" width="320" /></a></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
<div class="western" style="line-height: 115%; margin-bottom: 0cm; page-break-after: auto; page-break-before: auto;">
<span style="background-color: transparent;"><br /></span></div>
leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-47910728248989749622013-07-29T16:29:00.001-07:002017-07-23T16:35:09.506-07:00<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKeoYvEfj8wQ7KISbRxr6hLlG5QIO6XphP-rDXtgqk4Zy7O3i4OcTY-zCBThf-QX-p7hMKxKJr_gz_bToeKUcbxOrjLAoGj-lpwhHELSUgkoIcKLKzgKT5a3nRYmk9SjijtnTdoiKWqo/s1600/Adobe-Flash-Player-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKeoYvEfj8wQ7KISbRxr6hLlG5QIO6XphP-rDXtgqk4Zy7O3i4OcTY-zCBThf-QX-p7hMKxKJr_gz_bToeKUcbxOrjLAoGj-lpwhHELSUgkoIcKLKzgKT5a3nRYmk9SjijtnTdoiKWqo/s1600/Adobe-Flash-Player-icon.png" /></a></div>
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
<i><b><span style="font-size: large;">Instalação do plugin do adobe flash player no firefox, no slackware 14. </span></b></i></div>
<br />
<br />
<br /><div class="entry-content">
<strong>Instalação: Manual</strong>
Passo 1: mudar para o diretório (pasta) em que o arquivo do plugin foi baixado (do site da adobe mesmo no http://get.adobe.com/br/flashplayer/ escolha a opção "tar ball")<br />
<blockquote>
$cd caminho_da_pasta_do_arquivo_baixado</blockquote>
Passo 2: Extração do tar ball<br />
<blockquote>
$ tar -xf install_flash_player_11_linux.tar.gz</blockquote>
Passo 3: Crie uma pasta chamda "plugins" em /usr/lib/firefox-* (para o 32 bit), ou /usr/lib64/firefox-* (para o 64 bit). <i>(no firefox 21 é na pasta /usr/lib/firefox-*/browser ou /usr/lib64/firefox-*/browser)</i><br />
<blockquote>
# mkdir /usr/lib/firefox-*/plugins ou # mkdir /usr/lib64/firefox-*/plugins</blockquote>
Passo 4: Copie o arquivo libflashplayer.so para a pasta de plugin<br />
<blockquote>
# cp libflashplayer.so /usr/lib/firefox-*/plugins/ (para 32 bit)</blockquote>
Ou<br />
<blockquote>
# cp libflashplayer.so /usr/lib64/firefox-*/plugins/ (para 64 bit)</blockquote>
Passo 5: Reiniciar o Firefox<br />
Passo 6: Abra o Firefox e divirta-se!!!<br />
<br />
Grande Abraço a todos !!! <br />
<br />
fonte: http://slackerboyabhi.wordpress.com/2012/01/17/installation-of-flash-player-for-slackware-13-37/ </div>
leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-83126201978895347342013-06-14T10:29:00.002-07:002017-07-23T16:34:42.258-07:00UUUURUUUUUU 2 posts em um dia!! Maravilha! Bom, este post é sobre um simulador de Fórmula 1, o incrível Intense Racing 1.0. Muito fera! Viciante! Simples, mas viciante! Você vai contra até seis vagabundos, todos da mesma categoria do carro que você escolher, em três níveis de dificuldade: fácil, médio e difícil. O jogo tem 16 circuitos e 7 carros em quatro modos de jogo: Grand Prix, Single Race, Quick Start e Training. Vamos aos controles: Setas direcionais para cima e para baixo: acelerar e frear.<br />Setas direcionais para os lados: virar. Tecla Tab: turbo, mas não funciona se superaquecer. Teclas de F1 a F7: variar a câmera. Tecla Esc: menu. Ele tem 17mb jogo pequeno mas muito Fera! Para baixá-lo vá no baixaki ou superdownloads e procure por Intense Racing. Abaixo alguns screenshots para apreciação. Gente, "vamu que vamu" Até a próxima!<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD7kwtKcV_sWD8e2ThA-1Hh5-8BdVVFvclmRY3oa7YdpEc7lic9OYRNHMid-yquxjIUu37aAj_DQb0y54Tn4nVXPCzbJPuQ69AVGxsEjjrkpLBDQUBX_cZSAwLz16aNm1G22nYVBYMQmc/s1600/IntenseRacing01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD7kwtKcV_sWD8e2ThA-1Hh5-8BdVVFvclmRY3oa7YdpEc7lic9OYRNHMid-yquxjIUu37aAj_DQb0y54Tn4nVXPCzbJPuQ69AVGxsEjjrkpLBDQUBX_cZSAwLz16aNm1G22nYVBYMQmc/s1600/IntenseRacing01.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikmVdE_6Btppd3FM0EHtIYzH_zosFGHf83dtcRmhnLwRgnqfE60r8mOGk6BMDSOm2-brGxBiD_iB7IP4RmDGzymBAJuhPKTD5QuvcsQzcdA0w2JQspdtJpIAciODMYTRYf9VIHd1_TbOM/s1600/IntenseRacing02.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikmVdE_6Btppd3FM0EHtIYzH_zosFGHf83dtcRmhnLwRgnqfE60r8mOGk6BMDSOm2-brGxBiD_iB7IP4RmDGzymBAJuhPKTD5QuvcsQzcdA0w2JQspdtJpIAciODMYTRYf9VIHd1_TbOM/s1600/IntenseRacing02.jpeg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-y_-RypxLYjqbnkbHlrifcKkDXYTHfsYvp4AdoDaBclyl-XBfjL-WwBixUkDkQgzstpaQHbka1BkRHwFYbL6C0rvH5U2YD23ZG50XjIgXcUvNoyMrHLG0ddGH358zufMSJUhu8e3WAwg/s1600/IntenseRacing03.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-y_-RypxLYjqbnkbHlrifcKkDXYTHfsYvp4AdoDaBclyl-XBfjL-WwBixUkDkQgzstpaQHbka1BkRHwFYbL6C0rvH5U2YD23ZG50XjIgXcUvNoyMrHLG0ddGH358zufMSJUhu8e3WAwg/s1600/IntenseRacing03.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5cd5swIe97NLsOnIt6T-m_NvE5jj4KlbsapWce86T_bHwjlPeU-5YOa8hb5TD9-jpzgJSTQzIckeY6UkDgioHUgqUvNK8aV3dEpVgQ29VHQ4Xs1uq81yO_Gz7_OQ0B8nonLsIPeht2FM/s1600/IntenseRacing04.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5cd5swIe97NLsOnIt6T-m_NvE5jj4KlbsapWce86T_bHwjlPeU-5YOa8hb5TD9-jpzgJSTQzIckeY6UkDgioHUgqUvNK8aV3dEpVgQ29VHQ4Xs1uq81yO_Gz7_OQ0B8nonLsIPeht2FM/s1600/IntenseRacing04.jpg" height="228" width="320" /></a></div>
<br />
<br />leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com1tag:blogger.com,1999:blog-7500185960771978550.post-42600025286878057432013-06-14T09:44:00.003-07:002017-07-23T16:34:19.036-07:00PakMan 2008 Após o recebimento de 231 e-mail´s pedindo o retorno dos posts no blog, venho-vos com o retorno esperado dos posts! AÊ, AÊ, AÊ!!!! Vou tentar fazê-los semanalmente, a princípio, para ver se consigo manter esta meta, talvez depois post mais coisa mais rápido. Conto com a ajuda de quem frequenta com, comentários e possíveis discussões sadias.<br />
Bem, chega de lero-lero, vamos falar de jogos! Amiguinhos, o lance é o seguinte, o fenomenal <b><i>PakMan 2008</i></b>. Para quem gosta do clássico pacman este vem com a proposta do 3D como inovação, agora tem tempo para terminar a fase, mas há reloginhos na fase que acrescentam mais tempo, a escolha de níveis de dificuldade, os monstros não são só fantasmas mas insetos e outros monstros fantásticos! Instalei, joguei e fiquei viciado! Sabendo que tudo que vicia é coisa do demônio, então tome cuidado ao jogar este incrível jogo. Meu é pequeno, 3mb apenas, instalação next, next, finish, facílimo. Vamos aos links para baixar:<br />
- Bem se você for ao baixaki (www.baixaki.com.br) e procurar por PakMan 2008 encontrará o link para baixar, mas se quiser baixar direto da fonte ai vai: http://www.freegamepick.com/download-free-games/pakman-2008/download.html<br />
Vamos à alguns screenshots para a degustação, até a próxima pessoal, e "vamu que vamu"!<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhohq7Q2js30DRQChclcF2mzaARBdxAvYSjaKWJmBWLkIZoESmf4dLkX6iaJqwTtvZgGmL6yN2ktlZJEB1wfez6ZHKgJtelmi7gvBZrj2i03s-CPPNR2V4-j4mMCCc7lCowScYRI-H5KM0/s1600/Pakman01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhohq7Q2js30DRQChclcF2mzaARBdxAvYSjaKWJmBWLkIZoESmf4dLkX6iaJqwTtvZgGmL6yN2ktlZJEB1wfez6ZHKgJtelmi7gvBZrj2i03s-CPPNR2V4-j4mMCCc7lCowScYRI-H5KM0/s1600/Pakman01.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2s1OMRAHf9Nk0kAevm1sQorl26kluBrcxXA9-VOTpK9hVZ8-TPSTGIbaKXTqpDU8hXCzJaLV5W5w3bpiRNlCMIMsMWhDNpgi77RNJuFF1wGTS9tSi4_hMDfaBbyach_PcdNkaTHXobeY/s1600/Pakman02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2s1OMRAHf9Nk0kAevm1sQorl26kluBrcxXA9-VOTpK9hVZ8-TPSTGIbaKXTqpDU8hXCzJaLV5W5w3bpiRNlCMIMsMWhDNpgi77RNJuFF1wGTS9tSi4_hMDfaBbyach_PcdNkaTHXobeY/s1600/Pakman02.jpg" height="240" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpHGxpDMyhfo0qy7o1LaLsR-npddPPJqZgtXC7AHqcyohiQV9u1eWMCcj51LQqorTaPVoHY3oagXX216TXGKDoffyP2nWZ88avN1wqWF_qL6R1fUSQRQ6GY4q1Zg7i_z6502IIZv-eeE0/s1600/Pakman03.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpHGxpDMyhfo0qy7o1LaLsR-npddPPJqZgtXC7AHqcyohiQV9u1eWMCcj51LQqorTaPVoHY3oagXX216TXGKDoffyP2nWZ88avN1wqWF_qL6R1fUSQRQ6GY4q1Zg7i_z6502IIZv-eeE0/s1600/Pakman03.jpg" height="240" width="320" /></a></div>
leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com1tag:blogger.com,1999:blog-7500185960771978550.post-42783489335732372452012-12-05T03:23:00.002-08:002017-07-23T16:33:55.957-07:00<b id="internal-source-marker_0.43770284904167056" style="font-weight: normal;"><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Bom instalei o Debian 6 passei todos os 7 DVD e 1 cd pela leitura e fiquei esperando, ele entrou no modo texto, até ai tudo bem, dei um “startx” e ele me retornou um erro. Tudo bem vamos arrumar. Na verdade decidi instalar o gnome 3. Então tive que configurar na unha a rede, entrei no /etc/network/interfaces e configurei os ip’s, troquei dhcp para static coloquei logo abaixo o address, o netmask e o gateway, fui no /etc/resolv.conf e configurei o DNS. Quando dei o comando apt-get install … ele falou que estava com problemas de pacotes quebrados do phyton. Tudo bem vamos arrumar estes pacotes dei um aptitude install -f, tá arrumou!, Então vamos instalar o gnome3: </span><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">#nano /etc/apt/sources.list</span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> Adicione as linhas a seguir:</span><br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">#Instavel</span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">deb http://sft.if.usp.br/debian/ sid main non-free contrib</span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">deb-src http://sft.if.usp.br/debian/ sid main non-free contrib</span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">#Experimental</span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">deb http://sft.if.usp.br/debian/ experimental main non-free contrib</span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">deb-src http://sft.if.usp.br/debian/ experimental main non-free contrib</span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Agora digite ctrl+o e enter para salvar a configuração, e depois digite:</span><br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">#apt-get update </span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">e para instalar:</span><br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: 'Courier New'; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">#apt-get install -t experimental gnome3-session gnome-themes-standard gnome-control-center gnome-keyring gnome-media libdconf0 dconf-tools gsettings-desktop-schemas dconf-gsettings-backend</span><br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Reiniciei o computador e... nada !Então para o propósito deste segmento do blog não obtive o retorno esperado deste incrível sistema operacional, porém fica algumas screenshots que consegui de usuários que conseguiram esta proeza, não desistirei deste sistema operacional assim como do fedora em outro post estarei novamente postando sobre eles. Até mais!</span></b><br />
<b style="font-weight: normal;"><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLV2uOfqn9ZqJ5li6KOXX3rUSbTIMkBbwdtG1DMxbkYGze4WfRvtmWzu5Oud8g0jaXOlpAjgGrMz-wG9O7zWUahuCsOSnuXvki_V_yveoZ9x8d1HaPsDbwJktTo5157nllHVz74UsZ3PE/s1600/Screenshot_02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLV2uOfqn9ZqJ5li6KOXX3rUSbTIMkBbwdtG1DMxbkYGze4WfRvtmWzu5Oud8g0jaXOlpAjgGrMz-wG9O7zWUahuCsOSnuXvki_V_yveoZ9x8d1HaPsDbwJktTo5157nllHVz74UsZ3PE/s1600/Screenshot_02.png" height="179" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGvBiPp1ODPhKQ0KOArxEsa6wB7M9bFWEUuS8rHWgrsN0UVzi5O3z6IrX8-AnKy0F4Fm3dMetaiCyXeWp3ZhdraJ-Fn8pwu0IrjEMv40DU90mZAzZTC7HrP2g1PZaFhimBQwoNnRhMn7w/s1600/Screenshot_3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGvBiPp1ODPhKQ0KOArxEsa6wB7M9bFWEUuS8rHWgrsN0UVzi5O3z6IrX8-AnKy0F4Fm3dMetaiCyXeWp3ZhdraJ-Fn8pwu0IrjEMv40DU90mZAzZTC7HrP2g1PZaFhimBQwoNnRhMn7w/s1600/Screenshot_3.png" height="200" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMnZyH4dz_tqxGqfMhMfUEeP0OIGoLtckgEPiNATzyf4blKqFnNCPn_Te5BDkmv9oN8lBGvzQmX5dZ68sUpkyFunEniVB8rdsnIaXa63CySdBoWFYqSCRlfGJHI1gZ_uO6zE1lxiqzOQo/s1600/screenshotdebian6_01.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMnZyH4dz_tqxGqfMhMfUEeP0OIGoLtckgEPiNATzyf4blKqFnNCPn_Te5BDkmv9oN8lBGvzQmX5dZ68sUpkyFunEniVB8rdsnIaXa63CySdBoWFYqSCRlfGJHI1gZ_uO6zE1lxiqzOQo/s1600/screenshotdebian6_01.jpeg" height="200" width="320" /></a></div>
<b style="font-weight: normal;"><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b>
<b style="font-weight: normal;"><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b>leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-67252997280348272532012-10-06T05:53:00.000-07:002017-07-23T16:33:30.442-07:00<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3NOD1pdHfHZ5iC_upQbQmAtbUp0Rgeq0S0-0y6qRuB7RDReWRhJeYtBat27h5R5GTuB9DWpBmzhDlh3pH8VYQGnRFk9jt5SYuw63wrhUXhQ6l_xz-fa4srv3p9CZcB12FGrBHiCJupkU/s1600/Logo+MYSQL.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3NOD1pdHfHZ5iC_upQbQmAtbUp0Rgeq0S0-0y6qRuB7RDReWRhJeYtBat27h5R5GTuB9DWpBmzhDlh3pH8VYQGnRFk9jt5SYuw63wrhUXhQ6l_xz-fa4srv3p9CZcB12FGrBHiCJupkU/s200/Logo+MYSQL.jpg" width="200" /></a></div>
Bom, pessoal perdão por estar fora tanto tempo é que estou tentando arrumar muita bagunça. Um grande abraço a todos que acompanham o blog!<br />
O lance é o seguinte como estou usando o mySQL para as aulas de JAVA e vou usá-lo também nas aulas de PHP, vou ter que postar algumas coisas de mySQL ao invés do fabuloso postgreSQL.<br />
Bom o clássico né! Depois de instalar o mySQL saia no prompt, seja no DOS ou no SHELL. Como entrar no mySQL:<br />
<br />
<i>mysql -u root -p</i><br />
<br />
O lance é: -u é a especificação do usuário, qual usuário vai entrar, neste caso é o root (administrador), o -p é a chamada da senha, quando der o comando e pressionar o ENTER ele pedirá a senha, colocou e já era! O resto é resto meu amigo (ou amiga!). Temos que começar em algum lugar, certo? Façamos um banco então!<br />
<br />
<i>create database testeBancoDeDados;</i><br />
<br />
Pronto criou o banco, vamos usá-lo:<br />
<br />
<i>use testeBancoDeDados;</i><br />
<br />
URRRRUUUUUUU! "Tamos" dentro, ok, calma agora vamos fazer uma tabelinha básica, ok?<br />
<br />
<i>create table cliente (nome varchar(40), sobrenome (40), idade int);</i><br />
<br />
OUUUOUUUU!!! Agora temos uma tabela com colunas! A tabela "cliente" tem 3 colunas: nome, sobrenome e idade. Mas o que quer dizer "varchar" e "int". São os tipos de dados armazenados nestas colunas. Varchar por exemplo seria o clássico "string" ou mais comumente conhecido por texto mesmo. O int vem de integer que são número inteiros. Procure na internet os vários tipos que podemos dar para as colunas em nossas tabelas mysql.<br />
Vamos agora inserir algum dado (valor) em nossa tabela? Vamos:<br />
<br />
<i>insert into cliente values ("Leandro","Spanghero",33);</i><br />
<br />
É eu sei já embaçou tudo! O.o<br />
"insert into cliente" vou inserir dados na tabela cliente. A inserção segue o raciocínio que foi proposto na criação das colunas na tabela. Partindo dessa premissa temos a sequencia de nome, sobrenome e idade, portanto os valores devem seguir esta sequência. Perceba que os textos tem aspas (") e a idade não tem. Fiquem atento para estes detalhes.<br />
Ok, vamos dar um "select" só pra ver se inseriu tudo certinho:<br />
<br />
<i>select * from cliente;</i><br />
<br />
E com este encerro por aqui. Se alguém em torrar por estar muito básico vai levar "uma". Já disse que estou fazendo os posts para quem está começando.<br />
<br />
Até a próxima, e vamu que vamu. Deus os abençoe!!!<br />
leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-78424677941947759012012-05-27T20:17:00.003-07:002022-07-25T04:26:23.473-07:00Fedora 16 - Introdução<p style="text-align: left;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjopSvTy6U1ZEzcUFfszoMZ10ROCregTMhXyGxWVerUJ4qG7WanHGErlpP4SM4Vk-bh7m0Rn1PSnVO2g52wTHsv6cM3202ybqfS2zSy4pQ98vZueQ2BaAWSyDWLdsGkYxkJNx3Zx4lVslP40V9a4h9lYVv5InvO7cPWXSj9k5TW_rmV2-EVAeX6z3mc/s256/fedora-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="256" data-original-width="256" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjopSvTy6U1ZEzcUFfszoMZ10ROCregTMhXyGxWVerUJ4qG7WanHGErlpP4SM4Vk-bh7m0Rn1PSnVO2g52wTHsv6cM3202ybqfS2zSy4pQ98vZueQ2BaAWSyDWLdsGkYxkJNx3Zx4lVslP40V9a4h9lYVv5InvO7cPWXSj9k5TW_rmV2-EVAeX6z3mc/s1600/fedora-logo.png" width="256" /></a></div><br /> Muito bem, testei o Fedora 16, e não gostei. O linux Mint deu menos problemas! O Linux Mint reconheceu minha placa de rede wireless depois de instalar o mesmo driver que o Ubuntu instala, e a partir dai funcionou sem problemas. O fedora não reconheceu não deu uma saída amigável, tive que procurar seu driver instalá-lo, reiniciei o micro e funcionou legal. Fui dormir que quando fui ligá-lo novamente, cadê o driver? Cadê a placa toda wireless sumiu! Tá peguei meu adaptar de rede wireless usb, configurei ele e voilá! Internet ok! Eu não desistiria tão fácil assim do fedora, pois foi com o pai de, o Red Hat, que eu tive minha primeira experiência com linux. Porém na evolução dele do trato diário teve algo que não gostei. Sabe quanto parece que falta alguma coisa. Tudo bem, os pacotes são em rpm é só você andar na internet e tropeça num pacote rpm. Mas no todo não gostei do Fedora 16. Quero dar uma segunda chance pra ele mais pra frente. Ficam as telas dele para degustação! Até a próxima, Deus os abençoe!<br /><p></p><p>
<br />
Tela após a instalação</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi5ZHS44ljwsYbu75uoRbHWk38mLM-1d0s_tIQasC_C2CH4cUFfTVVkInqCU7hBKwWKjWEC3F322bKJvxKDOsV62qAJert4-rMjS2yZ5wrvSw63n6MVw_Hmx8Z1fcYdGOz4swdSq1tPxPUuoHraqT7Z2TpHjkOHdu5Civjm-cD2lRUS8QmCYxuO96k/s1366/Fedora_16-002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi5ZHS44ljwsYbu75uoRbHWk38mLM-1d0s_tIQasC_C2CH4cUFfTVVkInqCU7hBKwWKjWEC3F322bKJvxKDOsV62qAJert4-rMjS2yZ5wrvSw63n6MVw_Hmx8Z1fcYdGOz4swdSq1tPxPUuoHraqT7Z2TpHjkOHdu5Civjm-cD2lRUS8QmCYxuO96k/s320/Fedora_16-002.png" width="320" /></a></div><br /><p></p><div class="separator" style="clear: both; text-align: center;">
</div><p>
Tela de escolha de programas</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb7qqseL7zX4r0sWHjGjbTuyCRUvxJVXsQQSbWkOfchu3XKioOxm-xYRJHBoNDXoAcE8x1uZEVxmp8CoZdGYUul-4Dt6bfelopUR3ReFccK53yNbF95le78xWBW9IOxoVU_7e0YJ1LQg_4chyy3wUxRQ_CfMfvaAQnB5W7ngsyCShnnkccPotWeRfz/s600/Fedora-16-001.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="351" data-original-width="600" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb7qqseL7zX4r0sWHjGjbTuyCRUvxJVXsQQSbWkOfchu3XKioOxm-xYRJHBoNDXoAcE8x1uZEVxmp8CoZdGYUul-4Dt6bfelopUR3ReFccK53yNbF95le78xWBW9IOxoVU_7e0YJ1LQg_4chyy3wUxRQ_CfMfvaAQnB5W7ngsyCShnnkccPotWeRfz/s320/Fedora-16-001.jpg" width="320" /></a></div><br /> <p></p><div class="separator" style="clear: both; text-align: center;">
<br /></div>
Wallpaper<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfX9CJ9JBLKtKvpWi2dqmFytM2PCYwyBDMyTfF_W-V5PhDLdxFS3fotnFjWgYdozxT2mi28B0vlJDmX0PMY2rwTRjDHJIazHf4ZLrEuhuuP-2JQASlqWH3Qm7xHhjXGR_sBmD9TjbLsiI/s1600/verne-02-noon.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfX9CJ9JBLKtKvpWi2dqmFytM2PCYwyBDMyTfF_W-V5PhDLdxFS3fotnFjWgYdozxT2mi28B0vlJDmX0PMY2rwTRjDHJIazHf4ZLrEuhuuP-2JQASlqWH3Qm7xHhjXGR_sBmD9TjbLsiI/s320/verne-02-noon.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-56624078941613025492012-05-24T12:00:00.004-07:002022-07-25T04:18:11.093-07:00Linux Mint 12 - Lisa - introdução<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaSTo2QdoautbHu5mrUT5-ELvSGjxUhF5GSG74r0-cX3oK-NO_AylVbNc5k5uLPQb6KbJiXVfKJdHiAzNeX27Q_AaakIWg9Pv5Xe7lbYw4xeRYsOdGnAuQ-BiElp6HTxUislhGRyYnI3ygKmtcv64_RWmIWzOQufEoCsgkEH9TSXOtx0IJqvrlJDYE/s830/linux-mint-logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="830" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaSTo2QdoautbHu5mrUT5-ELvSGjxUhF5GSG74r0-cX3oK-NO_AylVbNc5k5uLPQb6KbJiXVfKJdHiAzNeX27Q_AaakIWg9Pv5Xe7lbYw4xeRYsOdGnAuQ-BiElp6HTxUislhGRyYnI3ygKmtcv64_RWmIWzOQufEoCsgkEH9TSXOtx0IJqvrlJDYE/s320/linux-mint-logo.jpg" width="320" /></a></div><p></p><p>Bom fiquei 1 mês com o famigerado Linux Mint 12 "Lisa" e não gostei. Tudo ele puxa do Ubuntu, tudo bem , você vai dizer: " Mas também ele é derivado do Ubuntu !", porém, não consigo ver um diferencial dele para com o ubuntu 11.10 e 12.04. Muitos menus e outras opções e programas não estão totalmente traduzidos para português-brasil. O Ubuntu nunca travou comigo, ao contrário do Linux Mint, que chegou a travar 3 vezes. Sei que os diferenciais citados aqui não são profundos para "heavy users" do linux mint, mas são diferenciais para usuários comuns que querem, por exemplo, migrar de Windows para Linux. Estou postando o site dele e alguns Screenshots fiquem à vontade para experimentá-lo e ver algo que eu não vi ;)<br />
Site Oficial:<br />
<a href="http://www.linuxmint.com/">http://www.linuxmint.com/</a><br />
<br />
Tela Inicial logo após a instalação<br />
</p><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX2SXIUMvh6SRw7l_EozUpSxlYmdnUMVMHUFsI5IP4oye6kv0UoSeAFnjYuuAPgSy2myQVPrFCFu0jEUrBxNIUK-3z7PafsFVWhMTUupPc-oHslwCUQz5t0zWk5YOfK3F6htjCZjPInz6qXtdql3582PQOKHoG9zctz23JUo97tzYkUPqQVViVbdz-/s1200/mint000.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="751" data-original-width="1200" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX2SXIUMvh6SRw7l_EozUpSxlYmdnUMVMHUFsI5IP4oye6kv0UoSeAFnjYuuAPgSy2myQVPrFCFu0jEUrBxNIUK-3z7PafsFVWhMTUupPc-oHslwCUQz5t0zWk5YOfK3F6htjCZjPInz6qXtdql3582PQOKHoG9zctz23JUo97tzYkUPqQVViVbdz-/s320/mint000.webp" width="320" /></a></div>
<br /></div><br />
<br />
Wallpaper<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizobDZd4PNWbp_7p4wPPDB2nRsNhckhq_BRFQAklqKGV0FnpXIYWcniFxRF9SGaULS11C_uI9WfLwxlJ4ltIEy6Fwzt2Fgen90201Jevup_sAyWcN8qM9i34HU2AtF4WQRoknB_YHKcImwfFyk914MrSUgHWoh7K4hR5E0Iw6fmQTKHa87169sQoop/s1920/mint002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1200" data-original-width="1920" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizobDZd4PNWbp_7p4wPPDB2nRsNhckhq_BRFQAklqKGV0FnpXIYWcniFxRF9SGaULS11C_uI9WfLwxlJ4ltIEy6Fwzt2Fgen90201Jevup_sAyWcN8qM9i34HU2AtF4WQRoknB_YHKcImwfFyk914MrSUgHWoh7K4hR5E0Iw6fmQTKHa87169sQoop/s320/mint002.png" width="320" /></a></div><br />
Menu Inicial<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGehZltXlEM5E_kR4jSaWVzfdHP0R_Tq88Uz76Oesv7gpRSPxkqtG6pBL7BBb_JeLXrKtZudlZeJe7ouekxBILUljsc3nxh4afIba9DMdU_gjAzYpt9SqA-2SJH0udoR29cnj6mcypDQN6T9R8k4RA3h3fSSm8Q8DPXDD-ho5J1Q3jpHFc5GF_XtQE/s524/mint001.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="329" data-original-width="524" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGehZltXlEM5E_kR4jSaWVzfdHP0R_Tq88Uz76Oesv7gpRSPxkqtG6pBL7BBb_JeLXrKtZudlZeJe7ouekxBILUljsc3nxh4afIba9DMdU_gjAzYpt9SqA-2SJH0udoR29cnj6mcypDQN6T9R8k4RA3h3fSSm8Q8DPXDD-ho5J1Q3jpHFc5GF_XtQE/s320/mint001.jpg" width="320" /></a></div><br />
<br />
E vamu que vamu! Até a próxima!!! Deus os Abençoe!<br />
<br />
<br />
<br /><br />leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0tag:blogger.com,1999:blog-7500185960771978550.post-64093567560761801092012-04-04T06:33:00.002-07:002012-04-04T06:33:24.520-07:00Rede com pinguimOk, vou usar distribuição ubuntu 11.10 formar uma rede com compartilhamento de arquivos e por isto ser um "blog" (biologic "log") relatarei a experiência. Deus os abençoe!leandrospanhttp://www.blogger.com/profile/07619025754652876076noreply@blogger.com0