CREAR LA WEB DE APPLE GRATIS - TUTORIAL

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:

• La barra de navegación: donde debemos darle a NO para quitarla de la web.
• La cabecera: que deberemos eliminarla. Para ello os dejo este pequeño tutorial http://csssoldier.blogspot.com.es/2013/10/eliminar-cabecera-de-blogger.html

• 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:

1. Mac
2. iPad
3. iPhone
4. Watch
5. TV
6. Music
7. 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)

Para la creación de este menú os recomiendo la web  http://html5maker.com/#/

Antes de meternos a crear este apartado os recomiendo la visión de este video tutorial, son solo unos minutos. https://www.youtube.com/watch?v=9AhQ2jiuM08

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.

•  El menú de Pestañas.

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.

• Barra imágenes inicio.

 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.

• CREAR FIN DE WEB.

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.

- Pasate por la recogida de firmas: https://www.change.org/p/cualquiera-yo-tampoco-quiero-productos-apple?recruiter=491448386&utm_source=share_petition&utm_medium=twitter&utm_campaign=share_twitter_responsive

- Y también por el foro:  http://foro-anti-apple.81345.x6.nabble.com/