Ir para conteúdo
TK News
  • Cadastre-se

A magia do Front-end

Renato

Por ,
em Tutoriais Websites

 Share Seguidores 0

Posts Recomendados

Renato

Renato 659

Postado
Postado

Front-end

 

Faz tempo que eu não venho aqui né? Pois é, resolvi trazer um conteúdo pra não perder o costume, e como estou meio desatualizado de outros assuntos resolvi trazer sobre algo que estou em constante contato, a web.

O que é front-end?

Muitos dizem, equivocadamente que back-end é a programação, e front-end é o design/layout. Pois, javascript também faz parte do front-end. Eu diria que front-end é o visual do teu site, sintetizando: a interface.

O que faz parte do front-end: HTML, CSS, JavaScript, Conceito Ajax, ColdFusion (CFML), entre outros.

 

O desenvolvedor front-end

Quem desenvolve para esta camada deve se assegurar a compatibilidade cross-browser e cross-platform. Cross-browser é quando a interface funciona em todos os (ou na maioria) navegadores, e seguindo a lógica, cross-platform, seria para diferentes plataformas (desktop, tablet, mobile), o que nada mais é o conceito responsive.

Também deve se preocupar com web standards e técnicas de SEO.

 

Web Standads - design patterns para web

Conceito utilizado para uma padronização da web W3C. É aquela velha história, você não precisa seguir padrões de projeto, mas é sempre bom, aliás, ótimo. Web Standards se resumo em regras que você deve seguir ao criar sua interface, por exemplo: você sabia que ao dar instruções em um formulário, se deve usar a tag <aside>? Isto é um exemplo fútil, mas, todos os meta tags de um header também são web standards, assim como usar <footer> para o rodapé e <nav> para menus são padrões de HTML5, e preferir a unidade de medida "em" ao invés de "px", padrões CSS.

 

Aprendendo um pouco

Se você se interessou e deseja aprender um pouco mais, aqui segue alguns sites/blogs que abordam alguns assuntos interessantes.

 

