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 - alefaletti

Páginas: [1] 2 3
1
De todo un poco... / Oferta de empleo - Programador Java Senior - Buenos Aires - Argentina
« en: 29 de Mayo 2020, 21:35 »
Estimada Comunidad:

Les cuento que tengo una nueva búsqueda en una muy importante empresa. Me solicitan Desarrolladores Java Sr y un Líder en dicho lenguaje.

Se requiere un mínimo de 4 años en Desarrollo profesional comprobable.

El puesto es para estar en Relación de dependencia de manera estable. (no es un proyecto).

Los interesados se pueden comunicar a: rrhh@ltp-asociados.com o al +54911-66705635

Muchas gracias.
Alejandro Faletti

DETALLES

Desarrolladores Java Sr / Líder Java Sr

Formación académica:
– 4to año de Ingeniería en Sistemas o graduado.
– Idioma Ingles avanzado (no excluyente).

Detalle:
- Flexibilidad, trabajo en equipo, capacidad de análisis, orientado a resultados, alto nivel de
autonomía.

Metas y objetivos:
- Crecer profesionalmente y proyección a futuro. Tomar decisiones estratégicas sobre el producto.

Experiencia:
- Un mínimo de 4 años de experiencia en empresa de productos como Desarrollador Java.
- Participación de principio a fin en los proyectos.

Habilidades técnicas (poseer alguna de ellas):
- ESB
- Integracion continua (Jenkins – Sonar).
- Metodologias agiles.
- Web Service (SOAP – REST).
- Repositorios (Git – SVN).
- Patron (Grasp – MVC).
- Protocolos HTTP
- Patron de diseño OOP.

JVM
Thread (excluyente)
Struts
Spring
XML
Jason
Eclipse
Intelli J
Build Maven
Build Ant
Gradle

Microcentro / Home office: 2-3 días / Flexibilidad horaria.

Galeno - Se solicitan pretensiones requeridas (bruto).

2
Aprender a programar desde cero / HTML y Animation CSS crear efectos dinámicos y movimiento en página web CU01065D
« en: 01 de Mayo 2017, 20:19 »
Muy buenas tardes!

Adjunto mi ejercicio CU01065D del tutorial de programador web con CSS y aguardo sus correcciones o comentarios. Muchas gracias!

HTML:

Código: [Seleccionar]

<!DOCTYPE html>

<html>
    <head>
        <style>
            #contenedor {width:100%;height:80px;background-color:blue;border-radius:15px; margin:auto;}
            #Primero{width:10%; height:5%;background-color:yellow; margin:5px; border-radius:10px; position:absolute;}

         
                /* Empezamos definiendo las propiedades que va a tener el elemento en cada uno de los estados de la animación mediante el uso de la regla @keyframes.*/
                @keyframes Animacion {
                from {background-color:yellow;}
                /*Al elemento que se le aplique la animacion tendra un fondo de color amarillo*/
                25% {margin-left:24%;}
                /*Al 25% de comenzada la animacion el elemento tendra un margen izquierdo de 24%.*/
                50% {margin-left:49%;}
                /*Al 50% de comenzada la animacion el elemento tendra un margen izquierdo de 49%.*/
                75% {margin-left:74%;}
                /*Al 75% de comenzada la animacion el elemento tendra un margen izquierdo de 74%.*/
                100% {margin-left:87.5%;}
                /*Al 100% de comenzada la animacion el elemento tendra un margen izquierdo de 87.5%.*/
                to {background-color:aqua;}
                /*Al finalizar la animacion el elemento tendra el color definido en esta propiedad. La transformacion del mismo comienza en el primer paso de la animacion partiendo del color definido en "from".*/
                }
             
               
                .uno{animation-name:Animacion; /*Mediante esta propiedad indicamos el nombre de animación definida en una regla @keyframes*/
                animation-duration:2s; /* indicamos el tiempo en segundos (2) que llevará completar un ciclo de la animación. */
                animation-iteration-count:infinite; /*Numero de veces que se repite el ciclo de la animacion.*/
                animation-direction:normal; /*la animación se ejecutará hacia delante.*/
                animation-delay:1s; /*Indica el tiempo en segundos (s) que debe retrasarse el inicio de la animación.*/
                }
        </style>
 </head>

    <body>

        <p><b>Animation CSS:</b>
        Name, duration, delay, fill-mode, iteration-count, direction, timing-function,play-state (CU01065D)</p>

            <div id="contenedor">
                <div class="uno" id="Primero"> </div>
            </div>

    </body>
