Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - Pitu

Páginas: [1]
1
Aprender a programar desde cero / Re:Ejercico CU01036D: CSS columnas con FLOAT.
« en: 12 de Julio 2015, 02:31 »
Ya llegué a la propiedad "Vertical-align" ;D

2
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CU01035D
« en: 12 de Julio 2015, 01:21 »
Ah, entiendo.  8) Muchas gracias!!!

3
Aprender a programar desde cero / Maquetar página web con CSS varias columnas FLOAT. Ejercicio resuelto CU01036D:
« en: 06 de Julio 2015, 21:39 »
Hola a todos. Dejo mi solución al ejercicio CU01036D:

Citar
Define un documento HTML donde a través del uso de la propiedad float y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:...


Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Ejercicio CU01036D</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CU01036D.css">
</head>
<body>
<div class="div1">
<div id="caja1" class="div2">Bienvenidos a aprenderaprogramar.com</div>
<div id="caja2" class="div2">Menú
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>
<div id="caja3" class="div2">Conoce las últimas novedades del lenguaje JavaScript.</div>
<div id="caja4" class="div2">Espacio reservado para publicidad</div>
<div id="caja5" class="div2">Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</div>
<div id="caja6" class="div2">Contacta con nosotros</div>
<div id="caja7" class="div2">Aviso legal</div>
</div>
</body>
</html>

Código: [Seleccionar]
/*CSS para ejercicio CU01036D*/
.div1{width:800px;text-align:center;}
.div2{border:solid black;}
#caja1{width:796px;height:45px;background-color:#DEB887;text-align:center;font-family:arial;font-size:25px;       font-weight:bold;border-width:2px 2px 1px 2px;}
#caja2{height:116px;float:left;width:196px;border-width:1px 1px 1px 2px;text-align:left;}
#caja3{background-color:#ADD8E6;width:399px;float:left;height:57px;border-width:1px;}
#caja4{width:197px;height:116px;float:right;border-width:1px 2px 1px 1px;}
#caja5{background-color:#90EE90;width:399px;float:left;height:57px;border-width:1px;}
#caja6{background-color:#DDA0DD;height:50px;float:left;width:438px;border-width:1px 1px 2px 2px;}
#caja7{height:50px;float:right;width:356px;border-width:1px 2px 2px 1px;}

Me surge una duda: En #caja2 que tenemos un menú, al haber centrado el texto arriba para todas las cajas, ¿como resuelvo el hecho de que el menú quede desordenado? Yo usé text-align para esa caja en particular, pero supongo que debe haber una manera de que quede mejor?

Y otra pregunta (no sé si lo veremos más adelante): Cómo centrar el texto u/o elementos a lo alto? O sea, verticalmente.

Gracias!

4
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / margin-top no funciona ejemplo float y clear curso CSS desde cero CU01035D
« en: 05 de Julio 2015, 21:40 »
Hola!!! Qué dificil se me hace esta propiedad FLOAT :'(

Me surgió otra duda más cuando comparé mi solución al ejercicio con la solución que propone wilfridocardena en este hilo: https://www.aprenderaprogramar.com/foros/index.php?topic=2583. Pego a continuación mi código:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejercicio CU01035D</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CU01035D.css">
</head>
<body>
<div>
<div id="div1" class="primero">Caja 1</div>
<div id="div2" class="primero">Caja 2</div>
<div id="div3" class="primero">Caja 3</div>
<div id="div4" class="primero">Caja 4</div>
<div id="div5" class="primero">Caja 5</div>
<div id="div6" class="primero">Caja 6</div>
<div id="div7" class="primero">Caja 7</div>
<div id="div8" class="primero">Caja 8</div>
</div>
<div>
<p class="Segundo">En psicología y las ciencias cognitivas, el sesgo de confirmación es una tendencia a investigar o interpretar la información de tal suerte que confirme nuestras preconcepciones, es decir nuestras creencias previas, provocando errores en la interpretación del mundo que nos rodea. Se suele hacer referencia también como "sesgo confirmatorio" y es uno de los sesgos cognitivos que provoca más errores en la inferencia inductiva realizada en el proceso de confirmación de las hipótesis a estudiar. Para compensar esta tendencia humana se ha elaborado el método científico con el objetivo de poder desaprobar las hipótesis que la confirman de una forma más objetiva.</p>
</div>
<div>
<div id="caja1" class="tercero">Caja 1</div>
<div id="caja2" class="tercero">Caja 2</div>
<div id="caja3" class="tercero">Caja 3</div>
</div>
<div class="Cuarto">Curso CSS aprenderaprogramar.com</div>
</body>
</html>

