Los empleados de Apple presumen
de ser unos visionarios y estupendos profesionales formados en las mejores
universidades del mundo. Pero en la realidad esto no es así. Hoy os voy a
enseñar cómo crear la web oficial de Apple sin el menor coste, sí amigos, totalmente
gratis. Esto demuestra que cualquier persona puede crear una web similar a la
suya y en algunos ejemplos hasta superarla. Para la realización de este
tutorial no se necesitan conocimientos en programación, con los elementales que
todos tenemos de informática e internet será más que necesario. Comencemos.
PRIMER PASO - La creación de un dominio web.
Para esto solamente necesitamos una cuenta de
Google (Gmail) que es la plataforma que yo os recomiendo ya que esta es la que
yo utilizo.
Una vez obtenida la cuenta Gmail, accedemos a
blogger a través del siguiente enlace
www.blogger.com Una vez allí,
crearemos un blog. Escogiendo el nombre y la dirección que queramos.
PASO Nº 2 - Creamos el diseño de la plantilla.
Tras acceder a nuestro blog
veremos a nuestra izquierda varias secciones como entradas, páginas, etc.
Debemos acceder a la pestaña plantilla. Una vez allí, veremos cómo se ve
nuestra web en el formato de navegador de ordenador y como se ve en el formato
móvil. Hacemos click en personalizar y veremos lo siguiente.
Para comenzar a crear la web de Apple, deberemos seleccionar el diseño
sencillo (que además debería aparecer por defecto). En la sección de fondo no
tocaremos nada, ya que nuestro fondo será blanco. Posteriormente llegaremos a
la ventana en la que tendremos que ajustar el ancho de nuestro contenido, donde
deberéis dejarlo con la numeración que aparece en la siguiente imagen.
Una vez ajustado el ancho, accederemos al diseño, donde deberemos
seleccionar la primera opción para el cuerpo del blog. Mientras que en diseño
de la página deberemos escoger el último.
Para finalizar, accederemos a los ajustes avanzados, donde introduciremos
los siguientes datos:
- Texto de la página: color del texto
#444444 (copiar y pegar
ese código) y la fuente a 12px.
- Fondos: todos los fondos de color blanco.
- Enlaces: todos los enlaces deberán llevar el siguiente
#888888
(introducirlo en los 3 apartados).
- Titulo del blog: podemos dejarlo por defecto ya que más adelante lo
suprimiremos.
- Descripción del blog: aquí colocaremos el siguiente código de color
#444444
- Texto de la pestaña: aquí pondremos la fuente
Arial a 14px. En los
dos colores colocaremos
#ffffff
- Fondo de las pestañas: aquí escribiremos
#444444
- Titulo de entrada: aquí colocaremos la fuente
Times New Roman a 22px.
- Cabecera de fecha: En ambas barras de colores pondremos el transparente.
- Pie de página de la entrada: en el primer cuadro pondremos
#666666,
para en los dos siguientes escribir
#eeeeee
- Gadgets: dejaremos el ajuste por defecto, es decir, tal como está ya que
no es relevante.
- Imágenes: en el primer apartado escribiremos
#ffffff, en el segundo
#eeeeee y finalmente
#444444
- Acentos: aquí pondremos de nuevo el transparente.
Una vez hecho estos ajustes habremos terminado esta tarea, por lo que le
damos a
Aplicar al blog
PASO Nº 3 -
Distibuimos el contenido de nuestra web.
En
este paso distribuiremos y ubicaremos el contenido que va a tener nuestra web o
la de Apple en este caso. Por lo tanto debemos dirigirnos a la sección de
DISEÑO que encontraremos en la parte izquierda del menú blogger.
Una vez allí
debemos realizar las siguientes modificaciones:
- Main (Entradas): tenéis que
dejarla como la siguiente imagen.
- Datos personales: eliminar este gadget.
- Archivos del Blog: este gadget también debemos eliminarlo
A continuación solo tenemos que guardarlo y aplicarlo, para ello click en
GUARDAR DISPOCICIÓN
PASO Nº 4 - Creamos el diseño y los gadget.
En este paso crearemos la imagen final de nuestra web, es decir, haremos que
realmente se parezca a la web de Apple. Por lo que es fundamental realizarlo
concretamente.
Para esto recomiendo crear una carpeta en nuestro ordenador destinada a los
productos finales que obtendremos para posteriormente colocarlos más cómodamente
en la web.
EL FAVICON
Para los que no conoscan este concepto, el favicon es la pequeña imagen que aparece en la pestaña de nuestro navegador una vez que accedemos a la web.
Para el diseño del favicon os recomiendo esta web
http://www.favicon.cc/ ya que es la más sencilla para elaborar el diseño. Pero si no quereís elaborarlo también pongo a vuestra disposición una hecha por mi. Solo teneis que hacer click en la imagen de aquí abajo para obtenerlo.
EL MENU DE PESTAÑAS
Nuestro siguiente pasó en la creación del menú de pestañas que aparecerá en
la parte superior de nuestra web.
Para ello crearemos un gadget en el apartado de diseño, concretamente uno
llamado
Páginas. Una vez clicado nos aparecerá esta ventana.
En primer lugar, cambiaremos el título por
Menu de pestañas. Posteiormente haremos click en añadir enlace externo. Una vez alli veremos lo siguiente:
En Título de la pagina escribiremos los siguientes nombres:
- Mac
- iPad
- iPhone
- Watch
- TV
- Music
- Support
Cada uno de ellos colocado en un enlace diferente. Cada vez que escribamos uno le daremos a
Guardar enlace y abriremos otro para colocar el siguiente. Para concluir esta parte debemos desseleccionar el apartado de
página principal que biene seleccionado por defecto.
BARRA IMAGENES DE INICIO
Este es el menú
rotatorio de imágenes que aparece en la página principal de la web de Apple.
Nosotros debemos crear uno nuestro propio donde recomiendo primero ver las imágenes
que tiene la compañía en su web oficial para posteriormente añadirlas en
nuestro menú y que se parezca lo más posible a la web oficial. (Las imágenes
que busquemos deben tener el mayor tamaño posible)
Las medidas
que debemos colocar en las imágenes son las siguientes:
En la parte
izquierda pondremos:
- 4
diapositivas o fotos.
- 6 segundos
para cada foto.
- 1 segundo
de overlap
En la parte
derecha pondremos: (Es necesario repetirlo en todas las diapositivas, una a
una)
- Width:
1260
- Height:
500
Y ajustamos
la imagen a la diapositiva con nuestro ratón.
Para
finalizar debemos colocar los efectos de pasada, buscando que entre por la
derecha y se marche hacia la izquierda.
NO CIERRES
LA WEB, QUE POSTERIORMENTE SERÁ NECESARIA.
ENTRADA QUE HARÁ DE FINAL DE PÁGINA.
La web de Apple, como cualquier web tiene en el final unas opciones con contactos, productos y cosas así. Esta página también debemos reproducirla, para ello os recomiendo descargar la imagen que viene a continuación. (Para hacerlo solo es necesario hacer click en la imagen)
PASO Nº 5 - COLOCAR LOS GADGETS Y FINALIZAR LA WEB.
Hemos
llegado al último paso, ya lo más largo está hecho. Solamente nos queda colocar
todos los nuevos gadgets en el menú de Diseño, ordenarlos y guardar para publicar
la web.
- En
primer lugar, el favicon.
Lo primer que necesitamos es saber dónde lo tenemos
ubicado, espero que hayáis seguido mi recomendación de crear una carpeta para
esto ya que será más rápido y fácil. Cuando tengamos el favicon,
accederemos al apartado Diseño del menú de blogger y en el primer
cuadro donde pone la palabra Favicon lo pondremos. Y Guardamos.
Este debe estar situado en el primer apartado Cross-Column,
para trasladarlo solamente es necesario clickar el gadget y mantenemos
pulsado para arrastrarlo. Y guardamos disipación.
Por esto no debiamos cerrar la web, ya que ahora es necesaria. Lo que debemos hacer es pulsar en </>Embed y nos aparecerá esto:
Una vez aquí
debemos copiar el código que nos ofrece la web. A continuación nos trasladamos
al menú blogger, concretamente al apartado de Diseño y pulsamos añadir
gadget en cualquiera de los apartados.
Seleccionamos
el llamado Html/Javascript y nos abrirá una ventana en la que pondremos
Barra imágenes inicio en título y en contenido el código que
hemos copiado de la web. Y guardamos.
Para
finalizar solo debemos arrastrarlo hasta colocarlo en el apartado Cross-Column
2 y Guardamos disposición.
Para esto
debemos crear una nueva entrada, pulsando en Entrada nueva. No
colocaremos ningún título y en el apartado de redactar debemos colocar
la imagen que nos hemos descargado anteriormente, modificando el tamaño a extra
grande o tamaño original. Y publicamos.
Este es el
resultado que deberíamos tener comparando con la web de Apple:
Y con esto amigos hemos terminado la web de Apple. ¿Fácil no
creéis? Ni siquiera han sido necesarios grandes conocimientos de programación.
Con esto se demuestra que no hay que ser un genio para crear las cosas que hace
Apple y que ellos tampoco lo son. Solo son unas personas que llevan con una
reputación de novedosos completamente injustificada. Bueno, gracias amigos y
espero que este tutorial sea fructífero para todos.