</html>

3
Aprender a programar desde cero / Re:CSS y HTML. linear-gradient, degradados de color en HTML. Ejercicio CU01060D
« en: 29 de Abril 2017, 19:58 »
Muchas gracias Jorgito por el detalle! un abrazo!

4
Aprender a programar desde cero / Re:Efecto CSS esquinas redondeadas, border-radius - (CU01058D)
« en: 29 de Abril 2017, 19:55 »
Pedro muchas gracias por la paciencia de siempre!

Adjunto de nuevo el ejercicio:

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Has repetido id en muchos elementos, los id deben ser únicos en un documento,
es decir cada elementos puede tener un id que no se repita en el resto del documento.-->

<html>
   
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(58)Ejerciciofinal.css">
</head>

<body>

<div id="contenedor">
   
    <table>
    <thead>
        <tr>
            <th class="color-curva-toplila"> Standard </th>
            <th class="color-curva-toplila"> Professional </th>
            <th id="color-curva-top"> Enterprise </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <div class="x"> </div> </td>
            <td> <div class="x"> </div> </td>
            <td class="color"> <div class="ok"> </div> </td>
        </tr> 
        <tr>
            <td> <div class="x"> </div> </td>
            <td> <div class="x"> </div> </td>
            <td class="color"> <div class="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td class="color"> <div class="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td class="color"> <div class="ok"> </div> </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="color-curva-bottomlila"> $99 </td>
            <td class="color-curva-bottomlila"> $199 </td>
            <td id="color-curva-bottom"> $399 </td>
        </tr>
    </tfoot>
   
   
</table>
    </div>   
   
</body>

</html>



CSS:

Código: [Seleccionar]


#contenedor {margin:auto; margin-top:20px; border:solid 1px black; width:450px;}
table tr,th {background-color:#dfdfdf; text-align:center; width:150px; height:60px;}
.ok {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/OK50x50.jpg);}
.x {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/x50x50.jpg);}

.color {background-color:#e2f4c4;}
#color-curva-top {background-color:#e2f4c4; border-top-right-radius: 5px; border-top-left-radius: 5px;}
#color-curva-bottom {background-color:#e2f4c4; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.color-curva-bottomlila {background-color:#dfdfdf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.color-curva-toplila {background-color:#dfdfdf; border-top-left-radius: 5px; border-top-right-radius: 5px;}

5
Aprender a programar desde cero / Re:CSS. Estilos en columnas. (CU01057D)
« en: 29 de Abril 2017, 19:15 »
 ;D Gracias Pedro por la paciencia. Traté de no ver los ejemplos para darme cuenta.
Va mi nuevo intento.

CSS y explicacion:

Código: [Seleccionar]

.cols3
{-webkit-column-count:3; /*cantidad de columnas para Chrome, Safari, Android, iOs para elementos cuya clase sea "cols3"*/
-webkit-column-gap: 40px; /*espacio entre columnas para Chrome, Safari, Android, iOs para elementos cuya clase sea "cols3"*/
-webkit-column-rule: 1px solid #000; /*Ancho, estilo y color de las reglas divisorias de columnas para Chrome, Safari, Android, iOs para elementos cuya clase sea "cols3"*/

-moz-column-count: 3; /*cantidad de columnas para Firefox para elementos cuya clase sea "cols3"*/
-moz-column-gap: 20px; /*espacio entre columnas para Firefox para elementos cuya clase sea "cols3"*/
-moz-column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas para Firefox para elementos cuya clase sea "cols3"*/
   
column-count: 3;  /*cantidad de columnas sin especificar navegador para elementos cuya clase sea "cols3"*/
column-gap: 20px;  /*espacio entre columnas sin especificar navegador para elementos cuya clase sea "cols3"*/
column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas sin especificar navegador para elementos cuya clase sea "cols3"*/
 }
 
.cols3 h1, h2 {-webkit-column-span:all; -moz-column-span:all; column-span:all;}
/* Esta propiedad hace que el elemento h2, h1 se mueva a lo largo de todas las columnas siempre y cuando pertenezacan a un div cuya clase sea "cols3". h1 y h2 abarca la tabla a manera de titulo*/

6
Aprender a programar desde cero / CSS Animaciones para qué sirve la propiedad perspective y origin CU01063D
« en: 29 de Abril 2017, 18:59 »
Estimados; buenas tardes. Planteo mi solución al ejercicio CU01063D del taller práctico de desarrollo web con CSS desde cero.

Mi pregunta es que función cumple :

Código: [Seleccionar]
perspective: 800px;perspective-origin: 50% 100px;
en el ejercicio final, ya que al quitarlo del código no veo ningún cambio.

Muchas gracias.

Aqui mi ejercicio:

HMTL

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(63)ejfinal.css">
</head>

<body>

        <div id="transEj1">
           
            <div id="rotateX">
                <img src="http://elsitiodeale.byethost7.com/imagenchica.jpg">
            </div>
       
            <div id="rotateY">
                <img src="http://elsitiodeale.byethost7.com/imagenchica.jpg">
            </div>
   
            <div id="rotateZ">
                <img src="http://elsitiodeale.byethost7.com/imagenchica.jpg">
            </div>
   
        </div>

</body>

</html>



y el CSS con sus explicaciones:

Código: [Seleccionar]

#transEj1 div {transition:all 2s ease-in-out;
    perspective: 800px;perspective-origin: 50% 100px;}

/* Define las propiedades que afectaran a los div con id="#transEj1"
transition:
    all: indica que se verán afectadas por la transición todas las propiedades que se pueda.
    2s: Las transiciones se realizan en 2 segundos.
    ease-in-out: La velocidad a la que transcurre la transicion (respetando la duracion establecida) sera con comienzo lento y progresion a velocidad constante
*/

#transEj1:hover #rotateX {transform:rotateX(180deg);}
/*Al pasar el mouse por un elemento con id "transEj1", este elemento rotara sobre el eje X 180 grados.*/

#transEj1:hover #rotateY {transform:rotateY(180deg);}
/*Al pasar el mouse por un elemento con id "transEj1", este elemento rotara sobre el eje Y 180 grados.*/

#transEj1:hover #rotateZ {transform:rotateZ(180deg);}
/*Al pasar el mouse por un elemento con id "transEj1", este elemento rotara sobre el eje Z 180 grados.*/

7
Aprender a programar desde cero / HTML y CSS con Notepad++ Rotar, escalar, sesgar, trasladar transform. CU01062D
« en: 29 de Abril 2017, 16:48 »
Buenas! Mi ejercicio CU01062D del manual de programación web con CSS y editor Notepad++

Modifiqué algunos valores para hacer mas prolijo el ejercicio.

HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS-Ejfinal(62).css">
</head>

<body>

        <h2> Imagen Original </h2>
        <div>
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
        <h2> Imagen Skew </h2>
        <div id="skew">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
       
        <h2> Imagen Scale </h2>
        <div id="scale">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
        <h2> Imagen Rotate </h2>
        <div id="rotate">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
      <h2> Imagen Translate </h2>
        <div id="translate">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
        <h2> Imagen con varios efectos </h2>
        <div id="rotate-skew-scale-translate">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>

</body>

</html>


CSS:

Código: [Seleccionar]



#skew {transform:skew(35deg);}
/*#skew indica el estilo que se aplicará a los elementos con atributo id=”skew”. Transform:skew(35deg); indica un sesgado del elemento de 35 grados sobre el eje x ya que no se menciona un segundo valor que corresponderia al eje y.*/

#scale {transform:scale(1,0.5);}
/*#scale indica el estilo que se aplicará a los elementos con atributo id=”scale”. transform:scale(1,0.5); indica un scalado del elemento de 1 sobre X (horizontal) y 0.5 sobre Y (vertical).*/

#rotate {transform:rotate(2deg);}
/*#rotate indica el estilo que se aplicará a los elementos con atributo id=”rotate”. transform:rotate(2deg); indica una rotación del elemento a 2grados.*/

#translate {transform:translate(20px, 10px);}
/*#translate indica el estilo que se aplicará a los elementos con atributo id=”translate”.
transform:translate(20px, 10px) indica una traslación de 20px (primer valor sobre eje x) y 10px sobre el eje y*/

#rotate-skew-scale-translate {transform:skew(20deg) scale(1.1,1.1) rotate(-20deg) translate(10px, 20px);}
/*#rotate-skew-scale-translate indica el estilo que se aplicará a los elementos con atributo id=”rotate-skew-scale-translate”.
transform:skew(20deg):Indica un sesgado de 20 grados sobre el eje x.
scale(1.1,1.1): Indica un escalado de 1.1 sobre el eje x (horizontal) y 1.1 sobre el eje y (vertical).
rotate(-20deg): Define una rotacion de -20 grados del elemento.
translate(10px, 20px): Indica una traslacion de 10px sobre el eje x y 20 px sobre el eje y.*/


8
Aprender a programar desde cero / HTML CSS Radial-gradient / border-image: bordes personalizados. Ejemplo CU01061D
« en: 27 de Abril 2017, 03:23 »
Queridos, buenas noches.
Adjunto mi ejercicio CU01061D del curso de fundamentos de programación web con CSS desde cero.

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(61)EjercicioFinal.css">
</head>

<body>

    <div>
 
    </div>
   
</body>

</html>


CSS:

Código: [Seleccionar]


div {margin:auto;
    width:400px; height:200px;
    background: radial-gradient(yellow, blue);

    -webkit-border-image:url("http://elsitiodeale.byethost7.com/MarcoBlancoPixabay.png") 10 round }


9
Aprender a programar desde cero / Re:CSS y HTML. linear-gradient, degradados de color en HTML. Ejercicio CU01060D
« en: 22 de Abril 2017, 17:27 »
Muchas gracias!

Tengo una pregunta; puedo centrar el div... pero como colocar margenes de 50px? si pongo esta medida desde el right y el left; deja de estar centrado. Paso mi codigo. Muchas gracias!

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(60)EjercicioFinal-degradados.css">
</head>

<body>

    <div>
   
    </div>
   
</body>

</html>


CSS:

Código: [Seleccionar]

div {border: solid 2px; width: 400px; height: 200px;margin:auto;
     background: linear-gradient(25deg, red, white, blue)}

10
Aprender a programar desde cero / Efecto CSS esquinas redondeadas, border-radius ejemplo sobre tabla HTML CU01058D
« en: 22 de Abril 2017, 14:59 »
Muy buenos dias!
Les dejo mi ejercicio correspondiente a la entrega CU01058D del tutorial de desarrollador web desde cero con CSS.

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(58)Ejerciciofinal.css">
</head>

<body>

<div id="contenedor">
   
    <table>
    <thead>
        <tr>
            <th id="color-curva-toplila"> Standard </th>
            <th id="color-curva-toplila"> Professional </th>
            <th id="color-curva-top"> Enterprise </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <div id="x"> </div> </td>
            <td> <div id="x"> </div> </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr> 
        <tr>
            <td> <div id="x"> </div> </td>
            <td> <div id="x"> </div> </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td id="color-curva-bottomlila"> $99 </td>
            <td id="color-curva-bottomlila"> $199 </td>
            <td id="color-curva-bottom"> $399 </td>
        </tr>
    </tfoot>
   
   
</table>
    </div>   
   
</body>

</html>



CSS:

Código: [Seleccionar]

#contenedor {margin:auto; margin-top:20px; border:solid 1px black; width:450px;}
table tr,th {background-color:#dfdfdf; text-align:center; width:150px; height:60px;}
#ok {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/OK50x50.jpg);}
#x {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/x50x50.jpg);}

#color {background-color:#e2f4c4;}
#color-curva-top {background-color:#e2f4c4; border-top-right-radius: 5px; border-top-left-radius: 5px;}
#color-curva-bottom {background-color:#e2f4c4; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#color-curva-bottomlila {background-color:#dfdfdf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#color-curva-toplila {background-color:#dfdfdf; border-top-left-radius: 5px; border-top-right-radius: 5px;}

11
Aprender a programar desde cero / Re:Ejercicio Final - Cursores CSS - (CU01054D)
« en: 18 de Abril 2017, 17:14 »
Muchas gracias!

Recién lo probé, si haces click en la imagen del auto te lleva al doc 2.
Ese es el punto C.

Por favor avísame cualquier cosa. Muchas gracias de nuevo.

12
Aprender a programar desde cero / Re:Menú horizontal CSS o vertical - Ejercicio final: (CU01049D)
« en: 18 de Abril 2017, 02:16 »
Pedro muchas gracias! Va mi nuevo intento:

Código: [Seleccionar]

<html>
<head><title>Portal web - aprenderaprogramar.com</title>  /*Define el titulo de la pestaña*/
<meta charset="utf-8"> /* Etiqueta con la que nos aseguramos que el navegador conocerá la codificación de caracteres utilizada*/
<style type="text/css"> /*Define los estilos en el mismo HTML*/
       
/*Curso CSS aprenderaprogramar.com*/
#nav-menu ul {font-family: sans-serif; list-style: none; padding:0;margin:0;}
/* Define la familia tipografica de la lista no ordenada "ul" que se encuentre dentro de un id de nombre "nav-menu". Elimina los símbolos de viñeta y ubica la lista con margenes externos e internos en 0px*/

#nav-menu li {float: left;margin: 0.0.15em; border: 5px groove #FFAA33 ;}
/* Define que cada etiqueda "li" que este dentro de un id de nombre "nav-menu" se situara de manera horizontal (una a lado de la otra), con el valor del margen externo (laterales, arriba y abajo) , el estilo, grosor y color del borde*/

#nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left;
        width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center;}
/*Define el color de cada link (dentro de un id con nombre "nav-menu"),  su altura, y el espacio entre lineas (lo cual se podria mencionar como el margen top a partir del cual se posiciona el texto interno), situa los links de manera horizontal, define largo, hace que el elemento se muestre como caja block, deine borde, estilo y color del mismo, quita la decoracion (el subrayado de todo link) y situa el texto en el centro de la caja*/

#nav-menu li a:hover {background-color: #FF6347; }
/*al pasar el mouse por el la etiqueta "li a" dentro de un id con nombre "nav-menu" modifica el color original pasando al #FF6347 */
    </style>
</head>

13
Aprender a programar desde cero / HTML y CSS Diseñar una página web estructurada en columnas estilos usar CU01057D
« en: 18 de Abril 2017, 01:44 »
Respuesta al ejercicio CU01057D del tutorial de fundamentos de desarrollo web con CSS usando como editor Notepad++

HTML:

Código: [Seleccionar]
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="CSS(57)ejfinal.css">

</head>

<body>
   
    <div class="cols3">
    <h1>en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y</h1>
    <h2>aprenderaprogramar.com</h2>
    </div>

<div class="cols3">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.

CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente.

Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.
</div>

</body>
</html>

CSS y explicacion:

Código: [Seleccionar]

.cols3
{-webkit-column-count:3; /*cantidad de columnas para Chrome, Safari, Android, iOs */
-webkit-column-gap: 40px; /*espacio entre columnas para Chrome, Safari, Android, iOs */
-webkit-column-rule: 1px solid #000; /*Ancho, estilo y color de las reglas divisorias de columnas para Chrome, Safari, Android, iOs */

-moz-column-count: 3;  /*cantidad de columnas para Firefox */
-moz-column-gap: 20px;  /*espacio entre columnas para Firefox */
-moz-column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas para Firefox*/
   
column-count: 3;  /*cantidad de columnas sin especificar navegador */
column-gap: 20px;  /*espacio entre columnas sin especificar navegador */
column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas sin especificar navegador*/
 }
 
.cols3 h1, h2 {-webkit-column-span:all; -moz-column-span:all; column-span:all;}
/* Esta propiedad hace que el elemento se mueva a lo largo de todas las columnas. Las
abarva a manera de titulo*/

14
Aprender a programar desde cero / Editor Brackets no está mostrando las imágenes al ver página web en navegador
« en: 15 de Abril 2017, 19:21 »
Buenas! les hago una consulta;

Resulta que me han aconsejado usar este editor de código BRACKETS 1.9. La verdad es muy bueno, pero no me esta pudiendo levantar las img cuando quiero ver la pagina en el navegador. El mismo código en Notepad me funciona bien (el navegador lee todas las img).