Código: [Seleccionar]
/*CSS para Ejercicio CU01035D */
.primero{width:50px; height:50px;margin-right:5px}
#div1{
background-color:yellow; float:left}
#div2{
background-color:green;float:left}
#div3{
background-color:blue;float:left}
#div4{
background-color:red;float:left}
#div5{
background-color:gray;float:left}
#div6{
background-color:pink;float:left}
#div7{
background-color:silver;float:left}
#div8{
background-color:purple;float:left}
.Segundo{clear:left; background-color:yellow;margin-bottom:20px; margin-top:20px; width:100%;}
.tercero {width:200px; height:50px; margin-right:5px;}
#caja1{background-color:silver; float:right;}
#caja2{background-color:pink; float:right;}
#caja3{background-color:purple; float:right;}
.Cuarto{background-color:#DEB887; width:100%; text-align:left; clear:both}
Y la consulta es: ¿por qué en el navegar se ven los saltos de línea (o espacios entre div y div) en la solución de el, y en el mío cada div queda pegado al posterior (sin espacios, me refiero hacia abajo)?

¿Se entiende mi pregunta?

5
Aprender a programar desde cero / Ejercicio resuelto tutorial HTML CU00727B: creación de portal básico cabecera
« en: 23 de Abril 2015, 19:43 »
Hola a todos!! Dejo mi ejercicio para corrección ;D

Citar
Define la estructura de un portal web que conste de:

a) Una cabecera con una imagen, un texto h1, y otra imagen que a su vez sea un link.

b) Un cuerpo con un menú que contenga 5 items, una imagen y dos párrafos.

c) Un pie que contenga una imagen, un copyright y un texto que sea a su vez un link.



Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head><meta charset="utf-8">

<title>EjercicioCU00727B</title>

</head>

<body>
<div id="header">
<div style="text-align:center"><a href="http://es.wikipedia.org/wiki/Dise%C3%B1o_gr%C3%A1fico" target="_blank"><img src="http://jewelsbranch.com/wp-content/uploads/images/courses/GraphicDesignBasicsBanner.png" alt="Wikipedia" width="41%" border="1"></a></div>
<h1 style="text-align:center">Fundamentos del diseño</h1>
<div style="text-align:center"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCPWyQQQG7ygkssxxr6TJO2HVwYSGwpxiZo_vYrwab5eH3kGQq" alt="Mar"><br/></div>

<br/>
</div>

<hr style="height:3px; color: purple; background-color: purple; border:1px solid; width:70%"/>

<div id="menu">
Elementos del diseño:
<ul sytle="list-style-type:circle">
<li><a href="http://mimente.com.mx/blog/conceptos-formales-o-elementos-del-diseno-visuales" target="_blank">Elementos básicos</a></li>
<li><a href="http://es.wikipedia.org/wiki/Teor%C3%ADa_del_color" target="_blank">La teoria del color</a></li>
<li><a href="http://www.paredro.com/7-pasos-para-el-proceso-de-un-buen-diseno/" target="_blank">Fases del proceso de diseño</a></li>
<li><a href="http://www.forodelwebmaster.com/389/10-herramientas-relevantes-para-un-disenador-grafico/" target="_blank">Herramientas de trabajo</a></li>

</ul>

<div style="text-align:center"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT9VdmQrMg9myDuz_O0Gpfw5QXkCCpf2qF1ayScUtV1CrxPaU6y" alt="Colores"></div>

<p align="justify">
El diseño se define como el proceso previo de configuración mental, "pre-figuración",
en la búsqueda de una solución en cualquier campo. Utilizado habitualmente en el contexto de la industria,
ingeniería, arquitectura, comunicación y otras disciplinas creativas.
<br/>
<br/>
Etimológicamente deriva del término italiano disegno dibujo, designio,
signare, signado "lo por venir", el porvenir visión representada gráficamente del futuro,
lo hecho es la obra, lo por hacer es el proyecto, el acto de diseñar como prefiguración es el proceso previo
en la búsqueda de una solución o conjunto de las mismas. Plasmar el pensamiento de la solución o las
alternativas mediante esbozos, dibujos, bocetos o esquemas trazados en cualquiera de los soportes,
durante o posteriores a un proceso de observación de alternativas o investigación. El acto intuitivo de
diseñar podría llamarse creatividad como acto de creación o innovación si el objeto no existe o se modifica
algo existente inspiración abstracción, síntesis, ordenación y transformación.
</p>
</div>

