Práctica 12 Acerca de

En sitios web profesionales, incluso personales, se agrega una sección especial dedicada a ACERCA DE, en esta sección se habla acerca del desarrollador, puede ser su aficiones, gustos, intereses, profesión, es decir un extracto de su curriculum, suele incluir una foto.




Para un diseñador web, su imagen es fundamental en la red, es por ello que generan cada vez imágenes más vistosas, explotando al máximo, las nuevas tecnologías, y de esta forma hacen evolucionar la internet.



Desde sus inicio, la web solo ofrecía información y bastaba solo con usar un buscador tal como google para desplegarla. Actualmente esto ha evolucionado y nace lo que es la web 2.0, donde el usuario no solo se limita a buscar información sino, que además interactúa con la misma, creando así la web 2.0, la cual se aplica principalmente a redes sociales, tales como facebook, twitter, entro otras más.

Para esta práctica se deberá diseñar su acerca de, la cual deberá contener una idea de quienes son ustedes, así como imágenes y estilos que los caractericen de los demás.



Actividades.



1. Diseñar en papel, a estilo de bosquejo, como sería la distribución de su página acerca de

2. Identificar los diferentes elementos utilizar

3. Codificar la página web

Practica 11 Diseño Buscador Google

Google, se caracteriza por su simplicidad y liempieza en su diseño, omitiendo todos aquellos elemento que impliquen contaminación visual.


En esta práctica vamos a recrear la pagina principal de google.

1. diseñar la maqueta web, identificando las posibles etiquetas DIV que deba de tener
2. creasr un logo de la misma dimencion que el de google para nuestro sitio
3. aplicar el efecto fade de la practica 10 para los div que los requieran
4. utilizar el formulario de busqueda de google para realizar una busqueda real

Java Script Practica 10

Crear una nueva página web
Insertar dentro de las etiquetas < head > < head >    el siguiente codigó
< script >
var TimeToFade = 1000.0;

function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null || element.style.opacity == ''  || element.style.opacity == '1')
element.FadeState = 2;
else
element.FadeState = -2;
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}

function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
< /script >



dentro de las etiquetas  < body >    < /body >  implementar el siguiente texto

< div id="fadeBlock" style="background-color:Lime;width:250px;


height:65px;text-align:center;" >

< br / >

I'm Some Text

< /div >

< br / >

< br / >

< input type="button" onclick="fade('fadeBlock');" value="Go" / >

Práctica 9

Diseñar el anterior diagrama.

Sitio dedicado a la venta de electrodomésticos

1. Diseñar el encabezado
1. Nombre del sitio
2. Imagen de fondo
2. Sidebar
1. Contendrá diferentes imágenes en miniatura de los productos que se ofrecen
3. footer
1. Nombre alineado a la izq
2. fecha actual alineado a la der
3. email de forma centrada con link
4. Main
1. una imagen alineado a la izq
2. descripción del producto
3. lista con principales características técnicas
5. características generales
1. utilizar tipos de fuentes de google fonts
2. tamaño de texto adecuado
3. imágenes de fondo acorde a la temática del sitio
4. Width total 960px
5. utilice un div content para centrar su pagina
6. Deberá utilizar al menos tres electrodomésticos a mostrar
7. Una página por cada electrodoméstico

Práctica 8 uso de DIV

Realizar esta estructura con ocho divs.

Práctica 7 uso de DIV

Realice el siguiente diseño.

Práctica 6 uso de DIV

Práctica 5 uso de DIV

En este ejemplo, veremos la forma en que se puede realizar una maquetación con DIV’s de una estructura de página bastante sencilla. El ejemplo consiste en una área de encabezando, un panel izquierdo, el área para contenido y un footer. Los elementos que describiremos a detalle, en este artículo serán:

• Centrado horizontal de un elemento DIV
• Estructuras más dinámicas con DIV’s
• Cuidando los anchos y altos

Centrado horizontal de un elemento DIV

Aunque parezca algo extraño, los elementos DIV pueden centrarse utilizando los atributos margin-left: auto; margin-right: auto;. En cierto sentido, es compresible pensar es esta forma, como una forma lógica de centrar los elementos horizontalmente, dado que el valor auto para ambos lo empuja hacia el centro.

Estructuras más dinámicas con DIV’s

Nada extraordinario, ocurre cuando dibujamos los elementos en su forma por defecto. Pero cuando, colocamos al elemento que representa al panel izquierdo y le asignamos float: left, el siguiente elemento, se corre a su lado. Podemos notar en el código que el panel tiene el atributo hacia la izquierda y el contenido hacia la derecha. Esto causa que uno este pegado hacia ese margen para el contenedor, por lo que se restamos el ancho de cualquiera de los dos, podriamos apreciar que queda un espacio vació en el centro.

Cuidando los anchos y altos

Ahora, vemos la parte más delicada de la maquetación. El dibujado de la página puede no verse como se esperaba. Debemos considerar que cuando un elemento sobrepasara el ancho de su contenedor y es flotante, caerá a la linea siguiente. Aunque puede ocurrir que si el elemento tiene una orientación hacia la izquierda y el que sobrepasa el tamaño la tiene hacia la derecha, este último dejará una porción de su contenido por debajo del anterior. Debemos cuidar, sobre todo los anchos totales de los elementos por linea. Recordemos que cuando aplicamos valores a los margenes, el explorador suma el ancho fijo más el margen; igual que con el padding. Para ello, si deberemos hechar mano de una calcularadora, por que cualquier valor adicional, sea de margenes, padding, bordes, etc. aumentara el tamaño fijo del objeto.