Posts Tagged ‘Curso de Web’
Conforme você pode perceber, ultimamente nas aulas estou recomendando algumas apostilas, isso porque não vale a pena eu parar para escrever uma apostila se já tem muitas ótimas circulando. O que eu faço depois é citar alguns tópicos importantes e alguns tutoriais mais difÃcios, não me cabe explicar desde o inicio, até porque, tem tudo isso na web.
Não pense que ser um auto-ditada na web é grande coisa, pois todos bons desenvolvedores são auto-ditadas, alias, este é um dos requisitos para se trabalhar na área, juntamente com a proatividade.
Vamos lá então.
Iremos trabalhar com php, devido a seu grande expansão no mercado e baixo custo.
O php nos permitirá trabalhar com banco de dados(mysql) e assim, concluir aplicações de verdade, com estrutura mais complexa.
Segue alguns links interessantes para se estudar.
Olá pessoal, retornando ao curso de web, irei produzir com mais freqüência as vÃdeo-aulas.
Agora iremos desenvolver um projeto inteiro, desde o desenvolvimento do layout até o administrador de conteúdo dele. Sim! Você aprenderá a fazer um administrador de conteúdo.
Nesta vÃdeo-aula estaremos desenhando um layout bem simples para uma empresa, contendo apenas algumas páginas. Observe a técnica que usei para organizar o layout, és muito útil.
Infelizmente não tive como fazer a vÃdeo-aula com áudio, mas por enquanto está tranqüilo de entender.
Novidades!
- Video-aulas na resolução 616×480
- VÃdeos disponÃveis para download
Obs: Estou meio enferrujado nas vÃdeo-aulas, prometo aperfeiçoá-las no decorrer das gravações.
Qualquer dúvida poste no blog.
Perguntem, perguntem, perguntem, perguntem! 
Curso de web 12 – Projeto I: Desenhando um layout
- Duração: 20 minutos
- Para download, click aqui com o botão direito do mouse e depois em salvar destino como.
Link do vÃdeo: www.renanlima.com/videos/projeto01-desenhando_um_layout
Como iniciar um projeto? Já posso sair programando? Tenho que desenhar algo? O que é UML?
Quando se inicia um projeto, deve haver planejamento. Não só em um projeto web, mas em todos os projetos. Geralmente quando se inicia um projeto, você deve conhecer todo seu ecossistema, ou seja, conhecer seus concorrentes e ver a viabilidade de sucesso.
Falando tecnicamente, quando se inicia um projeto, primeiramente você deve desenhar o projeto em si. Use qualquer editor de imagem (photoshop, fireworks). Ah! Corel para desenhar sites não!! Tem gente que tem mania de usar Corel para web. Cruzes!
Então como estava falando, você desenha todo o site no editor de imagem. Não só a primeira página, mas todas as páginas, todas mesmo. Isso ajuda na hora de programar, acredite.
Depois de ter o site todo desenhado iremos passar para a estrutura HTML, tem gente que gosta de chamar isso de ‘fatiar’. O fireworks é ótimo nisso, com sua simplicidade ele torna o processo bem eficaz e rápido.
Feito isso, passando o site para a estrutura HTML, com tableless nos conformes e arquivos organizados em pastas, podemos pensar em criar a estrutura de banco de dados.
Desenhamos toda a estrutura do banco, pode ser em um papel mesmo, desenhar estrutura no banco no photoshop é desconfortável. O desenho do banco fica mais ou menos assim: ver imagem.
Feito isso, comparamos com os desenhos layout do site, verificamos se falta algo e se a estrutura do banco de dados está perfeita. Estando certo disso, pode começar a criar as tabelas do banco.
Quanto ao UML:
UML permite que desenvolvedores visualizem os produtos de seu trabalho em diagramas padronizados. Junto com uma notação gráfica. (Wikipédia)
Agora que colocamos o projeto em pé, devemos colocar essa belezinha para funcionar. Manda ver nos códigos!
Um projeto com uma estrutura organizada poupa mais de 80% do seu tempo e trabalho. Veremos nesta 10º aula do curso de web como tirar aproveito desse ambiente e como usá-lo na prático em um projeto web.
Muitas pessoas, principalmente quem está começando a estudar neste curso de web, não utiliza um padrão na estrutura de seu trabalho e isso como foi dito, dificulta muito a criação e a modificação no projeto.
Para começar, tenhamos em mente que o objetivo principal da organização de dados é separar os tipos de arquivos. Falando tecnicamente, nosso projeto deverá ter uma pasta para o css, outra para o javascript, uma para as classes php e outras ainda para as imagens. Utilizamos este tipo de organização para qualquer tipo de arquivo.
Quando você usa um framework, provavelmente segue um padrão. Falando dos frameworks mais conhecidos, todos utilizam o padrão MVC, mas isso falaremos em outro post referente ao Curso de Web. 
Vejamos como ficará nossa estrutura na prática.
Iremos precisar obviamente de uma pasta para guardar as imagens do projeto, portanto vamos criar agora uma pasta para a imagem que irá se chamar ‘img’. Simples não?
… [Diretório]
img/
index.php
Pasta IMG
Nesta pasta poderemos criar subpastas como por exemplo: usuários, layout, noticias, paginas, banners e etc.
Vou descrever como seria cada pasta citada acima.
- usuarios: Nesta pasta ficará armazenado as imagens dos usuários que fazem upload em seus perfis.
- layout: Nesta pasta terá somente imagens usadas no layout do site como: logo, menu, rodapé e etc.
- noticias: Aqui iremos colocar imagens de notÃcias.
- paginas: Esta página irá receber imagens especÃficas de cada pagina (home, contato, quem somos), na mesma poderá ter subpastas para sua melhor organização.
- banners: Aqui colocaremos os banners do site.
Agora precisamos guardar nossas folhas de estilo CSS. Crie uma pasta chamada ‘css’.
… [Diretório]
img/
css/
index.php
Na pasta CSS terá as nossas folhas de estilo, podemos agora ir para o próximo passo.
Vamos criar agora uma pasta para guardar nossos arquivos Java Script. Crie uma pasta chamada ‘js’.
… [Diretório]
img/
css/
js/
index.php
Está ficando bom! Agora para você que trabalha com php ou outra linguagem de servidor(asp, jsp), crie uma pasta chamada de ‘class’.
… [Diretório]
img/
css/
js/
class/
index.php
Na pasta ‘class’ iremos colocar somente classes dinâmicas que nosso site utiliza.
Para quem trabalha com linguagem dinâmica(php, asp, jsp), crie uma pasta chamada ‘view’.
… [Diretório]
img/
css/
js/
class/
view/
index.php
Na pasta view iremos colocar as paginas interna do site, ou seja, a index que incluirá(include) as páginas pertencentes a view. A pasta view provavelmente terá subpastas.
Se você utilizar outros arquivos como videos, documentos, musicas. Basta criar as pastas com o nome correspondente.
Simples não é? Depois de um tempo isso se tornará um habito, muito produtivo por sinal.
OBS: Para quem não trabalha com páginas dinâmica, usa-se as seguintes pastas:
… [Diretório]
img/
css/
js/
index.php
Chegamos ao fim de mais uma aula do Curso de Web.
Nesta vÃdeo aula estaremos desenvolvendo um menu em css. Trata-se de um menu vertical que quando passamos o mouse ele muda de cor. Vamos analisar alguns dos poderes do CSS.
Curso de web 009: CSS – Desenvolvendo um menu simples
Duração: 14:30
Tamanho: 24 mb
Extensão: wmv
Audio: Sim
Baixar agora
Nesta video aula vamos ver como funciona as DIVs.
DIVs são elementos que eu gosto de chamar neutros ou conteiner, podemos modificar ele todo e usando para posicionar elementos em nossa pagina. Usamos as DIVs principalmente para substituir as tabelas, e além das divs serem mais leves, elas possibilitam maior controla da sua pagina e uma organização infinitamente maior.
Bem, preparei um video bem rápido, ultimamente não estou tendo tempo. 
A pedidos, colocarei as video aulas para downloads.
Curso de web 008: Css – Trabalhando com DIVs
Duração: 14 minutos
Tamanho: 20 mb
Extensão: wmv
Baixar agora
Qualquer dúvida ou sugestão, poste aqui.
Até a próxima!
Se você assistiu a ultima video aula já está apto a codificar CSS. Hehe
É simples, não tem mistério.
O que você precisa saber agora são os recursos(ou parâmetros) do CSS, é sobre isso que vamos falar aqui.
Há uma organização que controla um padrão universal de códigos na web, se chama W3C. Nela, você pode encontrar tudo sobre as linguagens de programação que ela defende. Vou disponibilizar para vocês um documento com todos seus recursos do CSS.
Não basta somente recursos, mas sim técnicas e essas não têm neste documento, mas fique tranqüilo(a), vou separar umas técnicas interessante e colocar aqui no blog.
Fique agora com o link com a documentação do CSS, está em inglês, se você não for muito bom em inglês, mas tiver uma noção já dá pra entender, a linguagem é simples.
Link: http://www.w3.org/TR/REC-CSS2/
Caso tenha alguma dúvida, comente aqui.
Um amigo me passou um site bem interessante, não tem muita finalidade, mas a princÃpio é interessante.
No site myminicity.com você pode criar uma cidade e logo em seguida recebe um link da cidade onde todas as pessoas podem visitar.
A cidade cresce gradualmente de acordo com o numero de visitas que recebe. O interessante é que o aplicativo tem um critério de crescimento, ele começa com algumas fazendas e depois vai crescendo, até chegar a uma verdadeira cidade.
Quem visita este blog já percebeu que de vez enquanto aparece uma caixa da cidade e que se você clicar, vai para minha cidade e ajuda em seu crescimento.
Criei uma cidade chamada Curso de Web. Nome sugestivo heim!
Veja a cidade Curso de Web: www.curso.myminicity.com
Entre e crie a sua cidade, é muito simples, eu não levei mais que 30 segundos. De verdade.
Assim que criar a sua cidade, poste o link da mesma aqui no blog para que todos vejam.