<hr style="height:3px; color: darkgreen; background-color: darkgreen; border:1px solid; width:70%"/>

<div id="footer">
<div style="text-align:center"><img src="http://www.zeixs.com/uploads_beispielbilder_slideshow/graphic_3_neu/sound_design_4.jpg" width="35%" alt="Diseño">
<br/>

<p align="justify">
Diseñar es una tarea compleja, dinámica e intrincada. Es la integración de requisitos técnicos, sociales y
económicos, necesidades biológicas, ergonomía con efectos psicológicos y materiales, forma, color, volumen y
espacio, todo ello pensado e interrelacionado con el medio ambiente que rodea a la humanidad. De esto último
se puede desprender la alta responsabilidad ética del diseño y los diseñadores a nivel mundial. Un buen punto
de partida para entender éste fenómeno es revisar la <a href="http://es.wikipedia.org/wiki/Psicolog%C3%ADa_de_la_Gestalt">Gestalt</a>
y como la <a href="http://es.wikipedia.org/wiki/Teor%C3%ADa_de_sistemas">teoría de sistemas</a> aporta una visión
amplia del tema.
</p>
<br/><br/>
<div style="text-align:left"><img src="http://www.case.edu/magazine/fallwinter2010/images/copyright.png" width="5%">Copyright 2006-2072 aprenderaprogramar.com
</div>
</body>
</html>
Gracias :-*

6
Aprender a programar desde cero / Re:Ejercicio CU00715B - Curso HTML - Clase: Encabezado, parrafos y etiquetas.
« en: 16 de Abril 2015, 21:30 »
Ah, ya entendí! Me dí cuenta que repito el error de no respetar el orden de las etiquetas practicamente todo el tiempo. Muchas gracias!

7
Aprender a programar desde cero / Ejercicio CU00715B - Curso HTML - Clase: Encabezado, parrafos y etiquetas.
« en: 16 de Abril 2015, 05:25 »
Hola, chicos! En mi ventana de notepad++ las ultimas 3 líneas usando el tabulador las puse exactamente igual a lo planteado en el ejercicio, pero en el navegador (probé con chrome, firefox e ie) me quedan a distinta medida. Incluso al previsualizar este mje, las lineas no estan a la misma medida que yo las copié en el notepad.

Les paso el código:
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head> <meta charset="utf-8">

<title>Mi viaje a New York</title>

</head>

<body>

<pre>
<h1>
<p style="text-align: center;"> Las fotos de mi viaje</h1></p>

<p style="text-align: center;">Estuve de viaje por Nueva York.
¡Un sueño hecho realidad!
Les comparto algunas fotos de este increíble viaje.</p>

<h2>
<p style="text-align: center">Fotos de la primera parte de mi viaje</p></h2>

<img src= "http://3.bp.blogspot.com/-zNpUCi4Umf4/Uj_Dm2CzOoI/AAAAAAAAK0A/QSREzlYlYOc/s1600/PANO_20130917_123409.jpg" width= "50%" border="2" alt="Rockefeller Center">

<img src= "http://3.bp.blogspot.com/-dRNYB4F3CcY/Uj_G6_VP8sI/AAAAAAAAK08/PkO89Lcf7fw/s1600/PANO_20130918_175930.jpg" width= "50%" border="2" alt="Central Park">


<h2>
<p style="text-align: center">Fotos de la segunda parte de mi viaje</p></h2>

<img src= "http://2.bp.blogspot.com/-ys9jAiXUdt8/Uj_KlZNnhhI/AAAAAAAAK1o/5wGQAWcJcBk/s1600/PANO_20130919_121205.jpg" width= "50%" border= "2" alt= "Times Square">

<img src= "http://3.bp.blogspot.com/-mcMRQ6n0Org/Uj_PFy4-xqI/AAAAAAAAK2o/08S-POCNt_Q/s1600/IMG_2806.JPG" width= "50%" border= "2" alt= "Brooklyn Bridge"

</pre>


<pre>

<p>Los viajes ...son libertad
...son amistad
...son crecimiento personal

¡No desaproveches una oportunidad!</p>
</pre>
</body>
</html>
PD: Si tienen alguna otra correción para hacerme, sera más que bienvenida!

8
Aprender a programar desde cero / Re:Si vas a escribir en el foro... ¡lee esto!
« en: 16 de Abril 2015, 00:02 »
Hola! Primer post ;D Con respecto a los ejercicios y las dudas (sobre temas de los que ya existe un hilo, por ej. ejercicios de los cursos), es mejor crear uno nuevo o preguntar en los hilos existentes?

Páginas: [1]

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".