Desde youtube nos escribe Sauko:
Quiero felicitarlos por este magnifico tutorial, la verdad es que soy un tipo apasionado por el diseño y todo lo que se lo he aprendido investigando y leyendo tutoriales, no tuve la posibilidad de estudiar diseño pero con el tiempo he aprendido muchas cosas.

Generalmente diseñaba paginas con programas visuales sin necesidad de programar, ahora ultimo estaba probando MUSE de adobe que esta en etapa experimental pero funciona en Html5.

Gracias a este tutorial me doy cuenta de lo versátil que es el codigo y su programación. Agradezco que compartan sus conocimientos.

Estoy desarrollando el sitio web de una empresa y tengo la idea de hacerla de una sola pagina, con el estilo parallax scroll, algo asi como esto http://chemicalromance.fr/graisses-industrielles-pates-de-montage-lubekrafft.php.

Es posible que puedan publicar algún tutorial al respecto, o me puedan guiar con algún tipo de código para lograr estos efectos.

De antemano les agradezco su tiempo y dedicación a compartir sus conocimientos.

Saludos desde Chile, Saukin

——————————————————————————————-

Bien, Saukin, esta pagina web esta fabricada con un simple PHP que en realizada tiene un HTML5, más bien, no importa el lenguaje que usemos si PHP o HTML/HTML5, ya que todo el trabajo lo hace unas librerías de jquery.

Lo primero que tenemos que hacer, es cargar las librerias, y los CSS, en los CSS encontraremos las configuraciones de las imágenes de fondo, las librerias de jquery se encargaran de hacer los efectos cuando nosotros los llamamos en el HTML.

jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML5, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC.

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privativos. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Luego tenemos un javascript que lo que hace es crear una función de re-dirección a cada parte de la pagina.

Luego empezamos con la pagina, creamos el head superior que quedara fijo, con las secciones y los botones de compartir.

Agregaremos la barra de navegación y configuraremos el primer item:

Luego comenzaremos con el primer articulo:

Aqui estamos editando el segundo item y comenzamos con el

, ahora creamos un articulo normal:

Como se ve esta cargando varias class, estas tendrán que ver con el fondo, las tipografías y demás.

Y asi se siguen agregando cada item y su contenido. Lo demas esta controlado por los js y los css como lubekrafft.css:

Como se ve con este CSS se carga cada imagen de fondo de cada parte de la pagina.

Bueno lo demás es ir probado, te recomiendo que para guiarte lo más posible uses NotePad++, la descargamos desde aquí.

Saludos y suerte!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *