Um portfólio é uma seleção de obras concluídas. O portfólio é selecionado melhor trabalho que demonstram as habilidades, estilo e métodos de trabalho mais fortes. O portfólio é usado para mostrar aos empregadores quão bem os diferentes trabalhos foram realizados, para provar a versatilidade do executor.

O portfólio de artistas inclui reproduções de pinturas ou cópias eletrônicas, um músico - gravações de áudio, um compositor - partitura, um operador de vídeo - fragmentos de gravações de vídeo (a lista é condicional, tudo pode ser mais complicado). A grande diferença entre um portfólio para cursos relacionados à web é a interatividade, já que normalmente é feita como um conjunto de páginas da web navegadas por hipertexto. Um portfólio da web pode ser visto de forma mais ampla - um blog, um arquivo da web de arquivos para todas as obras, um site da Internet. Em um portfólio da web, você pode incluir informações sobre as qualidades pessoais e profissionais de um especialista, a história de seu desenvolvimento e interesses profissionais.

Qual é a diferença entre um portfólio (portfólio) e um currículo (CV, Curriculum Vitae)

Um currículo é um documento que contém informações sobre habilidades, experiência de trabalho, educação e outras informações relevantes normalmente exigidas ao considerar uma pessoa para um emprego.

Um currículo pode ser baseado em um portfólio. A partir do currículo, você pode fazer links para os trabalhos publicados no portfólio.

Onde colocar seu portfólio

As opções que usei ou teria usado:

• Sites de portfólio atraentes podem ser criados usando o construtor de sites Wix - nenhum conhecimento de codificação ou layout é necessário - mesmo para aqueles que estão apenas planejando aprender tecnologias da web
• Páginas GitHub - serviço gratuito para publicar informações estáticas, intimamente relacionadas aos repositórios GitHub
• como um repositório de trabalhos simples (HTML + CSS + JS), você pode usar o Сodepen (exemplo http://codepen.io/copist) - muitas pessoas gostam disso, porque trabalhos interessantes podem ser copiados e experimentados
• um portfólio na forma de um blog baseado em WordPress em hospedagem gratuita ou paga
• faça você mesmo o seu site de portfólio em alguma linguagem de programação e coloque-o em serviço na nuvem Cloud9, que também é um ambiente de desenvolvimento amigável em vez de um IDE de desktop.

Lista de serviços de portfólio especializados: Onde e como criar um site de cartão de visita, portfólio ou galeria [lifehacker]

Baseado em experiência pessoal, Gostaria de recomendar o armazenamento de backups de todos os projetos concluídos (sites inteiros ou páginas da web individuais) em sua hospedagem. Descobri que, por mais de 15 anos, alguns dos sites em que trabalhei, não existe mais, e alguns mudaram significativamente. E se você tem cópia de segurança páginas individuais ou um projeto inteiro, você pode vincular às suas cópias se os projetos originais não funcionarem mais ou se tiverem mudado muito.

Este blog baseado em WordPress é hospedado em um TheJetHost de hospedagem compartilhada paga com um painel de controle conveniente, e vários projetos escritos em Javascript e PHP estão sendo executados nele. Para projetos mais complexos baseados em NodeJS, Python, Ruby e PHP, utilizo o Servidor Dedicado Virtual no FirstVDS e DigitalOcean.

O que deve ser incluído no portfólio?

1. Detalhes de contato

Depois de ler a história no portfólio, eles vão querer entrar em contato com você. É necessário dar vários caminhos, mas não muitos. Endereços O email será o suficiente, você ainda pode adicionar o serviço troca rápida mensagens (Skype, WhatsApp ou Telegram), é indesejável postar um número de telefone no site. Você pode usar serviços que substituirão seu e-mail e número de telefone por fotos.

2. Biografia (bio, sobre)

Não é necessário indicar tudo, principalmente se a experiência for superior a 10 anos. Liste apenas o que é relevante atividade profissional... Não use frases padrão, adicione alguma personalidade. Não use uma piada ou qualquer outra forma de demonstrar senso de humor - esse é um bom traço de caráter, mas como a biografia está no início do portfólio, você pode involuntariamente parecer uma pessoa frívola.

Escreva uma história sobre você em bom russo. Este é um conselho universal para todas as ocasiões: tudo pode ser dito e explicado, e se você não pode expressar seus pensamentos de uma forma interessante e compreensível, então esta é uma bandeira vermelha - será ainda pior: talvez o autor de tal biografia não pode concordar com o empregador, nem compreender a tarefa nem descrever a solução.
E dois ou três parágrafos interessantes chamarão sua atenção, farão você se destacar dos demais. Um discurso competente sem erros inspirará confiança.

Normalmente eles indicam aqui o que o trouxe para o campo da tecnologia da informação - algum tipo de hobby, ideia, paixão, paixão - conte-nos sobre isso, porque foi isso que fez você ser quem você é. Você pode descrever qual foi o resultado, mas não uma lista de tecnologias conhecidas - há outras seções do portfólio para isso.

Uma biografia bem escrita o ajudará a chegar ao nível que chamo de "Eu li - e é como se eu conhecesse a pessoa há muito tempo." Ainda não me vi, mas já quero conversar, além disso, sobre algum tópico específico de interesse.

3. Experiência relevante

Você só precisa de um trabalho relacionado ao trabalho que QUER fazer. Você pode ter sido um designer ou SEO no passado e agora decidiu se tornar um programador da web. Excluir do portfólio trabalhar, o que você não gostaria mais de fazer bem como aqueles o que pode não ser útil enquanto trabalhava nesta posição.

• Você fez seu trabalho de SEO com precisão e pontualidade, fez tudo com precisão e no prazo? Ok, bom como uma demonstração de capricho, principalmente se o site estiver no TOP.
• Você mesmo desenhou o design do site? Adequado para.
• Você levou o time para casa? É claro que este é um bom negócio, mas este ponto não é necessário.

Ao procurar um novo trabalho para o mesmo perfil, o portfólio fica abarrotado de trabalhos concluídos. Mas o que os iniciantes devem fazer? Onde conseguir o emprego se você ainda não fez nada de valor?

Lista de empregos para iniciantes:

• Para alunos - o seu curso ou trabalho de qualificação, se ela estava nesta especialidade.
• Listar tudo trabalho realizado de forma independente. Trabalho acadêmico no rígido processo educacional não são citados, trabalhos “estéreis” da codecademy e htmlacademy não são necessários. Apenas aqueles onde houve significante trabalho independente... Mesmo que seja um trabalho independente ao estudar um livro, mesmo que tenha sido uma tentativa de fazer (blog, fórum, loja online, galeria de fotos), um projeto para amigos, um site de aula - se você fez tudo sozinho, então este é o seu trabalho e sua experiência, eles são apreciados.
• Se participou de concurso de obras, mas seu trabalho não se tornou ganhador de prêmios - esta é a sua experiência, adicione seu trabalho aqui.
• Se realizou uma tarefa de teste ao se candidatar a um emprego, este é o seu trabalho, cujos resultados podem ser demonstrados (exemplo).

Cada trabalho deve ser acompanhado de uma descrição:

1. Data ou período de conclusão da obra
2. Para quem e o que foi planejado para ser feito. Pode ser um trabalho técnico, uma descrição de uma tarefa no estilo usual, um layout no sistema de prototipagem, um layout gráfico (PSD), uma captura de tela, um fluxograma de algoritmo, uma especificação de API.
3. O que eu fiz no final. As capturas de tela servirão (parecerão muito benéficas capturas de tela antes e depois da melhoria), links para páginas de backup com resultados ou para páginas de um site ativo, links para o repositório Código fonte.
4. O que acabou bem. O que causou orgulho, alegria, inspiração. Pode ser seu descrição pessoal, Reveja cliente no intercâmbio freelance, Reveja colegas, comentários em redes sociais... Talvez houvesse o prêmio de um cliente ou de uma empresa?
   Indique quais habilidades técnicas e não técnicas foram úteis ou surgiram.
5. (para iniciantes) O que não deu certo. Como isso poderia ser corrigido.

As obras devem ser colocadas em ordem cronológica, as mais recentes primeiro. A "profundidade" máxima da história é de 3-4 anos. Os mais antigos devem ser excluídos ou apenas mencionados. Eu também recomendo remover o quinto parágrafo da descrição do trabalho do portfólio após o emprego (“O que não deu certo ...”), de forma que apenas coisas boas sobre você e seu trabalho fiquem lá. Mas você pode deixá-lo se atualizar regularmente a lista e neste quinto parágrafo atualizar as opções para corrigir deficiências, levando em conta conhecimentos, métodos, habilidades modernas ("agora eu faria ...").

4. Habilidades relevantes

Você não precisa enlouquecer e listar tudo o que sabe fazer. Realçar o que você você faz melhor.

Não traga aqui o que você está gostaria de saber ou ser capaz de- isso vai acabar sendo lateral para você: ou você falha na entrevista ou fará mal o que não sabe fazer.

4.1. Profissional, habilidades técnicas (habilidades difíceis)

Um exemplo de lista de habilidades para uma de minhas alunas de apoio:

Linguagem de programação JavaScript

• programação funcional
• arquitetura modular

jQuery

• jQueryUI
• modelos ($ .tmpl)
• Roteamento HTML5 ($ .routing)

AngularJS

• arquitetura básica do aplicativo
• modelagem
• roteamento

MySQL

• design de modelo de dados
• índices
• chaves estrangeiras
• importação / exportação de estrutura e dados no modo console

• configurando as dependências do projeto
  • compositor
  • caramanchão
• pré-processadores
  • SCSS
• montagem de projetos
  • webpack
  • grunhido
• trabalhando com o sistema de controle de versão git
  • github
  • bitbucket
  • + instalar o produto do repositório git no servidor Ubuntu
• Linguagem de programação PHP
  • programação funcional, estruturas básicas de controle, noções básicas de programação orientada a objetos
• Framework Laravel 5 (PHP)
  • roteamento, simplificado
  • trabalhe com a base, simplificado
  • Implementação REST
  • trabalhar com JSON
  • processamento de dados de formulário
• CMS WordPress (PHP)
  • criando e alterando temas
  • personalizar widgets
• CMS Joomla (PHP)
  • criando e alterando temas

Lista grande, não é? E para cada um dos itens, é necessário indicar qual trabalho pode confirmar a habilidade, ou seja, indicar hiperlinks para os trabalhos do primeiro item do portfólio. Certifique-se de que não haja links "quebrados".

A prova de habilidades técnicas é essencial. Às vezes, isso pode ser extremamente difícil, por exemplo, devido a um acordo de sigilo assinado (NDA). Nesse caso, você não poderá inserir os resultados do seu trabalho no portfólio e, surpreendentemente, você não é diferente de um programador novato com o mesmo portfólio vazio. Por exemplo, por esse motivo, tenho um perfil vazio no Upwork e alguns trabalhos antigos no fl.ru - trabalho com projetos fechados há mais de cinco anos. Tenho experiência, mas não há exemplos de trabalho.

Para "fechar a lacuna", você precisará inventar e implementar, o que demonstrará suas habilidades. Sua diferença para um iniciante é que você pode projetar corretamente e implementar rapidamente. Literalmente alguns fins de semana e um novo serviço está pronto, tipo. Não se esqueça de fazer o upload do resultado para o repositório e adicionar uma instrução de alta qualidade, como eu fiz em uma de minhas primeiras tarefas de teste - um encurtador de link.

4.2. Habilidades não técnicas, qualidades pessoais (habilidades leves)

Uma lista de habilidades que não estão relacionadas à especialidade, mas são altamente valorizadas por empregadores e clientes

• Habilidades de redação técnica - redação de especificações técnicas, mensagens, notas; coletar todos os detalhes sobre a tarefa; ilustrar; escrever de forma breve e competente, em essência, compreensível
• Trabalho conjunto em equipe - não para ficar sozinho com os problemas, mas para resolver juntos; divida as tarefas em partes para fazer em paralelo; proteger os membros da equipe; ajudar; compartilhe seus conhecimentos e habilidades; aprender com a equipe; ser capaz de identificar problemas internos da equipe e encontrar opções para suas soluções
• Ser capaz de encontrar soluções - a capacidade de identificar o problema, procurar soluções para o problema de forma independente, experimentar diferentes opções, não pedir ajuda sem tentar resolver, não ficar sentado impotente à espera de soluções do exterior; conhecimento também é apreciado - a quem com que problemas entrar em contato, de modo que os programadores não movam móveis e os carregadores não escrevam programas
• Ser capaz de tomar decisões flexíveis - a capacidade de mudar rapidamente suas decisões para atender aos requisitos de negócios atuais, com um mínimo de investimento de tempo, sem perda de qualidade, estabilidade, clareza
• Assuma a responsabilidade por suas decisões - a capacidade de tomar decisões técnicas e levá-las até o fim, apesar das dificuldades e dos prazos apertados; concentre-se na tarefa; torcer por ela com todo meu coração
• Capacidade de manter a calma - não trazer um problema a outro insolúvel, encontrar soluções construtivas para os problemas, não transformar a conversa em uma discussão, não ser pessoal, encontrar uma saída para os conflitos, ser capaz de se acalmar
• Capacidade de trabalhar remotamente - ter habilidades de forma eficaz trabalhando juntos com colegas que não estão por perto; implementação independente de capacidades técnicas de trabalho remoto, discussão de questões de trabalho remotamente, coordenação do tempo de uma equipe geograficamente distribuída para eventos conjuntos, troca de soluções com colegas remotos
• Capacidade de concentração - a capacidade de alternar rapidamente para o modo de trabalho, aderir ao modo de trabalho, plano de solução de problemas, prioridades de tarefas, capacidade de concentração na ausência de controle externo ao trabalhar remotamente
• Ser dedicado - capacidade de manter a motivação interna, compreender e apoiar os objetivos da equipa e da empresa, manter a confiança na equipa, lealdade para com a empresa
• Capacidade de olhar - vestir-se para a situação, apresentar-se sempre a si, à equipa e à empresa da melhor forma possível

Demonstrar tal qualidades pessoais no portfólio - ainda mais tarefa difícil do que para provar habilidades técnicas. Mas acredita-se que o crescimento profissional é proporcionado por 15% das habilidades técnicas e 85% pessoais, então embora seja difícil, bem é necessário.

Você tem alguma ideia do que desta lista você pode para demonstrar no portfólio e como fazer? Vamos trocar ideias e tornar nosso portfólio o mais eficiente possível. Para o cliente ou empregador olhar e dizer - “Oh, este especial vale seu peso em ouro! Ele é quem eu preciso! "

Aqui está uma ideia de como um testador pode demonstrar as habilidades de descrição de bugs encontrados durante o teste em um portfólio: Conselhos práticos sobre a construção de um portfólio para testadores.

5. Atestado, certificados, diplomas (Certificados, Certificados, Diplomas)

Em ordem de importância crescente

1. apenas uma lista de cursos que fizeram
2. links para páginas que listam as lições aprendidas, tarefas concluídas (htmlacademy.ru, codewars.com) ou pelo menos selos de conquistas (codecademy.com)
3. links para cursos onde certificados virtuais são emitidos
4. certificado online (versão eletrônica ou em papel)
5. certificado para teste offline (versão eletrônica ou em papel)
6. diploma de educação superior ou especial

Para o quarto e quinto pontos - uma lista de recursos onde você pode obter um certificado:

No terceiro ponto - uma lista de serviços que possuem questionários com uma avaliação não muito rigorosa, enquanto empregadores e clientes prestam atenção aos resultados:

Costumo ver indicadores gráficos do nível de conhecimento nos perfis, as chamadas Barras de Habilidade. Eu sugiro usar meu questionário de pilha de tecnologia de serviço para um desenvolvedor da Web para construir tais gráficos.

O conhecimento de línguas estrangeiras é apreciado, portanto, certificados de cursos de línguas estrangeiras serão apropriados.

6. Perfis Sociais Adequados

• Github
• Linkedin

O Bitbucket é menos valorizado do que o Github, mas vincular ao seu perfil neste serviço também é bom. O análogo russo do Linkedin é o MoyKrug, conheci excelentes perfis de desenvolvedores web lá, apenas doces.

Uma boa adição seria um link para stackoverflow, hachcode, toster e outras comunidades de desenvolvedores profissionais, especialmente se você tiver uma grande reputação lá.
Se você tem seu próprio blog profissional ou canal profissional no Youtube, este é um link valioso em seu portfólio.
Upload de slides de suas conferências para o SlideShare - ótimo.

Você pode, é claro, indicar seu Twitter, Facebook, Vkontakte, se houver. Pessoalmente, tenho vergonha deles, porque há um grande risco de encher meu feed com todos os tipos de curtidas e republicações frívolas, mas esses perfis permitirão que o cliente ou empregador tenha uma ideia melhor de você como pessoa. Normalmente, as qualidades profissionais se manifestam ao longo do tempo em hobbies, interesses, interesses e relacionamentos com outras pessoas (isso é chamado de deformação profissional).

7. Adquirir novos conhecimentos (auto-estudo, domínio, desenvolvimento de habilidades)

“Viva e aprenda” é sobre tecnologia da informação. Você precisa aprender coisas novas constantemente. E seria bom refletir isso em um portfólio.

Conheci especialistas qualificados que, por vários motivos, de forma forçada ou deliberada, deixaram de seguir as tecnologias. Eles alcançaram alto nível domínio em uma especialização estreita. Mas a vida os fez mudar de residência ou ir para trabalho remoto e descobriu-se que não há boas propostas em sua especialização, e seus mais de 10 anos de experiência em especialização restrita não são suficientes no novo mercado. Algumas pessoas nem mesmo sabem o que são a web e o HTTP. Algumas pessoas escrevem um banco de dados C do zero em vez de usar soluções SQL / NoSQL populares.

Em 2003, deixei a empresa que estava desenvolvendo um sistema de faturamento para habitação e serviços comunitários, porque senti que estava preso a uma especialização estreita, em uma tecnologia, seria difícil para mim mudar de emprego e ficaria para sempre ligado para esta empresa. Agora eu sei o suficiente sobre diferente faturamento e sistemas de pagamento e Eu conheço mais de duas dúzias linguagens de programação. Nem todos eles são 50%, mas posso descobrir o código de outra pessoa. Isso me permite ser um desenvolvedor web versátil.

Um programador de 45 anos pediu-lhe que elaborasse um plano de estudo de tecnologias com 5 anos de antecedência com o objetivo de ... não ficar entediado na aposentadoria e não ser dependente do Estado. Sim, se ele terminar o plano, não ficará entediado ou com fome. Tecnologia da Informação- a área de crescimento mais rápido - seu conhecimento será 100% útil.

E como você está se saindo com a autoeducação? Onde você planeja estudar? O que você está planejando estudar? O que você está estudando agora? O que você está experimentando?

Demonstre ao empregador que você não interrompeu seu treinamento. Não escreva uma lista longa para não criar a sensação de que você está pegando 10 coisas e pulando para o topo. Use outras ferramentas de planejamento, como o caderno de tarefas de Todoist ou o serviço de definição de metas SmartProgress.

8. Interesses profissionais

Esses são apenas interesses profissionais, nada pessoais.

Esta seção do portfólio é necessária para convencer o cliente ou empregador de que seus interesses se cruzam agora e se cruzarão no futuro. A presença de interesses comuns é um bom fator motivador e um certo garante da estabilidade de uma cooperação efetiva para ambas as partes.

8,1 Interesses atuais (interesses profissionais)

É necessário listar os interesses profissionais atuais, segundo os quais o empregador ou cliente determinará o que você deseja agora.

Exemplos de interesses profissionais:

1. Pratique o desenvolvimento de PHP
2. Explore as estruturas Yii, Zend e Symfony2.
3. Torne-se um Zend Certified PHP Engineer
4. Aprofunde seu conhecimento de Javascript, Angular.js, Node.js

8,2. Objetivos profissionais

Seus interesses nos próximos 3 a 5 anos, para que o empregador entenda onde você vai desenvolver.

Exemplos de objetivos profissionais:

• Realizar um ciclo completo de desenvolvimento web, do design à manutenção
• Desenvolva uma ferramenta web profissional (framework, CMS, CRM ou outro) para alguma aplicação especial
• Trabalhe com usuários finais, com clientes
• Crie um aplicativo da web de alta carga
• Crie um projeto da web multilíngue
• Desenvolva um aplicativo da web multiplataforma
• Torne-se um líder da equipe de desenvolvimento
• Explore o marketing na Internet e o SEO
• Para trabalhar remotamente
• Comunique-se fluentemente em inglês

Quanto a publicar interesses e objetivos é com você. Você pode apenas delinear os marcos (uma espécie de lista de tarefas), ou você pode pintar o plano em detalhes, indicando as marcas da linha do tempo, como é feito no SmartProgress. O planejamento é uma grande habilidade, mesmo que o plano não esteja sendo implementado no prazo.

9. Foto (Foto)

Seu portfólio deve incluir sua fotografia de alta qualidade. As pessoas preferem ver pessoas. O encontro com os olhos decide muito. As pessoas confiam mais naqueles que veem. Na verdade, eles já sentem que você está lá e estão tentando descobrir como você faz parte da equipe.

Escolha a foto de melhor qualidade. Estilo - business, mas não muito rígido (Business Casual). Para se inspirar, procure no Google a frase "portfólio de fotos masculinas". Esteja na foto como você ficaria após o término de uma reunião oficial, mas como o banquete começou.

A equipe de Recursos Humanos reclama de fotos de praia em trajes de banho, bares com canecas de cerveja, fotos de festas glamorosas e fotos de grupo. Fotos malsucedidas são obtidas na época do frio, quando o rosto é coberto com roupas (lenço, chapéu, capuz). Selfies (uma foto de si mesmo com a mão estendida ou um dispositivo especial), uma foto em um canto escuro do parque, na mata selvagem, contra o fundo de um tapete e papel de parede velho também dão origem a uma impressão negativa - como se a pessoa está se escondendo, é tímida, não pode pedir aos amigos ou transeuntes que tirem foto dela.

Tente tirar pelo menos uma foto de alta qualidade no estúdio ou na rua. Antes de colocá-lo em um portfólio - deixe que outras pessoas avaliem, de preferência um especialista na seleção de pessoal.

10. Baixe a versão (cópia para impressão, cópia impressa)

Muitas pessoas preferem ter uma cópia impressa de seu currículo ou portfólio. Elabore seu currículo na forma de um documento que possa ser impresso ou crie um site de portfólio para impressão. De acordo com especialistas de RH, não existe um "melhor" formato de documento, então eu recomendo ter versões idênticas em Formatos PDF e DOC, ODT apenas no caso e apenas HTML. Se você me fornecer um link para um serviço que suporte todos esses formatos de uma vez, muito obrigado!

Aconselho você a adicionar um link curto e um código QR à cópia para impressão para ir para a versão online do portfólio da web a partir de um smartphone ou tablet. É melhor se o portfólio da web for implementado com suporte de layout responsivo.

Você quer ter esta folha em mãos? Baixe o artigo completo em em formato eletrônico inteiramente (formato: html ou PDF, volume ~ 10 páginas A4, tempo de leitura 5 minutos)

Encontrar um bom site ou desenvolvedor de aplicativos não é fácil hoje. Principalmente se você não souber quais habilidades e experiências específicas ele deve possuir.

Você pode ter muito boas idéias para seus negócios, embora não possua as habilidades técnicas para implementá-los. Esteja você contratando um freelancer, um estúdio da web ou um profissional em tempo integral, analise detalhadamente o portfólio de um candidato, prestando atenção especial aos seis pontos abaixo.

Sites que você gosta

Acompanhe suas primeiras impressões do trabalho apresentado no portfólio do candidato. Tente se colocar no lugar dos clientes desses sites. Você gosta dessas obras? Preste atenção não apenas ao design, mas também à qualidade do layout, metatags e outros detalhes importantes... É bom se o seu portfólio já tiver um site que corresponda às suas tarefas de várias maneiras. Isso tornará mais fácil prever se ficará feliz com o resultado do trabalho do desenvolvedor.

Desempenho do site

Os sites devem carregar rapidamente porque usuário moderno não vai esperar muito para sua página abrir. Se a página não aparecer na frente dele neste exato segundo, ele simplesmente irá para outro site. De acordo com o Kissmetrics, sites que levam 4 segundos ou mais para carregar podem perder 25% de seus visitantes. Ou seja, em caso de carregamento prolongado, um em cada quatro visitantes sairá sem esperar a abertura da página.

Portanto, recomendamos que você verifique a velocidade de alguns sites do portfólio de seu desenvolvedor em potencial. A maneira mais fácil de fazer isso é com o Google PageSpeed ​​Insights.

Insira o URL do site na página PageSpeed ​​Insights e verifique sua velocidade.

O PageSpeed ​​Insights mostrará a velocidade do site na área de trabalho e dispositivo móvel... Este indicador é como uma avaliação em um certificado. 85 de 100 é um quatro sólido. Qualquer coisa abaixo de 60 é um empate. O relatório PageSpeed ​​Insights também fornecerá algumas recomendações para melhorar os tempos de carregamento.

O PageSpeed ​​Insights medirá a velocidade de carregamento do seu site.

Se você gostaria de obter classificações adicionais do site, experimente o teste de velocidade do site do Pingdom, que mostrará os tempos de carregamento e o tamanho da página.

O teste de velocidade do Pingdom mostrará o tempo de carregamento e o tamanho da página.

Se as páginas do portfólio do seu desenvolvedor demoram para carregar, você pode procurar outro candidato. Mas primeiro fale com ele sobre a velocidade de carregamento, porque nem todos os aspectos da velocidade da página estão sob o controle do desenvolvedor. Por exemplo, um cliente pode ser específico sobre uma plataforma ou provedor, o que afetou o desempenho.

Funcionalidade do site

Sites de teste do portfólio de um desenvolvedor em potencial quanto à funcionalidade. Todos clicam, preenchem os formulários ou efetuem uma compra. É importante entender que em um site comercial, mesmo as menores lacunas de funcionalidade podem atrapalhar as vendas. Você precisa de um bom desenvolvedor que possa criar um site intuitivo e fácil de usar, com recursos e funcionalidades ricas.

Vale a pena focar nestes indicadores:

• navegação;
• pesquisa no site;
• classificação e filtragem de produtos;
• adicionar itens ao carrinho;
• processo de checkout.

Acessibilidade na web

A criação de um site realmente de alta qualidade pressupõe sua disponibilidade para todas as categorias de usuários, independentemente das capacidades físicas de seus gadgets e computadores.

Portanto, teste os sites do portfólio do seu candidato em relação às diretrizes gerais de acessibilidade da web. A ferramenta WAVE Web Accessibility Evaluation irá ajudá-lo com isso. Basta inserir o URL da página - WAVE gera um relatório com possíveis problemas com disponibilidade.

Nem tudo o que o WAVE relata é, na verdade, problemas de acessibilidade, mas ainda é uma boa ferramenta para detectar possíveis erros.

Código limpo

O código limpo é algo bastante subjetivo, mas em qualquer caso pode ser definido como um código fácil de ler e modificar. A limpeza do código é importante porque permite que você faça alterações rapidamente em seu site. Digamos, por exemplo, que seu desenvolvedor freelance repentinamente mude ou aceite um emprego de tempo integral e você precise contratar alguém novo para trabalhar com seu site. Se o código estiver limpo, será muito mais fácil para uma nova pessoa descobrir rapidamente.

Infelizmente, a maior parte do código da página pode ser ocultada de você. Freqüentemente, este é um código básico escrito em PHP, Ruby, etc. É importante que tudo esteja limpo aqui. Mas você pode observar algumas coisas na superfície que podem ser indicadores de quão bem o seu candidato está codificando. Por exemplo, você pode usar o validador HTML do World Wide Web Consortium (W3C). Esta ferramenta fornecerá uma lista de avisos e erros no HTML do site.

O validador W3C HTML mostrará possíveis erros de HTML.

Quase todos os sites que você testar dessa forma terão erros e avisos, mas em este caso sua quantidade relativamente moderada é importante.

Projetos pessoais

Os melhores desenvolvedores da web são sempre genuinamente apaixonados por seu trabalho e tendem a ter muitos projetos pessoais em seus portfólios. Podem ser sites ou aplicativos para amigos, jogos HTML5, interessantes blog pessoal etc. Avalie esses trabalhos como tudo o mais no portfólio. Mas também preste atenção ao equilíbrio nessas obras. Um portfólio não deve ser apenas projetos pessoais.

Obviamente, um desenvolvedor web é uma pessoa muito importante para o seu projeto. Afinal, ele é responsável pela face de sua marca, sua imagem online, bem como por suas interações com os clientes. Portanto, para não prejudicar o seu próprio negócio, é muito importante não se enganar ao escolher a pessoa certa para este cargo, que é o que lhe desejamos!

Qual deve ser o portfólio de um programador? É diferente para cada posição, mas há Características gerais que os empregadores prestam atenção.

Normalmente, os novatos tentam impressionar com um grande portfólio. Mas muitas vezes na área que interessa ao empregador, eles não têm nada para mostrar. Isso afeta diretamente os salários e, em geral, a chance de uma pessoa ser contratada.

Vamos considerar várias opções.

Portfólio do programador

A primeira coisa que vem à mente é o GitHub, e por um bom motivo: hoje, absolutamente todos os projetos e o progresso do trabalho neles são armazenados em repositórios convenientes. Mas não é tão difícil entender o Git como é com o que exatamente preencher o seu “portfólio”. É com o segundo que trataremos.

Em primeiro lugar, desconsidere a ideia de que as tarefas dos cursos e dos curtos tutoriais em vídeo serão suficientes para satisfazer o interesse do empregador. Você terá que criar algo realmente interessante por conta própria, sem a ajuda de livros, YouTube, professor, parceiro de projeto, etc.

O que poderia ser?

1. Um projeto padrão em um wrapper personalizado. Digamos que você possa enviar a mesma calculadora, mas com uma bela animação, ou visualizar a classificação, tornando-a um jogo divertido.
2. Por falar em classificação, não se pode deixar de mencionar os problemas algorítmicos. Ter essas soluções em seu portfólio é uma grande vantagem. Certifique-se de verificar nossos artigos e.
3. Trabalhos complexos devem prevalecer. Ao mesmo tempo, é bom que estejam com testes de unidade, um arquivo de log e um crachá no README de qualquer serviço de construção e teste de software.

Não sobrecarregue seu currículo com todos os tipos de programas que foram elaborados para explicar o princípio de operação de uma ferramenta específica para você. O empregador conhece todos esses "truques" 100%, e se você realmente deseja implementar algo, faça-o da forma mais sucinta e interessante possível.

Pelo mesmo motivo, você não deve mostrar projetos "em processo de desenvolvimento", mesmo que estejam bem, ah, muito legais. Veja como terminar - mostre com ousadia. Além disso, será um incentivo para você levar o que começou até o fim.

O portfólio do programador deve incluir o que é anunciado nos requisitos de trabalho. Por exemplo, se esta é uma posição de um desenvolvedor Java, e as condições indicam conhecimento do Hibernate, não tenha preguiça de adicionar o desenvolvimento correspondente ao portfólio. Além disso, não perca a oportunidade de implementar bases de dados: trata-se de uma lei não escrita que é relevante, senão para todos, pelo menos para 99,99% das vagas.

No que diz respeito à sequência do trabalho, certifique-se de que os mais interessantes para o empregador estão na lista acima, já que a primeira impressão desempenha um papel importante, e às vezes até decisivo.

Também não é necessário desenhar seu currículo em Word ou qualquer outro documento de texto... Seja criativo: comece um blog com links para o seu trabalho. Se este blog também contém perguntas de novatos e seus comentários significativos para eles, esta é uma grande vantagem: acredite em mim, isso não será ignorado.

Portfólio de desenvolvedor web

Agora, vamos passar para o mais suculento - o que você pode não apenas ler, mas também "sentir". Em termos de portfólios, os desenvolvedores web têm total liberdade: qualquer conhecimento e habilidade podem ser demonstrados em um site pessoal de uma página ou contato projetos finalizados, se você já teve experiência de trabalho antes.

A regra de ouro: não deixe seu empregador apenas suspeitar que você é um web designer. Lindo design- isso é ótimo, mas antes de tudo você mostra o portfólio do programador. Demonstre que tipo de funcionalidade você pode fornecer a um site: não formulários de correio ou qualquer outra coisa trivial, mas um kit de ferramentas completo.

Por exemplo, este é o site de um fornecedor de peças de automóveis que contata seus clientes não diretamente, mas por meio de operadoras. Vincule ao site o programa responsável pelas ligações, com a possibilidade de registrar no banco de dados o horário da ligação da operadora.

Por exemplo:

• ter experiência em análise e login no MongoDB;
• otimização de tais partes do servidor;
• desenvolvimento de um script de servidor em tal linguagem.

Isso é especialmente importante. E somente em Informações adicionais você pode adicionar algo como:

• desenvolvimento de sites a partir do zero;
• conclusão de sites prontos;
• instalação de plug-ins para WordPress;
• otimização de carga, etc.

Mas tudo volta novamente às exigências do empregador, às quais devemos estar atentos. Por exemplo, uma empresa está procurando um especialista em lógica de programa, enquanto o layout e o design permanecem com os outros. Ou a situação pode ser revertida e os requisitos incluirão um site completo.

O que um site de cartão de visita pode conter como portfólio de programador?

Portfólio de programador freelance

Você não precisa abrir a America aqui, uma vez que os serviços freelance já exigem um portfólio e você não terá que criar vários sites de cartões de visita.

Preencha seu portfólio com trabalhos de qualidade o mais rápido possível. Seu ponto forte é que você pode escolher e, se o projeto parecer francamente fraco, basta filtrá-lo, preferindo opções realmente interessantes.

Não pense que a política de freelancer é muito diferente da política de emprego padrão, especialmente quando se trata de cooperação de longo prazo. Procure interessar, impressionar, conhecer os detalhes da obra, fazendo as perguntas mais corretas.

Aqui está um exemplo de uma boa resposta para um dos trabalhos freelance:

O desenvolvedor mostra imediatamente que sabe o que pode e qual é o seu nível aproximado. Esta é uma resposta realmente impressionante, apoiada por um forte portfólio (mesmo apenas na forma de links para o GitHub), você pode ter a garantia de conseguir um emprego.

Esta coleção inclui templates para várias profissões, mas, em geral, programadores, web designers ou designers de layout irão apreciar o tema, já que em termos de design e estrutura são mais adequados para eles.

Publicamos anteriormente coleções com modelos para a criação de um portfólio. Por exemplo:

Limpar

Profissional, limpo para criar um portfólio pessoal e uma página pessoal para um desenvolvedor web independente. Perfeito para designers, designers de layout ou programadores.
O modelo é totalmente responsivo, tem um ótimo animação da aparência dos elementos ao rolar com código totalmente válido.

Gorgo Portfolio

Gratuito, muito limpo e elegante modelo de portfólio de designer... Concluído no estilo do minimalismo... Também tem um legal menu em tela cheia.
A grade com exemplos de trabalhos é feita seguindo o exemplo de um tabuleiro de xadrez, o que é muito agradável, já que esta é uma tendência. A própria página de trabalho me impressionou muito, provavelmente por causa do conteúdo de demonstração de alta qualidade. Se você pretende usar este design específico como uma página pessoal, cuide do design de qualidade do trabalho em si.

Lítio

Sem custos template responsivo no estilo Plano, que é adequado para quase qualquer freelancer, seja um desenvolvedor web ou um fotógrafo, uma vez que a página fornece um portfólio familiar com um filtro por categoria de trabalho e galeria de fotos.

conhaque

Outro extremamente modelo de qualidade para a criação de um portfólio pessoal... Tem muitas guloseimas que todo mundo adora: Paralaxe efeitos, o efeito do aparecimento de blocos na rolagem, rolagem suave, vários contadores e, claro, o bloco do próprio portfólio.
O modelo é totalmente gratuito e adequado para freelancers de qualquer profissão de TI.

Kong

Interessante template html portfólio de designer... Na primeira tela, você pode colocar sua foto, se apresentar e escrever sua especialidade.
Quase todos os blocos no modelo são implementados, aqueles que estamos acostumados a ver na página de destino padrão.
Quanto ao esquema de cores, eu mudaria. Muito venenoso.

MyFolio

Excelente portfólio responsivo de uma página em tons de verde. Adequado tanto para freelancer solo quanto para equipe de desenvolvimento. O template é feito com muita qualidade e merece atenção.

Básico

Rigoroso padrão em azul para criar um portfólio. Construído no Bootstrsp 3.2. Se você substituir os ícones na primeira tela, poderá usá-lo para freelancers em qualquer área de atividade.

Pequena

Pequena template html de uma página em estilo simples... Está dividido em três telas com 100% de altura. A primeira tela é uma foto e uma breve informação sobre o freelancer.
A segunda tela é o portfólio. O último 8 trabalhos de seu portfólio no dribbble... Ou seja, tudo que você precisa fazer é configurar a integração com e pronto. As imagens serão atualizadas automaticamente, em sincronia com sua atividade no Dribbble.
A terceira tela são as informações de contato.

Kelvin

Modelo HTML5 CSS3 de alta qualidade e versátil. É muito parecido com o Ceevee, que estava nesta coleção acima, mas existem algumas diferenças no conceito do bloco com exemplos de trabalho e nos gráficos que mostram as habilidades de um freelancer. A possibilidade de uma história detalhada sobre você usando vários blocos é fornecida.

Portio

Um modelo universal interessante, embora haja muitas coisas para as quais eu não o usaria: essas são fontes estúpidas, botões ruins. Talvez alguém se interesse por esta opção. Afinal - um esquema de cores brilhantes. Se você corrigir um pouco Estilos CSS, você pode chegar a um bom resultado.

Porta

Gratuito e eu diria mesmo elegante modelo de uma página baseado no Bootstrap. Pessoalmente, gosto dos pontos de acesso vermelhos. O bloco com exemplos de trabalho é feito na forma de uma grade intrincada, e isso é uma vantagem. Este modelo será uma excelente solução para a criação de p ortólio de um web designer ou programador.

Hexa

Modelo plano de várias páginas com um controle deslizante no cabeçalho em um esquema de cores distinto - verde. Usando essa solução, você pode criar um ótimo site de cartões de visita com exemplos de trabalho e um blog.

Trabalhador autonomo

Excelente estilo simples de uma página e cores verdes. A primeira tela oferece um local para uma foto, ou melhor, para não estragar o estilo, um autorretrato desenhado do dono do site.
O modelo é pequeno, e isso é uma grande vantagem, já que não há necessidade de usar rodapés para nossos propósitos. Feito, surpreendentemente, de altíssima qualidade. É totalmente responsivo e baseado na estrutura Bootstrap.

Portfólio Dribbble

Outro modelo com um portfólio integrado com Dribbble... Você só precisa configurar o upload dos trabalhos mais recentes e esquecer a atualização constante e tediosa do portfólio em sua página pessoal.
O modelo é feito em um esquema de cores moderno e rigoroso. Tudo parece muito limpo.
Assim como o modelo Dribbble anterior, ele é pequeno. Eu diria até lacônico. Em geral, minha classificação é 9 de 10.

Nerd

Nada mal, embora pareça um pouco pesado modelo de portfólio freelancer Como página de destino... Ele tem vários gráficos para exibir visualmente o nível de habilidade em seus perfis de atividade - é interessante. Há também um controle deslizante de depoimento e uma bela grade de fotos que você pode usar para mostrar seu trabalho.

Dribbble Folio V2

Sem custos modelo de portfólio preenchido automaticamente... Obras são importadas do site Dribbble... Antes de usar esta decisão, não se esqueça de configurar a integração com seu perfil Dribbble.
Infelizmente, não há demonstração.

Porto

Original html css padrão em tons de roxo para criar um site pessoal. Este é um tema multi-página, onde o principal é feito no estilo de uma página, mas, por sua vez, também existem páginas internas... Adequado para criar site pessoal freelancer qualquer especialidade.