Entradas

Mostrando las entradas de febrero, 2015

Asignando atributos emmet

Imagen
Si en la edición del código por medio de emmet quieres ir agregándole los atributos correspondientes a/por cada elemento también puede hacerlo para lo cual solo deberías agregar los elementos dentro de dos [] por ejemplo: img[src='https://appletenhtml.blogspot.com/favicon.ico' title='appletenhtml'] ejecutando el codigo: < img src="https://appletenhtml.blogspot.com/favicon.ico" alt="" title="appletenhtml"> aqui otro ejemplo: html:5> figure> img[title='appletenhtml' src='https://sitescreens.woorank.com/appletenhtml.blogspot.com.png']+figcaption> p.txt[Value='Continuen mejorando saludos.'] ejecutando el codigo: < !doctype html> < html lang="en"> < head> < meta charset="UTF-8"> < title> Document< /title> < /head> < body> < figure> < img src="https://sitescreens.woorank.com/ap...

Atributos id y class(ID and CLASS attributes)emmet

Imagen
Si ya tienen un diseño o acción establecida para alguna clase o id en especial, con emmet también puedes asignarla la clase o id que desees asignarle al elemento deseado todo eso con el símbolo . para clases o # para id. por ejemplo: html:5> div.indice+div#contenido+div.pie> a#link ejecutando el codigo: < !doctype html> < html lang="en"> < head> < meta charset="UTF-8"> < title> Document< /title> < /head> < body> < div class="indice"> < /div> < div id="contenido"> < /div> < div class="pie"> < a href="" id="link"> < /a> < /div> < /body> < /html> aqui otro ejemplo div(aside#aside+div#dv> a.link)+footer.clase> li#id$$*5 ejecutando el codigo: < div> < aside id="aside"> < /aside> < div id="dv"> < a h...

Numeracion y Multiplicacion * emmet

Imagen
Utilizando la herramienta de emmet con el símbolo * puedes establecer cuantas veces quieres que salga algún elemento sin tener que estarlo poniendo tanto como un for de html que ya te crea los elementos por ejemplo: si dentro de un div quieres pones tres imágenes tendrías que hacerlo asi div(img+img+img): ejecutando el codigo: < div> < img src="" alt=""> < img src="" alt=""> < img src="" alt=""> < /div> acción que la podríamos resumir multiplicando las veces que deseemos x elemento en este caso el div asi: div(img*3): ejecutando el codigo: < div> < img src="" alt=""> < img src="" alt=""> < img src="" alt=""> < /div> ¿Útil no? especialmente en las tablas que tanto trabajo dan agregando cada li por li es mas si deseas agregarle el numero correspondiente a c...

Agrupacion()()emmet

En este ejemplo de programación con emmet mostrare la utilidad que nos puede dar el símbolo de paréntesis ya que con emmet los paréntesis nos permiten agrupar todos los elementos dentro de un padre básicamente de esta manera: html:5> div(nav+footer> h1)+aside ejecutando el codigo: < !doctype html> < html lang="en"> < head> < meta charset="UTF-8"> < title> Document< /title> < /head> < body> < div> < nav> < /nav> < footer> < h1> < /h1> < /footer> < /div> < aside> < /aside> < /body> < /html> aqui otro ejemplo: html:5> article> section(h1{appletenhtml}+p{texto}+hr)+section(video+br+a{link})^footer(ul> li{li $$}+li{ li $$}+li{li $$}) ejecutando el codigo: < !doctype html> < html lang="en"> < head> < meta charset="UTF-8"...

Ejemplo Subiendo (Clim-up) ^ emmet

En emmet utilizando el símbolo ^ como el nombre lo indica viene efectuando la accion de trepar hacia arriba en sentido por ejemplo si se esta efectuando el código dentro de un div al agregar el símbolo arriba(^) el siguiente código se crearía fuera del div. aqui un ejemplo: div> article> section> h1+p^> section> h2+p^^aside^footer < div> < article> < section> < h1> < /h1> < p> < /p> < /section> < section> < h2> < /h2> < p> < /p> < /section> < aside> < /aside> < /article> < footer> < /footer> < /div> aqui otro ejemplo: div> ul> li> h2+p^^^div < div>  < ul>  < li>  < h2> < /h2>  < p> < /p>  < /li>  < /ul>  < /div>  < div> < /div>  ...