Alguien sabe que puede estar ocurriendo?

Muchas gracias.

15
Aprender a programar desde cero / Cursores CSS con editor Notepad++ tipos posibles y efectos zoom help CU01054D
« en: 15 de Abril 2017, 18:40 »
Buenas tardes! les adjunto mi ejercicio CU01054D del taller de programación web con CSS usando Notepad++ como editor:

(no tengan en cuenta las imágenes que están desprolijas)

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title> Portal web - aprenderaprogramar.com </title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="Cursores54.css">
</head>

<body>
 
    <div id="Primero"> Div uno
           <ul>
               <li> <a style="cursor:help;"href="https://www.aprenderaprogramar.com" > Link 1 </a> </li>
               <li> <a style="cursor:help;"href="https://www.aprenderaprogramar.com" > Link 2 </a> </li>
               <li> <a style="cursor:help;"href="https://www.aprenderaprogramar.com" > Link 3 </a> </li>
           </ul>
     </div>
   
<div>
<a style="cursor:zoom-in;" href="http://elsitiodeale.byethost7.com/CSS(54)CursoresDOC2.html">
<img src="http://elsitiodeale.byethost7.com/Lamborghinimurcielago.jpg" width="200px" height="300px"> </a>
   </div>

</body>

</html>


HTML (DOC 2 con imagen):

Código: [Seleccionar]
<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Tipos (CU01054D)</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href=".css">
</head>

<body>

Este es el documento n.2 del cursor CSS - Tipos (CU01054D) </br>
<img src="http://elsitiodeale.byethost7.com/Papel%20rustico-pixabay.jpg" width="300px" height="300px">
 
</body>

</html>
CSS:

Código: [Seleccionar]
div {margin:25px; padding:0px; width: 200px; height:300px; border:solid 5px violet;}

16
Aprender a programar desde cero / HTML y diseño tablas CSS descargar estilos o aplicar estilos existentes CU01052D
« en: 15 de Abril 2017, 15:22 »
Buen día! Ejercicio CU01052D del tutorial de programación web con CSS como si estuviera en primero, aguardo sus correcciones / mejoras.

HTML:

Código: [Seleccionar]
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS52estilostablas.css">
</head>

    <body>
        <table>
            <caption>Contenido nutricional por cada 100 g de alimento.</caption>
            <tr>
                <th>Alimento</th>
                <th>Calorías (kCal)</th>
                <th>Grasas (g)</th>
                <th>Proteína (g)</th>
                <th>Carbohidratos (g)</th>
            </tr>

            <tr>
                <td>Arándano</td>
                <td>49</td>
                <td>0.2</td>
                <td>0.4</td>
                <td>12.7</td>
            </tr>

            <tr>
                <td>Plátano</td>
                <td>90</td>
                <td>0.3</td>
                <td>1.0</td>
                <td>23.5</td>
            </tr>
           
            <tr>
                <td>Cereza</td>
                <td>46</td>
                <td>0.4</td>
                <td>0.9</td>
                <td>10.9</td>
            </tr>

            <tr>
                <td>Fresa</td>
                <td>37</td>
                <td>0.5</td>
                <td>0.8</td>
                <td>8.3</td>
            </tr>
</table>
</body>
</html>


CSS - Punto A:

Código: [Seleccionar]

