Aprendiendo en P2PU - Trisfera Summer Camp

domingo, 6 de enero de 2013

Dale Estilo a tu Sitio

Reto 9

Bueno, ha sido un camino largo terminar este reto pero aprendí muchas cosas en el lenguaje CSS, es notable el avance cuando me veo cómo era en el reto 1.

Estilo CSS

En esta parte aprendí a utilizar el CSS dentro del HTML estilos relacionados al Carácter del Texto y su Alineación. Luego aprendí a separar mi estilo CSS del HTML y me pareció interesante, de esta forma se evita rebuscar el estilo en el extenso HTML.

Posteriormente aprendí a poner el fondo del sitio que tiene muchas propiedades que son importantes para que el fondo actué como quiero.

El resultado de mi trabajo con los estilos lo podéis ver en mi sitio: http://descargalibre.cu.cc/holamundo2.html.

O sino, mi captura de pantalla:

Posición de elementos

Esta es la parte más difícil del reto, creo que mis compañeros también han pasado horas difíciles pero con ganas se logra.

Y bien, he buscando más información para entender mejor el Modelo de Caja y encontré esta imagen que me ayudó a entender la diferencia entre el Margin y Padding. La diferencia es que al Margin se le asigna el valor de espacio externo del elemento y al Padding, el valor del espacio interno del elemento.

Aquí podéis ver la imagen que encontré:

Podemos usar también el top, left, right y bottom en el margin y padding, sólo tienen que poner guión y la parte donde quieren generar espacio. (Por ejemplo: margin-top:20px)

Luego de haber entendido todo eso, vi de nuevo mi bosquejo y vaya! Tengo que hacer más cajas por culpa de que el proyecto sea ambicioso pero valió la pena trabajar horas en eso, así aprendo mucho.

Al final mi Layout lo podéis ver en: http://descargalibre.cu.cc/layout.html

O sino, abajo:

Eso es todo en el reto 9. Saludos!

sábado, 5 de enero de 2013

Documento a HTML

Reto 8

Documento

El documento que elegí para transformar a HTML es http://avira-antivir-personal.softonic.com/ pero no todo lo que contiene en este enlace, sólo su descripción y ventajas, la imagen lo saqué de Google.

Editor de texto

El programa que elegí ya lo he usado anteriormente en mis clases de la Universidad, es: NotePad++. Razón? Es simple, liviano y buen interfaz de usuario.

HTML

Luego de haber aprendido en transformar a HTML estructuras como Encabezados, Listas, Imagenes y Enlaces, éste es mi código fuente final del reto:

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>Hola Mundo en HTML</title></head> <body>    <h1>Avira Free Antivirus 2013</h1>
    <img src="http://img687.imageshack.us/img687/5505/avirafreeantivirus2013s.png" alt="Antivirus Avira Free" />
    <p>Antivirus rápido, eficaz y gratuito. </p>
    <p>Avira Free Antivirus 2013 es el antivirus gratuito de Avira. Bajo su paraguas, tu PC está a salvo contra todo tipo de virus, spyware y rootkits.</p>     <p>Avira Free Antivirus 2013 destaca por su gran eficacia y velocidad. El consumo de recursos es bajo incluso durante los escaneos, y la tasa de detección de malware es de las mejores.</p>     <p>Una novedad de la versión 2013 es la nueva barra de protección del navegador, que permite bloquear cookies trazadoras y comprobar la peligrosidad de sitios web.</p>     <h2>Gran eficacia, pero pocas opciones y extras</h2>
    <p>La configuración admite dos modalidades, Principiante y Experto. La segunda muestra todas las opciones de configuración de Avira Free Antivirus, que son abundantes, aunque tampoco impresionan.</p>     <p>El único punto negativo lo pone la falta de algunos módulos que solo están presentes en la versión Premium, como el cortafuegos, el escáner de correo electrónico, el modo juego y la protección web.</p>     <p>Rápido y letal contra los virus, y por fin traducido al español, Avira Free Antivirus 2013 es un gran antivirus gratuito.</p>     <h3>Pros</h3>
    <ul>    <li>Inmejorable tasa de detección</li>    <li>Muy alta velocidad de escaneo</li>    <li>Bajo consumo de recursos</li>    <li>Barra de privacidad web</li>    <li>¡Por fin sin popup!</li>    </ul>
    <a href="http://personal.avira-update.com/package/wks_avira13/win32/es/pecl/avira_free_antivirus_es.exe">Descargue aquí el programa</a></body> </html>

Y el resultado en mi sitio es: http://descargalibre.cu.cc/holamundo.html

Saludos!

Bosquejo de mi Sitio

Reto 7

Acciones de los Usuarios

Si bien he analizado el pensamiento de un usuario sobre descargar programas u otras cosas, y lo que sucede es que ahora pasa por nuestra mente si el enlace de descarga está disponible o vencida, no queremos perder tiempo visitando en sitios de descargas que nos desilusionan con enlaces rotos, por lo que se ha convertido en un gran problema para los usuarios que buscan tener el programa gratuito.

Como la imagen pesa más, hice uno en MemeGenerator.

Divertido no? xD.

Bosquejo del sitio

Para hacer mi bosquejo, descargué el programa Balsamiq Mockups.

Me encantó cómo quedó, como a la mayoría de mis compañeros del reto, resultó ser un proyecto muy ambicioso, está bien tenerlo, tengo confianza en que podré hacer realidad el bosquejo :P.

Si te gustó mi bosquejo, bájate aquí el programa para que realices tu propio bosquejo!

*Si el enlace no abre la descarga, pruébalo aquí.

Saludos!