Ejemplo utilizando hermanos emmet

Imagen
Utilizando el símbolo de +(más) con emmet podremos poner un grupo de dos o mas elementos, que vendrían siendo hermanos                en l aimage podemos ver que el div y la ul estan dentro del div con id page por formar parte del mismo padre por ejemplo: mostrando una figura con descripcion el codigo seria:  figure> img+figcaption> p:  ejecutando el codigo saldria:  < figure>    < img src="" alt="" />    < figcaption>    < p> < /p>    < /figcaption>   < /figure>   como se puede ver la img y figcaption vienen siendo hermanos por  formas parte de figure.  aqui otro ejemplo armando cuerpo de pagina:  nav+article+section+aside+footer> div> li+li+li Ejecutando el codigo nos daria como resultado: < nav> < /nav>  < a...

Hijo > emmet

Imagen
El conjunto de hijos en emmet representa los hijos del padre acción que se efectúa con el simbolo > table>tr>td por ejemplo dentro de un div poniendole un listado y al listado una imagen seria: div>li>img: < div > < li> < img src="" alt="" /> < /li> < /div> la img viene del li y el li del div agregando hijo tra hijo: article> section> section> section> div: < article> < section> < section> < section> < div> < /div> < /section> < /section> < /section> < /article> aqui el ejemplo creando una simple pagina en secuencia de hijos: html> body> div> article> div> section> div> footer> div> table> div> ul> li> a> div> img: Ejecutando el codigo: control + e = < html> < body> < div> < article> < div...

Como instalar emmet en notepad++

Imagen
Para instalar emmet solo necesitaras  seguir los siguientes pasos: Abre el notepad++ Ve a pluggins > Plugin Manager Ahí presionar Show Plugin Manager En la siguiente opción elijes el Python script y el emmet para descargar e instalarlos.   Una vez cierres y abras el notepap++ ya podras ver el emmet Anterior Siguiente emmet

Tutorial emmet

Imagen
En este ejemplo de programación mostrare el uso que puedes dar a emmet la evolución de Zen coding el cual agrega mejoras para los editores de texto que permiten la codificación de alta velocidad y la edición   páginas web , css y en diversas opciones desde Dreamweaver hasta notepap++. Imagínate el atajo que ganas escribiendo la simple acción de script:src Presionando control + e daría como resultado el escribir el siguiente código: < script type="text/javascript" src=""> < /script>  Escribiendo nav > li*10 Escribirías: < nav>  < li> < /li>  < li> < /li>  < li> < /li>  < li> < /li>  < li> < /li>  < li> < /li>  < li> < /li>  < li> < /li>  < li> < /li>  < li> < /li>  < /nav>  Si quieres entender más sobre el ...

Ejemplo Calculando Grados Fahrenheit Turbo pascal

En este  ejemplo  de turbo pascal utilizaremos Las  Formulas  de conversión de incrementos de grados  Fahrenheit Celsius y Kelvin  para calcular el valor de temperatura Introducido Formulas: Fahrenheit a Celsius   C =(F-32)*5/9 Fahrenheit a Kelvin K = (F-32)*5/9 +273 Celsius a Fahrenheit  F =C*9/5+32 Celsius a Kelvin K=C+273 Kelvin a Fahrenheit   F= (k-273)9/5+32 Kelvin a Celsius C=K-273             Código: Program appletenhtml (input,output); uses crt; Var accion: Integer; F: Integer; C: Integer; K: Integer; Begin while(accion <> 1) and (accion <> 2) and (accion <> 3) and (accion <> 4) and (accion <> 5) and (accion <> 6) do begin writeln('Seleccione la conversion que quiere haser(ingresando el numero):'); writeln('1. Fahrenheit a Celsius'); writeln('2. Fahrenheit a Kelvin'); wr...