table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}
/* Definde el color de texto #333 (gris oscuro), la familia tipografica; en primera instancia Helvetica, si el usuario no tiene dicha fuente, se mostrará, Arial y si tampoco la tiene se visualizara cualquier familia que tenga siempre siendo "sans-serif". El largo de la tabla sera de 640px y los bordes colapsados.*/
td, th { border: 1px solid transparent; height: 30px;}
/* El borde de las columnas y filas sera de 1px, solida y transparente. La altura de 30px.*/
th { background: #D3D3D3; font-weight:bold; }
/*El fondo del titulo de cada columna con el color #d3d3d3 (tono gris) y el ancho de tipografia "bold" (negrita)*/
td { background: #FAFAFA; text-align: center;}
/*Color de fondo de cada celda (tono de gris claro) y el texto alineado en cada una de las mismas*/
tr:nth-child(even) td { background: #F1F1F1; }
/* Represanta las filas pares de la tabla  con color de tono gris claro*/
tr:nth-child(odd) td { background: #FEFEFE; }
/* Represanta las filas impares de la tabla  con color de tono gris levemente mas fuerte que el anterior*/
tr td:hover { background: #666; color: #FFF; }
/*Al pasar el mouse por cada una de las celdas, el color de fondo se hace gris oscuro y cada palabra de color blanco*/


CSS - Punto B:

Código: [Seleccionar]

table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: double 2px;}
td, th { border: 2px double; height: 30px;}
th { background: #D3D3D3; font-weight:bold; }
td { background: #FAFAFA; text-align: center;}
tr:nth-child(even) td { background: #F1F1F1; }
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; }


/* b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.


CSS - Punto C:

Código: [Seleccionar]


table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: solid 3px orange; border-collapse: collapse;}
td, th { border: 3px solid orange; height: 30px;}
th { background: #D3D3D3; font-weight:bold; }
td { background: #FAFAFA; text-align: center;}
tr:nth-child(even) td { background: #F1F1F1; }
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; }

17
Aprender a programar desde cero / HTML Estilos y herencia CSS en tablas aplicarles formato personalizado CU01051D
« en: 13 de Abril 2017, 19:48 »
Buenas tardes! Les adjunto mi ejercicio CU01051D del tutorial de desarrollo web con programación en CSS y como siempre aguardo sus mejoras / correcciones.

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSSEjerciciofinale51.css">
</head>

<body>

    <table id="primera">
        <caption> Tabla numero 1 </caption>
      <tr>
        <th> Columnas </th> 
        <th> Columnas </th> 
        <th> Columnas </th> 
        <th> Columnas </th>
        <th> Columnas </th> 
      </tr>
   
      <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
      </tr>
       
       <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
       </tr>
       
       <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
       </tr>
 
       <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
       </tr>
 
        <tr>
         <td> DATO </td> 
         <td> DATO </td> 
         <td> DATO </td>
         <td> DATO </td> 
         <td> DATO </td>
       </tr>
 
        <tr>
         <td> DATO </td> 
         <td> DATO </td> 
         <td> DATO </td>
         <td> DATO </td> 
         <td> DATO </td>
       </tr>
       
       <tr>
         <td> DATO </td> 
         <td> DATO </td> 
         <td> DATO </td>
         <td> DATO </td> 
         <td> DATO </td>
       </tr>
 
     </table>
    </br>
   
   <table id="segunda">
        <caption> Tabla numero 2 </caption>
      <tr>
        <th> Columna 1 </th> 
        <th> Columna 2 </th> 
        <th> Columan 3 </th> 
        <th> Columna 4 </th>
        <th> Columna 5 </th> 
      </tr>
   
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
     </table>

    </br>
       <table id="tercera">
        <caption> Tabla numero 3 </caption>
      <tr>
        <th> Columna 1 </th> 
        <th> Columna 2 </th> 
        <th> Columan 3 </th> 
        <th> Columna 4 </th>
        <th> Columna 5 </th> 
      </tr>
   
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
     </table>
</br>

</body>

</html>


CSS

Código: [Seleccionar]

#primera    {width:600px;border-collapse:collapse;}
#primera th {width:20%;} /*columna*/
#primera td, #primera th {border:8px solid gray;} /*no funciona con #primera td,th ...lo mismo en los de abajo*/

#segunda {width:100%;}
#segunda th {width:20%;}
#segunda td, #segunda th {border:2px double brown;}

#tercera {width:500px; border-collapse: collapse;}
#tercera th {width:100px;}
#tercera td {border-bottom:6px solid blue;}

18
Aprender a programar desde cero / Ejercicio final - Menu horizontal y vertical (Entrega CU01049D)
« en: 13 de Abril 2017, 01:23 »
Descripcion CSS:

Código: [Seleccionar]

<html>
<head><title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
    <style type="text/css">
       
/*Curso CSS aprenderaprogramar.com*/
        #nav-menu ul {font-family: sans-serif; list-style: none; padding:0;margin:0;}
        /* Define la familia tipografica de la lista ul, elimina los símbolos de viñeta y ubica la lista con margenes externos e internos en 0px*/
        #nav-menu li {float: left;margin: 0.0.15em; border: 5px groove #FFAA33 ;}
        /* Cada etiqueda li se situara de manera horizontal (una a lado de la otra), define margen externo (laterales, arriba y abajo) , el estilo, grosor y color del borde. de las etiquetas*/
        #nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left;
        width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center;}
        /*Define el color de cada link, su altura, y el espacio entre lineas (lo cual se podria mencionar como el margen top a partir del cual se posiciona el texto interno), situa los links de manera horizontal, define largo, hace que el elemento se muestre como caja block, deine borde, estilo y color del mismo, quita la decoracion (el subrayado de todo link) y situa el texto en el centro de la caja*/
        #nav-menu li a:hover {background-color: #FF6347; }
        /*al pasar el mouse por el link modifica el color original*/
    </style>
</head>

Descripcion HTML

Código: [Seleccionar]
<body>

<div id="nav-menu">
    <ul id="navlist"><li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>
        <li><a href="http://aprenderaprogramar.com">Cursos</a></li>
        <li><a href="http://aprenderaprogramar.com">Libros</a></li>
        <li><a href="http://aprenderaprogramar.com">Divulgación</a></li>
        <li><a href="http://aprenderaprogramar.com">Humor</a></li>
    </ul>

</div>

<!-- Define un div con id “nav-menu”, dentro del mismo se realiza una lista ul con id “navlist”, el primer li con id “active” y link hacia vuestra pagina. Lo mismo en los demas “li” pero  id.-->

</body>

</html>

19
Aprender a programar desde cero / Problemas con Menu desplegable mostrar submenú mouse sobre link hover CU01050D
« en: 09 de Abril 2017, 03:24 »
Queridos, buenas noches. Realizando el ejercicio CU01050D del tutorial básico de programación web desde cero con CSS.

No logro comprender como el sub-menu se mantiene en pantalla una vez que el mouse deja de pasar por el link (hover).

Hice este ejemplo y no logro comprenderlo.

HTML

Código: [Seleccionar]

<!DOCTYPE html>
<!-- Código base para el curso CSS -->

<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Desplegable-propio2.css">
</head>

<body>

<div id="contenedor">
<h1> CSS - Menú desplegable </h1>
<h2> aprenderaprogramar.com </h2>
<div id="menu">
<ul>
<li> <span> Libros </span>
<ul id="primero">
<li> Item </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
</li>
<li> <span> Detalles </span> </li>
<li> <span> Contactos </span> </li>
<li> <span> Datos </span> </li>
</ul>
</div>



</div>


</body>

</html>


CSS

Código: [Seleccionar]


span {text-align:center;}
h1,h2 {text-align:center;}
#contenedor {border:solid 3px blue; width:500px; height:350px; margin:auto;}
#menu {width:400px; height:30px; background-color:#e1f4fb; margin:auto;}
ul {margin-left:1%}
li {width:67px; height:19px; list-style:none; float:left; background-color:#c4f3a4; margin-left:9px; margin-top:5px; text-align:center;}

#primero {display:none;}
#primero li {margin-top:5px; margin-left:-41px;}
#menu:hover ul {display:block;}

20
Aprender a programar desde cero / Re:Ejercicio final Pseudoclases (CU01047D)
« en: 01 de Abril 2017, 20:21 »
bermartinv, muchas gracias de nuevo por tu ayuda!

Mira, te paso el link del ejercicio, lo subi para ver como funciona.
Te adjunto el CSS debajo. Decime cualquier cosa por favor:

http://elsitiodeale.byethost7.com/CSS(47)Pseudoclases-EjFinal.html

CODIGO CSS:

Código: [Seleccionar]

a:link {color:red;}
a:visited {color:brown;}
#rosa {margin-bottom:-14px;
width:38px; height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
#rosa:hover{background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
li {list-style-type:none; text-decoration:none;}
li a {font-weight:bold; color:#B22222; position:relative; right:-46px; top:-15px;}
p a {color:blue; font-weight:bold; text-decoration:none;}
p a:hover{color:orange;}
#celeste {
display:inline-block;
position:relative;
top:10px;
width:38px;
height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
#celeste:hover {background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
p#textoinline {display:inline-block;}



Páginas: [1] 2 3

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".