Maujor (http://maujor.com/): aborda css e design patterns.

Tableless (http://tableless.com/): aborda html/html5, css, e design patterns.

Web Standards Blog (http://webstandards.blog.br/): aborda design patterns em geral.

 

 

The magics

 

Aqui falarei um pouco de frameworks e utilitários que fazem a magia do front-end acontecer de verdade. Simplesmente co-autores da interface web moderna.

 

Frameworks JavaScript com foco em desenvolvimento

 

:star:  :star:  :star:  jQuery

O mais famoso framework para JavaScript. Acho que todos já sabem o que é, até leigos de web já devem ter ouvido falar. Não é pra menos, é uma das mais intuitivas bibliotecas que já se foi criado para uma linguagem de programação. Existem centenas de milhares de plugins para jQuery disponíveis hoje, e esse número só cresce. Ou seja, opções não faltam.

Site/documentação: http://jquery.com / http://api.jquery.com

 

 

:star:  :star:  :staroff:  MooTools

É um framework para JavaScript auto descritivo: compacto e modular. Em minha concepção uma ótima alternativa o jQuery para projetos pequenos.

Site/documentação: http://mootools.net/

 

 

:star:  :star:  :staroff: Prototype JS
Pra ser sincero, apesar de conhecer já de longa data, não tenho uma experiência com Prototype, mas ele é basicamente um framework para JavaScript simples e compacto como o MooTools.

Site/documentação: http://prototypejs.org/

 

 

Frameworks JavaScript com foco em interface

 

 

:star:  :star:  :star:  AngularJS

"HTML enhanced for web apps!". Feito nada mais, nada menos pela Google, o AngularJS utiliza de JavaScript para dinamizar seu HTML, ou seja, o foco é o HTML. É extremamente útil pois te dá a possibilidade de escrever arquivos em html dinâmicos, com loopings, condições, e muito mais. É simplesmente fantástico o que ele faz.

Site/documentação: http://angularjs.org

 

 

Frameworks para front-end em geral

 

:star:  :star:  :star: Bootstrap

Bootstrap ou Twitter Bootstrap é um dos mais famosos frameworks para front-end, arriscaria dizer que é o mais famoso. É composto por CSS, plugins jQuery e uma fonte para icones (Glyphicon). No site tem uma ampla documentação.

Curiosidades: o site do shadowcores é feito inteiramente com bootstrap 2.3, utilizando até o template padrão. O TibiaKing Blacklist é feito com bootstrap, e nosso downloader de clientes de tibia também, mas já com um template customizado. O site do AngularJS citado acima é feito inteirinho com bootstrap, ou seja, a Google o-utilizando. 

Site/documentação: http://getbootstrap.com/

 

 

:star:  :star:  :star: UIKit

Uikit é outro framework para front-end em geral, composto por CSS, JS e uma fonte para icones (FontAwesome). Por mais que o bootstrap seja famoso, EU considero o uikit melhor. Mais simples, mais bonito, e mais intuitivo que o bootstrap.

Site/documentação: http://getuikit.com/

 

 

:star:  :star:  :staroff: Foundation

Sem segredo, faz basicamente o que o Bootstrap e o UIKit fazem, mas é muito pouco intuitivo e com muitas restrições. Sem falar que ainda contém alguns bugs e consideravelmente "menos bonito". Possui uma gama de opções para responsividade, que parece ser um dos focos do zurb com o foundation.

Sites/documentação: http://foundation.zurb.com/

 

 

:star:  :staroff:  :staroff: jQuery UI

jQuery User Interface, também um framework front-end. Apesar de focar mais em interações com o usuário utilizando o jQuery, também tem o seu CSS padrão, com as opções de temas, mas não oferece auxílio à parte de estrutura de layout (grid, nav, buttons, etc).

Já teve seus "anos de ouro", e já foi muito usado. Mas hoje não consegue competir com o Bootstrap e com o Uikit, que estão muito mais avançados do que o jQuery UI, que parece ter parado no tempo. Mas enfim, para projetos pequenos e simples usos pode ser até a melhor escolha.

Curiosidades: o ModernACC utiliza este framework para sua interface, e se você já conhece o jQuery UI já deve ter percebido de cara.

Site/documentação:

 

 

Utilitários em geral

 

 

JSFinddle

"Finddle" é um novo conceito que o JSFinddle traz, lá você pode testar como ficaria uma combinação com o Html/Css/Js, o tripé front-end. É um utilitário muito bom, pois você pode usá-lo tanto para testar e tanto para "mostrar" alguém, pois assim como o pastebin e o gist, ele também pode ser salvo em um permalink (link permanente).

Site: http://jsfinddle.com/

 

 

DivShot
DivShot é um editor visual de front-end. Nele você monta seu layout em cross-browser e cross-platform, utilizando do Bootstrap, Foundation e do Ratchet (Mobile). Com o perdão do pleonasmo, ele é espetacularmente espetacular, o seu único problema é que pode parecer confuso à primeira vista, pois tem uma poluição visual com tantas opções, funções, botões e informações. Mas ao decorrer da prática, pode ser muito útil.

Site: http://divshot.com/

 

 

É isso ai galera, listei aqui os mais importantes que lembrei no momento. Editarei caso lembre de mais alguns, e vocês também podem sugerir outros, adoro conhecer mágicos novos (=

Abraços!

rena.to

Link para o post
Compartilhar em outros sites

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

Visitante
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Seguidores 0
Ir para a lista de tópicos

  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

  • Conteúdo Similar

    • OT Archive
      OTClient para navegadores
      Por OT Archive
      OTClient Redemption (mehah) para navegadores
      Em nome da OTServList Brasil e do OT Archive, adaptei o OTClient Redemption para rodar em navegadores web.
       
       
      Source: https://github.com/mehah/otclient/pull/894 Guia de compilação e uso: https://github.com/OTArchive/otclient/wiki/Guia-‐-OTClient-Redemption-Web Demo sem assets: https://demo.otarchive.com Versão modular: https://webclient.otarchive.com Vídeo demonstrando o client se conectando a um servidor:  


       
       
      Em caso de dúvidas sobre o client web ou sobre servidores com suporte a websockets, por favor poste aqui.
       
      Disponibilizou um client web para seu servidor? Me avise para que eu inclua seu OT na categoria Web na OTServList Brasil, com um botão "Jogar Agora".
    • LeoTK
      [Modern Acc] Guild Dominante (Página)
      Por LeoTK
      Salve galera bom estou trazendo mais um conteúdo dessa vez a página para mostrar a guild dominante do evento castle war para o modern acc com ajuda de muitos amigos claro consegui trazer esse conteúdo para vocês bora lá

      A página configurada corretamente vai ficar assim

      2019-04-07 17-44-45.mp4 OBS: Eu não vou ceder a imagem porque é algo facinho de fazer e até porque eu não quero criar um padrão porque isso permite a pessoa criar do tamanho que desejar etc... então isso vou deixar a critério de vocês
       
      Código \/
       
      <?php $consulta = $SQL->query('SELECT `guild` FROM `castelo_guerra` ORDER BY `id` ASC;'); $number_of_rows = 0; foreach($consulta as $guildid){ $id = $guildid['guild']; } $consulta2 = $SQL->query('SELECT `name`, `id` FROM `guilds` WHERE id = '.$id.';'); ?> <style type="text/css"> a.castlefont { font-family: Verdana, Arial, Helvetica; font-size: 17px; color: #ffcc33; text-shadow:#000 4px 6px 4px, #000 -1px 1px 2px, #000 1px 1px 2px, #000 -1px -1px 2px; text-decoration:none } a:castle.topfont { font-family: Verdana, Arial, Helvetica; font-size: 10px; color: #CCC; text-decoration:none } </style> <div id="warcastle" style="margin-top:5px; margin-left:18px; height:150px; width:180px; background-image:url(<?PHP echo $layout_name; ?>LINK DA IMAGEM DE FUNDO AQUI);"> </br> </br> </br> <?php foreach($consulta2 as $guild){ echo ' <div align="center"> <a class="castlefont" href="/index.php/guilds/view/' . $id . '"> <img style="margin-left:8px; margin-top:6px" src="/public/guild_logos/' . (file_exists("public/guild_logos/".$guild['id'].".gif") == true ? $guild['id'].".gif" : "castlewar.gif").'" width="64" height="64" border="0"/> <br/> <div id="textcastle" style="margin-top:3px;">' . $guild['name'] . '</br></div> </a> </div> </td> </tr> </table> '; } ?> </div>  
      Estarei deixando algumas explicações mais detalhadas abaixo
       
      1º- Informações do evento do castle war basta mudar o castelo_guerra para o nome da tabela do seu banco de dados que pode estar como castle_war também (Fique atento a isso)
      $consulta = $SQL->query('SELECT `guild` FROM `castelo_guerra` ORDER BY `id` ASC;'); 2º- Nessa parte você vai editar tudo referente ao texto do nome da guilda cor, sombreamento etc... basta ir editando para ver qual fica melhor para você
      <style type="text/css"> a.castlefont { font-family: Verdana, Arial, Helvetica; font-size: 17px; color: #ffcc33; text-shadow:#000 4px 6px 4px, #000 -1px 1px 2px, #000 1px 1px 2px, #000 -1px -1px 2px; text-decoration:none } a:castle.topfont { font-family: Verdana, Arial, Helvetica; font-size: 10px; color: #CCC; text-decoration:none } </style> 3º- Nessa parte vai ser a imagem de fundo no caso do vídeo mostra uma imagem do tema naruto com a escrita Castle War porém você pode criar a imagem do tamanho que quiser e como quiser por isso estarei deixando em branco para vocês criarem uma imagem única e exclusiva para vocês
      <div id="warcastle" style="margin-top:5px; margin-left:18px; height:150px; width:180px; background-image:url(<?PHP echo $layout_name; ?>LINK DA IMAGEM DE FUNDO AQUI);"> 4º- Essa parte é a que busca a logo da guilda porém caso a guilda não tiver uma precisa haver uma reserva padrão no caso esta nomeada para castlewar.gif mude esse nome para uma imagem padrão que você tenha na pasta public/guild_logos
       
      <img style="margin-left:8px; margin-top:6px" src="/public/guild_logos/' . (file_exists("public/guild_logos/".$guild['id'].".gif") == true ? $guild['id'].".gif" : "castlewar.gif").'" width="64" height="64" border="0"/>  
      5º- Para os leigos basta apenas usar um include onde quiserem adicionar isso tanto na home do site etc...

       
      {include_php file='templates/naruto/castlewar.php'} Por exemplo ficaria assim o meu
       
      DATABASE ADICIONADA CASO TIVER PROBLEMAS
      castelo_guerra.sql
       
       
      Bom galera é isso espero que façam bom uso  
      AVISO PROIBIDO PEDIDO DE AJUDA COM PROBLEMAS DE SQL E BUGS DO EVENTO CASTLE WAR NESSE TÓPICO CASO TIVER ALGUM PROBLEMA USE A ÁREA DE SUPORTE
       
      Agradecimentos (Créditos)
      @ricardo codenome
      @aspira
      @Yan Liima
      @Dwarfer
      @Yinz
    • Alladdin
      A PROCURA DE UM DESIGNER?
      Por Alladdin
      ESTÁ A PROCURA DE UM DESIGNER?
       
      A Identidade Visual de um OT é o ponto chave para o seu sucesso!
      Um OTServer com sua identidade visual formada consegue gerar:
      - Mais atenção para as belezas visuais do servidor.
      - Um ponto de vista positivo para novos jogadores.
      - A identidade de seu servidor.
      - Boas impressões à primeira vista.
      - Permite seu OTServer ser reconhecido e lembrado.
      - Um melhor posicionamento artístico.
      - Rentabilidade, lhe poupando dinheiro de designs futuros.
      - Apresentação, um ponto chave para um bom início na carreira de otservers.
      --------------------------------------------------------------------------
      Peça agora mesmo sua logo personalizada ou compre um template pré-definido!
      Não trabalhamos apenas com logos, temos experiências em criação de capas, posts.
      templates de sites, e muito mais!
      Trabalhamos com qualquer tipo de OTServer, como: Narutibia, Wodbo, Poketibia, Bleachtibia,
      Tibia Global ou Baiak e muitos outros servidores derivados!
      NÃO PERCA TEMPO, ME MANDE MENSAGEM AGORA MESMO!
      --------------------------------------------------------------------------
      Entre em contato agora:
      > Discord: vinny#9460
      > Facebook: https://www.facebook.com/VinnyArtz
      > Contatos opcionais: Me chame no messenger.
       
       
      UM POUCO DO MEU PORTFÓLIO ABAIXO \/









       

      “Se o seu ódio fosse transformado em eletricidade, ele seria capaz de acender todo o planeta” - Nikola Tesla.
       
      PS: NÃO CONSEGUI MOVER MEU TÓPICO PARA A ÁREA DE DESIGNS, PEÇO PARA QUE ALGUM MODERADOR O FAÇA, OBRIGADO.
       
    • Lekstar
      (Resolvido)Menu do site
      Por Lekstar
      Fala galera do TK !
       
      bom, estou querendo remover alguns items do menu do meu gesior, tentei remove-los pelo index mas sem sucesso.
      como posso remove-los ?
       
      Um Exemplo : Quero remover o subtopic "Addons" do menu.
       
      REP+ pra quem ajudar !
    • blaah snos
      (Resolvido)Colocando Ip no site
      Por blaah snos
      Hello meus caros amigos do TK
       
      Minha duvida é a seguinte:
       
      Como faço pra colocar um ip no site tipo otservrox.no-ip.info, queria saber passo a passo, desde como configurar na pasta do xampp ate colocar pelo No-IP.
       
      OBS: Quero sem o 8090
       
       
      Agradeço desde já

TibiaKing

Open Tibia Server

Quer aprender a criar seu próprio servidor de Tibia? Então está no lugar certo, aqui você encontrará milhares de tutorias, scripts, códigos, mapas e utilitários para que você possa fazer o seu próprio servidor de Tibia começando do zero.

Redes Sociais

Anuncie no TibiaKing

Precisa de mais visibilidade em seus projetos? Quer fazer um plano publicitário para o seu servidor? Anuncie no OTKing e faça sua divulgação, possuímos centenas de acessos simultâneos e milhares diários, com certeza será a sua solução!

×
×
  • Criar Novo...

Informação Importante

Confirmação de Termo

  Eu aceito