Aprende como se creou un sitio web ao ver o código fonte
Cando comecei a miña carreira como diseñador web, aprendín moito revisando o traballo doutros diseñadores web que admiramos. Non estou só niso. Se vostede é novo na industria da web ou un veterano experimentado, ver a fonte HTML de páxinas web diferentes é algo que é probable que faga moitas veces ao longo da súa carreira.
Para aqueles que son novos no deseño web, ver o código fonte dun sitio é unha das formas máis fáciles de ver como se fan certas cousas para que poida aprender deste traballo e comezar a usar determinado código ou técnicas no seu propio traballo. Como calquera diseñador web que traballa hoxe en día, especialmente aqueles que estiveron nisto desde os primeiros días da industria, e é unha aposta segura que eles contan que aprenderon HTML simplemente por ver a orixe das páxinas web que viron e estaban intrigadas por. Ademais de ler libros de deseño web ou asistir a conferencias profesionais , ver o código fonte dun sitio é unha boa forma de que os principiantes aprendan HTML.
Máis que HTML
Unha cousa que recordar é que os ficheiros fonte poden ser moi complicados (e canto máis complexa o sitio web estea a ver, máis probable será o código do sitio). Ademais da estrutura HTML que compón a páxina que está a ver, tamén haberá CSS (follas de estilo en cascada) que determinen a aparencia visual dese sitio. Adicionalmente, moitos sitios web hoxe incluirán ficheiros de guións incluídos xunto co HTML.
Probablemente hai moitos ficheiros de guións incluídos, de feito, cada un alimentando diferentes aspectos do sitio. Francamente, o código fonte dun sitio pode parecer esmagador, especialmente se é novo para facelo. Non te poñas frustrado se non podes entender o que está sucedendo con ese sitio de inmediato. Ver o código HTML é só o primeiro paso neste proceso. Con pouca experiencia, comezará a entender mellor como todas estas pezas encaixan para crear o sitio web que ve no seu navegador. A medida que se familiarice co código, poderá aprender máis e non parecerá intimidante.
Entón, como ves o código fonte dun sitio web? Aquí tes as instrucións paso a paso para facelo usando o navegador Google Chrome.
Instrucións paso a paso
- Abre o navegador web de Google Chrome (se non tes Google Chrome instalado, esta é unha descarga gratuita).
- Navegue ata a páxina web que desexa examinar .
- Fai clic co botón dereito na páxina e mira o menú que aparece. Deste menú, fai clic en Ver fonte da páxina .
- O código fonte para esa páxina aparecerá agora como unha nova páxina no navegador.
- Alternativamente, tamén pode usar os atallos de teclado de CTRL + U nunha PC para abrir unha ventá co código fonte dun sitio que se amosará. Nun Mac, este atallo é Command + Alt + U.
Ferramentas de desenvolvemento
Ademais da capacidade de fonte de páxina de visualización sinxela que ofrece Google Chrome, tamén pode aproveitar as excelentes ferramentas para desenvolvedores para cavar aínda máis nun sitio. Estas ferramentas permitiranlle non só ver o HTML, senón tamén o CSS que se aplica para ver os elementos do documento HTML.
Para usar as ferramentas de desenvolvemento de Chrome:
- Abre Google Chrome .
- Navegue ata a páxina web que desexa examinar .
- Fai clic na icona con tres liñas no ángulo superior dereito da xanela do navegador.
- Dende o menú, pase o rato sobre Máis ferramentas e logo faga clic en Ferramentas de desenvolvemento no menú que aparece.
- Isto abrirá unha xanela que amosará o código fonte HTML á esquerda do panel e a CSS relacionada á dereita.
- Alternativamente, se fai clic co botón dereito nun elemento dunha páxina web e selecciona Inspeccionar desde o menú que aparece, aparecerán as ferramentas de desenvolvemento de Chrome e o elemento exacto que seleccionou quedará resaltado no HTML co CSS correspondente que se mostra á dereita. Isto é moi útil se queres aprender máis sobre como se creou unha peza específica dun sitio.
Está a ver o código fonte legal?
Co paso dos anos, tiven moitos novos deseñadores web que cuestionan se é aceptable ver o código fonte dun sitio e usalo para a súa educación e, en definitiva, para o traballo que fan. Ao copiar o código de un sitio por xunto e pasalo como o seu propio sitio non é aceptable, usar ese código como trampolín para aprender de feito é o número de avances realizados nesta industria.
Como xa dixen ao comezo deste artigo, difícilmente atoparás un profesional web que hoxe non teña aprendido algo ao ver a fonte dun sitio. Si, ver o código fonte dun sitio é legal. Usar ese código como recurso para construír algo semellante tamén está ben. Tomar o código como está e pasalo como o seu traballo é onde comeza a atopar problemas.
Ao final, os profesionais da rede aprenden uns dos outros e, moitas veces, melloran o traballo que eles ven e están inspirados, non dubide en ver o código fonte dun sitio e usalo como ferramenta de aprendizaxe.